@tradingaction/coordinates 2.0.11 → 2.0.13

package/lib/EdgeCoordinateV2.js

@@ -1,138 +1,138 @@
-import * as React from "react";
-export function renderSVG(props) {
-    const { className } = props;
-    const edge = helper(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));
-}
-function 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, dx } = props;
-    if (!show) {
-        return null;
-    }
-    let edgeXRect;
-    let edgeYRect;
-    let edgeXText;
-    let edgeYText;
-    if (type === "horizontal") {
-        edgeXRect = dx + (orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1);
-        edgeYRect = y1 - rectHeight / 2;
-        edgeXText =
-            dx + (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 function drawOnCanvas(ctx, 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";
+export function renderSVG(props) {
+    const { className } = props;
+    const edge = helper(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));
+}
+function 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, dx } = props;
+    if (!show) {
+        return null;
+    }
+    let edgeXRect;
+    let edgeYRect;
+    let edgeXText;
+    let edgeYText;
+    if (type === "horizontal") {
+        edgeXRect = dx + (orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - arrowWidth - 1);
+        edgeYRect = y1 - rectHeight / 2;
+        edgeXText =
+            dx + (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 function drawOnCanvas(ctx, 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=EdgeCoordinateV2.js.map

package/lib/EdgeCoordinateV3.d.ts

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

package/lib/EdgeCoordinateV3.js

@@ -1,176 +1,176 @@
-import * as React from "react";
-import { getStrokeDasharray, getStrokeDasharrayCanvas, isDefined } from "@tradingaction/core";
-export const renderSVG = (props) => {
-    const { className } = props;
-    const edge = helper(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, strokeDasharray: getStrokeDasharray(edge.line.strokeDasharray), 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", { key: 1, transform: `translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})` },
-                React.createElement("path", { d: path, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, stroke: edge.coordinateBase.stroke, strokeLinejoin: "miter", strokeWidth: edge.coordinateBase.strokeWidth, 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));
-};
-const helper = (props) => {
-    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine, lineStrokeDasharray, fill, fontFamily, fontSize, textFill, lineStroke, stroke, strokeWidth, arrowWidth, rectWidth, rectHeight, rectRadius, x1, y1, x2, y2, dx, } = props;
-    if (!show) {
-        return null;
-    }
-    let coordinateBase;
-    let coordinate;
-    if (displayCoordinate !== undefined) {
-        const textAnchor = "middle";
-        let edgeXRect;
-        let edgeYRect;
-        let edgeXText;
-        let edgeYText;
-        if (type === "horizontal") {
-            edgeXRect = dx + (orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - 1);
-            edgeYRect = y1 - rectHeight / 2 - strokeWidth;
-            edgeXText = dx + (orient === "right" ? edgeAt + rectWidth / 2 : edgeAt - rectWidth / 2);
-            edgeYText = y1;
-        }
-        else {
-            const dy = orient === "bottom" ? strokeWidth - 1 : -strokeWidth + 1;
-            edgeXRect = x1 - rectWidth / 2;
-            edgeYRect = (orient === "bottom" ? edgeAt : edgeAt - rectHeight) + dy;
-            edgeXText = x1;
-            edgeYText = (orient === "bottom" ? edgeAt + rectHeight / 2 : edgeAt - rectHeight / 2) + dy;
-        }
-        coordinateBase = {
-            edgeXRect,
-            edgeYRect,
-            rectHeight: rectHeight + strokeWidth,
-            rectWidth,
-            rectRadius,
-            fill,
-            arrowWidth,
-            stroke,
-            strokeWidth,
-        };
-        coordinate = {
-            edgeXText,
-            edgeYText,
-            textAnchor,
-            fontFamily,
-            fontSize,
-            textFill,
-            displayCoordinate,
-        };
-    }
-    const line = hideLine
-        ? undefined
-        : {
-            stroke: lineStroke,
-            strokeDasharray: lineStrokeDasharray,
-            x1,
-            y1,
-            x2,
-            y2,
-        };
-    return {
-        coordinateBase,
-        coordinate,
-        line,
-        orient,
-    };
-};
-export const drawOnCanvas = (ctx, props) => {
-    const { coordinate, fitToText, fontSize, fontFamily, rectWidth } = props;
-    ctx.font = `${fontSize}px ${fontFamily}`;
-    ctx.textBaseline = "middle";
-    let width = rectWidth;
-    if (fitToText) {
-        width = Math.round(ctx.measureText(coordinate).width + 10);
-    }
-    const edge = helper(Object.assign(Object.assign({}, props), { rectWidth: width }));
-    if (edge === null) {
-        return;
-    }
-    if (edge.line !== undefined && isDefined(edge.line)) {
-        const dashArray = getStrokeDasharrayCanvas(edge.line.strokeDasharray);
-        ctx.setLineDash(dashArray);
-        ctx.strokeStyle = edge.line.stroke;
-        ctx.lineWidth = 1;
-        ctx.beginPath();
-        ctx.moveTo(edge.line.x1, edge.line.y1);
-        ctx.lineTo(edge.line.x2, edge.line.y2);
-        ctx.stroke();
-    }
-    ctx.setLineDash([]);
-    if (edge.coordinateBase !== undefined) {
-        const { arrowWidth, rectWidth, rectHeight, rectRadius } = edge.coordinateBase;
-        ctx.fillStyle = edge.coordinateBase.fill;
-        if (edge.coordinateBase.stroke !== undefined) {
-            ctx.strokeStyle = edge.coordinateBase.stroke;
-            ctx.lineWidth = edge.coordinateBase.strokeWidth;
-        }
-        let x = edge.coordinateBase.edgeXRect;
-        const y = edge.coordinateBase.edgeYRect;
-        const halfHeight = rectHeight / 2;
-        ctx.beginPath();
-        if (arrowWidth > 0 && edge.orient === "right") {
-            x -= arrowWidth;
-            ctx.moveTo(x, y + halfHeight);
-            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 (arrowWidth > 0 && edge.orient === "left") {
-            ctx.moveTo(x, y);
-            ctx.lineTo(x + rectWidth, y);
-            ctx.lineTo(x + rectWidth + arrowWidth, y + halfHeight);
-            ctx.lineTo(x + rectWidth, y + rectHeight);
-            ctx.lineTo(x, y + rectHeight);
-            ctx.closePath();
-        }
-        else if (rectRadius) {
-            roundRect(ctx, x - 0.5, y - 0.5, rectWidth, rectHeight, 3);
-        }
-        else {
-            ctx.rect(x - 0.5, y, rectWidth, rectHeight);
-        }
-        ctx.fill();
-        if (edge.coordinateBase.stroke !== undefined) {
-            ctx.stroke();
-        }
-        if (edge.coordinate !== undefined) {
-            ctx.fillStyle = edge.coordinate.textFill;
-            ctx.textAlign =
-                edge.coordinate.textAnchor === "middle" ? "center" : edge.coordinate.textAnchor;
-            ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
-        }
-    }
-};
-const roundRect = (ctx, x, y, width, height, radius) => {
-    ctx.beginPath();
-    ctx.moveTo(x + radius, y);
-    ctx.lineTo(x + width - radius, y);
-    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
-    ctx.lineTo(x + width, y + height - radius);
-    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
-    ctx.lineTo(x + radius, y + height);
-    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
-    ctx.lineTo(x, y + radius);
-    ctx.quadraticCurveTo(x, y, x + radius, y);
-    ctx.closePath();
-};
+import * as React from "react";
+import { getStrokeDasharray, getStrokeDasharrayCanvas, isDefined } from "@tradingaction/core";
+export const renderSVG = (props) => {
+    const { className } = props;
+    const edge = helper(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, strokeDasharray: getStrokeDasharray(edge.line.strokeDasharray), 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", { key: 1, transform: `translate(${edge.coordinateBase.edgeXRect},${edge.coordinateBase.edgeYRect})` },
+                React.createElement("path", { d: path, className: "react-financial-charts-text-background", height: rectHeight, width: rectWidth, stroke: edge.coordinateBase.stroke, strokeLinejoin: "miter", strokeWidth: edge.coordinateBase.strokeWidth, 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));
+};
+const helper = (props) => {
+    const { coordinate: displayCoordinate, show, type, orient, edgeAt, hideLine, lineStrokeDasharray, fill, fontFamily, fontSize, textFill, lineStroke, stroke, strokeWidth, arrowWidth, rectWidth, rectHeight, rectRadius, x1, y1, x2, y2, dx, } = props;
+    if (!show) {
+        return null;
+    }
+    let coordinateBase;
+    let coordinate;
+    if (displayCoordinate !== undefined) {
+        const textAnchor = "middle";
+        let edgeXRect;
+        let edgeYRect;
+        let edgeXText;
+        let edgeYText;
+        if (type === "horizontal") {
+            edgeXRect = dx + (orient === "right" ? edgeAt + 1 : edgeAt - rectWidth - 1);
+            edgeYRect = y1 - rectHeight / 2 - strokeWidth;
+            edgeXText = dx + (orient === "right" ? edgeAt + rectWidth / 2 : edgeAt - rectWidth / 2);
+            edgeYText = y1;
+        }
+        else {
+            const dy = orient === "bottom" ? strokeWidth - 1 : -strokeWidth + 1;
+            edgeXRect = x1 - rectWidth / 2;
+            edgeYRect = (orient === "bottom" ? edgeAt : edgeAt - rectHeight) + dy;
+            edgeXText = x1;
+            edgeYText = (orient === "bottom" ? edgeAt + rectHeight / 2 : edgeAt - rectHeight / 2) + dy;
+        }
+        coordinateBase = {
+            edgeXRect,
+            edgeYRect,
+            rectHeight: rectHeight + strokeWidth,
+            rectWidth,
+            rectRadius,
+            fill,
+            arrowWidth,
+            stroke,
+            strokeWidth,
+        };
+        coordinate = {
+            edgeXText,
+            edgeYText,
+            textAnchor,
+            fontFamily,
+            fontSize,
+            textFill,
+            displayCoordinate,
+        };
+    }
+    const line = hideLine
+        ? undefined
+        : {
+            stroke: lineStroke,
+            strokeDasharray: lineStrokeDasharray,
+            x1,
+            y1,
+            x2,
+            y2,
+        };
+    return {
+        coordinateBase,
+        coordinate,
+        line,
+        orient,
+    };
+};
+export const drawOnCanvas = (ctx, props) => {
+    const { coordinate, fitToText, fontSize, fontFamily, rectWidth } = props;
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.textBaseline = "middle";
+    let width = rectWidth;
+    if (fitToText) {
+        width = Math.round(ctx.measureText(coordinate).width + 10);
+    }
+    const edge = helper(Object.assign(Object.assign({}, props), { rectWidth: width }));
+    if (edge === null) {
+        return;
+    }
+    if (edge.line !== undefined && isDefined(edge.line)) {
+        const dashArray = getStrokeDasharrayCanvas(edge.line.strokeDasharray);
+        ctx.setLineDash(dashArray);
+        ctx.strokeStyle = edge.line.stroke;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(edge.line.x1, edge.line.y1);
+        ctx.lineTo(edge.line.x2, edge.line.y2);
+        ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    if (edge.coordinateBase !== undefined) {
+        const { arrowWidth, rectWidth, rectHeight, rectRadius } = edge.coordinateBase;
+        ctx.fillStyle = edge.coordinateBase.fill;
+        if (edge.coordinateBase.stroke !== undefined) {
+            ctx.strokeStyle = edge.coordinateBase.stroke;
+            ctx.lineWidth = edge.coordinateBase.strokeWidth;
+        }
+        let x = edge.coordinateBase.edgeXRect;
+        const y = edge.coordinateBase.edgeYRect;
+        const halfHeight = rectHeight / 2;
+        ctx.beginPath();
+        if (arrowWidth > 0 && edge.orient === "right") {
+            x -= arrowWidth;
+            ctx.moveTo(x, y + halfHeight);
+            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 (arrowWidth > 0 && edge.orient === "left") {
+            ctx.moveTo(x, y);
+            ctx.lineTo(x + rectWidth, y);
+            ctx.lineTo(x + rectWidth + arrowWidth, y + halfHeight);
+            ctx.lineTo(x + rectWidth, y + rectHeight);
+            ctx.lineTo(x, y + rectHeight);
+            ctx.closePath();
+        }
+        else if (rectRadius) {
+            roundRect(ctx, x - 0.5, y - 0.5, rectWidth, rectHeight, 3);
+        }
+        else {
+            ctx.rect(x - 0.5, y, rectWidth, rectHeight);
+        }
+        ctx.fill();
+        if (edge.coordinateBase.stroke !== undefined) {
+            ctx.stroke();
+        }
+        if (edge.coordinate !== undefined) {
+            ctx.fillStyle = edge.coordinate.textFill;
+            ctx.textAlign =
+                edge.coordinate.textAnchor === "middle" ? "center" : edge.coordinate.textAnchor;
+            ctx.fillText(edge.coordinate.displayCoordinate, edge.coordinate.edgeXText, edge.coordinate.edgeYText);
+        }
+    }
+};
+const roundRect = (ctx, x, y, width, height, radius) => {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+};
 //# sourceMappingURL=EdgeCoordinateV3.js.map