Drawing tools

[oneart-dev]

I'm stuck adding drawing tools.

<TrendLine 
              type="XLINE" 
              snapTo={() => 0.05} 
              onSelect={() => console.log('select')} 
              onComplete={() => console.log('complete')} 
              onStart={() => console.log('start')} 
              enabled 
              appearance={{ 
                strokeStyle: '#b81111', 
                strokeWidth: 1, 
                strokeDasharray: 'Solid', 
                edgeStrokeWidth: 1, 
                edgeFill: '#FFFFFF', 
                edgeStroke: '#000000', 
              }} 
              snap={false} 
             /> 

First question what I suppose to put in "snapTo" function?

Right now the line is working and showing but the next moment I put second point by mouse click its disappears.

Probably I'm missing some callback or TrendLine need drawer. Can smd point me where to look? All other features are working perfectly fine and I just need to add drawing tools as a last step

[markmcdowell]

Yeah it's the least worked on part of the codebase. snapTo should actually be optional and can be a number or array, it's only used if snap is set to true and used to snap points to the data e.g. high or low etc. I'll raise an item to fix this.

[oneart-dev]

I can leave without snapping but how to show line after draw. Its just gone after completion.

[oneart-dev]

I figure it out. You need pass "trends" props with state of current drawings and fill it with data from onComplete callback.
@markmcdowell Is there any option to convert timestamp to data index on chart? I have stored drawings with time/price format.

[frbju]

Hi @oneart-dev , Can you share a code example on how you solved it?
I have been trying for a while and I am stuck. Currently I can draw lines on the chart, they get loaded into Trends={} prop, but I can't edit them as they just return to the initial position when i release the handle.
If i try to select another trendline nothing happens.

Would really appriciate if you could help me out on this.
Best / Fredrik

[oneart-dev]

I use this callbacks:

<trading-vue
@drawing-mode-off="drawCallBackChart"
@remove-tool="drawCallBackChart"
@tool-drag="drawCallBackChart"

drawCallBackChart (simplified version, I'm using debounce for performance but you can have an idea)

drawCallBackChart: function (...args) {
            if(args[2]) { // I do not remember what type of magic happening here sorry
              const index = this.chart.data.onchart.findIndex((i) => i.settings.$uuid === args[2]);
              this.chart.data.onchart.splice(index, 1);
            }

            const drawing = cloneDeep(this.chart.data.onchart.filter((item) => { 
              return this.tools.includes(item.type)
            }));
            drawing.forEach( (item, i, self) => { self[i].settings.$selected = false }); // line will stay selected if skip this step

            if(this.initiated)
                this.saveChart(JSON.stringify(drawing)); // saving in localstorage for example for reload support
}

[frbju]

Awesome thanks,

Best / F

[frbju]

This is probably a horrible solution but it works for now.

const drawTrend = props.trendlineActive;
const trendlineRef = useRef();
const [trendlines, setTrendlines] = useState([]);

const handleSelect = () => {
    let nodes = trendlineRef.current.nodes ? trendlineRef.current.nodes : []  
    if (nodes && nodes.length > 0) {
        trendlineRef.current.nodes.forEach((node, index) => {
            if (node.state && node.state.hover === true) {
                trendlines.forEach(trend => {
                    trend.selected = false;
                })
                // Set active trendline
                trendlines[index].selected = true;
            } else {
                trendlines[index].selected = false;
            }
        })
    } 
}
const handleComplete = () => {
    // Disable draw mode
    props.setTrendlineActive(false)   
    setTrendlines(trendlineRef.current.state.trends)
} 
useEffect(() => {
    // Get override values
    if (trendlineRef.current.state && trendlineRef.current.state.override) {
        // Update trendline values
        let state = trendlineRef.current.state.override;
        trendlines[state.index].end = [state.x1Value, state.y1Value]
        trendlines[state.index].start = [state.x2Value, state.y2Value]
    }
}); 

    
    
<TrendLine
                ref={trendlineRef}
                enabled={drawTrend}
                hoverText={{
                    bgWidth: 'auto',
                    bgHeight: 'auto',
                    bgFill: '#0C1438',
                    bgOpacity: '0.8',
                    fill: '#9EBCD4',
                    text: ''
                }}
                appearance={{
                    strokeStyle: '#FFFFFF',
                    edgeStroke: 'rgba(255,255,255,0)',
                    edgeStrokeWidth: 0
                }}
                type="LINE"
                snap={false}
                snapTo={d => [d.high, d.low]}
                onComplete={handleComplete}
                trends={trendlines}
            />

[paulbse]

@frbju @oneart-dev
Hey Frbju and Oneart-dev ! I hope you're fine :)
How did you managed the selection of multiple interactive indicators ? Did you managed it with DrawingObjectSelector ?
Thks a lot 🥇