more UI updates

This commit is contained in:
Tim
2024-03-12 15:23:25 -04:00
parent f4f1122b89
commit 9071cf1ef3
10 changed files with 167 additions and 95 deletions

View File

@@ -24,6 +24,7 @@ function changeSymbol(symbol) {
}
/* TradingView event keystrings
const subscribeEvents = [
'toggle_sidebar', 'indicators_dialog', 'toggle_header', 'edit_object_dialog', 'chart_load_requested',
'chart_loaded', 'mouse_down', 'mouse_up', 'drawing', 'study', 'undo', 'redo', 'undo_redo_state_changed',
@@ -33,6 +34,7 @@ const subscribeEvents = [
'drawing_event', 'study_properties_changed', 'series_properties_changed', 'panes_height_changed',
'panes_order_changed',
]
*/
export function initWidget(el) {
@@ -82,14 +84,14 @@ export const ShapeCallback = {
onRedraw: () => {}, // the mouse moved while in drawing mode
onUndraw: () => {}, // drawing was canceled by clicking on a different tool
onAddPoint: () => {}, // the user clicked a point while drawing (that point is added to the points list)
onCreate: (shapeId, points, props) => {}, // the user has finished creating all the control points. drawing mode is exited and the initial shape is created.
onPoints: (shapeId, points) => {}, // the control points of an existing shape were changed
onProps: (shapeId, props) => {}, // the display properties of an existing shape were changed
onMove: (shapeId, points) => {}, // the entire shape was moved without dragging control points
onDrag: (shapeId, points) => {}, // the shape is being dragged: this gets called on every mouse movement update during a drag
onHide: (shapeId, props) => {},
onShow: (shapeId, props) => {},
onClick: (shapeId) => {}, // the shape was selected
onCreate: (shapeId, shape, points, props) => {}, // the user has finished creating all the control points. drawing mode is exited and the initial shape is created.
onPoints: (shapeId, shape, points) => {}, // the control points of an existing shape were changed
onProps: (shapeId, shape, props) => {}, // the display properties of an existing shape were changed
onMove: (shapeId, shape, points) => {}, // the entire shape was moved without dragging control points
onDrag: (shapeId, shape, points) => {}, // the shape is being dragged: this gets called on every mouse movement update during a drag
onHide: (shapeId, shape, props) => {},
onShow: (shapeId, shape, props) => {},
onClick: (shapeId, shape) => {}, // the shape was selected
onDelete: (shapeId) => {},
}
@@ -100,14 +102,14 @@ export const VerboseCallback = prototype(ShapeCallback, {
// onRedraw: ()=>{console.log('onRedraw')},
onUndraw: ()=>{console.log('onUndraw')},
onAddPoint: ()=>{console.log('onAddPoint')},
onCreate: (shapeId, points, props)=>{console.log('onCreate')},
onPoints: (shapeId, points)=>{console.log('onPoints')},
onProps: (shapeId, props)=>{console.log('onProps')},
onMove: (shapeId, points)=>{console.log('onMove')},
onDrag: (shapeId, points) => {console.log('onDrag')},
onHide: (shapeId, props)=>{console.log('onHide')},
onShow: (shapeId, props)=>{console.log('onShow')},
onClick: (shapeId)=>{console.log('onClick')},
onCreate: (shapeId, shape, points, props)=>{console.log('onCreate')},
onPoints: (shapeId, shape, points)=>{console.log('onPoints')},
onProps: (shapeId, shape, props)=>{console.log('onProps')},
onMove: (shapeId, shape, points)=>{console.log('onMove')},
onDrag: (shapeId, shape, points) => {console.log('onDrag')},
onHide: (shapeId, shape, props)=>{console.log('onHide')},
onShow: (shapeId, shape, props)=>{console.log('onShow')},
onClick: (shapeId, shape)=>{console.log('onClick')},
onDelete: (shapeId)=>{console.log('onDelete')},
})
@@ -141,8 +143,10 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
if( callbacks.length )
shapeCallbacks[shapeId] = callbacks
// console.log(`created ${shapeType.name}`, shapeId)
const props = chart.getShapeById(shapeId).getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, points, props)
const shape = chart.getShapeById(shapeId)
shape.bringToFront()
const props = shape.getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props)
return shapeId
}
@@ -193,9 +197,9 @@ function handleCrosshairMovement(point) {
const shape = chart.getShapeById(shapeId);
const points = shape.getPoints();
// console.log(`dragging ${shapeId}`, shape, points1, points2, points3)
// invokeCallbacks(shapeCallbacks[shapeId], 'onDrag', shapeId, points)
// invokeCallbacks(shapeCallbacks[shapeId], 'onDrag', shapeId, shape, points)
// console.log('calling onPoints')
invokeCallbacks(shapeCallbacks[shapeId], 'onPoints', shapeId, points)
invokeCallbacks(shapeCallbacks[shapeId], 'onPoints', shapeId, shape, points)
}
}
else if (draggingShapeIds.length > 0) {
@@ -255,26 +259,26 @@ function doHandleDrawingEvent(id, event) {
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)
invokeCallbacks(shapeCallbacks[id], 'onCreate', id, shape, points, props)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, shape, points)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, shape, props)
}
} else if (event === 'points_changed') {
if (id in shapeCallbacks) {
const points = shape.getPoints()
// console.log('points', points)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, points)
invokeCallbacks(shapeCallbacks[id], 'onPoints', id, shape, points)
}
} else if (event === 'properties_changed') {
const props = shape.getProperties()
if (id in shapeCallbacks)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, props)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, shape, 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)
invokeCallbacks(shapeCallbacks[id], 'onMove', id, shape)
}
} else if (event === 'remove') {
if (id in shapeCallbacks) {
@@ -282,15 +286,15 @@ function doHandleDrawingEvent(id, event) {
}
} else if (event === 'click') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onClick', id)
invokeCallbacks(shapeCallbacks[id], 'onClick', id, shape)
}
} else if (event === 'hide') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onHide', id)
invokeCallbacks(shapeCallbacks[id], 'onHide', id, shape)
}
} else if (event === 'show') {
if (id in shapeCallbacks) {
invokeCallbacks(shapeCallbacks[id], 'onShow', id)
invokeCallbacks(shapeCallbacks[id], 'onShow', id, shape)
}
} else
console.log('unknown drawing event', event)

