@tradingaction/coordinates 2.0.12 → 2.0.15

package/lib/Cursor.js

@@ -1,122 +1,122 @@
-import { ChartCanvasContext, first, GenericComponent, getMouseCanvas, getStrokeDasharrayCanvas, last, } from "@tradingaction/core";
-import * as React from "react";
-const defaultCustomSnapX = (props, moreProps) => {
-    const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
-    const { snapX } = props;
-    const x = snapX ? Math.round(xScale(xAccessor(currentItem))) : mouseXY[0];
-    return x;
-};
-export class Cursor extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.drawOnCanvas = (ctx, moreProps) => {
-            const cursors = this.getXYCursor(this.props, moreProps);
-            if (cursors === undefined) {
-                return;
-            }
-            const { useXCursorShape } = this.props;
-            const { margin, ratio } = this.context;
-            const originX = 0.5 * ratio + margin.left;
-            const originY = 0.5 * ratio + margin.top;
-            ctx.save();
-            ctx.setTransform(1, 0, 0, 1, 0, 0);
-            ctx.scale(ratio, ratio);
-            ctx.translate(originX, originY);
-            cursors.forEach((line) => {
-                if (useXCursorShape && line.isXCursor) {
-                    const { xCursorShapeStrokeDasharray } = this.props;
-                    if (xCursorShapeStrokeDasharray !== undefined) {
-                        const xShapeStrokeStyle = this.getXCursorShapeStroke(moreProps);
-                        if (xShapeStrokeStyle !== undefined) {
-                            ctx.strokeStyle = xShapeStrokeStyle;
-                        }
-                        ctx.setLineDash(getStrokeDasharrayCanvas(xCursorShapeStrokeDasharray));
-                    }
-                    ctx.beginPath();
-                    const xShapeFillStyle = this.getXCursorShapeFill(moreProps);
-                    if (xShapeFillStyle !== undefined) {
-                        ctx.fillStyle = xShapeFillStyle;
-                    }
-                    ctx.beginPath();
-                    const xShape = this.getXCursorShape(moreProps);
-                    xCursorShapeStrokeDasharray === undefined
-                        ? ctx.fillRect(xShape.xPos, 0, xShape.shapeWidth, xShape.height)
-                        : ctx.rect(xShape.xPos, 0, xShape.shapeWidth, xShape.height);
-                    ctx.fill();
-                }
-                else {
-                    if (line.strokeStyle !== undefined) {
-                        ctx.strokeStyle = line.strokeStyle;
-                    }
-                    const dashArray = getStrokeDasharrayCanvas(line.strokeDasharray);
-                    ctx.setLineDash(dashArray);
-                    ctx.beginPath();
-                    ctx.moveTo(line.x1, line.y1);
-                    ctx.lineTo(line.x2, line.y2);
-                }
-                ctx.stroke();
-            });
-            ctx.restore();
-        };
-    }
-    render() {
-        return (React.createElement(GenericComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
-    }
-    getXCursorShapeStroke({ currentItem }) {
-        const { xCursorShapeStrokeStyle } = this.props;
-        return xCursorShapeStrokeStyle instanceof Function
-            ? xCursorShapeStrokeStyle(currentItem)
-            : xCursorShapeStrokeStyle;
-    }
-    getXCursorShapeFill({ currentItem }) {
-        const { xCursorShapeFillStyle } = this.props;
-        return xCursorShapeFillStyle instanceof Function ? xCursorShapeFillStyle(currentItem) : xCursorShapeFillStyle;
-    }
-    getXCursorShape(moreProps) {
-        const { height, xScale, currentItem, plotData } = moreProps;
-        const { xAccessor } = moreProps;
-        const xValue = xAccessor(currentItem);
-        const centerX = xScale(xValue);
-        const shapeWidth = Math.abs(xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)))) / (plotData.length - 1);
-        const xPos = centerX - shapeWidth / 2;
-        return { height, xPos, shapeWidth };
-    }
-    getXYCursor(props, moreProps) {
-        const { mouseXY, currentItem, show, height, width } = moreProps;
-        const { customX = Cursor.defaultProps.customX, strokeStyle, strokeDasharray, disableYCursor } = props;
-        if (!show || currentItem === undefined) {
-            return undefined;
-        }
-        const yCursor = {
-            x1: 0,
-            x2: width,
-            y1: mouseXY[1] + 0.5,
-            y2: mouseXY[1] + 0.5,
-            strokeStyle,
-            strokeDasharray,
-            isXCursor: false,
-        };
-        const x = customX(props, moreProps);
-        const xCursor = {
-            x1: x,
-            x2: x,
-            y1: 0,
-            y2: height,
-            strokeStyle,
-            strokeDasharray,
-            isXCursor: true,
-        };
-        return disableYCursor ? [xCursor] : [yCursor, xCursor];
-    }
-}
-Cursor.defaultProps = {
-    strokeStyle: "rgba(55, 71, 79, 0.8)",
-    strokeDasharray: "ShortDash",
-    snapX: true,
-    customX: defaultCustomSnapX,
-    disableYCursor: false,
-    useXCursorShape: false,
-    xCursorShapeStrokeStyle: "rgba(0, 0, 0, 0.5)",
-};
-Cursor.contextType = ChartCanvasContext;
+import { ChartCanvasContext, first, GenericComponent, getMouseCanvas, getStrokeDasharrayCanvas, last, } from "@tradingaction/core";
+import * as React from "react";
+const defaultCustomSnapX = (props, moreProps) => {
+    const { xScale, xAccessor, currentItem, mouseXY } = moreProps;
+    const { snapX } = props;
+    const x = snapX ? Math.round(xScale(xAccessor(currentItem))) : mouseXY[0];
+    return x;
+};
+export class Cursor extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.drawOnCanvas = (ctx, moreProps) => {
+            const cursors = this.getXYCursor(this.props, moreProps);
+            if (cursors === undefined) {
+                return;
+            }
+            const { useXCursorShape } = this.props;
+            const { margin, ratio } = this.context;
+            const originX = 0.5 * ratio + margin.left;
+            const originY = 0.5 * ratio + margin.top;
+            ctx.save();
+            ctx.setTransform(1, 0, 0, 1, 0, 0);
+            ctx.scale(ratio, ratio);
+            ctx.translate(originX, originY);
+            cursors.forEach((line) => {
+                if (useXCursorShape && line.isXCursor) {
+                    const { xCursorShapeStrokeDasharray } = this.props;
+                    if (xCursorShapeStrokeDasharray !== undefined) {
+                        const xShapeStrokeStyle = this.getXCursorShapeStroke(moreProps);
+                        if (xShapeStrokeStyle !== undefined) {
+                            ctx.strokeStyle = xShapeStrokeStyle;
+                        }
+                        ctx.setLineDash(getStrokeDasharrayCanvas(xCursorShapeStrokeDasharray));
+                    }
+                    ctx.beginPath();
+                    const xShapeFillStyle = this.getXCursorShapeFill(moreProps);
+                    if (xShapeFillStyle !== undefined) {
+                        ctx.fillStyle = xShapeFillStyle;
+                    }
+                    ctx.beginPath();
+                    const xShape = this.getXCursorShape(moreProps);
+                    xCursorShapeStrokeDasharray === undefined
+                        ? ctx.fillRect(xShape.xPos, 0, xShape.shapeWidth, xShape.height)
+                        : ctx.rect(xShape.xPos, 0, xShape.shapeWidth, xShape.height);
+                    ctx.fill();
+                }
+                else {
+                    if (line.strokeStyle !== undefined) {
+                        ctx.strokeStyle = line.strokeStyle;
+                    }
+                    const dashArray = getStrokeDasharrayCanvas(line.strokeDasharray);
+                    ctx.setLineDash(dashArray);
+                    ctx.beginPath();
+                    ctx.moveTo(line.x1, line.y1);
+                    ctx.lineTo(line.x2, line.y2);
+                }
+                ctx.stroke();
+            });
+            ctx.restore();
+        };
+    }
+    render() {
+        return (React.createElement(GenericComponent, { clip: false, canvasDraw: this.drawOnCanvas, canvasToDraw: getMouseCanvas, drawOn: ["mousemove", "pan", "drag"] }));
+    }
+    getXCursorShapeStroke({ currentItem }) {
+        const { xCursorShapeStrokeStyle } = this.props;
+        return xCursorShapeStrokeStyle instanceof Function
+            ? xCursorShapeStrokeStyle(currentItem)
+            : xCursorShapeStrokeStyle;
+    }
+    getXCursorShapeFill({ currentItem }) {
+        const { xCursorShapeFillStyle } = this.props;
+        return xCursorShapeFillStyle instanceof Function ? xCursorShapeFillStyle(currentItem) : xCursorShapeFillStyle;
+    }
+    getXCursorShape(moreProps) {
+        const { height, xScale, currentItem, plotData } = moreProps;
+        const { xAccessor } = moreProps;
+        const xValue = xAccessor(currentItem);
+        const centerX = xScale(xValue);
+        const shapeWidth = Math.abs(xScale(xAccessor(last(plotData))) - xScale(xAccessor(first(plotData)))) / (plotData.length - 1);
+        const xPos = centerX - shapeWidth / 2;
+        return { height, xPos, shapeWidth };
+    }
+    getXYCursor(props, moreProps) {
+        const { mouseXY, currentItem, show, height, width } = moreProps;
+        const { customX = Cursor.defaultProps.customX, strokeStyle, strokeDasharray, disableYCursor } = props;
+        if (!show || currentItem === undefined) {
+            return undefined;
+        }
+        const yCursor = {
+            x1: 0,
+            x2: width,
+            y1: mouseXY[1] + 0.5,
+            y2: mouseXY[1] + 0.5,
+            strokeStyle,
+            strokeDasharray,
+            isXCursor: false,
+        };
+        const x = customX(props, moreProps);
+        const xCursor = {
+            x1: x,
+            x2: x,
+            y1: 0,
+            y2: height,
+            strokeStyle,
+            strokeDasharray,
+            isXCursor: true,
+        };
+        return disableYCursor ? [xCursor] : [yCursor, xCursor];
+    }
+}
+Cursor.defaultProps = {
+    strokeStyle: "rgba(55, 71, 79, 0.8)",
+    strokeDasharray: "ShortDash",
+    snapX: true,
+    customX: defaultCustomSnapX,
+    disableYCursor: false,
+    useXCursorShape: false,
+    xCursorShapeStrokeStyle: "rgba(0, 0, 0, 0.5)",
+};
+Cursor.contextType = ChartCanvasContext;
 //# sourceMappingURL=Cursor.js.map

package/lib/EdgeCoordinate.d.ts

@@ -1,32 +1,32 @@
-import * as React from "react";
-export interface EdgeCoordinateProps {
-    readonly className?: string;
-    readonly type: "vertical" | "horizontal";
-    readonly coordinate?: any;
-    readonly x1: number;
-    readonly y1: number;
-    readonly x2: number;
-    readonly y2: number;
-    readonly orient?: "bottom" | "top" | "left" | "right";
-    readonly rectWidth?: number;
-    readonly hideLine?: boolean;
-    readonly fill?: string;
-    readonly fontFamily: string;
-    readonly fontSize: number;
-    readonly lineStroke?: string;
-}
-export declare class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
-    static defaultProps: {
-        className: string;
-        orient: string;
-        hideLine: boolean;
-        fill: string;
-        fontFamily: string;
-        fontSize: number;
-        textFill: string;
-        lineStroke: string;
-        arrowWidth: number;
-    };
-    static drawOnCanvasStatic: (ctx: CanvasRenderingContext2D, props: any) => void;
-    render(): JSX.Element | null;
-}
+import * as React from "react";
+export interface EdgeCoordinateProps {
+    readonly className?: string;
+    readonly type: "vertical" | "horizontal";
+    readonly coordinate?: any;
+    readonly x1: number;
+    readonly y1: number;
+    readonly x2: number;
+    readonly y2: number;
+    readonly orient?: "bottom" | "top" | "left" | "right";
+    readonly rectWidth?: number;
+    readonly hideLine?: boolean;
+    readonly fill?: string;
+    readonly fontFamily: string;
+    readonly fontSize: number;
+    readonly lineStroke?: string;
+}
+export declare class EdgeCoordinate extends React.Component<EdgeCoordinateProps> {
+    static defaultProps: {
+        className: string;
+        orient: string;
+        hideLine: boolean;
+        fill: string;
+        fontFamily: string;
+        fontSize: number;
+        textFill: string;
+        lineStroke: string;
+        arrowWidth: number;
+    };
+    static drawOnCanvasStatic: (ctx: CanvasRenderingContext2D, props: any) => void;
+    render(): JSX.Element | null;
+}

package/lib/EdgeCoordinate.js

@@ -1,151 +1,151 @@
-import * as React from "react";
-const helper = (props) => {
-    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
-    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
-    const { rectWidth, rectHeight } = props;
-    const { x1, y1, x2, y2 } = props;
-    if (!show) {
-        return null;
-    }
-    let edgeXRect;
-    let edgeYRect;
-    let edgeXText;
-    let edgeYText;
-    if (type === "horizontal") {
-        edgeXRect = orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1;
-        edgeYRect = y1 - rectHeight / 2;
-        edgeXText = orient === "right" ? edgeAt + rectWidth / 2 + arrowWidth : edgeAt - rectWidth / 2 - arrowWidth;
-        edgeYText = y1;
-    }
-    else {
-        edgeXRect = x1 - rectWidth / 2;
-        edgeYRect = orient === "bottom" ? edgeAt : edgeAt - rectHeight;
-        edgeXText = x1;
-        edgeYText = orient === "bottom" ? edgeAt + rectHeight / 2 : edgeAt - rectHeight / 2;
-    }
-    let coordinateBase;
-    let coordinate;
-    const textAnchor = "middle";
-    if (displayCoordinate !== undefined) {
-        coordinateBase = {
-            edgeXRect,
-            edgeYRect,
-            rectHeight,
-            rectWidth,
-            fill,
-            arrowWidth,
-        };
-        coordinate = {
-            edgeXText,
-            edgeYText,
-            textAnchor,
-            fontFamily,
-            fontSize,
-            textFill,
-            displayCoordinate,
-        };
-    }
-    const line = hideLine
-        ? undefined
-        : {
-            stroke: lineStroke,
-            x1,
-            y1,
-            x2,
-            y2,
-        };
-    return {
-        coordinateBase,
-        coordinate,
-        line,
-        orient,
-    };
-};
-export class EdgeCoordinate extends React.Component {
-    render() {
-        const { className } = this.props;
-        const edge = helper(this.props);
-        if (edge === null) {
-            return null;
-        }
-        let line;
-        let coordinateBase;
-        let coordinate;
-        if (edge.line !== undefined) {
-            line = (React.createElement("line", { className: "react-financial-charts-cross-hair", stroke: edge.line.stroke, x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
-        }
-        if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
-            const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
-            const path = edge.orient === "left"
-                ? `M0,0L0,${rectHeight}L${rectWidth},${rectHeight}L${rectWidth + arrowWidth},10L${rectWidth},0L0,0L0,0`
-                : `M0,${arrowWidth}L${arrowWidth},${rectHeight}L${rectWidth + arrowWidth},${rectHeight}L${rectWidth + arrowWidth},0L${arrowWidth},0L0,${arrowWidth}`;
-            coordinateBase =
-                edge.orient === "left" || edge.orient === "right" ? (React.createElement("g", { transform: `translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})` },
-                    React.createElement("path", { d: path, key: 1, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }));
-            coordinate = (React.createElement("text", { key: 2, x: edge.coordinate.edgeXText, y: edge.coordinate.edgeYText, textAnchor: edge.coordinate.textAnchor, fontFamily: edge.coordinate.fontFamily, fontSize: edge.coordinate.fontSize, dy: ".32em", fill: edge.coordinate.textFill }, edge.coordinate.displayCoordinate));
-        }
-        return (React.createElement("g", { className: className },
-            line,
-            coordinateBase,
-            coordinate));
-    }
-}
-EdgeCoordinate.defaultProps = {
-    className: "react-financial-charts-edgecoordinate",
-    orient: "left",
-    hideLine: false,
-    fill: "#8a8a8a",
-    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
-    fontSize: 13,
-    textFill: "#FFFFFF",
-    lineStroke: "rgba(0, 0, 0, 0.3)",
-    arrowWidth: 10,
-};
-EdgeCoordinate.drawOnCanvasStatic = (ctx, props) => {
-    props = Object.assign(Object.assign({}, EdgeCoordinate.defaultProps), props);
-    const edge = helper(props);
-    if (edge === null) {
-        return;
-    }
-    if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
-        const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
-        ctx.fillStyle = edge.coordinateBase.fill;
-        const x = edge.coordinateBase.edgeXRect;
-        const y = edge.coordinateBase.edgeYRect;
-        ctx.beginPath();
-        if (edge.orient === "right") {
-            ctx.moveTo(x, y + rectHeight / 2);
-            ctx.lineTo(x + arrowWidth, y);
-            ctx.lineTo(x + rectWidth + arrowWidth, y);
-            ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight);
-            ctx.lineTo(x + arrowWidth, y + rectHeight);
-            ctx.closePath();
-        }
-        else if (edge.orient === "left") {
-            ctx.moveTo(x, y);
-            ctx.lineTo(x + rectWidth, y);
-            ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight / 2);
-            ctx.lineTo(x + rectWidth, y + rectHeight);
-            ctx.lineTo(x, y + rectHeight);
-            ctx.closePath();
-        }
-        else {
-            ctx.rect(x, y, rectWidth, rectHeight);
-        }
-        ctx.fill();
-        ctx.font = `${edge.coordinate.fontSize}px ${edge.coordinate.fontFamily}`;
-        ctx.fillStyle = edge.coordinate.textFill;
-        ctx.textAlign =
-            edge.coordinate.textAnchor === "middle" ? "center" : edge.coordinate.textAnchor;
-        ctx.textBaseline = "middle";
-        ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
-    }
-    if (edge.line !== undefined) {
-        ctx.strokeStyle = edge.line.stroke;
-        ctx.beginPath();
-        ctx.moveTo(edge.line.x1, edge.line.y1);
-        ctx.lineTo(edge.line.x2, edge.line.y2);
-        ctx.stroke();
-    }
-};
+import * as React from "react";
+const helper = (props) => {
+    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine } = props;
+    const { fill, fontFamily, fontSize, textFill, lineStroke, arrowWidth } = props;
+    const { rectWidth, rectHeight } = props;
+    const { x1, y1, x2, y2 } = props;
+    if (!show) {
+        return null;
+    }
+    let edgeXRect;
+    let edgeYRect;
+    let edgeXText;
+    let edgeYText;
+    if (type === "horizontal") {
+        edgeXRect = orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1;
+        edgeYRect = y1 - rectHeight / 2;
+        edgeXText = orient === "right" ? edgeAt + rectWidth / 2 + arrowWidth : edgeAt - rectWidth / 2 - arrowWidth;
+        edgeYText = y1;
+    }
+    else {
+        edgeXRect = x1 - rectWidth / 2;
+        edgeYRect = orient === "bottom" ? edgeAt : edgeAt - rectHeight;
+        edgeXText = x1;
+        edgeYText = orient === "bottom" ? edgeAt + rectHeight / 2 : edgeAt - rectHeight / 2;
+    }
+    let coordinateBase;
+    let coordinate;
+    const textAnchor = "middle";
+    if (displayCoordinate !== undefined) {
+        coordinateBase = {
+            edgeXRect,
+            edgeYRect,
+            rectHeight,
+            rectWidth,
+            fill,
+            arrowWidth,
+        };
+        coordinate = {
+            edgeXText,
+            edgeYText,
+            textAnchor,
+            fontFamily,
+            fontSize,
+            textFill,
+            displayCoordinate,
+        };
+    }
+    const line = hideLine
+        ? undefined
+        : {
+            stroke: lineStroke,
+            x1,
+            y1,
+            x2,
+            y2,
+        };
+    return {
+        coordinateBase,
+        coordinate,
+        line,
+        orient,
+    };
+};
+export class EdgeCoordinate extends React.Component {
+    render() {
+        const { className } = this.props;
+        const edge = helper(this.props);
+        if (edge === null) {
+            return null;
+        }
+        let line;
+        let coordinateBase;
+        let coordinate;
+        if (edge.line !== undefined) {
+            line = (React.createElement("line", { className: "react-financial-charts-cross-hair", stroke: edge.line.stroke, x1: edge.line.x1, y1: edge.line.y1, x2: edge.line.x2, y2: edge.line.y2 }));
+        }
+        if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
+            const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+            const path = edge.orient === "left"
+                ? `M0,0L0,${rectHeight}L${rectWidth},${rectHeight}L${rectWidth + arrowWidth},10L${rectWidth},0L0,0L0,0`
+                : `M0,${arrowWidth}L${arrowWidth},${rectHeight}L${rectWidth + arrowWidth},${rectHeight}L${rectWidth + arrowWidth},0L${arrowWidth},0L0,${arrowWidth}`;
+            coordinateBase =
+                edge.orient === "left" || edge.orient === "right" ? (React.createElement("g", { transform: `translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})` },
+                    React.createElement("path", { d: path, key: 1, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }))) : (React.createElement("rect", { key: 1, className: "react-financial-charts-text-background", x: edge.coordinateBase.edgeXRect, y: edge.coordinateBase.edgeYRect, height: rectHeight, width: rectWidth, fill: edge.coordinateBase.fill }));
+            coordinate = (React.createElement("text", { key: 2, x: edge.coordinate.edgeXText, y: edge.coordinate.edgeYText, textAnchor: edge.coordinate.textAnchor, fontFamily: edge.coordinate.fontFamily, fontSize: edge.coordinate.fontSize, dy: ".32em", fill: edge.coordinate.textFill }, edge.coordinate.displayCoordinate));
+        }
+        return (React.createElement("g", { className: className },
+            line,
+            coordinateBase,
+            coordinate));
+    }
+}
+EdgeCoordinate.defaultProps = {
+    className: "react-financial-charts-edgecoordinate",
+    orient: "left",
+    hideLine: false,
+    fill: "#8a8a8a",
+    fontFamily: "-apple-system, system-ui, Roboto, 'Helvetica Neue', Ubuntu, sans-serif",
+    fontSize: 13,
+    textFill: "#FFFFFF",
+    lineStroke: "rgba(0, 0, 0, 0.3)",
+    arrowWidth: 10,
+};
+EdgeCoordinate.drawOnCanvasStatic = (ctx, props) => {
+    props = Object.assign(Object.assign({}, EdgeCoordinate.defaultProps), props);
+    const edge = helper(props);
+    if (edge === null) {
+        return;
+    }
+    if (edge.coordinate !== undefined && edge.coordinateBase !== undefined) {
+        const { rectWidth, rectHeight, arrowWidth } = edge.coordinateBase;
+        ctx.fillStyle = edge.coordinateBase.fill;
+        const x = edge.coordinateBase.edgeXRect;
+        const y = edge.coordinateBase.edgeYRect;
+        ctx.beginPath();
+        if (edge.orient === "right") {
+            ctx.moveTo(x, y + rectHeight / 2);
+            ctx.lineTo(x + arrowWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight);
+            ctx.lineTo(x + arrowWidth, y + rectHeight);
+            ctx.closePath();
+        }
+        else if (edge.orient === "left") {
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + rectWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + rectHeight / 2);
+            ctx.lineTo(x + rectWidth, y + rectHeight);
+            ctx.lineTo(x, y + rectHeight);
+            ctx.closePath();
+        }
+        else {
+            ctx.rect(x, y, rectWidth, rectHeight);
+        }
+        ctx.fill();
+        ctx.font = `${edge.coordinate.fontSize}px ${edge.coordinate.fontFamily}`;
+        ctx.fillStyle = edge.coordinate.textFill;
+        ctx.textAlign =
+            edge.coordinate.textAnchor === "middle" ? "center" : edge.coordinate.textAnchor;
+        ctx.textBaseline = "middle";
+        ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
+    }
+    if (edge.line !== undefined) {
+        ctx.strokeStyle = edge.line.stroke;
+        ctx.beginPath();
+        ctx.moveTo(edge.line.x1, edge.line.y1);
+        ctx.lineTo(edge.line.x2, edge.line.y2);
+        ctx.stroke();
+    }
+};
 //# sourceMappingURL=EdgeCoordinate.js.map

package/lib/EdgeCoordinateV2.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare function renderSVG(props: any): JSX.Element | null;
-export declare function drawOnCanvas(ctx: CanvasRenderingContext2D, props: any): void;
+/// <reference types="react" />
+export declare function renderSVG(props: any): JSX.Element | null;
+export declare function drawOnCanvas(ctx: CanvasRenderingContext2D, props: any): void;