@idraw/core 0.4.2 → 1.0.0-alpha.1

package/dist/esm/middlewares/path-creator/static.js

@@ -0,0 +1,49 @@
+import { createId, getMiddlewareValidStyles } from '@idraw/util';
+export const key = 'PATH-CREATOR';
+const prefix = `idraw-middleware-path-creator`;
+export const getRootClassName = () => `${prefix}-${createId()}`;
+export const classNameMap = {
+    hide: `${prefix}-hide`,
+    anchor: `${prefix}-anchor`,
+    director: `${prefix}-director`,
+    directorLines: `${prefix}-director-lines`,
+    pathLine: `${prefix}-path-line`,
+    selected: `${prefix}-selected`,
+};
+export const ATTR_X = `data-x`;
+export const ATTR_Y = `data-y`;
+export const ATTR_ANGLE = `data-angle`;
+export const ATTR_TYPE = `data-type`;
+export const ATTR_HELPER_TYPE = `data-helper-type`;
+export const ATTR_AHCHOR_CMD_TYPE = `data-anchor-cmd-type`;
+export const ATTR_AHCHOR_INDEX = `data-anchor-index`;
+export const ATTR_AHCHOR_ID = `data-anchor-id`;
+export const HELPER_ROOT = 'root';
+export const HELPER_ANCHOR = 'anchor';
+export const defaultConfig = {
+    anchorSize: 8,
+    anchorBorderWidth: 2,
+    anchorBorderColor: '#157ed1',
+    anchorBackground: '#ffffff',
+    anchorHoverBorderColor: '#1671b8',
+    anchorHoverBackground: '#cfe4f4',
+    anchorActiveBorderColor: '#0d548c',
+    anchorActiveBackground: '#88c0ec',
+    defaultStroke: '#a0a0a0',
+    defaultStrokeWidth: 2,
+};
+export function getMiddlewarePathCreatorStyles(config) {
+    const styles = getMiddlewareValidStyles(config, [
+        'anchorSize',
+        'anchorBorderWidth',
+        'anchorBorderColor',
+        'anchorBackground',
+        'anchorHoverBorderColor',
+        'anchorHoverBackground',
+        'anchorActiveBorderColor',
+        'anchorActiveBackground',
+        'defaultStroke',
+        'defaultStrokeWidth',
+    ]);
+    return styles;
+}

package/dist/esm/middlewares/path-creator/types.d.ts

@@ -0,0 +1 @@
+export type PathSharedStorage = {};

package/dist/esm/middlewares/path-editor/calc.d.ts

@@ -0,0 +1,6 @@
+export declare function calcVisibleBBoxOfPath(path: SVGPathElement): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};

package/dist/esm/middlewares/path-editor/calc.js

@@ -0,0 +1,51 @@
+export function calcVisibleBBoxOfPath(path) {
+    const svg = path.ownerSVGElement;
+    if (!svg) {
+        throw new Error('The path is not inside an <svg> element.');
+    }
+    try {
+        const fancyBBox = path.getBBox({ stroke: true, fill: false, markers: true, clipped: true });
+        if (fancyBBox && Number.isFinite(fancyBBox.width) && Number.isFinite(fancyBBox.height)) {
+            return {
+                x: fancyBBox.x,
+                y: fancyBBox.y,
+                width: fancyBBox.width,
+                height: fancyBBox.height,
+            };
+        }
+    }
+    catch (_a) {
+    }
+    const ctm = svg.getScreenCTM();
+    if (!ctm)
+        throw new Error('Failed to get screen CTM from the <svg>.');
+    const inv = ctm.inverse();
+    const rect = path.getBoundingClientRect();
+    const corners = [
+        { x: rect.left, y: rect.top },
+        { x: rect.right, y: rect.top },
+        { x: rect.right, y: rect.bottom },
+        { x: rect.left, y: rect.bottom },
+    ];
+    const svgPoint = svg.createSVGPoint();
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const c of corners) {
+        svgPoint.x = c.x;
+        svgPoint.y = c.y;
+        const p = svgPoint.matrixTransform(inv);
+        if (p.x < minX)
+            minX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+}

package/dist/esm/middlewares/path-editor/dom.d.ts

@@ -0,0 +1,32 @@
+import type { StrictMaterial, ViewScaleInfo, ViewCalculator, MiddlewarePathEditorStyles } from '@idraw/types';
+import type { Directioner, AnchorInfo, DirectorInfo } from './types';
+export declare function initStyles(rootClassName: string, styles: MiddlewarePathEditorStyles): void;
+export declare function destroyStyles(rootClassName: string): void;
+export declare function initRoot(container: HTMLElement, opts: {
+    id: string;
+    rootClassName: string;
+}): HTMLDivElement | undefined;
+export declare const getAnchorHandlerInfo: (handler: HTMLElement) => AnchorInfo;
+export declare const getDirectorHandlerInfo: (handler: HTMLElement) => DirectorInfo;
+export declare const resetRoot: (root: HTMLElement | null, opts: {
+    material: StrictMaterial<"path"> | null;
+    calculator: ViewCalculator;
+    viewScaleInfo: ViewScaleInfo;
+    groupQueue: StrictMaterial<"group">[];
+    styles: MiddlewarePathEditorStyles;
+}) => void;
+export declare const resetAnchorStyle: (root: HTMLElement | null, opts: {
+    selectedAnchorId?: string;
+    material: StrictMaterial<"path"> | null;
+    viewScaleInfo: ViewScaleInfo;
+    calculator: ViewCalculator;
+    styles: MiddlewarePathEditorStyles;
+}) => void;
+export declare const clearDirectioner: (root: HTMLElement | null) => void;
+export declare const resetDirectionerStyle: (root: HTMLElement, opts: {
+    selectedAnchorId: string;
+    currentDirector: Directioner | null;
+    prevDirector: Directioner | null;
+    styles: MiddlewarePathEditorStyles;
+}) => void;
+export declare function calcPathSize(root: HTMLElement | null): null | undefined;