charting refactor into shapes, not debugged
This commit is contained in:
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