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) {
console.log('tvShape creating')
const co = useChartOrderStore()
drawingCallbacks = null
co.drawing = false
@@ -164,45 +163,14 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
if( callbacks.length )
shapeCallbacks[shapeId] = callbacks
const shape = chart.getShapeById(shapeId)
console.log('tvShape created', shape) // todo debug
console.log('tvShape created', shapeId)
shape.bringToFront()
const props = shape.getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props)
stub(shape)
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 function cancelDrawing() {
@@ -228,14 +196,12 @@ function onSelectedLineToolChanged() {
export let dragging = false
function mouseDown() {
console.log('mouseDown')
dump()
// console.log('mouseDown')
dragging = true
}
function mouseUp() {
console.log('mouseUp')
dump()
// console.log('mouseUp')
dragging = false
draggingShapeIds = []
}
@@ -243,21 +209,6 @@ function mouseUp() {
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) {
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') {
console.log('created tvShape', id, shape) // todo remove debug
stub(shape) // todo debug
allShapeIds.push(id)
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) {
super(ShapeType.VLine, onModel, onDelete, props)
this.debug = true // todo debug
// Model
this.model.time = null

4
src/components/AbsoluteTimeEntry.vue
View File

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

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>