View File

@@ -79,9 +79,8 @@ class Shape {
createOrDraw() {
if(this.id) return
const points = this.pointsFromModel()
if(points && points.length)
this.doCreate(points)
if(this.points && this.points.length)
this.doCreate(this.points)
else
this.draw()
}
@@ -111,9 +110,11 @@ class Shape {
setPoints(points) {
this.points = points
if (points !== null && points.length) {
if (points === null || !points.length)
this.delete()
else {
if (this.id === null)
this.doCreate(points)
this.doCreate()
else {
const s = this.tvShape();
if (!dragging) {
@@ -129,7 +130,6 @@ class Shape {
}
}
}
// todo delete if points is null or empty?
}
@@ -163,8 +163,6 @@ class Shape {
try {
deleteShapeId(this.id)
this.id = null
} catch (e) {
throw e
} finally {
this.lock--
}
@@ -261,7 +259,7 @@ class ShapeTVCallbacks {
this.shape = shape
}
onCreate(shapeId, points, props) {
onCreate(shapeId, _tvShape, points, props) {
if( this.shape.id )
throw Error(`Created a shape ${shapeId} where one already existed ${this.shape.id}`)
this.shape.id = shapeId
@@ -269,13 +267,13 @@ class ShapeTVCallbacks {
invokeCallback(this.shape, 'onCreate', points, props)
}
onPoints(shapeId, points) {
onPoints(shapeId, _tvShape, points) {
this.shape.points = points
this.shape.onPoints(points)
this.shape.onDirtyModel(this.shape.pointsToModel)
}
onProps(shapeId, props) {
onProps(shapeId, _tvShape, props) {
this.shape.props = props
this.shape.onProps(props)
this.shape.onDirtyModel(this.shape.propsToModel)
@@ -301,35 +299,35 @@ class ShapeTVCallbacks {
invokeCallback(this.shape, 'onAddPoint')
}
onMove(_shapeId, points) {
onMove(_shapeId, _tvShape, points) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onMove',points)
}
onDrag(_shapeId, points) {
onDrag(_shapeId, _tvShape, points) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onDrag', points)
}
onHide(_shapeId, props) {
onHide(_shapeId, _tvShape, props) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onHide',props)
}
onShow(_shapeId, props) {
onShow(_shapeId, _tvShape, props) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onShow',props)
}
onClick(_shapeId) {
onClick(_shapeId, _tvShape) {
if( this.shape.lock ) return
invokeCallback(this.shape, 'onClick')
}
onDelete(_shapeId, props) {
onDelete(shapeId) {
this.shape.id = null
if( this.shape.lock ) return
invokeCallback(this.shape, 'onDelete',props)
invokeCallback(this.shape, 'onDelete', shapeId)
}
}