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

shape refactor bugfixes

Browse Source
This commit is contained in:
Tim
2024-02-05 22:41:10 -04:00
parent 042f96b37c
commit 22b625e9b6
2 changed files with 88 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/charts/shape.js
View File

@@ -1,8 +1,8 @@
// noinspection JSPotentiallyInvalidUsageOfThis
import {invokeCallback, mixin} from "@/common.js";
import {invokeCallback} from "@/common.js";
import {chart, createShape, deleteShape, drawShape} from "@/charts/chart.js";
import {ref, watch} from "vue";
import {watch} from "vue";
//
@@ -41,11 +41,9 @@ class 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.points = null // TradingView points for the given shape
this.props = null
watch(this.model, this.onModelChanged.bind(this))
this.create()
}
@@ -63,42 +61,43 @@ class Shape {
create() {
// programatically create the shape using the current this.points
const points = this.pointsFromModel()
if( points && points.length ) {
console.log(`create ${this.type.name}`)
if(this.id) {
console.log('warning: re-creating a shape')
this.delete()
this.doCreate(points)
}
if(this.points.length === 0)
throw Error('Cannot create a shape with no points')
createShape(this.type, this.points, new ShapeTVCallbacks(this))
}
doCreate(points) {
createShape(this.type, points, new ShapeTVCallbacks(this))
}
createOrDraw() {
if(this.id) return
if(this.points && this.points.length)
this.create()
const points = this.pointsFromModel()
if(points && points.length)
this.doCreate(points)
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()
if (points !== null && points.length) {
if (this.id) {
const tvShape = chart.getShapeById(this.id);
setTimeout(()=>tvShape.setPoints(points),0)
} else
this.doCreate(points)
}
}
setProps(props) {
this.props = props
invokeCallback(this, 'onProps', props)
this.propsToModel()
if (props && this.id)
chart.getEntity(this.id).setProperties(props)
if(this.id) {
console.log(`setting ${this.id} props`, this.props)
setTimeout(()=>chart.getShapeById(this.id).setProperties(props),0)
}
}
delete() {
@@ -107,7 +106,7 @@ class Shape {
this.id = null
}
else
invokeCallback(this.callbacks, 'onDelete')
invokeCallback(this, 'onDelete')
}
@@ -117,10 +116,10 @@ class Shape {
onModelChanged() {
const points = this.pointsFromModel()
if( points && points !== this.points )
if( points !== null )
this.setPoints(points)
const props = this.propsFromModel()
if( props && props !== this.props )
if( props !== null )
this.setProps(props)
}
@@ -152,22 +151,43 @@ class Shape {
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
this.shape.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)
let dirty = this.shape.points === null || points.length !== this.shape.points.length
for( let i=0; !dirty && i<points.length; i++ ) {
const a = points[i];
const b = this.shape.points[i];
if( a.time !== b.time || a.price !== b.price ) {
dirty = true
break
}
}
if( dirty ) {
this.shape.points = points
this.shape.pointsToModel()
}
}
onProps(shapeId, props) {
if( props === this.shape.props ) return // prevent reactive feedback loops
this.shape.setProps(props)
let dirty = this.shape.props === null
const entries = Object.entries(props)
for( let i=0; !dirty && i<entries.length; i++ ) {
const [k,v] = entries[i]
dirty = !(k in this.shape.props) || this.shape.props[k] !== v
}
if( dirty ) {
this.shape.props = props
this.shape.propsToModel()
}
}
onDraw() {invokeCallback(this.shape, 'onDraw')}
@@ -183,20 +203,31 @@ class ShapeTVCallbacks {
export class HLine extends Shape {
constructor(model) {
mixin(model, {price:null,color:null})
constructor(model, priceAttr='price', colorAttr='color') {
super(ShapeType.HLine, model);
this.priceAttr = priceAttr
this.colorAttr = colorAttr
}
pointsToModel() {
console.log('pointsToModel', this.points, this.model)
this.model.price = this.points[0].price
// console.log('pointsToModel', this.points, this.model)
this.model[this.priceAttr] = this.points[0].price
}
pointsFromModel() {
console.log('pointsFromModel', this.model.price)
return this.model.price === null ? null : [{time:0,price:this.model.price}]
const price = this.model[this.priceAttr];
// console.log('pointsFromModel', price)
return price === null || price === undefined ? null : [{time:price?.time || 0, price:price}]
}
propsToModel() {
console.log('propsToModel', this.props.linecolor)
this.model[this.colorAttr]=this.props.linecolor
console.log('set model from props', this.model)
}
propsFromModel() {
console.log('propsFromModel', this.model[this.colorAttr])
const result = this.model[this.colorAttr] ? {linecolor: this.model[this.colorAttr]} : null
console.log('get props from model', this.model[this.colorAttr], result)
return result
}
propsToModel() {this.model.color=this.props.linecolor}
propsFromModel() {return this.model.color ? {linecolor: this.model.color} : null}
}

23
src/components/chart/LimitBuilder.vue
View File

@@ -4,15 +4,14 @@
<v-toolbar dense :color="faintColor" elevation="3">
<span :style="colorStyle" style="width:1em;height:100%">&nbsp;</span>
<v-toolbar-title>{{ rungs === 1 ? 'Limit' : 'Ladder' }}</v-toolbar-title>
<!-- <v-text-field type="number" v-model="lower"-->
<!-- density="compact" hide-details single-line class="justify-self-start" variant="outlined"-->
<!-- :color="color" :base-color="color" min="0"-->
<!-- />-->
<!-- <v-text-field type="number" v-model="rungs"-->
<!-- density="compact" hide-details single-line class="justify-self-start" variant="outlined"-->
<!-- :color="color" :base-color="color" min="1"-->
<!-- />-->
{{JSON.stringify(builder)}}
<v-text-field type="number" v-model="lower"
density="compact" hide-details single-line class="justify-self-start" variant="outlined"
:color="color" :base-color="color" min="0"
/>
<v-text-field type="number" v-model="rungs"
density="compact" hide-details single-line class="justify-self-start" variant="outlined"
:color="color" :base-color="color" min="1"
/>
<v-menu>
<template v-slot:activator="{ props }">
<v-btn variant="plain" v-bind="props" icon="mdi-dots-vertical"/>
@@ -43,7 +42,7 @@ const co = useChartOrderStore()
const props = defineProps(['builder'])
const shape = new HLine(props.builder)
const shape = new HLine(props.builder, 'lower', 'color')
shape.createOrDraw()
@@ -61,6 +60,7 @@ builderDefaults(props.builder, {
lower: null,
upper: null,
rungs: 1,
color: null,
})
@@ -206,7 +206,8 @@ const limitLineCallbacks = {
console.log('limit onMove')
},
onProps(shapeId, properties) {
props.builder.color = properties.linecolor
console.log('limit onProps', properties, properties.linecolor)
// props.builder.color = properties.linecolor
},
onDelete(shapeId) {
deleteBuilder()