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

57
src/charts/chart.js
View File

@@ -141,7 +141,6 @@ export function drawShape(shapeType, ...callbacks) {
export function createShape(shapeType, points, options={}, ...callbacks) { export function createShape(shapeType, points, options={}, ...callbacks) {
console.log('tvShape creating')
const co = useChartOrderStore() const co = useChartOrderStore()
drawingCallbacks = null drawingCallbacks = null
co.drawing = false co.drawing = false
@@ -164,45 +163,14 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
if( callbacks.length ) if( callbacks.length )
shapeCallbacks[shapeId] = callbacks shapeCallbacks[shapeId] = callbacks
const shape = chart.getShapeById(shapeId) const shape = chart.getShapeById(shapeId)
console.log('tvShape created', shape) // todo debug console.log('tvShape created', shapeId)
shape.bringToFront() shape.bringToFront()
const props = shape.getProperties() const props = shape.getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props) invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props)
stub(shape)
return shapeId return shapeId
} }
let stubbed = true
// todo debug
function stub(shape) {
if(stubbed||shape===null) return
function stubFunc(funcName) {
const obj = shape._model
console.log('stubbing', funcName, obj)
const func = obj[funcName]
obj[funcName] = function () {
console.error(shapeId, funcName+'()', [...arguments])
func(...arguments)
}
}
stubFunc('start')
stubFunc('stop')
stubFunc('startChanging')
stubFunc('endChanging')
stubFunc('startMoving')
stubFunc('endMoving')
stubFunc('startMovingPoint')
stubFunc('move')
stubFunc('restart')
stubFunc('restorePoints')
stubbed = true
}
export let allShapeIds = [] export let allShapeIds = []
export function cancelDrawing() { export function cancelDrawing() {
@@ -228,14 +196,12 @@ function onSelectedLineToolChanged() {
export let dragging = false export let dragging = false
function mouseDown() { function mouseDown() {
console.log('mouseDown') // console.log('mouseDown')
dump()
dragging = true dragging = true
} }
function mouseUp() { function mouseUp() {
console.log('mouseUp') // console.log('mouseUp')
dump()
dragging = false dragging = false
draggingShapeIds = [] draggingShapeIds = []
} }
@@ -243,21 +209,6 @@ function mouseUp() {
export let draggingShapeIds = [] export let draggingShapeIds = []
function dump() {
return
console.log('all', allShapeIds)
for (const shapeId of allShapeIds) {
const shape = chart.getShapeById(shapeId)
console.log('shape', shape)
console.log('_linePointBeingChanged', shape._model._linePointBeingChanged)
// console.log('_lineBeingEdited', shape._model._lineBeingEdited)
// console.log('_lineBeingCreated', shape._model._lineBeingCreated)
// console.log('_linePointBeingEdited', shape._model._linePointBeingEdited)
// console.log('_lastHoveredHittestData', shape._model._lastHoveredHittestData)
// console.log('_lastSelectedHittestData', shape._model._lastSelectedHittestData)
}
}
function handleCrosshairMovement(point) { function handleCrosshairMovement(point) {
crosshairHandler.invoke(point) // delayed invocation to await selection to register later in the tv loop crosshairHandler.invoke(point) // delayed invocation to await selection to register later in the tv loop
@@ -352,8 +303,6 @@ function doHandleDrawingEvent(id, event) {
} }
} }
if (event === 'create') { if (event === 'create') {
console.log('created tvShape', id, shape) // todo remove debug
stub(shape) // todo debug
allShapeIds.push(id) allShapeIds.push(id)
const co = useChartOrderStore(); const co = useChartOrderStore();

1
src/charts/shape.js
View File

@@ -502,7 +502,6 @@ export class VLine extends Line {
constructor(model, onModel=null, onDelete=null, props=null) { constructor(model, onModel=null, onDelete=null, props=null) {
super(ShapeType.VLine, onModel, onDelete, props) super(ShapeType.VLine, onModel, onDelete, props)
this.debug = true // todo debug
// Model // Model
this.model.time = null this.model.time = null

4
src/components/AbsoluteTimeEntry.vue
View File

@@ -266,9 +266,9 @@ let newValue = null
} }
.day { .day {
width: 2em; width: 4em;
max-width: 4em; max-width: 4em;
min-width: 2em; min-width: 4em;
} }
.picker { .picker {

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

@@ -1,6 +1,5 @@
<template> <template>
<rung-builder name='DCA' :order="order" :builder="builder" <rung-builder name='DCA' :order="order" :builder="builder" v-model="timeEndpoints"
v-model:value-a="absTimeA" v-model:value-b="absTimeB"
:shape="VLine" :shape="VLine"
:mode="1" :flip="flipped" :orientation="0" :mode="1" :flip="flipped" :orientation="0"
:get-model-value="getModelValue" :set-model-value="setModelValue" :get-model-value="getModelValue" :set-model-value="setModelValue"
@@ -28,14 +27,7 @@
</tr> </tr>
<tr v-if="weights.length>1"> <tr v-if="weights.length>1">
<td> <td>
<!-- <absolute-time-entry v-model="absTimeB"/>
<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"
/>
-->
</td> </td>
<td class="weight">{{ allocationText(weights[weights.length-1]) }}</td> <td class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
</tr> </tr>
@@ -63,6 +55,7 @@ const os = useOrderStore()
const co = useChartOrderStore() const co = useChartOrderStore()
const theme = useTheme().current const theme = useTheme().current
const props = defineProps(['order', 'builder']) const props = defineProps(['order', 'builder'])
const emit = defineEmits(['update:builder'])
const minWidth = computed(()=>co.intervalSecs) const minWidth = computed(()=>co.intervalSecs)
const stdWidth = computed(()=>10 * minWidth.value) const stdWidth = computed(()=>10 * minWidth.value)
@@ -125,34 +118,43 @@ watchEffect(()=>{
const absTimeA = computed({ const absTimeA = computed({
get() { get() { return _timeEndpoints.value[0] },
let result = props.builder.timeA
// if (props.builder.relative)
// result += s.clock
console.log('get absTimeA', result)
return result
},
set(v) { set(v) {
console.error('set absTimeA', props.builder.timeA, v) console.log('set A', v)
props.builder.timeA = v if (v!==null)
console.log('absTimeA=',props.builder.timeA) v = Number(v)
update(v, _timeEndpoints.value[1])
} }
}) })
const absTimeB = computed({ const absTimeB = computed({
get() {return props.builder.timeB}, get() { return _timeEndpoints.value[1] },
set(v) { set(v) {
console.error('set absTimeB', props.builder.timeB, v) console.log('set B', v)
props.builder.timeB = v if (v!==null)
if (v !== null) { v = Number(v)
const maxA = v - minWidth.value; update(_timeEndpoints.value[0], v)
if (props.builder.timeA > maxA) {
console.log('scootching A to', maxA)
props.builder.timeA = maxA
}
}
} }
}) })
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 flipped = computed(()=>{
const a = props.builder.timeA const a = props.builder.timeA
const b = props.builder.timeB const b = props.builder.timeB

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

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