dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SMOOTH RENDERING!

Browse Source
This commit is contained in:
Tim
2024-04-22 21:12:43 -04:00
parent dc8185491b
commit e86b9738d8
6 changed files with 99 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/chart/DCABuilder.vue
View File

@@ -1,6 +1,5 @@
<template>
<rung-builder name='DCA' :order="order" :builder="builder"
v-model:value-a="absTimeA" v-model:value-b="absTimeB"
<rung-builder name='DCA' :order="order" :builder="builder" v-model="timeEndpoints"
:shape="VLine"
:mode="1" :flip="flipped" :orientation="0"
:get-model-value="getModelValue" :set-model-value="setModelValue"
@@ -28,14 +27,7 @@
</tr>
<tr v-if="weights.length>1">
<td>
<!--
<v-text-field type="number" v-model="lowerPrice" min="0"
density="compact" hide-details class="mx-1 my-2" variant="outlined"
label="Price"
:color="color" :base-color="color"
style="flex: 6em"
/>
-->
<absolute-time-entry v-model="absTimeB"/>
</td>
<td class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
</tr>
@@ -63,6 +55,7 @@ const os = useOrderStore()
const co = useChartOrderStore()
const theme = useTheme().current
const props = defineProps(['order', 'builder'])
const emit = defineEmits(['update:builder'])
const minWidth = computed(()=>co.intervalSecs)
const stdWidth = computed(()=>10 * minWidth.value)
@@ -125,34 +118,43 @@ watchEffect(()=>{
const absTimeA = computed({
get() {
let result = props.builder.timeA
// if (props.builder.relative)
// result += s.clock
console.log('get absTimeA', result)
return result
},
get() { return _timeEndpoints.value[0] },
set(v) {
console.error('set absTimeA', props.builder.timeA, v)
props.builder.timeA = v
console.log('absTimeA=',props.builder.timeA)
console.log('set A', v)
if (v!==null)
v = Number(v)
update(v, _timeEndpoints.value[1])
}
})
const absTimeB = computed({
get() {return props.builder.timeB},
get() { return _timeEndpoints.value[1] },
set(v) {
console.error('set absTimeB', props.builder.timeB, v)
props.builder.timeB = v
if (v !== null) {
const maxA = v - minWidth.value;
if (props.builder.timeA > maxA) {
console.log('scootching A to', maxA)
props.builder.timeA = maxA
}
}
console.log('set B', v)
if (v!==null)
v = Number(v)
update(_timeEndpoints.value[0], v)
}
})
const _timeEndpoints = ref([props.builder.timeA, props.builder.timeB])
const timeEndpoints = computed({
get() { return _timeEndpoints.value},
set(v) {
const [a, b] = v
update(a,b)
}
})
function update(a, b) {
_timeEndpoints.value = [a, b]
const newBuilder = {...props.builder}
newBuilder.timeA = a
newBuilder.timeB = b
emit('update:builder', newBuilder)
}
const flipped = computed(()=>{
const a = props.builder.timeA
const b = props.builder.timeB

36
src/components/chart/LimitBuilder.vue
View File

@@ -1,6 +1,6 @@
<template>
<rung-builder :name="prices.length>1?'Ladder':'Limit'" :order="order" :builder="builder"
v-model:value-a="priceA" v-model:value-b="priceB" :mode="0" :flip="flipped"
v-model="priceEndpoints" :mode="0" :flip="flipped"
:shape="HLine"
:get-model-value="getModelValue" :set-model-value="setModelValue"
:get-points-value="getPointsValue"
@@ -57,6 +57,7 @@ const os = useOrderStore()
const co = useChartOrderStore()
const theme = useTheme().current
const props = defineProps(['order', 'builder'])
const emit = defineEmits(['update:builder'])
function computeDefaultColor() {
const index = props.order.builders.indexOf(props.builder)
@@ -101,19 +102,42 @@ function buildTranches() {
const priceA = computed({
get() { return props.builder.priceA },
get() { return priceEndpoints.value[0] },
set(v) {
props.builder.priceA = v===null ? v : Number(v)
if (v!==null)
v = Number(v)
update(v, priceEndpoints.value[1])
}
})
const priceB = computed({
get() { return props.builder.priceB },
get() { return priceEndpoints.value[1] },
set(v) {
props.builder.priceB = v===null ? v : Number(v)
if (v!==null)
v = Number(v)
update(priceEndpoints.value[0], v)
}
})
const _priceEndpoints = ref([props.builder.priceA, props.builder.priceB])
const priceEndpoints = computed({
get() { return _priceEndpoints.value},
set(v) {
const [a, b] = v
update(a,b)
}
})
function update(a, b) {
_priceEndpoints.value = [a, b]
const newBuilder = {...props.builder}
newBuilder.priceA = a
newBuilder.priceB = b
emit('update:builder', newBuilder)
}
const flipped = computed(()=>{
const a = props.builder.priceA
const b = props.builder.priceB
@@ -217,7 +241,7 @@ function getPointsValue(points) {
}
function setModelValue(model, value) {
// console.log('setModelValue->', {...model}, value)
// console.log('setModelValue->', model.price, value)
if (model.price !== value)
model.price = value
}

98
src/components/chart/RungBuilder.vue
View File

@@ -8,7 +8,7 @@
density="compact" hide-details class="mx-1 my-2" variant="outlined"
label="Rungs"
:color="color" :base-color="color" min="1"
:disabled="valueA===null"
:disabled="endpoints[0]===null"
style="width: 4.5em;"
/>
</div>
@@ -37,17 +37,14 @@
import BuilderPanel from "@/components/chart/BuilderPanel.vue";
import {useOrderStore} from "@/store/store.js";
import {deleteBuilder, linearWeights, useChartOrderStore} from "@/orderbuild.js";
import {useTheme} from "vuetify";
import {linspace, sideColor} from "@/misc.js";
import {computed, onUnmounted, watchEffect} from "vue";
import {computed, watchEffect} from "vue";
import Color from "color";
import {cancelDrawing} from "@/charts/chart.js";
const os = useOrderStore()
const co = useChartOrderStore()
const theme = useTheme().current
const valueA = defineModel('valueA')
const valueB = defineModel('valueB')
const endpoints = defineModel('modelValue') // 2-item list of points/values
const props = defineProps({
name: String,
order: Object,
@@ -76,7 +73,7 @@ const skew100 = computed( {
watchEffect(()=>{
const rungs = props.builder.rungs
// const prev = props.builder.valid
props.builder.valid = rungs >= 1 && valueA.value && (rungs < 2 || valueB.value)
props.builder.valid = rungs >= 1 && endpoints.value[0] && (rungs < 2 || endpoints.value[1])
// console.log('valid?', prev, props.builder.valid, rungs, valueA.value, valueB.value)
})
@@ -90,21 +87,22 @@ const rungs = computed({
props.builder.rungs = 1
return
}
let [a,b] = endpoints.value
const prevR = props.builder.rungs
r = Number(r)
props.builder.rungs = r
const b = valueB.value
// console.log('set rungs', r, valueA.value, b)
// console.log('set rungs', r, ...endpoints.value)
if ( r > 0 && b === null ) {
// convert single shape to a range
if (props.mode===0) {
const width = props.stdWidth
const mid = valueA.value
valueA.value = mid - width/2
valueB.value = mid + width/2
const mid = a
a = mid - width/2
b = mid + width/2
endpoints.value = [a,b]
}
else if (props.mode===1 ) {
valueB.value = valueA.value + props.stdWidth
endpoints.value = [a, a+props.stdWidth]
}
else
throw Error(`Unknown rung mode ${props.mode}`)
@@ -112,14 +110,16 @@ const rungs = computed({
else if ( r === 1 && b !== null ) {
// convert from a range to a single shape
if (props.mode===0)
valueA.value = (valueA.value + b) / 2
valueB.value = null
a = (a + b) / 2
b = null
endpoints.value = [a, b]
}
else {
// from multi to multi
if (props.mode===1) {
const width = (valueB.value - valueA.value) / (prevR-1)
valueB.value = valueA.value + width * (r-1)
const width = (b - a) / (prevR-1)
b = a + width * (r-1)
endpoints.value = [a, b]
}
}
}
@@ -127,8 +127,7 @@ const rungs = computed({
const values = computed(()=>{
let a = valueA.value
let b = valueB.value
const [a, b] = endpoints.value
const r = props.builder.rungs
let result
if ( a===null || !r )
@@ -191,18 +190,18 @@ function translateOnModel(shape) {
shape.onModel = function (model, oldModel) {
oldOnModel.call(this, ...arguments)
// console.log('translateOnDrag', this.beingDragged(), shape.ourPoints)
if (!this.beingDragged()) {
oldOnModel.call(this, ...arguments)
if (!this.beingDragged())
return
}
const prev = props.getModelValue(oldModel)
const cur = props.getModelValue(this.model)
const delta = cur - prev
// console.log('delta', shape.id, prev, cur, delta)
let [a, b] = endpoints.value
if (delta !== 0) {
valueA.value += delta
a += delta
if (rungs.value > 1)
valueB.value += delta
b += delta
endpoints.value = [a, b]
}
}
}
@@ -212,11 +211,11 @@ function setModelColor(model) {
color.value = model.color
}
const shapeA = createShape(valueA.value, {color: defaultColor},
const shapeA = createShape(endpoints.value[0], {color: defaultColor},
function (model) {
const value = props.getModelValue(model);
if (value !== valueA.value)
valueA.value = value;
if (value !== endpoints.value[0])
endpoints.value = [value, endpoints.value[1]]
setModelColor(model)
},
deleteSelf)
@@ -224,11 +223,11 @@ const shapeA = createShape(valueA.value, {color: defaultColor},
if (props.mode===1)
translateOnModel(shapeA)
const shapeB = createShape(valueB.value, {color:defaultColor},
const shapeB = createShape(endpoints.value[1], {color:defaultColor},
function (model) {
const value = props.getModelValue(model);
if (value !== valueB.value)
valueB.value = value;
if (value !== endpoints.value[1])
endpoints.value = [endpoints.value[0], value]
setModelColor(model)
},
deleteSelf)
@@ -268,41 +267,10 @@ function makeModel(index) {
}
let group = null
function adjustShapes() {
// this is where all the shapes are created or adjusted
// console.log('adjustShapes()', valueA.value, valueB.value)
// console.error('adjustShapes()', ...endpoints.value)
const vs = values.value
//
//
// const selection = []
// if (shapeA.id !== null)
// selection.push(shapeA.id)
// if (shapeB.id !== null)
// selection.push(shapeB.id)
// for( const s of interiorShapes ) {
// if (s.id !== null)
// selection.push(s.id)
// }
// if (group===null) {
// if (selection.length) {
// const gc = chart.shapesGroupController();
// group = gc.createGroupFromSelection(selection)
// }
// }
// else {
// const gc = chart.shapesGroupController();
// const shapes = gc.shapesInGroup(group)
//
// console.log('shapes', group, shapes)
// for (const s of selection)
// if (!shapes.includes(s)) {
// console.log('add shape to group', group, s)
// gc.addShapeToGroup(group, s)
// }
// }
//
//
if (vs.length)
cancelDrawing()
// shape properties
@@ -343,11 +311,10 @@ function adjustShapes() {
interiorShapes[i-1].setModel(makeModel(i))
}
}
return ''
}
function deleteSelf() {
if (valueA.value===null)
if (endpoints.value[0]===null)
cancelDrawing()
deleteBuilder(props.order, props.builder);
}
@@ -361,9 +328,8 @@ function deleteShapes() {
interiorShapes = []
}
onUnmounted(deleteShapes)
if (!valueA.value)
if (!endpoints.value[0])
shapeA.createOrDraw(); // initiate drawing mode
</script>