@plait/core 0.0.2

package/fesm2015/plait-core.mjs

@@ -0,0 +1,969 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, HostBinding, ViewChild, Output, NgModule } from '@angular/core';
+import produce, { createDraft, finishDraft, isDraft } from 'immer';
+import { Subject, fromEvent } from 'rxjs';
+import { takeUntil, filter } from 'rxjs/operators';
+import rough from 'roughjs/bin/rough';
+import * as i2 from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+import { isKeyHotkey } from 'is-hotkey';
+
+// record richtext type status
+const FLUSHING = new WeakMap();
+const IS_TEXT_EDITABLE = new WeakMap();
+const BOARD_TO_ON_CHANGE = new WeakMap();
+const HOST_TO_ROUGH_SVG = new WeakMap();
+
+function isNullOrUndefined(value) {
+    return value === null || value === undefined;
+}
+
+const Viewport = {
+    isViewport: (value) => {
+        return (!isNullOrUndefined(value.offsetX) &&
+            !isNullOrUndefined(value.offsetY) &&
+            !isNullOrUndefined(value.zoom) &&
+            !isNullOrUndefined(value.viewBackgroundColor));
+    }
+};
+
+const Path = {
+    parent(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the parent path of the root path [${path}].`);
+        }
+        return path.slice(0, -1);
+    },
+    next(path) {
+        if (path.length === 0) {
+            throw new Error(`Cannot get the next path of a root path [${path}], because it has no next index.`);
+        }
+        const last = path[path.length - 1];
+        return path.slice(0, -1).concat(last + 1);
+    },
+    /**
+     * Check if a path is an ancestor of another.
+     */
+    isAncestor(path, another) {
+        return path.length < another.length && Path.compare(path, another) === 0;
+    },
+    /**
+     * Compare a path to another, returning an integer indicating whether the path
+     * was before, at, or after the other.
+     *
+     * Note: Two paths of unequal length can still receive a `0` result if one is
+     * directly above or below the other. If you want exact matching, use
+     * [[Path.equals]] instead.
+     */
+    compare(path, another) {
+        const min = Math.min(path.length, another.length);
+        for (let i = 0; i < min; i++) {
+            if (path[i] < another[i])
+                return -1;
+            if (path[i] > another[i])
+                return 1;
+        }
+        return 0;
+    },
+    /**
+     * Check if a path is exactly equal to another.
+     */
+    equals(path, another) {
+        return path.length === another.length && path.every((n, i) => n === another[i]);
+    },
+    /**
+     * Check if a path ends before one of the indexes in another.
+     */
+    endsBefore(path, another) {
+        const i = path.length - 1;
+        const as = path.slice(0, i);
+        const bs = another.slice(0, i);
+        const av = path[i];
+        const bv = another[i];
+        return Path.equals(as, bs) && av < bv;
+    },
+    /**
+     * Check if a path is a sibling of another.
+     */
+    isSibling(path, another) {
+        if (path.length !== another.length) {
+            return false;
+        }
+        const as = path.slice(0, -1);
+        const bs = another.slice(0, -1);
+        const al = path[path.length - 1];
+        const bl = another[another.length - 1];
+        return al !== bl && Path.equals(as, bs);
+    },
+    transform(path, operation) {
+        return produce(path, p => {
+            // PERF: Exit early if the operation is guaranteed not to have an effect.
+            if (!path || (path === null || path === void 0 ? void 0 : path.length) === 0) {
+                return;
+            }
+            if (p === null) {
+                return null;
+            }
+            switch (operation.type) {
+                case 'insert_node': {
+                    const { path: op } = operation;
+                    if (Path.equals(op, p) || Path.endsBefore(op, p) || Path.isAncestor(op, p)) {
+                        p[op.length - 1] += 1;
+                    }
+                    break;
+                }
+                case 'remove_node': {
+                    const { path: op } = operation;
+                    if (Path.equals(op, p) || Path.isAncestor(op, p)) {
+                        return null;
+                    }
+                    else if (Path.endsBefore(op, p)) {
+                        p[op.length - 1] -= 1;
+                    }
+                    break;
+                }
+                case 'move_node': {
+                    const { path: op, newPath: onp } = operation;
+                    // If the old and new path are the same, it's a no-op.
+                    if (Path.equals(op, onp)) {
+                        return;
+                    }
+                    if (Path.isAncestor(op, p) || Path.equals(op, p)) {
+                        const copy = onp.slice();
+                        // op.length <= onp.length is different for slate
+                        // resolve drag from [0, 0] to [0, 3] issue
+                        if (Path.endsBefore(op, onp) && op.length <= onp.length) {
+                            copy[op.length - 1] -= 1;
+                        }
+                        return copy.concat(p.slice(op.length));
+                    }
+                    else if (Path.isSibling(op, onp) && (Path.isAncestor(onp, p) || Path.equals(onp, p))) {
+                        if (Path.endsBefore(op, p)) {
+                            p[op.length - 1] -= 1;
+                        }
+                        else {
+                            p[op.length - 1] += 1;
+                        }
+                    }
+                    else if (Path.endsBefore(onp, p) || Path.equals(onp, p) || Path.isAncestor(onp, p)) {
+                        if (Path.endsBefore(op, p)) {
+                            p[op.length - 1] -= 1;
+                        }
+                        p[onp.length - 1] += 1;
+                    }
+                    else if (Path.endsBefore(op, p)) {
+                        if (Path.equals(onp, p)) {
+                            p[onp.length - 1] += 1;
+                        }
+                        p[op.length - 1] -= 1;
+                    }
+                    break;
+                }
+            }
+            return null;
+        });
+    }
+};
+
+const PlaitNode = {
+    parent: (board, path) => {
+        const parentPath = Path.parent(path);
+        const p = PlaitNode.get(board, parentPath);
+        return p;
+    },
+    get(board, path) {
+        let node = board;
+        for (let i = 0; i < path.length; i++) {
+            const p = path[i];
+            if (!node || !node.children || !node.children[p]) {
+                throw new Error(`Cannot find a descendant at path [${path}]`);
+            }
+            node = node.children[p];
+        }
+        return node;
+    }
+};
+
+const applyToDraft = (board, selection, viewport, op) => {
+    var _a, _b;
+    switch (op.type) {
+        case 'insert_node': {
+            const { path, node } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 0, node);
+            break;
+        }
+        case 'remove_node': {
+            const { path } = op;
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            if (!parent.children || index > parent.children.length) {
+                throw new Error(`Cannot apply an "insert_node" operation at path [${path}] because the destination is past the end of the node.`);
+            }
+            parent.children.splice(index, 1);
+            break;
+        }
+        case 'move_node': {
+            const { path, newPath } = op;
+            if (Path.isAncestor(path, newPath)) {
+                throw new Error(`Cannot move a path [${path}] to new path [${newPath}] because the destination is inside itself.`);
+            }
+            const node = PlaitNode.get(board, path);
+            const parent = PlaitNode.parent(board, path);
+            const index = path[path.length - 1];
+            // This is tricky, but since the `path` and `newPath` both refer to
+            // the same snapshot in time, there's a mismatch. After either
+            // removing the original position, the second step's path can be out
+            // of date. So instead of using the `op.newPath` directly, we
+            // transform `op.path` to ascertain what the `newPath` would be after
+            // the operation was applied.
+            (_a = parent.children) === null || _a === void 0 ? void 0 : _a.splice(index, 1);
+            const truePath = Path.transform(path, op);
+            const newParent = PlaitNode.get(board, Path.parent(truePath));
+            const newIndex = truePath[truePath.length - 1];
+            (_b = newParent.children) === null || _b === void 0 ? void 0 : _b.splice(newIndex, 0, node);
+            break;
+        }
+        case 'set_node': {
+            const { path, properties, newProperties } = op;
+            if (path.length === 0) {
+                throw new Error(`Cannot set properties on the root node!`);
+            }
+            const node = PlaitNode.get(board, path);
+            for (const key in newProperties) {
+                const value = newProperties[key];
+                if (value == null) {
+                    delete node[key];
+                }
+                else {
+                    node[key] = value;
+                }
+            }
+            // properties that were previously defined, but are now missing, must be deleted
+            for (const key in properties) {
+                if (!newProperties.hasOwnProperty(key)) {
+                    delete node[key];
+                }
+            }
+            break;
+        }
+        case 'set_viewport': {
+            const { newProperties } = op;
+            if (newProperties == null) {
+                viewport = newProperties;
+            }
+            else {
+                if (viewport == null) {
+                    if (!Viewport.isViewport(newProperties)) {
+                        throw new Error(`Cannot apply an incomplete "set_viewport" operation properties ${JSON.stringify(newProperties)} when there is no current viewport.`);
+                    }
+                    viewport = Object.assign({}, newProperties);
+                }
+                for (const key in newProperties) {
+                    const value = newProperties[key];
+                    if (value == null) {
+                        delete viewport[key];
+                    }
+                    else {
+                        viewport[key] = value;
+                    }
+                }
+            }
+            break;
+        }
+        case 'set_selection': {
+            const { newProperties } = op;
+            if (newProperties == null) {
+                selection = newProperties;
+            }
+            else {
+                if (selection === null) {
+                    selection = op.newProperties;
+                }
+                else {
+                    selection.anchor = newProperties.anchor;
+                    selection.focus = newProperties.focus;
+                }
+            }
+            break;
+        }
+    }
+    return { selection, viewport };
+};
+const GeneralTransforms = {
+    /**
+     * Transform the board by an operation.
+     */
+    transform(board, op) {
+        board.children = createDraft(board.children);
+        let viewport = board.viewport && createDraft(board.viewport);
+        let selection = board.selection && createDraft(board.selection);
+        try {
+            const state = applyToDraft(board, selection, viewport, op);
+            viewport = state.viewport;
+            selection = state.selection;
+        }
+        finally {
+            board.children = finishDraft(board.children);
+            if (selection) {
+                board.selection = isDraft(selection) ? finishDraft(selection) : selection;
+            }
+            else {
+                board.selection = null;
+            }
+            board.viewport = isDraft(viewport) ? finishDraft(viewport) : viewport;
+        }
+    }
+};
+
+function insertNode(board, node, path) {
+    const operation = { type: 'insert_node', node, path };
+    board.apply(operation);
+}
+function setNode(board, props, path) {
+    const properties = {};
+    const newProperties = {};
+    const node = PlaitNode.get(board, path);
+    for (const k in props) {
+        if (node[k] !== props[k]) {
+            if (node.hasOwnProperty(k)) {
+                properties[k] = node[k];
+            }
+            if (props[k] != null)
+                newProperties[k] = props[k];
+        }
+    }
+    const operation = { type: 'set_node', properties, newProperties, path };
+    board.apply(operation);
+}
+function removeNode(board, path) {
+    const operation = { type: 'remove_node', path };
+    board.apply(operation);
+}
+function moveNode(board, path, newPath) {
+    const operation = { type: 'move_node', path, newPath };
+    board.apply(operation);
+}
+const NodeTransforms = {
+    insertNode,
+    setNode,
+    removeNode,
+    moveNode
+};
+
+function setSelection(board, selection) {
+    const operation = { type: 'set_selection', properties: board.selection, newProperties: selection };
+    board.apply(operation);
+}
+const SelectionTransforms = {
+    setSelection
+};
+
+function setViewport(board, viewport) {
+    const operation = { type: 'set_viewport', properties: board.viewport, newProperties: viewport };
+    board.apply(operation);
+}
+const ViewportTransforms = {
+    setViewport
+};
+
+const Transforms = Object.assign(Object.assign(Object.assign(Object.assign({}, GeneralTransforms), ViewportTransforms), SelectionTransforms), NodeTransforms);
+
+var BaseCursorStatus;
+(function (BaseCursorStatus) {
+    BaseCursorStatus["move"] = "move";
+    BaseCursorStatus["select"] = "select";
+})(BaseCursorStatus || (BaseCursorStatus = {}));
+
+function createBoard(host, children) {
+    const board = {
+        host,
+        viewport: {
+            offsetX: 0,
+            offsetY: 0,
+            zoom: 1,
+            viewBackgroundColor: '#000'
+        },
+        children,
+        operations: [],
+        selection: { anchor: [0, -1], focus: [-1, -1] },
+        cursor: BaseCursorStatus.select,
+        apply: (operation) => {
+            board.operations.push(operation);
+            Transforms.transform(board, operation);
+            if (!FLUSHING.get(board)) {
+                FLUSHING.set(board, true);
+                Promise.resolve().then(() => {
+                    FLUSHING.set(board, false);
+                    board.onChange();
+                    board.operations = [];
+                });
+            }
+        },
+        onChange: () => { },
+        mousedown: (event) => { },
+        mouseup: (event) => { },
+        mousemove: (event) => { },
+        keydown: (event) => { },
+        keyup: (event) => { },
+        dblclick: (event) => { },
+        drawElement: (context) => [],
+        redrawElement: (context, changes) => [],
+        destroyElement: () => { }
+    };
+    return board;
+}
+
+function withBoard(board) {
+    const { onChange, mouseup } = board;
+    board.onChange = () => {
+        const onContextChange = BOARD_TO_ON_CHANGE.get(board);
+        if (onContextChange) {
+            onContextChange();
+        }
+        onChange();
+    };
+    return board;
+}
+
+const NS = 'http://www.w3.org/2000/svg';
+function toPoint(x, y, container) {
+    const rect = container.getBoundingClientRect();
+    return [x - rect.x, y - rect.y];
+}
+function createG() {
+    const newG = document.createElementNS(NS, 'g');
+    return newG;
+}
+function createSVG() {
+    const svg = document.createElementNS(NS, 'svg');
+    return svg;
+}
+function createText(x, y, fill, textContent) {
+    var text = document.createElementNS(NS, 'text');
+    text.setAttribute('x', `${x}`);
+    text.setAttribute('y', `${y}`);
+    text.setAttribute('fill', fill);
+    text.textContent = textContent;
+    return text;
+}
+
+function toRectangleClient(points) {
+    const xArray = points.map(ele => ele[0]);
+    const yArray = points.map(ele => ele[1]);
+    const xMin = Math.min(...xArray);
+    const xMax = Math.max(...xArray);
+    const yMin = Math.min(...yArray);
+    const yMax = Math.max(...yArray);
+    const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
+    return rect;
+}
+
+function withSelection(board) {
+    const { mousedown, mousemove, mouseup } = board;
+    let start = null;
+    let end = null;
+    board.mousedown = (event) => {
+        // avoid select text when double click svg
+        if (!(event.target instanceof HTMLElement && event.target.closest('.richtext'))) {
+            event.preventDefault();
+        }
+        if (board.cursor === BaseCursorStatus.select) {
+            start = toPoint(event.x, event.y, board.host);
+        }
+        mousedown(event);
+    };
+    board.mousemove = (event) => {
+        const movedTarget = toPoint(event.x, event.y, board.host);
+        if (start) {
+            const rectangleClient = toRectangleClient([start, movedTarget]);
+            if (start && Math.hypot(rectangleClient.width, rectangleClient.height) > 5) {
+                end = movedTarget;
+            }
+        }
+        mousemove(event);
+    };
+    board.mouseup = (event) => {
+        if (start) {
+            Transforms.setSelection(board, { anchor: start, focus: start });
+        }
+        start = null;
+        end = null;
+        mouseup(event);
+    };
+    return board;
+}
+
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
+};
+const PlaitOperation = {
+    isSetViewportOperation
+};
+
+function transformPoints(board, points) {
+    const newPoints = points.map(point => {
+        return transformPoint(board, point);
+    });
+    return newPoints;
+}
+function transformPoint(board, point) {
+    const { width, height } = board.host.getBoundingClientRect();
+    const viewBox = getViewBox(board);
+    let x = (point[0] / width) * viewBox.width + viewBox.minX;
+    let y = (point[1] / height) * viewBox.height + viewBox.minY;
+    const newPoint = [x - board.viewport.offsetX, y - board.viewport.offsetY];
+    return newPoint;
+}
+function getViewBox(board) {
+    const { width, height } = board.host.getBoundingClientRect();
+    const scaleWidth = (board.viewport.zoom - 1) * width;
+    const scaleHeight = (board.viewport.zoom - 1) * height;
+    const viewBoxWidth = width - scaleWidth;
+    const viewBoxHeight = height - scaleHeight;
+    const minX = scaleWidth / 2;
+    const minY = scaleHeight / 2;
+    return { minX, minY: minY, width: viewBoxWidth, height: viewBoxHeight };
+}
+
+class PlaitElementComponent {
+    constructor(renderer2, viewContainerRef) {
+        this.renderer2 = renderer2;
+        this.viewContainerRef = viewContainerRef;
+        this.initialized = false;
+        this.selection = null;
+    }
+    ngOnInit() {
+        this.initialize();
+        this.transform(true);
+        this.drawElement();
+    }
+    initialize() {
+        this.initialized = true;
+        this.groupG = createG();
+        this.renderer2.setAttribute(this.groupG, 'plait-element-group', this.index.toString());
+        this.host.append(this.groupG);
+    }
+    transform(first = false) {
+        if (first && this.viewport.offsetX === 0 && this.viewport.offsetY === 0) {
+            return;
+        }
+        this.renderer2.setAttribute(this.groupG, 'transform', `translate(${this.viewport.offsetX} ${this.viewport.offsetY})`);
+    }
+    drawElement() {
+        const gArray = this.board.drawElement({ elementInstance: this });
+        gArray.forEach(g => {
+            this.groupG.appendChild(g);
+        });
+    }
+    ngOnChanges(changes) {
+        const viewport = changes['viewport'];
+        if (this.initialized && viewport) {
+            this.transform();
+        }
+        if (this.initialized) {
+            this.board.redrawElement({ elementInstance: this }, changes);
+        }
+    }
+    ngOnDestroy() {
+        this.board.destroyElement();
+        this.groupG.remove();
+    }
+}
+PlaitElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+PlaitElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", board: "board", viewport: "viewport", selection: "selection", host: "host" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitElementComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-element',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ViewContainerRef }]; }, propDecorators: { index: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], board: [{
+                type: Input
+            }], viewport: [{
+                type: Input
+            }], selection: [{
+                type: Input
+            }], host: [{
+                type: Input
+            }] } });
+
+class PlaitBoardComponent {
+    constructor(cdr, renderer2) {
+        this.cdr = cdr;
+        this.renderer2 = renderer2;
+        this.zoom = 100;
+        this.hostClass = `plait-board-container`;
+        this.destroy$ = new Subject();
+        this.plaitValue = [];
+        this.plaitPlugins = [];
+        this.plaitChange = new EventEmitter();
+        this.plaitBoardInitialized = new EventEmitter();
+        this.trackBy = (index, element) => {
+            return index;
+        };
+    }
+    get host() {
+        return this.svg.nativeElement;
+    }
+    ngOnInit() {
+        const roughSVG = rough.svg(this.host, { options: { roughness: 0, strokeWidth: 1 } });
+        HOST_TO_ROUGH_SVG.set(this.host, roughSVG);
+        this.initializePlugins();
+        this.initializeEvents();
+        this.updateViewport();
+        BOARD_TO_ON_CHANGE.set(this.board, () => {
+            this.cdr.detectChanges();
+            const changeEvent = {
+                children: this.board.children,
+                operations: this.board.operations,
+                viewport: this.board.viewport,
+                selection: this.board.selection
+            };
+            this.plaitChange.emit(changeEvent);
+            // update viewBox
+            if (this.board.operations.some(op => PlaitOperation.isSetViewportOperation(op))) {
+                this.updateViewport();
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.plaitBoardInitialized.emit(this.board);
+    }
+    initializePlugins() {
+        let board = withSelection(withBoard(createBoard(this.host, this.plaitValue)));
+        this.plaitPlugins.forEach(plugin => {
+            board = plugin(board);
+        });
+        this.board = board;
+        if (this.plaitViewport) {
+            this.board.viewport = this.plaitViewport;
+        }
+    }
+    initializeEvents() {
+        fromEvent(this.host, 'mousedown')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            this.board.mousedown(event);
+        });
+        fromEvent(this.host, 'mousemove')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            this.board.mousemove(event);
+        });
+        fromEvent(document, 'mouseup')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            this.board.mouseup(event);
+        });
+        fromEvent(this.host, 'dblclick')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            this.board.dblclick(event);
+        });
+        fromEvent(this.host, 'wheel')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            event.preventDefault();
+            const viewport = this.board.viewport;
+            Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { offsetX: (viewport === null || viewport === void 0 ? void 0 : viewport.offsetX) - event.deltaX, offsetY: (viewport === null || viewport === void 0 ? void 0 : viewport.offsetY) - event.deltaY }));
+        });
+        fromEvent(document, 'keydown')
+            .pipe(takeUntil(this.destroy$), filter(() => {
+            return !IS_TEXT_EDITABLE.get(this.board);
+        }))
+            .subscribe((event) => {
+            var _a;
+            (_a = this.board) === null || _a === void 0 ? void 0 : _a.keydown(event);
+        });
+        fromEvent(document, 'keyup')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            var _a;
+            (_a = this.board) === null || _a === void 0 ? void 0 : _a.keyup(event);
+        });
+        window.onresize = () => {
+            var _a;
+            const viewBoxModel = getViewBox(this.board);
+            const viewBoxValues = (_a = this.host.getAttribute('viewBox')) === null || _a === void 0 ? void 0 : _a.split(',');
+            this.renderer2.setAttribute(this.host, 'viewBox', `${viewBoxValues[0].trim()}, ${viewBoxValues[1].trim()}, ${viewBoxModel.width}, ${viewBoxModel.height}`);
+        };
+    }
+    updateViewport() {
+        this.zoom = Math.floor(this.board.viewport.zoom * 100);
+        const viewBox = getViewBox(this.board);
+        this.renderer2.setAttribute(this.host, 'viewBox', `${viewBox.minX}, ${viewBox.minY}, ${viewBox.width}, ${viewBox.height}`);
+    }
+    // 放大
+    zoomIn(event) {
+        var _a;
+        const viewport = (_a = this.board) === null || _a === void 0 ? void 0 : _a.viewport;
+        Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { zoom: viewport.zoom + 0.1 }));
+    }
+    // 缩小
+    zoomOut(event) {
+        var _a;
+        const viewport = (_a = this.board) === null || _a === void 0 ? void 0 : _a.viewport;
+        Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { zoom: viewport.zoom - 0.1 }));
+    }
+    resetZoom(event) {
+        var _a;
+        const viewport = (_a = this.board) === null || _a === void 0 ? void 0 : _a.viewport;
+        Transforms.setViewport(this.board, Object.assign(Object.assign({}, viewport), { zoom: 1 }));
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        HOST_TO_ROUGH_SVG.delete(this.host);
+    }
+}
+PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass" } }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }], ngImport: i0, template: `
+        <svg #svg width="100%" height="100%"></svg>
+        <div class="plait-toolbar island zoom-toolbar">
+            <button class="item" (mousedown)="zoomOut($event)">-</button>
+            <button class="item zoom-value" (mousedown)="resetZoom($event)">{{ zoom }}%</button>
+            <button class="item" (mousedown)="zoomIn($event)">+</button>
+        </div>
+        <plait-element
+            *ngFor="let item of board.children; let index = index; trackBy: trackBy"
+            [index]="index"
+            [element]="item"
+            [board]="board"
+            [viewport]="board.viewport"
+            [selection]="board.selection"
+            [host]="host"
+        ></plait-element>
+        <ng-content></ng-content>
+    `, isInline: true, components: [{ type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "board", "viewport", "selection", "host"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitBoardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-board',
+                    template: `
+        <svg #svg width="100%" height="100%"></svg>
+        <div class="plait-toolbar island zoom-toolbar">
+            <button class="item" (mousedown)="zoomOut($event)">-</button>
+            <button class="item zoom-value" (mousedown)="resetZoom($event)">{{ zoom }}%</button>
+            <button class="item" (mousedown)="zoomIn($event)">+</button>
+        </div>
+        <plait-element
+            *ngFor="let item of board.children; let index = index; trackBy: trackBy"
+            [index]="index"
+            [element]="item"
+            [board]="board"
+            [viewport]="board.viewport"
+            [selection]="board.selection"
+            [host]="host"
+        ></plait-element>
+        <ng-content></ng-content>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], svg: [{
+                type: ViewChild,
+                args: ['svg', { static: true }]
+            }], plaitValue: [{
+                type: Input
+            }], plaitViewport: [{
+                type: Input
+            }], plaitPlugins: [{
+                type: Input
+            }], plaitChange: [{
+                type: Output
+            }], plaitBoardInitialized: [{
+                type: Output
+            }] } });
+
+class PlaitModule {
+}
+PlaitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PlaitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitModule, declarations: [PlaitBoardComponent, PlaitElementComponent], imports: [BrowserModule], exports: [PlaitBoardComponent, PlaitElementComponent] });
+PlaitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitModule, imports: [[BrowserModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PlaitBoardComponent, PlaitElementComponent],
+                    imports: [BrowserModule],
+                    exports: [PlaitBoardComponent, PlaitElementComponent]
+                }]
+        }] });
+
+const IS_IOS = typeof navigator !== 'undefined' &&
+    typeof window !== 'undefined' &&
+    /iPad|iPhone|iPod/.test(navigator.userAgent) &&
+    !window.MSStream;
+const IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
+const IS_FIREFOX = typeof navigator !== 'undefined' && /^(?!.*Seamonkey)(?=.*Firefox).*/i.test(navigator.userAgent);
+const IS_SAFARI = typeof navigator !== 'undefined' && /Version\/[\d\.]+.*Safari/.test(navigator.userAgent);
+// "modern" Edge was released at 79.x
+const IS_EDGE_LEGACY = typeof navigator !== 'undefined' && /Edge?\/(?:[0-6][0-9]|[0-7][0-8])/i.test(navigator.userAgent);
+const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.userAgent);
+// Native beforeInput events don't work well with react on Chrome 75 and older, Chrome 76+ can use beforeInput
+const IS_CHROME_LEGACY = typeof navigator !== 'undefined' && /Chrome?\/(?:[0-7][0-5]|[0-6][0-9])/i.test(navigator.userAgent);
+
+/**
+ * Hotkey mappings for each platform.
+ */
+const HOTKEYS = {
+    bold: 'mod+b',
+    compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
+    moveBackward: 'left',
+    moveForward: 'right',
+    moveUp: 'up',
+    moveDown: 'down',
+    moveWordBackward: 'ctrl+left',
+    moveWordForward: 'ctrl+right',
+    deleteBackward: 'shift?+backspace',
+    deleteForward: 'shift?+delete',
+    extendBackward: 'shift+left',
+    extendForward: 'shift+right',
+    italic: 'mod+i',
+    splitBlock: 'shift?+enter',
+    undo: 'mod+z'
+};
+const APPLE_HOTKEYS = {
+    moveLineBackward: 'opt+up',
+    moveLineForward: 'opt+down',
+    moveWordBackward: 'opt+left',
+    moveWordForward: 'opt+right',
+    deleteBackward: ['ctrl+backspace', 'ctrl+h'],
+    deleteForward: ['ctrl+delete', 'ctrl+d'],
+    deleteLineBackward: 'cmd+shift?+backspace',
+    deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
+    deleteWordBackward: 'opt+shift?+backspace',
+    deleteWordForward: 'opt+shift?+delete',
+    extendLineBackward: 'opt+shift+up',
+    extendLineForward: 'opt+shift+down',
+    redo: 'cmd+shift+z',
+    transposeCharacter: 'ctrl+t'
+};
+const WINDOWS_HOTKEYS = {
+    deleteWordBackward: 'ctrl+shift?+backspace',
+    deleteWordForward: 'ctrl+shift?+delete',
+    redo: ['ctrl+y', 'ctrl+shift+z']
+};
+/**
+ * Create a platform-aware hotkey checker.
+ */
+const create = (key) => {
+    const generic = HOTKEYS[key];
+    const apple = APPLE_HOTKEYS[key];
+    const windows = WINDOWS_HOTKEYS[key];
+    const isGeneric = generic && isKeyHotkey(generic);
+    const isApple = apple && isKeyHotkey(apple);
+    const isWindows = windows && isKeyHotkey(windows);
+    return (event) => {
+        if (isGeneric && isGeneric(event)) {
+            return true;
+        }
+        if (IS_APPLE && isApple && isApple(event)) {
+            return true;
+        }
+        if (!IS_APPLE && isWindows && isWindows(event)) {
+            return true;
+        }
+        return false;
+    };
+};
+/**
+ * Hotkeys.
+ */
+const hotkeys = {
+    isBold: create('bold'),
+    isCompose: create('compose'),
+    isMoveBackward: create('moveBackward'),
+    isMoveForward: create('moveForward'),
+    isMoveUp: create('moveUp'),
+    isMoveDown: create('moveDown'),
+    isDeleteBackward: create('deleteBackward'),
+    isDeleteForward: create('deleteForward'),
+    isDeleteLineBackward: create('deleteLineBackward'),
+    isDeleteLineForward: create('deleteLineForward'),
+    isDeleteWordBackward: create('deleteWordBackward'),
+    isDeleteWordForward: create('deleteWordForward'),
+    isExtendBackward: create('extendBackward'),
+    isExtendForward: create('extendForward'),
+    isExtendLineBackward: create('extendLineBackward'),
+    isExtendLineForward: create('extendLineForward'),
+    isItalic: create('italic'),
+    isMoveLineBackward: create('moveLineBackward'),
+    isMoveLineForward: create('moveLineForward'),
+    isMoveWordBackward: create('moveWordBackward'),
+    isMoveWordForward: create('moveWordForward'),
+    isRedo: create('redo'),
+    isSplitBlock: create('splitBlock'),
+    isTransposeCharacter: create('transposeCharacter'),
+    isUndo: create('undo')
+};
+
+function idCreator(length = 5) {
+    // remove numeral
+    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+    const maxPosition = $chars.length;
+    let key = '';
+    for (let i = 0; i < length; i++) {
+        key += $chars.charAt(Math.floor(Math.random() * maxPosition));
+    }
+    return key;
+}
+
+// https://stackoverflow.com/a/6853926/232122
+function distanceBetweenPointAndSegment(x, y, x1, y1, x2, y2) {
+    const A = x - x1;
+    const B = y - y1;
+    const C = x2 - x1;
+    const D = y2 - y1;
+    const dot = A * C + B * D;
+    const lenSquare = C * C + D * D;
+    let param = -1;
+    if (lenSquare !== 0) {
+        // in case of 0 length line
+        param = dot / lenSquare;
+    }
+    let xx, yy;
+    if (param < 0) {
+        xx = x1;
+        yy = y1;
+    }
+    else if (param > 1) {
+        xx = x2;
+        yy = y2;
+    }
+    else {
+        xx = x1 + param * C;
+        yy = y1 + param * D;
+    }
+    const dx = x - xx;
+    const dy = y - yy;
+    return Math.hypot(dx, dy);
+}
+function rotate(x1, y1, x2, y2, angle) {
+    // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
+    // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
+    // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
+    return [(x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle) + x2, (x1 - x2) * Math.sin(angle) + (y1 - y2) * Math.cos(angle) + y2];
+}
+
+/*
+ * Public API Surface of plait
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BOARD_TO_ON_CHANGE, BaseCursorStatus, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, NS, Path, PlaitBoardComponent, PlaitElementComponent, PlaitModule, PlaitNode, PlaitOperation, Transforms, Viewport, createG, createSVG, createText, distanceBetweenPointAndSegment, getViewBox, hotkeys, idCreator, isNullOrUndefined, isSetViewportOperation, rotate, toPoint, toRectangleClient, transformPoint, transformPoints };
+//# sourceMappingURL=plait-core.mjs.map