Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Auto Shape Points and Mouse Pointer onEnter #296

Closed
olablt opened this issue Aug 12, 2022 · 1 comment
Closed

[Feature] Auto Shape Points and Mouse Pointer onEnter #296

olablt opened this issue Aug 12, 2022 · 1 comment

Comments

@olablt
Copy link

olablt commented Aug 12, 2022

Feature Description

Not sure if it is implemented. Checked the source code but can not figure this out.

I am creating Long / Short Shapes where I place one point p0 on the chart and other points p1, p2, p3 are placed automatically (totalStep is 2) and can be edited later:

image

Everything is working good but the problem is when I want to restore the shape from JSON object

chart.createShape({
    "name":"Long",
    "points":[
        {"timestamp":1660244400000,"value":23479.64023722628,"dataIndex":715},
        {"value":23479.64023722628,"dataIndex":735},
        {"value":23279.64023722628,"dataIndex":715},
        {"value":23679.64023722628,"dataIndex":715}
    ],
    onMouseEnter: function ({ id, event }) { 
        $("canvas").css("cursor", "pointer");
    },
    onMouseLeave: function ({ id, event }) { 
        $("canvas").css("cursor", "default");
    },
    onRemove: function ({ id }) {
        $("canvas").css("cursor", "default");
    },
}); 

To Do

shape Long :

chart.addShapeTemplate({
    name: 'Long',
    // totalStep: 5,
    totalStep: 2,
    checkEventCoordinateOnShape: ({ type, dataSource, eventCoordinate }) => {
        return checkCoordinateInRect(dataSource[0], dataSource[2], eventCoordinate)
    },
    createShapeDataSource: ({ step, mode, points, coordinates, viewport, precision, xAxis, yAxis }) => {
        let greenPolygons = []
        let redPolygons = []
        let lines = []
        let texts = []
        if (points.length == 1) {
            // 3
            // 0 1
            // 2
            p0 = points[0]
            points.push({value: p0.value, dataIndex: p0.dataIndex+20}) // p1
            points.push({value: p0.value-100, dataIndex: p0.dataIndex}) // p2
            points.push({value: p0.value+200, dataIndex: p0.dataIndex}) // p3

            // coordinates.push({x:xAxis.convertToPixel(points[1].dataIndex), y:yAxis.convertToPixel(points[1].value)})
            // coordinates.push({x:xAxis.convertToPixel(points[2].dataIndex), y:yAxis.convertToPixel(points[2].value)})
            // coordinates.push({x:xAxis.convertToPixel(points[3].dataIndex), y:yAxis.convertToPixel(points[3].value)})
        }

        if (coordinates.length > 1) {

            greenPolygons.push([
                { x: coordinates[0].x, y: coordinates[3].y},
                { x: coordinates[1].x, y: coordinates[3].y},
                { x: coordinates[1].x, y: coordinates[0].y},
                { x: coordinates[0].x, y: coordinates[0].y}, 
            ]);
            redPolygons.push([
                { x: coordinates[0].x, y: coordinates[0].y}, 
                { x: coordinates[1].x, y: coordinates[0].y},
                { x: coordinates[1].x, y: coordinates[2].y},
                { x: coordinates[0].x, y: coordinates[2].y},
            ]);

            // entry line
            lines.push([{ x: coordinates[0].x, y: coordinates[0].y }, { x: coordinates[1].x, y: coordinates[1].y }])

        }
        return [
            {
                type: 'line',
                isDraw: true,// Whether you want to draw, you can default, draw by default
                isCheck: false,// Whether to check whether it is on the graph, it can be defaulted, not checked by default
                dataSource: lines
            }, 
            {
                type: 'text',
                isDraw: true,
                isCheck: false,
                dataSource: texts
            }, 
            {
                type: 'polygon',
                isDraw: true,
                isCheck: true,
                dataSource: greenPolygons,
                styles: { style: 'fill', fill: { color: 'rgba(8, 153, 129, 0.2)' } },
            }, {
                type: 'polygon',
                isDraw: true,
                isCheck: true,
                dataSource: redPolygons,
                styles: { style: 'fill', fill: { color: 'rgba(242, 54, 69, 0.2)' } },
            }

        ]

    }
});

my questions are:

  1. is this possible
  2. is my solution right for mouse cursor change onEnter
@olablt olablt changed the title [Feature] auto shape points and mouse pointer onEnter [Feature] Auto Shape Points and Mouse Pointer onEnter Aug 12, 2022
@liihuu
Copy link
Member

liihuu commented Sep 8, 2022

doesn't work?

@liihuu liihuu closed this as completed Jan 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants