@idraw/util 0.4.3 → 1.0.0-alpha.1

package/dist/esm/tool/image.js

@@ -5,23 +5,23 @@ export function compressImage(src, opts) {
         radio = opts === null || opts === void 0 ? void 0 : opts.radio;
     }
     return new Promise((resolve, reject) => {
-        const image = new Image();
-        image.addEventListener('load', () => {
-            const { width, height } = image;
+        const img = new Image();
+        img.addEventListener('load', () => {
+            const { width, height } = img;
             const resultW = width * radio;
             const resultH = height * radio;
             let canvas = document.createElement('canvas');
             canvas.width = resultW;
             canvas.height = resultH;
             const ctx = canvas.getContext('2d');
-            ctx.drawImage(image, 0, 0, resultW, resultH);
+            ctx.drawImage(img, 0, 0, resultW, resultH);
             const base64 = canvas.toDataURL(type);
             canvas = null;
             resolve(base64);
         });
-        image.addEventListener('error', (err) => {
+        img.addEventListener('error', (err) => {
             reject(err);
         });
-        image.src = src;
+        img.src = src;
     });
 }

package/dist/esm/tool/path-to-box.d.ts

@@ -0,0 +1,3 @@
+import type { BoundingBox, PathCommand } from '@idraw/types';
+export declare function calcPathCommondsBoundingBox(commands: PathCommand[]): BoundingBox;
+export declare function calcSVGPathBoundingBox(pathData: string): BoundingBox;

package/dist/esm/tool/path-to-box.js

@@ -0,0 +1,353 @@
+import { parseSVGPath } from './svg-path';
+export function calcPathCommondsBoundingBox(commands) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let currentPoint = { x: 0, y: 0 };
+    let startPoint = { x: 0, y: 0 };
+    let lastControlPoint = null;
+    const updateBBox = (point) => {
+        minX = Math.min(minX, point.x);
+        minY = Math.min(minY, point.y);
+        maxX = Math.max(maxX, point.x);
+        maxY = Math.max(maxY, point.y);
+    };
+    for (const cmd of commands) {
+        const { type, params } = cmd;
+        const isRelative = type === type.toLowerCase();
+        switch (type.toLowerCase()) {
+            case 'm':
+                if (params.length >= 2) {
+                    for (let i = 0; i < params.length; i += 2) {
+                        let x = params[i];
+                        let y = params[i + 1];
+                        if (isRelative) {
+                            x += currentPoint.x;
+                            y += currentPoint.y;
+                        }
+                        if (i === 0) {
+                            startPoint = { x, y };
+                        }
+                        currentPoint = { x, y };
+                        updateBBox(currentPoint);
+                    }
+                }
+                lastControlPoint = null;
+                break;
+            case 'l':
+                if (params.length >= 2) {
+                    for (let i = 0; i < params.length; i += 2) {
+                        let x = params[i];
+                        let y = params[i + 1];
+                        if (isRelative) {
+                            x += currentPoint.x;
+                            y += currentPoint.y;
+                        }
+                        currentPoint = { x, y };
+                        updateBBox(currentPoint);
+                    }
+                }
+                lastControlPoint = null;
+                break;
+            case 'h':
+                for (let i = 0; i < params.length; i++) {
+                    let x = params[i];
+                    if (isRelative) {
+                        x += currentPoint.x;
+                    }
+                    currentPoint = { x, y: currentPoint.y };
+                    updateBBox(currentPoint);
+                }
+                lastControlPoint = null;
+                break;
+            case 'v':
+                for (let i = 0; i < params.length; i++) {
+                    let y = params[i];
+                    if (isRelative) {
+                        y += currentPoint.y;
+                    }
+                    currentPoint = { x: currentPoint.x, y };
+                    updateBBox(currentPoint);
+                }
+                lastControlPoint = null;
+                break;
+            case 'c':
+                if (params.length >= 6) {
+                    for (let i = 0; i < params.length; i += 6) {
+                        let cp1x = params[i];
+                        let cp1y = params[i + 1];
+                        let cp2x = params[i + 2];
+                        let cp2y = params[i + 3];
+                        let x = params[i + 4];
+                        let y = params[i + 5];
+                        if (isRelative) {
+                            cp1x += currentPoint.x;
+                            cp1y += currentPoint.y;
+                            cp2x += currentPoint.x;
+                            cp2y += currentPoint.y;
+                            x += currentPoint.x;
+                            y += currentPoint.y;
+                        }
+                        lastControlPoint = { x: cp2x, y: cp2y };
+                        const curvePoints = getCubicBezierExtremes(currentPoint.x, currentPoint.y, cp1x, cp1y, cp2x, cp2y, x, y);
+                        curvePoints.forEach(updateBBox);
+                        updateBBox({ x, y });
+                        currentPoint = { x, y };
+                    }
+                }
+                break;
+            case 's':
+                if (params.length >= 4) {
+                    for (let i = 0; i < params.length; i += 4) {
+                        let cp2x = params[i];
+                        let cp2y = params[i + 1];
+                        let x = params[i + 2];
+                        let y = params[i + 3];
+                        const cp1x = lastControlPoint ? 2 * currentPoint.x - lastControlPoint.x : currentPoint.x;
+                        const cp1y = lastControlPoint ? 2 * currentPoint.y - lastControlPoint.y : currentPoint.y;
+                        if (isRelative) {
+                            cp2x += currentPoint.x;
+                            cp2y += currentPoint.y;
+                            x += currentPoint.x;
+                            y += currentPoint.y;
+                        }
+                        lastControlPoint = { x: cp2x, y: cp2y };
+                        const curvePoints = getCubicBezierExtremes(currentPoint.x, currentPoint.y, cp1x, cp1y, cp2x, cp2y, x, y);
+                        curvePoints.forEach(updateBBox);
+                        updateBBox({ x, y });
+                        currentPoint = { x, y };
+                    }
+                }
+                break;
+            case 'q':
+                if (params.length >= 4) {
+                    for (let i = 0; i < params.length; i += 4) {
+                        let cpx = params[i];
+                        let cpy = params[i + 1];
+                        let x = params[i + 2];
+                        let y = params[i + 3];
+                        if (isRelative) {
+                            cpx += currentPoint.x;
+                            cpy += currentPoint.y;
+                            x += currentPoint.x;
+                            y += currentPoint.y;
+                        }
+                        lastControlPoint = { x: cpx, y: cpy };
+                        const curvePoints = getQuadraticBezierExtremes(currentPoint.x, currentPoint.y, cpx, cpy, x, y);
+                        curvePoints.forEach(updateBBox);
+                        updateBBox({ x, y });
+                        currentPoint = { x, y };
+                    }
+                }
+                break;
+            case 't':
+                if (params.length >= 2) {
+                    for (let i = 0; i < params.length; i += 2) {
+                        let x = params[i];
+                        let y = params[i + 1];
+                        const cpx = lastControlPoint ? 2 * currentPoint.x - lastControlPoint.x : currentPoint.x;
+                        const cpy = lastControlPoint ? 2 * currentPoint.y - lastControlPoint.y : currentPoint.y;
+                        if (isRelative) {
+                            x += currentPoint.x;
+                            y += currentPoint.y;
+                        }
+                        lastControlPoint = { x: cpx, y: cpy };
+                        const curvePoints = getQuadraticBezierExtremes(currentPoint.x, currentPoint.y, cpx, cpy, x, y);
+                        curvePoints.forEach(updateBBox);
+                        updateBBox({ x, y });
+                        currentPoint = { x, y };
+                    }
+                }
+                break;
+            case 'a':
+                if (params.length >= 7) {
+                    for (let i = 0; i < params.length; i += 7) {
+                        const rx = Math.abs(params[i]);
+                        const ry = Math.abs(params[i + 1]);
+                        const xAxisRotation = params[i + 2];
+                        const largeArcFlag = params[i + 3];
+                        const sweepFlag = params[i + 4];
+                        let x = params[i + 5];
+                        let y = params[i + 6];
+                        if (isRelative) {
+                            x += currentPoint.x;
+                            y += currentPoint.y;
+                        }
+                        const arcPoints = getArcPoints(currentPoint.x, currentPoint.y, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x, y);
+                        arcPoints.forEach(updateBBox);
+                        currentPoint = { x, y };
+                        lastControlPoint = null;
+                    }
+                }
+                break;
+            case 'z':
+                currentPoint = Object.assign({}, startPoint);
+                updateBBox(currentPoint);
+                lastControlPoint = null;
+                break;
+        }
+    }
+    if (minX === Infinity) {
+        minX = minY = maxX = maxY = 0;
+    }
+    const width = maxX - minX;
+    const height = maxY - minY;
+    return {
+        minX,
+        minY,
+        maxX,
+        maxY,
+        width,
+        height,
+        start: { x: minX, y: minY },
+        end: { x: maxX, y: maxY },
+    };
+}
+export function calcSVGPathBoundingBox(pathData) {
+    const commands = parseSVGPath(pathData);
+    return calcPathCommondsBoundingBox(commands);
+}
+function getCubicBezierExtremes(x0, y0, x1, y1, x2, y2, x3, y3) {
+    const points = [];
+    points.push({ x: x0, y: y0 });
+    points.push({ x: x3, y: y3 });
+    const a = 3 * (-x0 + 3 * x1 - 3 * x2 + x3);
+    const b = 6 * (x0 - 2 * x1 + x2);
+    const c = 3 * (x1 - x0);
+    const tValuesX = solveQuadratic(a, b, c);
+    for (const t of tValuesX) {
+        if (t > 0 && t < 1) {
+            const x = cubicBezierValue(t, x0, x1, x2, x3);
+            const y = cubicBezierValue(t, y0, y1, y2, y3);
+            points.push({ x, y });
+        }
+    }
+    const d = 3 * (-y0 + 3 * y1 - 3 * y2 + y3);
+    const e = 6 * (y0 - 2 * y1 + y2);
+    const f = 3 * (y1 - y0);
+    const tValuesY = solveQuadratic(d, e, f);
+    for (const t of tValuesY) {
+        if (t > 0 && t < 1) {
+            const x = cubicBezierValue(t, x0, x1, x2, x3);
+            const y = cubicBezierValue(t, y0, y1, y2, y3);
+            points.push({ x, y });
+        }
+    }
+    return points;
+}
+function getQuadraticBezierExtremes(x0, y0, x1, y1, x2, y2) {
+    const points = [];
+    points.push({ x: x0, y: y0 });
+    points.push({ x: x2, y: y2 });
+    const a = x0 - 2 * x1 + x2;
+    const b = 2 * (x1 - x0);
+    if (a !== 0) {
+        const t = -b / (2 * a);
+        if (t > 0 && t < 1) {
+            const x = quadraticBezierValue(t, x0, x1, x2);
+            const y = quadraticBezierValue(t, y0, y1, y2);
+            points.push({ x, y });
+        }
+    }
+    const c = y0 - 2 * y1 + y2;
+    const d = 2 * (y1 - y0);
+    if (c !== 0) {
+        const t = -d / (2 * c);
+        if (t > 0 && t < 1) {
+            const x = quadraticBezierValue(t, x0, x1, x2);
+            const y = quadraticBezierValue(t, y0, y1, y2);
+            points.push({ x, y });
+        }
+    }
+    return points;
+}
+function getArcPoints(x1, y1, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, x2, y2) {
+    const points = [];
+    const numSegments = 100;
+    const phi = (xAxisRotation * Math.PI) / 180;
+    const cosPhi = Math.cos(phi);
+    const sinPhi = Math.sin(phi);
+    const midX = (x1 + x2) / 2;
+    const midY = (y1 + y2) / 2;
+    const dx = (x1 - x2) / 2;
+    const dy = (y1 - y2) / 2;
+    const x1p = cosPhi * dx + sinPhi * dy;
+    const y1p = -sinPhi * dx + cosPhi * dy;
+    let rxAdjusted = rx;
+    let ryAdjusted = ry;
+    const rxSq = rx * rx;
+    const rySq = ry * ry;
+    const x1pSq = x1p * x1p;
+    const y1pSq = y1p * y1p;
+    const lambda = x1pSq / rxSq + y1pSq / rySq;
+    if (lambda > 1) {
+        rxAdjusted = Math.sqrt(lambda) * rx;
+        ryAdjusted = Math.sqrt(lambda) * ry;
+    }
+    const sign = largeArcFlag === sweepFlag ? -1 : 1;
+    const num = Math.max(0, rxAdjusted * rxAdjusted * ryAdjusted * ryAdjusted -
+        rxAdjusted * rxAdjusted * y1pSq -
+        ryAdjusted * ryAdjusted * x1pSq);
+    const denom = rxAdjusted * rxAdjusted * y1pSq + ryAdjusted * ryAdjusted * x1pSq;
+    let factor = sign * Math.sqrt(num / denom);
+    if (isNaN(factor))
+        factor = 0;
+    const cxp = factor * ((rxAdjusted * y1p) / ryAdjusted);
+    const cyp = factor * ((-ryAdjusted * x1p) / rxAdjusted);
+    const cx = cosPhi * cxp - sinPhi * cyp + midX;
+    const cy = sinPhi * cxp + cosPhi * cyp + midY;
+    const startAngle = Math.atan2((y1p - cyp) / ryAdjusted, (x1p - cxp) / rxAdjusted);
+    const endAngle = Math.atan2((-y1p - cyp) / ryAdjusted, (-x1p - cxp) / rxAdjusted);
+    let sweepAngle = endAngle - startAngle;
+    if (sweepFlag === 0 && sweepAngle > 0) {
+        sweepAngle -= 2 * Math.PI;
+    }
+    else if (sweepFlag === 1 && sweepAngle < 0) {
+        sweepAngle += 2 * Math.PI;
+    }
+    for (let i = 0; i <= numSegments; i++) {
+        const t = i / numSegments;
+        const angle = startAngle + t * sweepAngle;
+        const x = cx + rxAdjusted * Math.cos(angle) * cosPhi - ryAdjusted * Math.sin(angle) * sinPhi;
+        const y = cy + rxAdjusted * Math.cos(angle) * sinPhi + ryAdjusted * Math.sin(angle) * cosPhi;
+        points.push({ x, y });
+    }
+    return points;
+}
+function solveQuadratic(a, b, c) {
+    const solutions = [];
+    if (a === 0) {
+        if (b !== 0) {
+            const solution = -c / b;
+            if (solution >= 0 && solution <= 1) {
+                solutions.push(solution);
+            }
+        }
+        return solutions;
+    }
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant > 0) {
+        const sqrtDiscriminant = Math.sqrt(discriminant);
+        const solution1 = (-b + sqrtDiscriminant) / (2 * a);
+        const solution2 = (-b - sqrtDiscriminant) / (2 * a);
+        if (solution1 >= 0 && solution1 <= 1)
+            solutions.push(solution1);
+        if (solution2 >= 0 && solution2 <= 1)
+            solutions.push(solution2);
+    }
+    else if (discriminant === 0) {
+        const solution = -b / (2 * a);
+        if (solution >= 0 && solution <= 1)
+            solutions.push(solution);
+    }
+    return solutions;
+}
+function cubicBezierValue(t, p0, p1, p2, p3) {
+    const mt = 1 - t;
+    return mt * mt * mt * p0 + 3 * mt * mt * t * p1 + 3 * mt * t * t * p2 + t * t * t * p3;
+}
+function quadraticBezierValue(t, p0, p1, p2) {
+    const mt = 1 - t;
+    return mt * mt * p0 + 2 * mt * t * p1 + t * t * p2;
+}

package/dist/esm/tool/path-to-command.d.ts

@@ -0,0 +1,4 @@
+import { PathCommand, Context2DCommand } from '@idraw/types';
+export declare function convertSVGPathToContext2DCommands(d: string): Context2DCommand[];
+export declare function convertPathCommandsToContext2DCommands(svgPathCmds: PathCommand[]): Context2DCommand[];
+export declare function convertContext2DCommandsToSVGPath(cmds: Context2DCommand[]): string;