Shape for both long and short positions

[guelweles]

Does anyone who's used to creating custom shapes know how I could create a long position like the one in trading view?

I'll keep playing around with it but if anyone has any tips I'd appreciate it.

[olablt]

what is your progress?

my first steps with Long:
#296

[guelweles]

It took me a while to understand how to create custom shapes but I'm finally getting in my head, I copied your first steps and modified it a little bit so that I can click and drag on all points.

There are still a couple of things I want to achieve and I'll keep working on them, your code was the key.

Here's my modification based on your code:

const long = (() => {
    const stepsToCompleteShape = 2;
    let yStep;

    return {
        name: 'long',
        totalStep: stepsToCompleteShape,
        checkEventCoordinateOnShape: ({ dataSource, eventCoordinate }) => {
            return checkCoordinateInRect(dataSource[0], dataSource[1], eventCoordinate)
        },
        createShapeDataSource: (ref) => {
            // const { step, mode, points, coordinates, viewport, precision, xAxis, yAxis } = ref;
            const { points, coordinates, yAxis } = ref;
            yStep = Number(yAxis._ticks[1].v) - Number(yAxis._ticks[0].v);
            const xStep = 20;

            let takeProfitPolygons = [];
            let stopLossPolygons = [];
            let entryLine = [];
            let texts = [];

            if (points.length === (stepsToCompleteShape - 1)) {
                let p0 = points[0];
                points.push({ value: p0.value, dataIndex: p0.dataIndex + xStep }) // p1
                points.push({ value: p0.value - yStep, dataIndex: p0.dataIndex }) // p2
                points.push({ value: p0.value + yStep, dataIndex: p0.dataIndex }) // p3
            }

            if (coordinates.length > stepsToCompleteShape) {
                // Entry line
                entryLine[0] = [{ x: coordinates[0].x, y: coordinates[0].y }, { x: coordinates[1].x, y: coordinates[1].y }];

                // Take Profit - Green Area
                takeProfitPolygons.push([
                    { x: coordinates[0].x, y: coordinates[0].y },
                    { x: coordinates[1].x, y: coordinates[1].y },
                    { x: coordinates[1].x, y: coordinates[3].y },
                    { x: coordinates[0].x, y: coordinates[3].y },
                ]);

                //Stop Loss - Red Area
                stopLossPolygons.push([
                    { x: coordinates[0].x, y: coordinates[0].y },
                    { x: coordinates[1].x, y: coordinates[1].y },
                    { x: coordinates[1].x, y: coordinates[2].y },
                    { x: coordinates[0].x, y: coordinates[2].y },
                ]);

                return [
                    {
                        type: 'line',
                        isDraw: true,
                        isCheck: false,
                        dataSource: entryLine
                    },
                    {
                        type: 'text',
                        isDraw: true,
                        isCheck: false,
                        dataSource: texts
                    },
                    {
                        type: 'polygon',
                        isDraw: true,
                        isCheck: true,
                        dataSource: takeProfitPolygons,
                        styles: { style: 'fill', fill: { color: 'rgba(8, 153, 129, 0.2)' } },
                    }, {
                        type: 'polygon',
                        isDraw: true,
                        isCheck: true,
                        dataSource: stopLossPolygons,
                        styles: { style: 'fill', fill: { color: 'rgba(242, 54, 69, 0.2)' } },
                    }

                ]

            }

            return [];
        },
        performEventPressedMove: function performEventPressedMove(ref) {
            const { points, pressPoint } = ref;

            // Click on P0
            if (pressPoint.dataIndex === points[0].dataIndex) {
                // If P0 is cliked, P0, P1 & P3 will be moved on the X axis
                if (pressPoint.value === points[0].value) {
                    points[0] = { value: points[1].value, dataIndex: pressPoint.dataIndex };
                    points[2] = { value: points[2].value, dataIndex: pressPoint.dataIndex };
                    points[3] = { value: points[3].value, dataIndex: pressPoint.dataIndex };
                    return;
                }
            }

            // Click on P1 
            if (pressPoint.dataIndex === points[1].dataIndex) {
                points[1] = { value: points[0].value, dataIndex: pressPoint.dataIndex };
            }

            // Click on P2 or P3
            const edegeP = pressPoint.value === points[2].value ? 2 : 3;
            if (pressPoint.value === points[edegeP].value) {
                console.log(pressPoint.value, pressPoint.dataIndex);
                points[edegeP] = { value: pressPoint.value, dataIndex: points[0].dataIndex };
                return
            }

        }
    }
})();

[jinusean]

Here's my implementation.

You can ignore the teal/red box with the big numbers as that's not related to the position line.

https://gist.github.com/jinusean/ed35553a58fbc12e1a05262979464e57

[zuri0]

@jinusean - Hi, If it’s not too much to ask, can you please share how to add volume profile?