charting refactor into shapes, not debugged
This commit is contained in:
235
src/charts/chart.js
Normal file
235
src/charts/chart.js
Normal file
@@ -0,0 +1,235 @@
|
||||
import {useChartOrderStore} from "@/orderbuild.js";
|
||||
import {invokeCallbacks, prototype} from "@/common.js";
|
||||
|
||||
export let widget = null
|
||||
export let chart = null
|
||||
export let crosshairPoint = null
|
||||
|
||||
|
||||
export function initWidget(el) {
|
||||
widget = window.tvWidget = new TradingView.widget({
|
||||
library_path: "/tradingview/charting_library/",
|
||||
// debug: true,
|
||||
autosize: true,
|
||||
symbol: 'AAPL',
|
||||
interval: '1D',
|
||||
container: el,
|
||||
datafeed: new Datafeeds.UDFCompatibleDatafeed("https://demo-feed-data.tradingview.com"),
|
||||
locale: "en",
|
||||
disabled_features: [],
|
||||
enabled_features: [],
|
||||
drawings_access: {type: 'white', tools: [],}, // show no tools
|
||||
});
|
||||
widget.subscribe('drawing_event', handleDrawingEvent)
|
||||
widget.subscribe('onSelectedLineToolChanged', onSelectedLineToolChanged)
|
||||
widget.onChartReady(initChart)
|
||||
}
|
||||
|
||||
|
||||
function initChart() {
|
||||
console.log('init chart')
|
||||
chart = widget.activeChart()
|
||||
chart.crossHairMoved().subscribe(null, (point)=>{
|
||||
crosshairPoint=point
|
||||
const co = useChartOrderStore()
|
||||
invokeCallbacks(co.drawingCallbacks, 'onRedraw')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// noinspection JSUnusedLocalSymbols
|
||||
export const ShapeCallback = {
|
||||
onDraw: () => {
|
||||
}, // start drawing a new shape for the builder
|
||||
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. todo same as onPoints?
|
||||
onHide: (shapeId, props) => {
|
||||
},
|
||||
onShow: (shapeId, props) => {
|
||||
},
|
||||
onClick: (shapeId) => {
|
||||
}, // the shape was selected
|
||||
onDelete: (shapeId) => {
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
// noinspection JSUnusedLocalSymbols
|
||||
export const VerboseCallback = prototype(ShapeCallback, {
|
||||
onDraw: ()=>{console.log('onDraw')},
|
||||
// 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')},
|
||||
onHide: (shapeId, props)=>{console.log('onHide')},
|
||||
onShow: (shapeId, props)=>{console.log('onShow')},
|
||||
onClick: (shapeId)=>{console.log('onClick')},
|
||||
onDelete: (shapeId)=>{console.log('onDelete')},
|
||||
})
|
||||
|
||||
|
||||
|
||||
export const BuilderUpdateCallback = prototype(ShapeCallback,{
|
||||
onCreate(shapeId, points, props) {
|
||||
this.builder.shapes[this.tag] = shapeId;
|
||||
},
|
||||
onPoints(shapeId, points) {
|
||||
this.builder.points[this.tag] = points;
|
||||
},
|
||||
onProps(shapeId, props) {
|
||||
this.builder.props[this.tag] = props;
|
||||
},
|
||||
onMove(shapeId, points) {
|
||||
this.builder.points[this.tag] = points;
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
export function drawShape(shapeType, ...callbacks) {
|
||||
// puts the chart into a line-drawing mode for a new shape
|
||||
console.log('drawShape', callbacks, shapeType.name, shapeType.code)
|
||||
const co = useChartOrderStore()
|
||||
if( co.drawingCallbacks )
|
||||
invokeCallbacks(co.drawingCallbacks, 'onUndraw')
|
||||
co.drawingCallbacks = callbacks
|
||||
co.drawing = true
|
||||
widget.selectLineTool(shapeType.code)
|
||||
invokeCallbacks(callbacks, 'onDraw')
|
||||
}
|
||||
|
||||
|
||||
export function createShape(shapeType, points, options, ...callbacks) {
|
||||
options.shape = shapeType.code
|
||||
// programatically adds a shape to the chart
|
||||
let shapeId
|
||||
if( points.time || points.price )
|
||||
shapeId = chart.createShape(points, options)
|
||||
else if( points.length === 1 )
|
||||
shapeId = chart.createShape(points[0], options)
|
||||
else
|
||||
shapeId = chart.createMultipointShape(points, options)
|
||||
if( callbacks.length )
|
||||
shapeCallbacks[shapeId] = callbacks
|
||||
console.log('created shape', shapeId)
|
||||
return shapeId
|
||||
}
|
||||
|
||||
|
||||
export function cancelDrawing() {
|
||||
const co = useChartOrderStore()
|
||||
if (co.drawing) {
|
||||
invokeCallbacks(co.drawingCallbacks, 'onUndraw')
|
||||
co.drawing = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export function builderUpdater(builder, tag='a') {
|
||||
return prototype(BuilderUpdateCallback, {builder,tag})
|
||||
}
|
||||
|
||||
|
||||
export function builderShape(builder, tag, shapeType, ...callbacks) {
|
||||
const updater = builderUpdater(builder, tag)
|
||||
console.log('updater', updater)
|
||||
drawShape(shapeType, updater, ...callbacks)
|
||||
}
|
||||
|
||||
|
||||
export function setPoints( shapeId, points ) {
|
||||
if( points.time || points.price )
|
||||
points = [points]
|
||||
console.log('setting points', shapeId, points)
|
||||
let shape
|
||||
try {
|
||||
shape = chart.getShapeById(shapeId)
|
||||
}
|
||||
catch (e) {
|
||||
return
|
||||
}
|
||||
shape.setPoints(points)
|
||||
}
|
||||
|
||||
|
||||
const shapeCallbacks = {}
|
||||
|
||||
function onSelectedLineToolChanged() {
|
||||
const tool = widget.selectedLineTool();
|
||||
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();
|
||||
}
|
||||
|
||||
function handleDrawingEvent(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') {
|
||||
console.log('id in shapes', id in shapeCallbacks, id, shapeCallbacks)
|
||||
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)
|
||||
}
|
||||
|
||||
export function deleteShape(id) {
|
||||
if( id in shapeCallbacks )
|
||||
delete shapeCallbacks[id]
|
||||
chart.removeEntity(id)
|
||||
}
|
||||
202
src/charts/shape.js
Normal file
202
src/charts/shape.js
Normal file
@@ -0,0 +1,202 @@
|
||||
// noinspection JSPotentiallyInvalidUsageOfThis
|
||||
|
||||
import {invokeCallback, mixin} from "@/common.js";
|
||||
import {chart, createShape, deleteShape, drawShape} from "@/charts/chart.js";
|
||||
import {ref, watch} from "vue";
|
||||
|
||||
|
||||
//
|
||||
// Usage of Shapes:
|
||||
// const shape = new Shape(ShapeType.HLine)
|
||||
// shape.draw()
|
||||
// shape.points
|
||||
// > [{time:17228394, price:42638.83}]
|
||||
//
|
||||
// shape.model is a vue ref({}) which stores the shape-specific control points, as defined by the shape subclass
|
||||
// use the shape.model.* fields in components to get reactive effects with the chart.
|
||||
//
|
||||
|
||||
|
||||
/*
|
||||
The `name` field must match the user-facing name in the TradingView toolbar UI
|
||||
TradingView drawing tool codes:
|
||||
https://www.tradingview.com/charting-library-docs/latest/api/modules/Charting_Library/#supportedlinetools
|
||||
text anchored_text note anchored_note signpost double_curve arc icon emoji sticker arrow_up arrow_down arrow_left arrow_right price_label price_note arrow_marker flag vertical_line horizontal_line cross_line horizontal_ray trend_line info_line trend_angle arrow ray extended parallel_channel disjoint_angle flat_bottom anchored_vwap pitchfork schiff_pitchfork_modified schiff_pitchfork balloon comment inside_pitchfork pitchfan gannbox gannbox_square gannbox_fixed gannbox_fan fib_retracement fib_trend_ext fib_speed_resist_fan fib_timezone fib_trend_time fib_circles fib_spiral fib_speed_resist_arcs fib_channel xabcd_pattern cypher_pattern abcd_pattern callout triangle_pattern 3divers_pattern head_and_shoulders fib_wedge elliott_impulse_wave elliott_triangle_wave elliott_triple_combo elliott_correction elliott_double_combo cyclic_lines time_cycles sine_line long_position short_position forecast date_range price_range date_and_price_range bars_pattern ghost_feed projection rectangle rotated_rectangle circle ellipse triangle polyline path curve cursor dot arrow_cursor eraser measure zoom brush highlighter regression_trend fixed_range_volume_profile
|
||||
*/
|
||||
|
||||
export const ShapeType = {
|
||||
Segment: {name: 'Trend Line', code: 'trend_line'},
|
||||
Ray: {name: 'Ray', code: 'ray'},
|
||||
Line: {name: 'Extended Line', code: 'extended'},
|
||||
HRay: {name: 'Horizontal Ray', code: 'horizontal_ray'},
|
||||
HLine: {name: 'Horizontal Line', code: 'horizontal_line'},
|
||||
VLine: {name: 'Vertical Line', code: 'vertical_line'},
|
||||
PriceRange: {name: 'Price Range', code: 'price_range'},
|
||||
}
|
||||
|
||||
|
||||
class Shape {
|
||||
constructor(type, model={}) {
|
||||
// the Shape object manages synchronizing internal data with a corresponding TradingView shape
|
||||
this.id = null // TradingView shapeId, or null if no TV shape created yet (drawing mode)
|
||||
this.type = type // ShapeType
|
||||
this.model = model // subclass-specific
|
||||
this.points = this.pointsFromModel() // same format as TradingView points for the given shape
|
||||
this.props = this.propsFromModel() // TradingView shape properties
|
||||
console.log('points/props', this.points, this.props)
|
||||
watch(this.model, this.onModelChanged)
|
||||
if( this.points && this.points.length )
|
||||
this.create()
|
||||
}
|
||||
|
||||
//
|
||||
// primary interface methods
|
||||
//
|
||||
|
||||
draw() {
|
||||
// have the user draw this shape
|
||||
console.log(`draw ${this.type.name}`)
|
||||
if (this.id)
|
||||
throw Error(`Shape already exists ${this.id}`)
|
||||
drawShape(this.type, new ShapeTVCallbacks(this))
|
||||
}
|
||||
|
||||
create() {
|
||||
// programatically create the shape using the current this.points
|
||||
console.log(`create ${this.type.name}`)
|
||||
if(this.id) {
|
||||
console.log('warning: re-creating a shape')
|
||||
this.delete()
|
||||
}
|
||||
if(this.points.length === 0)
|
||||
throw Error('Cannot create a shape with no points')
|
||||
createShape(this.type, this.points, new ShapeTVCallbacks(this))
|
||||
}
|
||||
|
||||
createOrDraw() {
|
||||
if(this.id) return
|
||||
if(this.points && this.points.length)
|
||||
this.create()
|
||||
else
|
||||
this.draw()
|
||||
}
|
||||
|
||||
setPoints(points) {
|
||||
this.points = points
|
||||
invokeCallback(this, 'onPoints', points)
|
||||
this.pointsToModel()
|
||||
if (points && points.length) {
|
||||
if (this.id)
|
||||
chart.getEntity(this.id).setPoints(points)
|
||||
else
|
||||
this.create()
|
||||
}
|
||||
}
|
||||
|
||||
setProps(props) {
|
||||
this.props = props
|
||||
invokeCallback(this, 'onProps', props)
|
||||
this.propsToModel()
|
||||
if (props && this.id)
|
||||
chart.getEntity(this.id).setProperties(props)
|
||||
}
|
||||
|
||||
delete() {
|
||||
if (this.id) {
|
||||
deleteShape(this.id)
|
||||
this.id = null
|
||||
}
|
||||
else
|
||||
invokeCallback(this.callbacks, 'onDelete')
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Model synchronization
|
||||
//
|
||||
|
||||
onModelChanged() {
|
||||
const points = this.pointsFromModel()
|
||||
if( points && points !== this.points )
|
||||
this.setPoints(points)
|
||||
const props = this.propsFromModel()
|
||||
if( props && props !== this.props )
|
||||
this.setProps(props)
|
||||
}
|
||||
|
||||
pointsFromModel() {return null}
|
||||
pointsToModel() {} // set the model using this.points
|
||||
propsFromModel() {return null}
|
||||
propsToModel() {} // set the model using this.props
|
||||
|
||||
|
||||
//
|
||||
// Overridable shape callbacks
|
||||
//
|
||||
|
||||
onDraw() {} // start drawing a new shape for the builder
|
||||
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(points, props) {} // the user has finished creating all the control points. drawing mode is exited and the initial shape is created.
|
||||
onPoints(points) {} // the control points of an existing shape were changed
|
||||
onProps(props) {} // the display properties of an existing shape were changed
|
||||
onMove(points) {} // the shape was moved by dragging a drawing element not the control point
|
||||
onHide(props) {}
|
||||
onShow(props) {}
|
||||
onClick() {} // the shape was selected
|
||||
onDelete() {}
|
||||
|
||||
}
|
||||
|
||||
|
||||
class ShapeTVCallbacks {
|
||||
constructor(shape) {
|
||||
console.log('shapetvcb', shape)
|
||||
this.shape = shape
|
||||
}
|
||||
onCreate(shapeId, points, props) {
|
||||
if( this.id )
|
||||
throw Error(`Created a shape ${shapeId}where one already existed ${this.id}`)
|
||||
this.id=shapeId
|
||||
invokeCallback(this.shape, 'onCreate', points, props)
|
||||
}
|
||||
onPoints(shapeId, points) {
|
||||
if( points === this.shape.points ) return // prevent reactive feedback loops
|
||||
this.shape.setPoints(points)
|
||||
}
|
||||
onProps(shapeId, props) {
|
||||
if( props === this.shape.props ) return // prevent reactive feedback loops
|
||||
this.shape.setProps(props)
|
||||
}
|
||||
|
||||
onDraw() {invokeCallback(this.shape, 'onDraw')}
|
||||
onRedraw() {invokeCallback(this.shape, 'onRedraw')}
|
||||
onUndraw() {invokeCallback(this.shape, 'onUndraw')}
|
||||
onAddPoint() {invokeCallback(this.shape, 'onAddPoint')}
|
||||
onMove(_shapeId, points) {invokeCallback(this.shape, 'onMove',points)}
|
||||
onHide(_shapeId, props) {invokeCallback(this.shape, 'onHide',props)}
|
||||
onShow(_shapeId, props) {invokeCallback(this.shape, 'onShow',props)}
|
||||
onClick(_shapeId) {invokeCallback(this.shape, 'onClick')}
|
||||
onDelete(_shapeId, props) {invokeCallback(this.shape, 'onDelete',props)}
|
||||
}
|
||||
|
||||
|
||||
export class HLine extends Shape {
|
||||
constructor(model) {
|
||||
mixin(model, {price:null,color:null})
|
||||
super(ShapeType.HLine, model);
|
||||
}
|
||||
|
||||
pointsToModel() {
|
||||
console.log('pointsToModel', this.points, this.model)
|
||||
this.model.price = this.points[0].price
|
||||
}
|
||||
pointsFromModel() {
|
||||
console.log('pointsFromModel', this.model.price)
|
||||
return this.model.price === null ? null : [{time:0,price:this.model.price}]
|
||||
}
|
||||
propsToModel() {this.model.color=this.props.linecolor}
|
||||
propsFromModel() {return this.model.color ? {linecolor: this.model.color} : null}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user