This commit is contained in:
Tim
2024-04-17 00:40:37 -04:00
parent 1a752d3080
commit a0d1772254
5 changed files with 139 additions and 70 deletions

View File

@@ -3,8 +3,8 @@
import {invokeCallback, mixin} from "@/common.js";
import {chart, createShape, deleteShapeId, dragging, draggingShapeIds, drawShape, widget} from "@/charts/chart.js";
import {unique} from "@/misc.js";
import {useChartOrderStore} from "@/orderbuild.js";
import model from "color";
import {allocationText, useChartOrderStore} from "@/orderbuild.js";
import Color from "color";
//
@@ -72,11 +72,20 @@ export class Shape {
if (onDelete !== null )
this.onDelete = onDelete
//
// Model values handled by this base class
this.model.color = null
this.model.lineColor = null
this.model.textColor = null
//
this.model.color = null
// if allocation is set, a percentage is displayed
this.model.allocation = null
// if maxAllocation is set, the line color (but not text color) is shaded down based on allocation
this.model.maxAllocation = null
// both amount and amountSymbol must be set in order to display amount text
this.model.amount = null
this.model.amountSymbol = null
// LEAF SUBCLASSES MUST CALL setModel(model) AFTER ALL CONSTRUCTION.
}
//
@@ -84,14 +93,53 @@ export class Shape {
//
setModel(model) {
if (model.textColor || model.lineColor) {
if (model.textColor)
this.model.textColor = model.textColor
if (model.lineColor)
this.model.lineColor = model.lineColor
this.setProps(this.colorProps())
console.log('shape setModel', model)
if (model.color)
this.model.color = model.color
if (model.allocation !== null && model.allocation !== undefined)
this.model.allocation = model.allocation
if (model.maxAllocation !== null && model.maxAllocation !== undefined)
this.model.maxAllocation = model.maxAllocation
if (model.amount !== null && model.amount !== undefined)
this.model.amount = model.amount
if (model.amountSymbol)
this.model.amountSymbol = model.amountSymbol
const newProps = {}
// text color
const color = this.model.color ? this.model.color : '#0044ff'
newProps.textcolor = color
// line color
if (this.model.allocation && this.model.maxAllocation) {
const w = this.model.allocation / this.model.maxAllocation
if (!w)
newProps.linecolor = 'rgba(0,0,0,0)'
else {
// weighted line color
let c = new Color(color).rgb()
// the perceptual color of a weight follows Stevens's Power Law
// https://en.wikipedia.org/wiki/Stevens's_power_law
newProps.linecolor = c.alpha(Math.pow(w,0.67)).string()
}
}
// todo text
else
newProps.linecolor = color
// text label
const text = allocationText(this.model.allocation, this.model.amount, this.model.amountSymbol)
if (!text.length)
newProps.showLabel = false
else {
newProps.text = text
newProps.showLabel = true
}
if (this.debug && this.id)
console.log('newProps', chart.getShapeById(this.id).getProperties(), newProps)
this.setProps(newProps)
}
onModel(model, changedKeys) {} // model was changed by a TradingView user action
@@ -181,10 +229,19 @@ export class Shape {
else if (dirtyPoints(this.tvPoints, points)) {
const s = this.tvShape();
if (this.debug) console.log('adjusting tv points', s, this.tvPoints, points)
if (!this.beingDragged()) {
if (!dragging) {
if (this.debug) console.log('not dragging. use setPoints.')
s.setPoints(points)
}
else {
if (this.debug) console.log('dragging. use QUIET setPoints.')
// quiet setPoints doesn't disturb tool editing mode
const i = s._pointsConverter.apiPointsToDataSource(points)
// s._model.startChangingLinetool(this._source)
s._model.changeLinePoints(s._source, i)
// s._model.endChangingLinetool(!0)
s._source.createServerPoints()
}
}
}
}
@@ -198,12 +255,17 @@ export class Shape {
if(this.id) {
const p = dirtyItems(this.tvProps, props)
this.tvProps = this.tvProps === null ? p : mixin(p, this.tvProps)
if (this.debug) console.log('setting tv props', this.tvProps)
this.tvShape().setProperties(p)
}
}
onProps(props) { // the display properties of an existing shape were changed
this.updateModel({lineColor:props.linecolor, textColor:props.textcolor})
console.log('shape onProps', this.model, props)
if (props.textcolor && props.textcolor !== this.model.color)
this.updateModel({color:props.textcolor})
else if (props.linecolor && props.linecolor !== this.model.color)
this.updateModel({color:props.linecolor})
}
beingDragged() {
@@ -261,14 +323,14 @@ function dirtyKeys(propsA, propsB) {
if (propsA===null)
return [...Object.keys(propsB)]
const keys = unique([...Object.keys(propsA), ...Object.keys(propsB)])
return keys.filter((k)=> !(k in propsA) || propsA[k] !== undefined && propsA[k] !== propsB[k])
return keys.filter((k)=> propsB[k] !== undefined && (!(k in propsA) || propsA[k] !== propsB[k]))
}
function dirtyItems(a, b) {
const result = {}
for (const k of dirtyKeys(this.tvProps, props))
result[k] = props[k]
for (const k of dirtyKeys(a,b))
result[k] = b[k]
return result
}
@@ -294,7 +356,7 @@ class ShapeTVCallbacks {
}
onProps(shapeId, _tvShape, props) {
// if (this.shape.debug) console.log('tvOnProps', props)
if (this.shape.debug) console.log('tvOnProps', props)
if (this.creating) { // todo still useful?
this.creating = false
return
@@ -378,9 +440,12 @@ export class HLine extends Line {
setModel(model) {
console.log('hline setModel', model)
super.setModel(model)
if (model.price !== undefined && model.price !== this.model.price) {
if (model.price === null) {
this.model.price = null
this.delete()
}
else if (model.price !== this.model.price) {
this.model.price = model.price
this.setPoints([{time:0,price:this.model.price}])
}
@@ -416,6 +481,7 @@ export class VLine extends Line {
// Model
this.model.time = null
this.debug=true
this.setModel(model) // call setModel at the end
}
@@ -427,23 +493,23 @@ export class VLine extends Line {
setModel(model) {
if (this.debug) console.log('vline setModel', this.model.time, model )
super.setModel(model)
if (model.time !== undefined && model.time !== this.model.time) {
if (model.time === null) {
this.model.time = null
this.delete()
}
else {
this.model.time = model.time
const time = nearestOhlcStart(model.time);
if (this.debug) console.log('vline setPoints', this.id, time)
this.setPoints([{time, price:0}])
}
}
onPoints(points) {
if (this.debug) console.log('vline onPoints', this.ourPoints, points)
super.onPoints(points);
const orig = this.ourPoints && this.ourPoints.length ? this.ourPoints[0].time : null
const time = points[0].time;
if (!timeAdjustmentTooSmall(orig, time)) {
if (this.debug) console.log('updateModel', time)
this.updateModel({time: time})
}
}