@plait/common 0.1.0-next.1 → 0.1.0-next.10

package/fesm2022/plait-common.mjs

@@ -0,0 +1,840 @@
+import { createG, RectangleClient, drawRectangle, drawCircle, PlaitBoard, createForeignObject, updateForeignObject, getSelectedElements, PlaitElement, Transforms, PlaitPointerType, isMainPointer, transformPoint, toPoint, preventTouchMove, distanceBetweenPointAndPoint, PRESS_AND_MOVE_BUFFER, throttleRAF, handleTouchTarget, MERGING, Direction, hotkeys, PlaitContextService, PlaitPluginElementComponent, isSelectionMoving, ACTIVE_STROKE_WIDTH } from '@plait/core';
+import { isKeyHotkey } from 'is-hotkey';
+import * as i0 from '@angular/core';
+import { Directive, Input } from '@angular/core';
+
+const BASE = 4;
+const PRIMARY_COLOR = '#6698FF';
+const RESIZE_HANDLE_DIAMETER = 8;
+const WithTextPluginKey = 'plait-text-plugin-key';
+
+var MediaKeys;
+(function (MediaKeys) {
+    MediaKeys["image"] = "image";
+})(MediaKeys || (MediaKeys = {}));
+const PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
+const acceptImageTypes = ['png', 'jpeg', 'gif', 'bmp'];
+const WithCommonPluginKey = 'plait-common-plugin-key';
+
+var ResizeCursorClass;
+(function (ResizeCursorClass) {
+    ResizeCursorClass["ew"] = "ew-resize";
+    ResizeCursorClass["ns"] = "ns-resize";
+    ResizeCursorClass["nesw"] = "nesw-resize";
+    ResizeCursorClass["nwse"] = "nwse-resize";
+})(ResizeCursorClass || (ResizeCursorClass = {}));
+var ResizeHandle;
+(function (ResizeHandle) {
+    ResizeHandle["ne"] = "ne";
+    ResizeHandle["n"] = "n";
+    ResizeHandle["nw"] = "nw";
+    ResizeHandle["e"] = "w";
+    ResizeHandle["se"] = "se";
+    ResizeHandle["s"] = "s";
+    ResizeHandle["sw"] = "sw";
+    ResizeHandle["w"] = "w";
+})(ResizeHandle || (ResizeHandle = {}));
+
+class Generator {
+    constructor(board, options) {
+        this.board = board;
+        this.options = options;
+    }
+    draw(element, parentG, data) {
+        if (this.canDraw && this.canDraw(element, data)) {
+            const g = this.baseDraw(element, data);
+            if (g) {
+                if (this.g) {
+                    this.g.replaceWith(g);
+                }
+                else {
+                    parentG.appendChild(g);
+                }
+                this.g = g;
+            }
+            else {
+                this.destroy();
+            }
+            if (hasAfterDraw(this)) {
+                this.afterDraw(element);
+            }
+        }
+        else {
+            this.destroy();
+        }
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+            this.g = undefined;
+        }
+    }
+}
+function hasAfterDraw(value) {
+    if (value.afterDraw) {
+        return true;
+    }
+    return false;
+}
+
+class ActiveGenerator extends Generator {
+    constructor(board, options) {
+        super(board, options);
+        this.board = board;
+        this.options = options;
+        this.hasResizeHandle = false;
+    }
+    canDraw(element, data) {
+        if (data.selected) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    baseDraw(element, data) {
+        const activeG = createG();
+        const rectangle = this.options.getRectangle(element);
+        const delta = this.options.getStrokeWidth();
+        const activeRectangle = RectangleClient.inflate(rectangle, delta);
+        const strokeG = drawRectangle(this.board, activeRectangle, {
+            stroke: PRIMARY_COLOR,
+            strokeWidth: delta
+        });
+        activeG.append(strokeG);
+        strokeG.style.opacity = `${this.options.getStrokeOpacity()}`;
+        if (this.options.hasResizeHandle()) {
+            this.hasResizeHandle = true;
+            // resize handle
+            const options = { stroke: '#999999', strokeWidth: 1, fill: '#FFF', fillStyle: 'solid' };
+            const leftTopHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x, activeRectangle.y], RESIZE_HANDLE_DIAMETER, options);
+            const rightTopHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x + activeRectangle.width, activeRectangle.y], RESIZE_HANDLE_DIAMETER, options);
+            const rightBottomHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x + activeRectangle.width, activeRectangle.y + activeRectangle.height], RESIZE_HANDLE_DIAMETER, options);
+            const leftBottomHandleG = drawCircle(PlaitBoard.getRoughSVG(this.board), [activeRectangle.x, activeRectangle.y + activeRectangle.height], RESIZE_HANDLE_DIAMETER, options);
+            activeG.append(...[leftTopHandleG, rightTopHandleG, rightBottomHandleG, leftBottomHandleG]);
+        }
+        else {
+            this.hasResizeHandle = false;
+        }
+        return activeG;
+    }
+}
+
+class ImageGenerator extends Generator {
+    constructor(board, options) {
+        super(board, options);
+        this.board = board;
+        this.options = options;
+    }
+    canDraw(element, data) {
+        return !!this.options.getImageItem(element);
+    }
+    baseDraw(element, viewContainerRef) {
+        const g = createG();
+        const foreignRectangle = this.options.getRectangle(element);
+        this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+        g.append(this.foreignObject);
+        const componentType = this.board.getPluginOptions(WithCommonPluginKey)
+            .imageComponentType;
+        if (!componentType) {
+            throw new Error('Not implement ImageBaseComponent error.');
+        }
+        this.componentRef = viewContainerRef.createComponent(componentType);
+        this.componentRef.instance.board = this.board;
+        this.componentRef.instance.imageItem = this.options.getImageItem(element);
+        this.componentRef.instance.element = element;
+        this.componentRef.instance.getRectangle = () => {
+            return this.options.getRectangle(element);
+        };
+        this.componentRef.instance.cdr.markForCheck();
+        this.foreignObject.append(this.componentRef.instance.nativeElement);
+        return g;
+    }
+    updateImage(nodeG, previous, current) {
+        if (previous !== current && this.componentRef) {
+            this.componentRef.instance.imageItem = this.options.getImageItem(current);
+            this.componentRef.instance.getRectangle = () => {
+                return this.options.getRectangle(current);
+            };
+        }
+        const currentForeignObject = this.options.getRectangle(current);
+        updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
+        // solve image lose on move node
+        if (this.foreignObject.children.length === 0) {
+            this.foreignObject.append(this.componentRef.instance.nativeElement);
+        }
+        this.componentRef?.instance.cdr.markForCheck();
+    }
+    destroy() {
+        super.destroy();
+        this.componentRef?.destroy();
+    }
+}
+
+const setProperty = (board, options, callback) => {
+    const selectedElements = getSelectedElements(board);
+    selectedElements.forEach(element => {
+        const path = PlaitBoard.findPath(board, element);
+        if (callback) {
+            const component = PlaitElement.getComponent(element);
+            callback(component, path);
+        }
+        else {
+            Transforms.setNode(board, options, path);
+        }
+    });
+};
+
+const setStrokeStyle = (board, strokeStyle) => {
+    setProperty(board, { strokeStyle });
+};
+const setFillColor = (board, fill) => {
+    setProperty(board, { fill });
+};
+const setStrokeColor = (board, strokeColor) => {
+    setProperty(board, { strokeColor });
+};
+const setStrokeWidth = (board, strokeWidth) => {
+    setProperty(board, { strokeWidth });
+};
+const PropertyTransforms = {
+    setFillColor,
+    setStrokeStyle,
+    setProperty,
+    setStrokeWidth,
+    setStrokeColor
+};
+
+const normalizeShapePoints = (points, shift = false) => {
+    let start = points[0];
+    let end = points[1];
+    if (shift) {
+        const width = Math.abs(start[0] - end[0]);
+        const height = Math.abs(start[1] - end[1]);
+        const edge = Math.max(height, width);
+        end = [start[0] + (end[0] > start[0] ? edge : -edge), start[1] + (end[1] > start[1] ? edge : -edge)];
+    }
+    const leftTopPoint = [Math.min(start[0], end[0]), Math.min(start[1], end[1])];
+    let rightBottomPoint = [Math.max(start[0], end[0]), Math.max(start[1], end[1])];
+    return [leftTopPoint, rightBottomPoint];
+};
+
+const getResizeHandleByIndex = (index) => {
+    switch (index) {
+        case 0:
+            return ResizeHandle.nw;
+        case 1:
+            return ResizeHandle.ne;
+        case 2:
+            return ResizeHandle.se;
+        case 3:
+            return ResizeHandle.sw;
+        default:
+            return null;
+    }
+};
+const getResizeCursorClassByIndex = (index) => {
+    switch (index) {
+        case 0:
+            return ResizeCursorClass.nwse;
+        case 1:
+            return ResizeCursorClass.nesw;
+        case 2:
+            return ResizeCursorClass.nwse;
+        case 3:
+            return ResizeCursorClass.nesw;
+        default:
+            return null;
+    }
+};
+const getRectangleResizeHandleRefs = (rectangle, diameter) => {
+    const centers = RectangleClient.getCornerPoints(rectangle);
+    return centers.map((center, index) => {
+        return {
+            rectangle: {
+                x: center[0] - diameter / 2,
+                y: center[1] - diameter / 2,
+                width: diameter,
+                height: diameter
+            },
+            handle: getResizeHandleByIndex(index),
+            cursorClass: getResizeCursorClassByIndex(index)
+        };
+    });
+};
+const IS_RESIZING = new WeakMap();
+const isResizing = (board) => {
+    return !!IS_RESIZING.get(board);
+};
+const isResizingByCondition = (board, match) => {
+    return isResizing(board) && match(IS_RESIZING.get(board));
+};
+const addResizing = (board, resizeRef, key) => {
+    PlaitBoard.getBoardContainer(board).classList.add(`${key}-resizing`);
+    IS_RESIZING.set(board, resizeRef);
+};
+const removeResizing = (board, key) => {
+    PlaitBoard.getBoardContainer(board).classList.remove(`${key}-resizing`);
+    IS_RESIZING.delete(board);
+};
+
+const generalCanResize = (board, event) => {
+    return (PlaitBoard.isReadonly(board) ||
+        PlaitBoard.hasBeenTextEditing(board) ||
+        !PlaitBoard.isPointer(board, PlaitPointerType.hand) ||
+        !isMainPointer(event));
+};
+const withResize = (board, options) => {
+    const { pointerDown, pointerMove, globalPointerUp } = board;
+    let resizeDetectResult = null;
+    let resizeRef = null;
+    let startPoint = null;
+    let hoveDetectResult = null;
+    board.pointerDown = (event) => {
+        if (!options.canResize() || !generalCanResize(board, event)) {
+            pointerDown(event);
+            return;
+        }
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        resizeDetectResult = options.detect(point);
+        if (resizeDetectResult) {
+            if (resizeDetectResult.cursorClass) {
+                PlaitBoard.getBoardContainer(board).classList.add(`${resizeDetectResult.cursorClass}`);
+            }
+            startPoint = [event.x, event.y];
+            resizeRef = {
+                path: PlaitBoard.findPath(board, resizeDetectResult.element),
+                element: resizeDetectResult.element,
+                handle: resizeDetectResult.handle
+            };
+            preventTouchMove(board, event, true);
+            return;
+        }
+        pointerDown(event);
+    };
+    board.pointerMove = (event) => {
+        if (!options.canResize() || !generalCanResize(board, event)) {
+            pointerMove(event);
+            return;
+        }
+        if (startPoint && resizeDetectResult && !isResizing(board)) {
+            // prevent text from being selected
+            event.preventDefault();
+            const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
+            if (distance > PRESS_AND_MOVE_BUFFER) {
+                addResizing(board, resizeRef, options.key);
+            }
+        }
+        if (isResizing(board) && startPoint) {
+            // prevent text from being selected
+            event.preventDefault();
+            const endTransformPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            throttleRAF(() => {
+                const endPoint = [event.x, event.y];
+                if (startPoint && resizeRef) {
+                    handleTouchTarget(board);
+                    const offsetX = endPoint[0] - startPoint[0];
+                    const offsetY = endPoint[1] - startPoint[1];
+                    options.onResize(resizeRef, { offsetX, offsetY, endTransformPoint });
+                    MERGING.set(board, true);
+                }
+            });
+            return;
+        }
+        else {
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const resizeDetectResult = options.detect(point);
+            if (resizeDetectResult) {
+                hoveDetectResult = resizeDetectResult;
+                if (hoveDetectResult.cursorClass) {
+                    PlaitBoard.getBoardContainer(board).classList.add(`${hoveDetectResult.cursorClass}`);
+                }
+            }
+            else {
+                if (hoveDetectResult) {
+                    if (hoveDetectResult.cursorClass) {
+                        PlaitBoard.getBoardContainer(board).classList.remove(`${hoveDetectResult.cursorClass}`);
+                    }
+                    hoveDetectResult = null;
+                }
+            }
+        }
+        pointerMove(event);
+    };
+    board.globalPointerUp = (event) => {
+        globalPointerUp(event);
+        if (isResizing(board) || resizeDetectResult) {
+            options.endResize && options.endResize(resizeRef);
+            removeResizing(board, options.key);
+            startPoint = null;
+            resizeDetectResult = null;
+            resizeRef = null;
+            MERGING.set(board, false);
+            preventTouchMove(board, event, false);
+        }
+    };
+    return board;
+};
+
+const handleDirectionFactors = {
+    [Direction.left]: { x: -1, y: 0 },
+    [Direction.right]: { x: 1, y: 0 },
+    [Direction.top]: { x: 0, y: -1 },
+    [Direction.bottom]: { x: 0, y: 1 }
+};
+function getDirectionByPointOfRectangle(point) {
+    if (point[0] === 0) {
+        return Direction.left;
+    }
+    if (point[0] === 1) {
+        return Direction.right;
+    }
+    if (point[1] === 0) {
+        return Direction.top;
+    }
+    if (point[1] === 1) {
+        return Direction.bottom;
+    }
+    return undefined;
+}
+/**
+ * this function accepts vector parameter, the vector parameter vector is based on the screen coordinate system
+ * vector[0] and vector[1] are the x and y components of the vector respectively.
+ * if the vector has only one direction, the function returns a string in that direction, such as 'right', 'top', 'bottom' or 'left'.
+ * if the vector has two directions, the function will return the string in which direction it is closer.
+ */
+function getDirectionByVector(vector) {
+    const x = vector[0];
+    const y = vector[1];
+    if (x === 0 && y === 0) {
+        return null;
+    }
+    if (x === 0) {
+        return y > 0 ? Direction.bottom : Direction.top;
+    }
+    if (y === 0) {
+        return x > 0 ? Direction.right : Direction.left;
+    }
+    const angle = Math.atan2(y, x);
+    if (angle > -Math.PI / 4 && angle <= Math.PI / 4) {
+        return Direction.right;
+    }
+    else if (angle > Math.PI / 4 && angle <= (3 * Math.PI) / 4) {
+        return Direction.bottom;
+    }
+    else if (angle > (-3 * Math.PI) / 4 && angle <= -Math.PI / 4) {
+        return Direction.top;
+    }
+    else {
+        return Direction.left;
+    }
+}
+function getPointByVector(point, vector, offset) {
+    const distance = Math.hypot(vector[0], vector[1]);
+    return [point[0] + (vector[0] / distance) * offset, point[1] + (vector[1] / distance) * offset];
+}
+function rotateVectorAnti90(vector) {
+    const x = vector[0];
+    const y = vector[1];
+    const rotatedX = y;
+    const rotatedY = -x;
+    return [rotatedX, rotatedY];
+}
+function getDirectionBetweenPointAndPoint(source, target) {
+    if (source[0] === target[0]) {
+        if (source[1] >= target[1]) {
+            return Direction.top;
+        }
+        else {
+            return Direction.bottom;
+        }
+    }
+    if (source[1] === target[1]) {
+        if (source[0] >= target[0]) {
+            return Direction.left;
+        }
+        else {
+            return Direction.right;
+        }
+    }
+    throw new Error('can not match direction');
+}
+function getDirectionFactor(direction) {
+    return handleDirectionFactors[direction];
+}
+function getFactorByPoints(source, target) {
+    const distance = distanceBetweenPointAndPoint(...source, ...target);
+    return {
+        x: (target[0] - source[0]) / distance,
+        y: (target[1] - source[1]) / distance
+    };
+}
+
+function getOppositeDirection(direction) {
+    switch (direction) {
+        case Direction.left:
+            return Direction.right;
+        case Direction.right:
+            return Direction.left;
+        case Direction.top:
+            return Direction.bottom;
+        case Direction.bottom:
+            return Direction.top;
+    }
+}
+const getPoints = (source, sourcePosition, target, targetPosition, offset) => {
+    const sourceDir = getDirectionFactor(sourcePosition);
+    const targetDir = getDirectionFactor(targetPosition);
+    const sourceGapped = [source[0] + sourceDir.x * offset, source[1] + sourceDir.y * offset];
+    const targetGapped = [target[0] + targetDir.x * offset, target[1] + targetDir.y * offset];
+    const dir = getDirection(sourceGapped, sourcePosition, targetGapped);
+    const dirAccessor = dir.x !== 0 ? 'x' : 'y';
+    const currDir = dir[dirAccessor];
+    let points = [];
+    let centerX, centerY;
+    const [defaultCenterX, defaultCenterY] = getEdgeCenter({
+        sourceX: source[0],
+        sourceY: source[1],
+        targetX: target[0],
+        targetY: target[1]
+    });
+    // opposite handle positions, default case
+    if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+        centerX = defaultCenterX;
+        centerY = defaultCenterY;
+        //    --->
+        //    |
+        // >---
+        const verticalSplit = [
+            [centerX, sourceGapped[1]],
+            [centerX, targetGapped[1]]
+        ];
+        //    |
+        //  ---
+        //  |
+        const horizontalSplit = [
+            [sourceGapped[0], centerY],
+            [targetGapped[0], centerY]
+        ];
+        if (sourceDir[dirAccessor] === currDir) {
+            points = dirAccessor === 'x' ? verticalSplit : horizontalSplit;
+        }
+        else {
+            points = dirAccessor === 'x' ? horizontalSplit : verticalSplit;
+        }
+    }
+    else {
+        // sourceTarget means we take x from source and y from target, targetSource is the opposite
+        const sourceTarget = [[sourceGapped[0], targetGapped[1]]];
+        const targetSource = [[targetGapped[0], sourceGapped[1]]];
+        // this handles edges with same handle positions
+        if (dirAccessor === 'x') {
+            points = sourceDir.x === currDir ? targetSource : sourceTarget;
+        }
+        else {
+            points = sourceDir.y === currDir ? sourceTarget : targetSource;
+        }
+        // these are conditions for handling mixed handle positions like right -> bottom for example
+        let flipSourceTarget;
+        if (sourcePosition !== targetPosition) {
+            const dirAccessorOpposite = dirAccessor === 'x' ? 1 : 0;
+            const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessor === 'x' ? 'y' : 'x'];
+            const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+            const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+            flipSourceTarget =
+                (sourceDir[dirAccessor] === 1 && ((!isSameDir && sourceGtTargetOppo) || (isSameDir && sourceLtTargetOppo))) ||
+                    (sourceDir[dirAccessor] !== 1 && ((!isSameDir && sourceLtTargetOppo) || (isSameDir && sourceGtTargetOppo)));
+            if (flipSourceTarget) {
+                points = dirAccessor === 'x' ? sourceTarget : targetSource;
+            }
+        }
+    }
+    return [source, sourceGapped, ...points, targetGapped, target];
+};
+const getDirection = (source, sourcePosition = Direction.bottom, target) => {
+    if (sourcePosition === Direction.left || sourcePosition === Direction.right) {
+        return source[0] < target[0] ? { x: 1, y: 0 } : { x: -1, y: 0 };
+    }
+    return source[1] < target[1] ? { x: 0, y: 1 } : { x: 0, y: -1 };
+};
+function getEdgeCenter({ sourceX, sourceY, targetX, targetY }) {
+    const xOffset = Math.abs(targetX - sourceX) / 2;
+    const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
+    const yOffset = Math.abs(targetY - sourceY) / 2;
+    const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
+    return [centerX, centerY, xOffset, yOffset];
+}
+function getPointOnPolyline(points, ratio) {
+    const totalLength = calculatePolylineLength(points);
+    const targetDistance = totalLength * ratio;
+    let accumulatedDistance = 0;
+    for (let i = 0; i < points.length - 1; i++) {
+        const [x1, y1] = points[i];
+        const [x2, y2] = points[i + 1];
+        const segmentLength = distanceBetweenPointAndPoint(x1, y1, x2, y2);
+        if (accumulatedDistance + segmentLength >= targetDistance) {
+            const remainingDistance = targetDistance - accumulatedDistance;
+            const ratioInSegment = remainingDistance / segmentLength;
+            const targetX = x1 + (x2 - x1) * ratioInSegment;
+            const targetY = y1 + (y2 - y1) * ratioInSegment;
+            return [targetX, targetY];
+        }
+        accumulatedDistance += segmentLength;
+    }
+    return points[points.length - 1];
+}
+function calculatePolylineLength(points) {
+    let length = 0;
+    for (let i = 0; i < points.length - 1; i++) {
+        const [x1, y1] = points[i];
+        const [x2, y2] = points[i + 1];
+        length += distanceBetweenPointAndPoint(x1, y1, x2, y2);
+    }
+    return length;
+}
+function getRatioByPoint(points, point) {
+    const totalLength = calculatePolylineLength(points);
+    let distance = 0;
+    for (let i = 0; i < points.length - 1; i++) {
+        const isOverlap = isPointOnLineSegment(point, points[i], points[i + 1]);
+        if (isOverlap) {
+            distance += distanceBetweenPointAndPoint(point[0], point[1], points[i][0], points[i][1]);
+            return distance / totalLength;
+        }
+        else {
+            distance += distanceBetweenPointAndPoint(points[i][0], points[i][1], points[i + 1][0], points[i + 1][1]);
+        }
+    }
+    throw new Error('Cannot get ratio by point');
+}
+function isPointOnLineSegment(point, startPoint, endPoint) {
+    const distanceToStart = distanceBetweenPointAndPoint(point[0], point[1], startPoint[0], startPoint[1]);
+    const distanceToEnd = distanceBetweenPointAndPoint(point[0], point[1], endPoint[0], endPoint[1]);
+    const segmentLength = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
+    return Math.abs(distanceToStart + distanceToEnd - segmentLength) < 0.1;
+}
+
+function isVirtualKey(e) {
+    const isMod = e.ctrlKey || e.metaKey;
+    const isAlt = isKeyHotkey('alt', e);
+    const isShift = isKeyHotkey('shift', e);
+    const isCapsLock = e.key.includes('CapsLock');
+    const isTab = e.key.includes('Tab');
+    const isEsc = e.key.includes('Escape');
+    const isF = e.key.startsWith('F');
+    const isArrow = e.key.includes('Arrow') ? true : false;
+    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
+}
+const isExpandHotkey = (event) => {
+    return isKeyHotkey('mod+/', event);
+};
+const isTabHotkey = (event) => {
+    return event.key === 'Tab';
+};
+const isEnterHotkey = (event) => {
+    return event.key === 'Enter';
+};
+const isSpaceHotkey = (event) => {
+    return event.code === 'Space';
+};
+const isDelete = (event) => {
+    return hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event);
+};
+
+const getRectangleByPoints = (points) => {
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    points.forEach(point => {
+        minX = Math.min(point[0], minX);
+        maxX = Math.max(point[0], maxX);
+        minY = Math.min(point[1], minY);
+        maxY = Math.max(point[1], maxY);
+    });
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY
+    };
+};
+
+var BoardCreationMode;
+(function (BoardCreationMode) {
+    BoardCreationMode["dnd"] = "dnd";
+    BoardCreationMode["drawing"] = "drawing";
+})(BoardCreationMode || (BoardCreationMode = {}));
+const BOARD_TO_CREATION_MODE = new WeakMap();
+const getCreationMode = (board) => {
+    return BOARD_TO_CREATION_MODE.get(board);
+};
+const setCreationMode = (board, mode) => {
+    BOARD_TO_CREATION_MODE.set(board, mode);
+};
+const isDndMode = (board) => {
+    return getCreationMode(board) === BoardCreationMode.dnd;
+};
+const isDrawingMode = (board) => {
+    return getCreationMode(board) === BoardCreationMode.drawing;
+};
+
+const getTextManages = (element) => {
+    const component = PlaitElement.getComponent(element);
+    return component.getTextManages();
+};
+const getTextEditors = (element) => {
+    return getTextManages(element).map(manage => {
+        return manage.componentRef.instance.editor;
+    });
+};
+
+const selectImage = (board, defaultImageWidth, handle, acceptImageTypes = ['png', 'jpeg', 'gif', 'bmp']) => {
+    const inputFile = document.createElement('input');
+    inputFile.setAttribute('type', 'file');
+    const acceptImageTypesString = '.' + acceptImageTypes.join(',.');
+    inputFile.setAttribute('accept', acceptImageTypesString);
+    inputFile.onchange = (event) => {
+        buildImage(board, event.target.files[0], defaultImageWidth, handle);
+    };
+    inputFile.click();
+};
+const buildImage = async (board, imageFile, defaultImageWidth, handle) => {
+    let width = 0, height = 0;
+    await getImageSize(imageFile, defaultImageWidth).then((value) => {
+        width = value.width;
+        height = value.height;
+    });
+    let imageItem = null;
+    const url = URL.createObjectURL(imageFile);
+    const context = PlaitBoard.getComponent(board).viewContainerRef.injector.get(PlaitContextService);
+    context.setUploadingFile({ url, file: imageFile });
+    imageItem = {
+        url,
+        width,
+        height
+    };
+    handle(imageItem);
+};
+function getImageSize(file, defaultImageWidth) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.src = URL.createObjectURL(file);
+        image.onload = function () {
+            const width = defaultImageWidth;
+            const height = (defaultImageWidth * image.naturalHeight) / image.naturalWidth;
+            resolve(image.naturalWidth > defaultImageWidth ? { width, height } : { width: image.naturalWidth, height: image.naturalHeight });
+        };
+    });
+}
+
+class CommonPluginElement extends PlaitPluginElementComponent {
+    constructor() {
+        super(...arguments);
+        this.textManages = [];
+    }
+    initializeTextManages(textManages) {
+        this.textManages = textManages;
+    }
+    getTextManages() {
+        return this.textManages;
+    }
+}
+
+class ImageBaseComponent {
+    set imageItem(value) {
+        this.afterImageItemChange(this._imageItem, value);
+        this._imageItem = value;
+        this.drawFocus();
+    }
+    get imageItem() {
+        return this._imageItem;
+    }
+    set isFocus(value) {
+        this._isFocus = value;
+        this.drawFocus();
+    }
+    get isFocus() {
+        return this._isFocus;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.initialized = false;
+    }
+    ngOnInit() {
+        this.activeGenerator = new ActiveGenerator(this.board, {
+            getStrokeWidth: () => {
+                const selectedElements = getSelectedElements(this.board);
+                if (!(selectedElements.length === 1 && !isSelectionMoving(this.board))) {
+                    return ACTIVE_STROKE_WIDTH;
+                }
+                else {
+                    return ACTIVE_STROKE_WIDTH;
+                }
+            },
+            getStrokeOpacity: () => {
+                const selectedElements = getSelectedElements(this.board);
+                if ((selectedElements.length === 1 && !isSelectionMoving(this.board)) || !selectedElements.length) {
+                    return 1;
+                }
+                else {
+                    return 0.5;
+                }
+            },
+            getRectangle: () => {
+                return this.getRectangle();
+            },
+            hasResizeHandle: () => {
+                const selectedElements = getSelectedElements(this.board);
+                return (selectedElements.length === 1 && !isSelectionMoving(this.board)) || !selectedElements.length;
+            }
+        });
+        this.initialized = true;
+    }
+    drawFocus() {
+        if (this.initialized) {
+            const activeG = PlaitBoard.getElementActiveHost(this.board);
+            this.activeGenerator.draw({}, activeG, { selected: this._isFocus });
+        }
+    }
+    ngOnDestroy() {
+        if (this.activeGenerator) {
+            this.activeGenerator.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: ImageBaseComponent, inputs: { element: "element", imageItem: "imageItem", board: "board", isFocus: "isFocus", getRectangle: "getRectangle", hasResizeHandle: "hasResizeHandle" }, host: { classAttribute: "plait-image-container" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: ImageBaseComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'plait-image-container'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { element: [{
+                type: Input
+            }], imageItem: [{
+                type: Input
+            }], board: [{
+                type: Input
+            }], isFocus: [{
+                type: Input
+            }], getRectangle: [{
+                type: Input
+            }], hasResizeHandle: [{
+                type: Input
+            }] } });
+
+/*
+ * Public API Surface of utils
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActiveGenerator, BASE, BoardCreationMode, CommonPluginElement, Generator, IS_RESIZING, ImageBaseComponent, ImageGenerator, MediaKeys, PICTURE_ACCEPTED_UPLOAD_SIZE, PRIMARY_COLOR, PropertyTransforms, RESIZE_HANDLE_DIAMETER, ResizeCursorClass, ResizeHandle, WithCommonPluginKey, WithTextPluginKey, acceptImageTypes, addResizing, buildImage, calculatePolylineLength, getCreationMode, getDirection, getDirectionBetweenPointAndPoint, getDirectionByPointOfRectangle, getDirectionByVector, getDirectionFactor, getEdgeCenter, getFactorByPoints, getOppositeDirection, getPointByVector, getPointOnPolyline, getPoints, getRatioByPoint, getRectangleByPoints, getRectangleResizeHandleRefs, getTextEditors, getTextManages, hasAfterDraw, isDelete, isDndMode, isDrawingMode, isEnterHotkey, isExpandHotkey, isPointOnLineSegment, isResizing, isResizingByCondition, isSpaceHotkey, isTabHotkey, isVirtualKey, normalizeShapePoints, removeResizing, rotateVectorAnti90, selectImage, setCreationMode, withResize };
+//# sourceMappingURL=plait-common.mjs.map