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

UI fixes including loop suppression when model doesnt change

Browse Source
This commit is contained in:
Tim
2024-03-11 19:31:36 -04:00
parent 4362d12f0f
commit f4f1122b89
10 changed files with 173 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/charts/chart.js
View File

@@ -140,7 +140,7 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
shapeId = chart.createMultipointShape(points, options)
if( callbacks.length )
shapeCallbacks[shapeId] = callbacks
console.log(`created ${shapeType.name}`, shapeId)
// console.log(`created ${shapeType.name}`, shapeId)
const props = chart.getShapeById(shapeId).getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, points, props)
return shapeId
@@ -160,7 +160,7 @@ const shapeCallbacks = {}
function onSelectedLineToolChanged() {
const tool = widget.selectedLineTool();
console.log('line tool changed', tool)
// console.log('line tool changed', tool)
if( tool !== 'cursor' ) // 'cursor' cannot be selected manually and only happens just before the 'create' event is issued
cancelDrawing();
}
@@ -206,10 +206,13 @@ function handleCrosshairMovement(point) {
let drawingEventQueue = []
let eventLock = false // this is set to true before events are processed, in order to avoid any loops
let propsEvents = {}
function handleDrawingEvent(id, event) {
if (eventLock) return
if (eventLock && event !== 'properties_changed') { // properties has its own locking mechanism
console.log('ignoring event', id, event)
return
}
// it's important to decouple our actions from the TV thread. we must wait until the TV loop is completed
// before interacting with the chart
if (drawingEventQueue.length===0)
@@ -219,70 +222,80 @@ function handleDrawingEvent(id, event) {
function drawingEventWorker() {
const queue = drawingEventQueue
drawingEventQueue = []
for (const [id,event] of queue)
doHandleDrawingEvent(id,event)
}
function doHandleDrawingEvent(id, event) {
// console.log('drawing event', arguments)
eventLock = true
try {
const shape = event === 'remove' ? null : chart.getShapeById(id);
if (event === 'create') {
const co = useChartOrderStore();
const callbacks = co.drawingCallbacks
console.log('drawing callbacks', callbacks)
if (callbacks !== null) {
shapeCallbacks[id] = callbacks
co.drawing = false
const points = shape.getPoints()
const props = shape.getProperties()
invokeCallbacks(shapeCallbacks[id], 'onCreate', id, points, props)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
}
} else if (event === 'points_changed') {
if (id in shapeCallbacks) {
const points = shape.getPoints()
// console.log('points', points)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
}
} else if (event === 'properties_changed') {
if (id in shapeCallbacks) {
const props = shape.getProperties()
// console.log('props', props)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
}
} else if (event === 'move') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onMove', id)
}
} else if (event === 'remove') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onDelete', id)
}
} else if (event === 'click') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onClick', id)
}
} else if (event === 'hide') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onHide', id)
}
} else if (event === 'show') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onShow', id)
}
} else
console.log('unknown drawing event', event)
const queue = drawingEventQueue
drawingEventQueue = []
propsEvents = {}
// console.log('events locked', queue)
for (const [id, event] of queue) {
if (event === 'properties_changed')
propsEvents[id] = event
else
doHandleDrawingEvent(id, event)
}
for (const [k,v] of Object.entries(propsEvents))
doHandleDrawingEvent(k, v)
}
finally {
eventLock = false
// console.log('events unlocked')
}
}
function doHandleDrawingEvent(id, event) {
// console.log('drawing event', id, event)
const shape = event === 'remove' ? null : chart.getShapeById(id);
if (event === 'create') {
const co = useChartOrderStore();
const callbacks = co.drawingCallbacks
// console.log('drawing callbacks', callbacks)
if (callbacks !== null) {
shapeCallbacks[id] = callbacks
co.drawing = false
const points = shape.getPoints()
const props = shape.getProperties()
invokeCallbacks(shapeCallbacks[id], 'onCreate', id, points, props)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
}
} else if (event === 'points_changed') {
if (id in shapeCallbacks) {
const points = shape.getPoints()
// console.log('points', points)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
}
} else if (event === 'properties_changed') {
const props = shape.getProperties()
if (id in shapeCallbacks)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
else
// otherwise it's an event on a shape we don't "own"
console.log('warning: ignoring setProperties on TV shape', id, props)
} else if (event === 'move') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onMove', id)
}
} else if (event === 'remove') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onDelete', id)
}
} else if (event === 'click') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onClick', id)
}
} else if (event === 'hide') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onHide', id)
}
} else if (event === 'show') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onShow', id)
}
} else
console.log('unknown drawing event', event)
}
export function deleteShapeId(id) {
if( id in shapeCallbacks )
delete shapeCallbacks[id]