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

UI fixes including loop suppression when model doesnt change

Browse Source
This commit is contained in:
Tim
2024-03-11 19:31:36 -04:00
parent 4362d12f0f
commit f4f1122b89
10 changed files with 173 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/charts/chart.js
View File

@@ -140,7 +140,7 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
shapeId = chart.createMultipointShape(points, options)
if( callbacks.length )
shapeCallbacks[shapeId] = callbacks
console.log(`created ${shapeType.name}`, shapeId)
// console.log(`created ${shapeType.name}`, shapeId)
const props = chart.getShapeById(shapeId).getProperties()
invokeCallbacks(callbacks, 'onCreate', shapeId, points, props)
return shapeId
@@ -160,7 +160,7 @@ const shapeCallbacks = {}
function onSelectedLineToolChanged() {
const tool = widget.selectedLineTool();
console.log('line tool changed', tool)
// 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();
}
@@ -206,10 +206,13 @@ function handleCrosshairMovement(point) {
let drawingEventQueue = []
let eventLock = false // this is set to true before events are processed, in order to avoid any loops
let propsEvents = {}
function handleDrawingEvent(id, event) {
if (eventLock) return
if (eventLock && event !== 'properties_changed') { // properties has its own locking mechanism
console.log('ignoring event', id, event)
return
}
// it's important to decouple our actions from the TV thread. we must wait until the TV loop is completed
// before interacting with the chart
if (drawingEventQueue.length===0)
@@ -219,70 +222,80 @@ function handleDrawingEvent(id, event) {
function drawingEventWorker() {
const queue = drawingEventQueue
drawingEventQueue = []
for (const [id,event] of queue)
doHandleDrawingEvent(id,event)
}
function doHandleDrawingEvent(id, event) {
// console.log('drawing event', arguments)
eventLock = true
try {
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') {
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)
const queue = drawingEventQueue
drawingEventQueue = []
propsEvents = {}
// console.log('events locked', queue)
for (const [id, event] of queue) {
if (event === 'properties_changed')
propsEvents[id] = event
else
doHandleDrawingEvent(id, event)
}
for (const [k,v] of Object.entries(propsEvents))
doHandleDrawingEvent(k, v)
}
finally {
eventLock = false
// console.log('events unlocked')
}
}
function doHandleDrawingEvent(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') {
const props = shape.getProperties()
if (id in shapeCallbacks)
invokeCallbacks(shapeCallbacks[id], 'onProps', id, 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)
}
} 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 deleteShapeId(id) {
if( id in shapeCallbacks )
delete shapeCallbacks[id]

3
src/charts/datafeed.js
View File

@@ -6,6 +6,8 @@ import {
import {jBars} from './jBars.js';
import {metadata} from "@/version.js";
import FlexSearch from "flexsearch";
import {useChartOrderStore} from "@/orderbuild.js";
const lastBarsCache = new Map();
@@ -158,6 +160,7 @@ export default {
onResolveErrorCallback('cannot resolve symbol');
return;
}
useChartOrderStore().selectedSymbol = symbolItem
// Symbol information object
const symbolInfo = {
ticker: symbolItem.full_name,

79
src/charts/shape.js
View File

@@ -37,18 +37,19 @@ export const ShapeType = {
class Shape {
constructor(type, model={}, onModel=null, onDelete=null) {
constructor(type, model={}, onModel=null, onDelete=null, props=null) {
// 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 = null // TradingView points for the given shape
this.props = null
this.points = null
this.points = this.pointsFromModel()
console.log('construct points', this.points)
this.props = props === null ? this.propsFromModel() : mixin(props, this.propsFromModel())
if (onModel !== null)
this.onModel = onModel
if (onDelete !== null )
this.onDelete = onDelete
this.lock = 0 // used to prevent callbacks when we are the ones forcing the chart change
this.create()
}
@@ -67,15 +68,13 @@ class Shape {
create() {
if (this.id !== null) return
// programatically create the shape using the current this.points
const points = this.pointsFromModel()
if( points && points.length ) {
this.doCreate(points)
if( this.points && this.points.length ) {
this.doCreate()
}
}
doCreate(points) {
const props = this.propsFromModel()
createShape(this.type, points, {overrides:props}, new ShapeTVCallbacks(this))
doCreate() {
createShape(this.type, this.points, {overrides:this.props}, new ShapeTVCallbacks(this))
}
createOrDraw() {
@@ -96,7 +95,7 @@ class Shape {
setModel(model, props=null) {
for( const [k,v] of Object.entries(model))
this.model[k] = v
this.setPoints(this.pointsFromModel());
this.setPointsIfDirty(this.pointsFromModel());
let p
const mp = this.propsFromModel();
if (props===null) {
@@ -111,6 +110,7 @@ class Shape {
setPoints(points) {
this.points = points
if (points !== null && points.length) {
if (this.id === null)
this.doCreate(points)
@@ -129,13 +129,19 @@ class Shape {
}
}
}
// todo delete if points is null or empty?
}
setPointsIfDirty(points) {
if (dirtyPoints(this.points, points))
this.setPoints(points)
}
setProps(props) {
if(this.id) {
if(this.id)
this.tvShape().setProperties(props)
}
}
@@ -169,6 +175,15 @@ class Shape {
// Model synchronization
//
onDirtyModel(toModel) {
const old = {...this.model}
toModel.call(this)
const dirty = dirtyKeys(old, this.model)
// console.log('onDirtyModel', old, this.model, dirty)
if (dirty.length)
this.onModel(this.model)
}
pointsFromModel() {return null}
pointsToModel() {} // set the model using this.points
propsFromModel() {return null}
@@ -198,6 +213,23 @@ class Shape {
}
function dirtyPoints(pointsA, pointsB) {
if (pointsB===null)
return pointsA !== null
if (pointsA===null)
return pointsB.length > 0
if (pointsA.length!==pointsB.length)
return true
for (const i in pointsA) {
const a = pointsA[i]
const b = pointsB[i]
if ( a.time !== b.time || a.price !== b.price )
return true
}
return false
}
// B is modifying A
function dirtyProps(propsA, propsB) {
if (propsB===null)
@@ -212,6 +244,16 @@ function dirtyProps(propsA, propsB) {
}
// B is modifying A
function dirtyKeys(propsA, propsB) {
if (propsB===null)
return propsA === null ? [] : [...Object.keys(propsA)]
if (propsA===null)
return [...Object.keys(propsB)]
return [...(new Set(Object.keys(propsB)).union(new Set(Object.keys(propsA))))].filter((k)=> !(k in propsA) || propsA[k] !== propsB[k])
}
class ShapeTVCallbacks {
// These methods are called by TradingView and provide some default handling before invoking our own Shape callbacks
@@ -230,16 +272,13 @@ class ShapeTVCallbacks {
onPoints(shapeId, points) {
this.shape.points = points
this.shape.onPoints(points)
this.shape.pointsToModel()
this.shape.onModel(this.shape.model)
this.shape.onDirtyModel(this.shape.pointsToModel)
}
onProps(shapeId, props) {
console.log('props', shapeId, props)
this.shape.props = props
this.shape.onProps(props)
this.shape.propsToModel()
this.shape.onModel(this.shape.model)
this.shape.onDirtyModel(this.shape.propsToModel)
}
onDraw() {
@@ -296,8 +335,8 @@ class ShapeTVCallbacks {
export class HLine extends Shape {
constructor(model, onModel=null, onDelete=null) {
super(ShapeType.HLine, model, onModel, onDelete)
constructor(model, onModel=null, onDelete=null, props=null) {
super(ShapeType.HLine, model, onModel, onDelete, props)
}
pointsFromModel() {

4
src/components/chart/BuilderFactory.vue
View File

@@ -1,5 +1,5 @@
<template>
<component :is="component" :order="order" :builder="builder"/>
<component :is="component" v-bind="props"/>
</template>
<script setup>
@@ -8,7 +8,7 @@ import DCABuilder from "@/components/chart/DCABuilder.vue";
import LimitBuilder from "@/components/chart/LimitBuilder.vue";
import MarketBuilder from "@/components/chart/MarketBuilder.vue";
const props = defineProps(['order','builder'])
const props = defineProps(['order', 'builder'])
const component = computed(()=>{
switch (props.builder.component) {

20
src/components/chart/ChartOrder.vue
View File

@@ -2,21 +2,22 @@
<row-bar :color="color">
<color-band :color="color"/>
<div :style="faintColorStyle" style="width: 100%" class="justify-start align-content-start">
<v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="os.amount" variant="outlined" density="compact" hide-details
min="0" :step="os.amount?Math.floor(os.amount/1000):1"
<v-text-field type="number" inputmode="numeric" pattern="[0-9]*\.?[0-9]*" v-model="order.amount" variant="outlined" density="compact" hide-details
min="0" :step="order.amount?Math.floor(order.amount/1000):1"
style="max-width:24em; display: inline-grid"
class="py-2" :color="color"
:label="os.amountIsTokenA ? 'Amount':('Value in '+os.quote.s)"
:label="order.amountIsTokenA ? 'Amount':('Value in '+co.selectedSymbol.quote.s)"
>
<template v-slot:prepend>
<v-btn :text="(os.buy ? 'Buy ' : 'Sell ') + os.base.s" variant="tonal" :color="color" @click="os.buy=!os.buy"/>
<v-btn :text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s" variant="tonal" :color="color" @click="order.buy=!order.buy"/>
</template>
<template v-slot:append-inner>
<v-btn :text="os.amountToken.s+(os.amountIsTokenA?'':' worth')" :color="color" variant="text" @click="os.amountIsTokenA=!os.amountIsTokenA"/>
<v-btn :text="order.amountIsTokenA?co.selectedSymbol.base.s:co.selectedSymbol.quote.s+' worth'"
:color="color" variant="text" @click="order.amountIsTokenA=!order.amountIsTokenA"/>
</template>
</v-text-field>
<template v-for="b in builders(order)">
<builder-factory :order="order" :builder="b" :color="color"/>
<builder-factory :order="order" :builder="b"/>
</template>
<div class="my-3">
<span :style="colorStyle" class="ma-3">Add condition:</span>
@@ -51,6 +52,7 @@ const props = defineProps(['order'])
const co = useChartOrderStore()
const os = useOrderStore()
console.log('order', props.order)
function build(order, component, options={}) {
order.builders.push(newBuilder(component, options))
}
@@ -61,7 +63,7 @@ function builders(order) {
}
const theme = useTheme().current
const color = computed(()=>os.buy?theme.value.colors.success:theme.value.colors.error)
const color = computed(()=>props.order.buy?theme.value.colors.success:theme.value.colors.error)
const lightColor = computed(() => lightenColor(color.value))
const faintColor = computed(() => lightenColor2(color.value))
const colorStyle = computed(() => { return {'color': color.value} })
@@ -69,9 +71,9 @@ const bgColorStyle = computed(() => { return {'background-color': color.value} }
const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
const inToken = computed( ()=>os.buy ? os.tokenB : os.tokenA )
const inToken = computed( ()=>props.order.buy ? co.selectedSymbol.quote : co.selectedSymbol.base )
const maxAmount = computed(()=>{
const balance = s.balances[inToken]
const balance = s.balances[inToken.value]
if( !balance )
return 0
const divisor = os.amountIsTotal ? 1 : os.tranches

1
src/components/chart/ChartOrderPane.vue
View File

@@ -13,7 +13,6 @@
<script setup>
import {useChartOrderStore} from "@/orderbuild.js";
import Toolbar from "@/components/chart/Toolbar.vue";
import BuilderFactory from "@/components/chart/BuilderFactory.vue";
import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
import {onBeforeUnmount} from "vue";
import {useOrderStore} from "@/store/store.js";

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

@@ -1,6 +1,6 @@
<template>
<!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
<row-bar :color="builder.color">
<row-bar :color="builder.color" :data-ignore="autoAdjust">
<color-band :color="builder.color"/>
<div style="min-width: 3em; font-size: larger" :style="colorStyle"
class="align-self-start ml-2 pt-3">{{ rungs === 1 ? 'Limit' : 'Ladder' }}</div>
@@ -60,7 +60,7 @@
</template>
<script setup>
import {computed} from "vue";
import {computed, onBeforeUnmount, onMounted} from "vue";
import {chart} from "@/charts/chart.js";
import {useChartOrderStore} from "@/orderbuild.js";
import Color from "color";
@@ -94,7 +94,6 @@ const skew100 = computed( {
set(v) {props.builder.skew = v/100; adjustShapes()}
} )
// we keep two special control lines as the edge of the ranges and then deletable lines in-between
const lineAPrice = computed({
@@ -126,15 +125,14 @@ const lineB = new HLine(
)
const adjustInteriorLine = (line) => {
console.log('interior line onModel')
props.builder.color = line.color
adjustShapes()
}
let interiorLines = []
function createInteriorLine(price) {
const line = new HLine({price: price, color: props.builder.color}, adjustInteriorLine, deleteBuilder)
function createInteriorLine(price, lineProps) {
const line = new HLine({price: price, color: props.builder.color}, adjustInteriorLine, deleteBuilder, lineProps)
line.onPoints = function (points) {
const delta = points[0].price - this.model.price
if (delta !== 0) {
@@ -225,6 +223,8 @@ const rungs = computed({
const prices = computed(()=>{
let a = props.builder.priceA
let b = props.builder.priceB
const r = props.builder.rungs
// console.log('prices for', a, b, r)
if ( a===null || !r ) return [] // no data
@@ -264,7 +264,7 @@ const weights = computed(() => {
const colors = computed( ()=> {
const color = props.builder.color !== null ? props.builder.color
: os.buy ? theme.value.colors.success : theme.value.colors.error
: props.buy ? theme.value.colors.success : theme.value.colors.error
const c = new Color(color).rgb()
const ws = weights.value;
const max = Math.max(...ws)
@@ -274,24 +274,27 @@ const colors = computed( ()=> {
})
const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
function allocationText(weight) {
const alloc = props.builder.allocation
if (alloc===null) return ''
const w = weight * alloc
// console.log('weight', weight, alloc, props.amount)
const a = props.order.amount * w
const t = os.amountToken
return `${(w*100).toFixed(1)}% ${a.toLocaleString('fullwide')} ${t.s}`
return `${(w*100).toFixed(1)}% = ${a.toLocaleString('fullwide')} ${amountSymbol.value}`
}
function adjustShapes() {
// this is where all the lines are created or adjusted
console.log('adjustShapes()')
// console.log('adjustShapes()')
const limits = prices.value
const colorStrings = colors.value
// line properties
const lps = weights.value.map((w)=>{return {text:allocationText(w), textcolor:color.value}})
console.log('things', colorStrings, lps)
if( limits.length === 0 ) {
lineA.delete()
lineB.delete()
@@ -332,15 +335,18 @@ function adjustShapes() {
for( let i=0; i<limits.length-2; i++ ) {
const limit = limits[1+i]
if (i === interiorLines.length)
createInteriorLine(limit)
createInteriorLine(limit, lps[1+i])
else if (!interiorLines[i].beingDragged())
interiorLines[i].setModel({price:limit, color: colorStrings[1+i]}, lps[1+i])
}
}
return ''
}
const autoAdjust = computed(adjustShapes)
function deleteShapes() {
lineA.delete()
lineB.delete()
@@ -359,6 +365,8 @@ function deleteBuilder() {
if (!props.builder.priceA)
lineA.createOrDraw(); // initiate drawing mode
onMounted(adjustShapes)
onBeforeUnmount(deleteShapes)
</script>

3
src/components/chart/MarketBuilder.vue
View File

@@ -3,7 +3,7 @@
<div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
<div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
<div>
<v-text-field type="number" v-model="os.slippage"
<v-text-field type="number" v-model="props.builder.slippage"
density="compact" hide-details class="mx-1 my-2" variant="outlined"
label="Max Slippage" min="0" max="100" step="0.01"
style="width: 9em;"
@@ -20,7 +20,6 @@ import {useChartOrderStore} from "@/orderbuild.js";
import {builderDefaults} from "@/misc.js";
import {useOrderStore} from "@/store/store.js";
const os = useOrderStore()
const co = useChartOrderStore()
const props = defineProps(['order', 'builder'])

1
src/components/chart/Toolbar.vue
View File

@@ -27,7 +27,6 @@ const co = useChartOrderStore()
let shape = null
function newOrder() {
console.log('new order 1')
co.newOrder()
}

5
src/orderbuild.js
View File

@@ -30,13 +30,14 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
const orders = ref([])
const selectedOrder = ref(null)
const selectedSymbol = ref(null)
const drawing = ref(false)
const drawingCallbacks = ref(null) // only during draw mode
function newOrder() {
console.log('cos new order')
const order = { id:uuid(), amount:1, builders:[] }
const order = { id:uuid(), amount:1, builders:[], amountIsTokenA: true, buy: true }
orders.value.push(order)
selectedOrder.value = order
}
@@ -52,7 +53,7 @@ export const useChartOrderStore = defineStore('chart_orders', () => {
}
return {
chartReady, orders, drawing, drawingCallbacks, newOrder, removeOrder,
chartReady, selectedSymbol, orders, drawing, drawingCallbacks, newOrder, removeOrder,
}
})