intro vid on homepage

src/blockchain/ohlcs.js

@@ -19,8 +19,15 @@ export function subOHLC( chainId, pool, period ) {
 
 export function refreshOHLCSubs() {
     const keys = []
+    let chainId = null
     for (const key of Object.keys(ohlcSubCounts)) {
-        const [chainId, pool, period] = key.split('|')
+        const [curChainId, pool, period] = key.split('|')
+        if (chainId === null)
+            chainId = curChainId
+        else if (chainId !== curChainId) {
+            console.error('refreshOHLCSubs: mixed chainIds')
+            continue
+        }
         keys.push(`${pool}|${period}`)
     }
     socket.emit('subOHLCs', chainId, keys)

src/charts/chart-misc.js

@@ -52,4 +52,8 @@ export function dirtyItems(a, b) {
     for (const k of dirtyKeys(a, b))
         result[k] = b[k]
     return result
-}
+}
+
+export function copyPoints(points) {
+    return points.map((p)=>({time: p.time, price: p.price}))
+}

src/charts/chart.js

@@ -4,6 +4,7 @@ import {DataFeed, feelessTickerKey, getAllSymbols, lookupSymbol} from "@/charts/
 import {intervalToSeconds, SingletonCoroutine} from "@/misc.js";
 import {useStore} from "@/store/store.js";
 import {tvCustomThemes} from "../../theme.js";
+import {copyPoints} from "@/charts/chart-misc.js";
 
 export let widget = null
 export let chart = null
@@ -310,10 +311,14 @@ function onSelectedLineToolChanged() {
 
 export let dragging = false
 export let draggingShapeIds = []
+let draggingShapeStartPoints = null
+let mouseClickPoint = null
+
 function mouseDown() {
     // console.log('mouseDown')
     // todo push into drawing event queue instead, then set dragging there
     dragging = true
+    mouseClickPoint = {time: crosshairPoint.time, price: crosshairPoint.price}
 }
 
 function mouseUp() {
@@ -340,8 +345,12 @@ function doHandleCrosshairMovement(point) {
         const selection = chart.selection().allSources();
         if (selection.length)
             draggingShapeIds = selection
-        // console.log('dragging selected', draggingShapeIds)
-        for (const shapeId of draggingShapeIds) {
+        console.log('dragging selected', draggingShapeIds)
+        const initStartPoints = draggingShapeStartPoints === null
+        if (initStartPoints)
+            draggingShapeStartPoints = []
+        for (const i in draggingShapeIds) {
+            const shapeId = draggingShapeIds[i]
             let shape
             try {
                 shape = chart.getShapeById(shapeId);
@@ -349,15 +358,33 @@ function doHandleCrosshairMovement(point) {
             catch (e) {
                 continue
             }
-            const points = structuredClone(shape.getPoints());
+            const shapePoints = shape.getPoints();
             const lpbe = shape._model._linePointBeingEdited
-            points[lpbe] = point
+            const points = [];
+            const dt = point.time - mouseClickPoint.time
+            const dp = point.price - mouseClickPoint.price
+            if (initStartPoints)
+                draggingShapeStartPoints.push(copyPoints(shapePoints))
+            for (const j in shapePoints) {
+                if (lpbe!==null)
+                    // if this is the point being dragged, set it to the cursor position. otherwise pass it unchanged.
+                    points.push(j===lpbe ? {time: point.time, price: point.price} : shapePoints[j])
+                else {
+                    // lpbe is null if the user is dragging the entire object (translation,) meaning all points are affected
+                    // todo use the origin of any selected point
+                    const startPoint = draggingShapeStartPoints[i][j];
+                    // push a point that applies the cursor delta to the starting position of the shape
+                    points.push({time: startPoint.time + dt, price: startPoint.price + dp})
+                }
+            }
+            //console.log('lpbe', lpbe)
             // console.log('drag calling onPoints', points, shape, lpbe)
             invokeCallbacks(shapeCallbacks[shapeId], 'onPoints', shapeId, shape, points)
         }
     }
     else if (draggingShapeIds.length > 0) {
         draggingShapeIds = []
+        draggingShapeStartPoints = []
     }
 }
 

src/charts/ordershapes.js

@@ -87,7 +87,7 @@ class TrancheShapes {
         price *= scale
         // console.log('price', price)
         const channel = buy?'low':'high';
-        const text = allocationText(buy, weight, amount, amountSymbol, '\n')
+        const text = allocationText(buy, weight, amount, amountSymbol, '\n', amountIsBase?null:this.symbol.base.s)
         const s = createShape(buy?'arrow_up':'arrow_down', {time, price}, {channel,text,lock:true})
         // console.log('created fill shape at', time, price)
         this.fills.push(s)

src/charts/shape.js

@@ -39,7 +39,7 @@ export const ShapeType = {
 }
 
 
-export function allocationText(buy, weight, amount, symbol, separator = ' ') {
+export function allocationText(buy, weight, amount, symbol, separator = ' ', inSymbol=null) {
     // set breakout=true for a buy breakout and breakout=false for a sell breakout
     const hasAmount = amount !== null && amount !== undefined && amount > 0
     if (hasAmount)
@@ -56,6 +56,8 @@ export function allocationText(buy, weight, amount, symbol, separator = ' ') {
     if (hasAmount && hasSymbol) {
         if (hasWeight)
             text += separator
+        if (inSymbol)
+            text += `${inSymbol} worth `
         text += `${amount.toPrecision(3).toLocaleString('fullwide')} ${symbol}`
     }
     return text
@@ -324,11 +326,11 @@ export class Shape {
     }
 
     // diagonals need to override this to adjust their price as well.
-    pointsToTvOhlcStart(points, periodSeconds=null) {
-    return points === null ? null : points.map((p) => {
-        return {time: nearestOhlcStart(p.time, periodSeconds), price: p.price}
-    })
-}
+    pointsToTvOhlcStart(points, periodSeconds = null) {
+        return points === null ? null : points.map((p) => {
+            return {time: nearestOhlcStart(p.time, periodSeconds), price: p.price}
+        })
+    }
 
     onPoints(points) {} // the control points of an existing shape were changed
 

src/components/chart/DCABuilder.vue

@@ -1,4 +1,4 @@
-<template>
+<template class="d-flex align-content-center flex-column" style="height: 100%; width: 100%;">
   <rung-builder name='DCA' :order="order" :builder="builder" v-model="timeEndpoints"
                 :shape="VLine"
                 :mode="1" :flip="flipped" :orientation="0"
@@ -82,7 +82,7 @@ const times = ref([])
 const weights = ref([])
 
 const amountSymbol = computed(()=>props.order.amountIsTokenA ? co.selectedSymbol.base.s : co.selectedSymbol.quote.s )
-const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(props.order.buy, w, w*props.order.amount, amountSymbol.value)))
+const allocationTexts = computed(()=>weights.value.map((w)=>allocationText(props.order.buy, w, w*props.order.amount, amountSymbol.value, ' ', props.order.amountIsTokenA?null:co.selectedSymbol.base.s)))
 
 const endTimes = computed(()=>{
   if (props.builder.rungs === 1)