@plait/core 0.1.9 → 0.2.0-next.0

package/fesm2015/plait-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, EventEmitter, HostBinding, Output, ElementRef, ViewChild, ContentChild, Directive, NgModule } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, EventEmitter, HostBinding, Output, ElementRef, ViewChild, ContentChild, NgModule } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { timer, Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
@@ -9,7 +9,10 @@ import * as i1 from '@angular/common';
 import { BrowserModule } from '@angular/platform-browser';
 
 // record richtext type status
+const IS_BOARD_CACHE = new WeakMap();
 const FLUSHING = new WeakMap();
+const NODE_TO_INDEX = new WeakMap();
+const NODE_TO_PARENT = new WeakMap();
 const IS_TEXT_EDITABLE = new WeakMap();
 const BOARD_TO_ON_CHANGE = new WeakMap();
 const BOARD_TO_COMPONENT = new WeakMap();
@@ -24,11 +27,13 @@ const BOARD_TO_IS_SELECTION_MOVING = new WeakMap();
 const BOARD_TO_TEMPORARY_ELEMENTS = new WeakMap();
 const BOARD_TO_MOVING_ELEMENT = new WeakMap();
 
-function depthFirstRecursion(node, callback) {
+function depthFirstRecursion(node, callback, recursion) {
     var _a;
-    (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(child => {
-        depthFirstRecursion(child, callback);
-    });
+    if (!recursion || recursion(node)) {
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach(child => {
+            depthFirstRecursion(child, callback, recursion);
+        });
+    }
     callback(node);
 }
 
@@ -50,7 +55,7 @@ function getRectangleByElements(board, elements, recursion) {
     };
     elements.forEach(element => {
         if (recursion) {
-            depthFirstRecursion(element, node => calcRectangleClient(node));
+            depthFirstRecursion(element, node => calcRectangleClient(node), node => board.isRecursion(node));
         }
         else {
             calcRectangleClient(element);
@@ -68,6 +73,37 @@ function getBoardRectangle(board) {
 }
 
 const PlaitBoard = {
+    isBoard(value) {
+        const cachedIsBoard = IS_BOARD_CACHE.get(value);
+        if (cachedIsBoard !== undefined) {
+            return cachedIsBoard;
+        }
+        const isBoard = typeof value.onChange === 'function' && typeof value.apply === 'function';
+        IS_BOARD_CACHE.set(value, isBoard);
+        return isBoard;
+    },
+    findPath(board, node) {
+        const path = [];
+        let child = node;
+        while (true) {
+            const parent = NODE_TO_PARENT.get(child);
+            if (parent == null) {
+                if (PlaitBoard.isBoard(child)) {
+                    return path;
+                }
+                else {
+                    break;
+                }
+            }
+            const i = NODE_TO_INDEX.get(child);
+            if (i == null) {
+                break;
+            }
+            path.unshift(i);
+            child = parent;
+        }
+        throw new Error(`Unable to find the path for Plait node: ${JSON.stringify(node)}`);
+    },
     getHost(board) {
         return BOARD_TO_HOST.get(board);
     },
@@ -130,6 +166,41 @@ const Viewport = {
 };
 
 const Path = {
+    /**
+     * Get a list of ancestor paths for a given path.
+     *
+     * The paths are sorted from shallowest to deepest ancestor. However, if the
+     * `reverse: true` option is passed, they are reversed.
+     */
+    ancestors(path, options = {}) {
+        const { reverse = false } = options;
+        let paths = Path.levels(path, options);
+        if (reverse) {
+            paths = paths.slice(1);
+        }
+        else {
+            paths = paths.slice(0, -1);
+        }
+        return paths;
+    },
+    /**
+     * Get a list of paths at every level down to a path. Note: this is the same
+     * as `Path.ancestors`, but including the path itself.
+     *
+     * The paths are sorted from shallowest to deepest. However, if the `reverse:
+     * true` option is passed, they are reversed.
+     */
+    levels(path, options = {}) {
+        const { reverse = false } = options;
+        const list = [];
+        for (let i = 0; i <= path.length; i++) {
+            list.push(path.slice(0, i));
+        }
+        if (reverse) {
+            list.reverse();
+        }
+        return list;
+    },
     parent(path) {
         if (path.length === 0) {
             throw new Error(`Cannot get the parent path of the root path [${path}].`);
@@ -273,8 +344,20 @@ const PlaitNode = {
         const p = PlaitNode.get(board, parentPath);
         return p;
     },
-    get(board, path) {
-        let node = board;
+    /**
+     * Return a generator of all the ancestor nodes above a specific path.
+     *
+     * By default the order is top-down, from highest to lowest ancestor in
+     * the tree, but you can pass the `reverse: true` option to go bottom-up.
+     */
+    *parents(root, path, options = {}) {
+        for (const p of Path.ancestors(path, options)) {
+            const n = PlaitNode.get(root, p);
+            yield n;
+        }
+    },
+    get(root, path) {
+        let node = root;
         for (let i = 0; i < path.length; i++) {
             const p = path[i];
             if (!node || !node.children || !node.children[p]) {
@@ -283,6 +366,14 @@ const PlaitNode = {
             node = node.children[p];
         }
         return node;
+    },
+    last(board, path) {
+        let n = PlaitNode.get(board, path);
+        while (n && n.children) {
+            const i = n.children.length - 1;
+            n = n.children[i];
+        }
+        return n;
     }
 };
 
@@ -584,10 +675,153 @@ const IS_CHROME = typeof navigator !== 'undefined' && /Chrome/i.test(navigator.u
 // 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);
 
+const getHitElements = (board) => {
+    const selectedElements = [];
+    depthFirstRecursion(board, node => {
+        var _a;
+        if (!PlaitBoard.isBoard(node) &&
+            ((_a = board.selection) === null || _a === void 0 ? void 0 : _a.ranges.some(range => {
+                return board.isHitSelection(node, range);
+            }))) {
+            selectedElements.push(node);
+        }
+    }, node => {
+        if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    });
+    return selectedElements;
+};
+const isIntersectionElements = (board, elements, ranges) => {
+    let isIntersectionElements = false;
+    if (elements.length) {
+        elements.map(item => {
+            if (!isIntersectionElements) {
+                isIntersectionElements = ranges.some(range => {
+                    return board.isHitSelection(item, range);
+                });
+            }
+        });
+    }
+    return isIntersectionElements;
+};
+const cacheSelectedElements = (board, selectedElements) => {
+    BOARD_TO_SELECTED_ELEMENT.set(board, selectedElements);
+};
+const getSelectedElements = (board) => {
+    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
+};
+const addSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    cacheSelectedElements(board, [...selectedElements, element]);
+};
+const removeSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    const newSelectedElements = selectedElements.filter(value => value !== element);
+    cacheSelectedElements(board, newSelectedElements);
+};
+const isSelectedElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    return !!selectedElements.find(value => value === element);
+};
+
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasOnContextChanged(value) {
+    if (value.onContextChanged) {
+        return true;
+    }
+    return false;
+}
+
+class PlaitPluginElementComponent {
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        const previousContext = this._context;
+        this._context = value;
+        if (this.element) {
+            ELEMENT_TO_COMPONENT.set(this.element, this);
+        }
+        if (this.initialized) {
+            this.cdr.markForCheck();
+            if (hasOnContextChanged(this)) {
+                this.onContextChanged(value, previousContext);
+            }
+        }
+        else {
+            if (PlaitElement.isRootElement(this.element) && this.element.children && this.element.children.length > 0) {
+                this.g = createG();
+                this.rootG = createG();
+                this.rootG.append(this.g);
+            }
+            else {
+                this.g = createG();
+            }
+        }
+    }
+    get context() {
+        return this._context;
+    }
+    get element() {
+        return this.context && this.context.element;
+    }
+    get board() {
+        return this.context && this.context.board;
+    }
+    get selected() {
+        return this.context && this.context.selected;
+    }
+    get effect() {
+        return this.context && this.context.effect;
+    }
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.initialized = false;
+    }
+    ngOnInit() {
+        if (this.element.type) {
+            (this.rootG || this.g).setAttribute(`plait-${this.element.type}`, 'true');
+        }
+        this.initialized = true;
+    }
+    ngOnDestroy() {
+        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
+            ELEMENT_TO_COMPONENT.delete(this.element);
+        }
+        removeSelectedElement(this.board, this.element);
+        (this.rootG || this.g).remove();
+    }
+}
+PlaitPluginElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+PlaitPluginElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
+                type: Input
+            }] } });
+const ELEMENT_TO_COMPONENT = new WeakMap();
+
 const PlaitElement = {
-    // board node don't contain id
-    isElement: (value) => {
-        return !!value.id;
+    isRootElement(value) {
+        const parent = NODE_TO_PARENT.get(value);
+        if (parent && PlaitBoard.isBoard(parent)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    getComponent(value) {
+        return ELEMENT_TO_COMPONENT.get(value);
     }
 };
 
@@ -613,6 +847,14 @@ const RectangleClient = {
         const yMax = Math.max(...yArray);
         const rect = { x: xMin, y: yMin, width: xMax - xMin, height: yMax - yMin };
         return rect;
+    },
+    getOutlineRectangle: (rectangle, offset) => {
+        return {
+            x: rectangle.x + offset,
+            y: rectangle.y + offset,
+            width: rectangle.width + Math.abs(offset) * 2,
+            height: rectangle.height + Math.abs(offset) * 2
+        };
     }
 };
 
@@ -873,52 +1115,6 @@ function idCreator(length = 5) {
     return key;
 }
 
-const calcElementIntersectionSelection = (board) => {
-    const selectedElements = [];
-    depthFirstRecursion(board, node => {
-        var _a;
-        if (PlaitElement.isElement(node) &&
-            ((_a = board.selection) === null || _a === void 0 ? void 0 : _a.ranges.some(range => {
-                return board.isHitSelection(node, range);
-            }))) {
-            selectedElements.push(node);
-        }
-    });
-    return selectedElements;
-};
-const isIntersectionElements = (board, elements, ranges) => {
-    let isIntersectionElements = false;
-    if (elements.length) {
-        elements.map(item => {
-            if (!isIntersectionElements) {
-                isIntersectionElements = ranges.some(range => {
-                    return board.isHitSelection(item, range);
-                });
-            }
-        });
-    }
-    return isIntersectionElements;
-};
-const cacheSelectedElements = (board, selectedElements) => {
-    BOARD_TO_SELECTED_ELEMENT.set(board, selectedElements);
-};
-const getSelectedElements = (board) => {
-    return BOARD_TO_SELECTED_ELEMENT.get(board) || [];
-};
-const addSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    cacheSelectedElements(board, [...selectedElements, element]);
-};
-const removeSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    const newSelectedElements = selectedElements.filter(value => value !== element);
-    cacheSelectedElements(board, newSelectedElements);
-};
-const isSelectedElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    return !!selectedElements.find(value => value === element);
-};
-
 const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
 const SCROLL_BAR_WIDTH = 20;
 const MAX_RADIUS = 16;
@@ -944,6 +1140,48 @@ function drawRoundRectangle(rs, x1, y1, x2, y2, options, outline = false, border
     const point8 = [x1, y1 + radius];
     return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, options);
 }
+function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
+    const width = Math.abs(x1 - x2);
+    const height = Math.abs(y1 - y2);
+    const radius = 3;
+    const handleGap = 4;
+    const handleLength = 10;
+    const handleSpace = handleLength + handleGap * 2;
+    if (isHorizontal) {
+        const handleSideLine = (width - handleSpace - radius * 2) / 2;
+        const sideLine = height - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${handleSideLine},0
+            m${handleSpace},0
+            l${handleSideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${sideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${handleSideLine},0
+            m-${handleSpace},0
+            l-${handleSideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${sideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+    else {
+        const handleSideLine = (height - handleSpace - radius * 2) / 2;
+        const sideLine = width - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${sideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${handleSideLine}
+            m0,${handleSpace}
+            l0,${handleSideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${sideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${handleSideLine}
+            m0,-${handleSpace}
+            l0,-${handleSideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+}
 
 function arrowPoints(start, end, maxHypotenuseLength = 10, degree = 40) {
     const width = Math.abs(start[0] - end[0]);
@@ -967,6 +1205,14 @@ function drawArrow(rs, start, end, options, maxHypotenuseLength = 10, degree = 4
     return [arrowLineLeft, arrowLineRight];
 }
 
+function drawCircle(roughSVG, point, diameter, options) {
+    return roughSVG.circle(point[0], point[1], diameter, options);
+}
+
+function drawLine(rs, start, end, options) {
+    return rs.linearPath([start, end], options);
+}
+
 const IS_FROM_SCROLLING = new WeakMap();
 const IS_FROM_VIEWPORT_CHANGE = new WeakMap();
 function getViewportContainerRect(board) {
@@ -1278,6 +1524,7 @@ function createBoard(children, options) {
         destroyElement: (context) => { },
         isWithinSelection: element => false,
         isHitSelection: element => false,
+        isRecursion: element => true,
         isMovable: element => false,
         getRectangle: element => null
     };
@@ -1462,7 +1709,7 @@ function withSelection(board) {
                 return;
             }
             Transforms.setSelection(board, { ranges: ranges });
-            if (calcElementIntersectionSelection(board).length || board.pointer === PlaitPointerType.hand) {
+            if (getHitElements(board).length || board.pointer === PlaitPointerType.hand) {
                 start = null;
             }
         }
@@ -1516,7 +1763,7 @@ function withSelection(board) {
                 if (board.operations.find(value => value.type === 'set_selection')) {
                     selectionOuterG === null || selectionOuterG === void 0 ? void 0 : selectionOuterG.remove();
                     const temporaryElements = getTemporaryElements(board);
-                    const elements = temporaryElements ? temporaryElements : calcElementIntersectionSelection(board);
+                    const elements = temporaryElements ? temporaryElements : getHitElements(board);
                     cacheSelectedElements(board, elements);
                     previousSelectedElements = elements;
                     const { width, height } = getRectangleByElements(board, elements, false);
@@ -1620,7 +1867,7 @@ function withMoving(board) {
         const host = BOARD_TO_HOST.get(board);
         const point = transformPoint(board, toPoint(event.x, event.y, host));
         const ranges = [{ anchor: point, focus: point }];
-        let movableElements = board.children.filter(item => PlaitElement.isElement(item) && board.isMovable(item));
+        let movableElements = board.children.filter(item => board.isMovable(item));
         if (movableElements.length) {
             startPoint = point;
             const selectedRootElements = getSelectedElements(board).filter(item => movableElements.includes(item));
@@ -1698,71 +1945,76 @@ class PlaitElementComponent {
         this.renderer2 = renderer2;
         this.viewContainerRef = viewContainerRef;
         this.initialized = false;
-        this.selection = null;
     }
     ngOnInit() {
         this.initialize();
         this.drawElement();
     }
     initialize() {
+        NODE_TO_INDEX.set(this.element, this.index);
+        NODE_TO_PARENT.set(this.element, this.parent);
         this.initialized = true;
-        this.gGroup = createG();
-        this.renderer2.setAttribute(this.gGroup, 'plait-element-group', this.index.toString());
-        PlaitBoard.getElementHost(this.board).append(this.gGroup);
     }
     drawElement() {
         const context = this.getContext();
-        const result = this.board.drawElement(context.current);
+        const result = this.board.drawElement(context);
         if (Array.isArray(result)) {
-            result.forEach(g => {
-                this.gGroup.appendChild(g);
-            });
         }
         else {
             const componentRef = this.viewContainerRef.createComponent(result);
             const instance = componentRef.instance;
-            instance.context = context.current;
-            this.gGroup.appendChild(instance.g);
+            instance.context = context;
+            this.insertG(instance.rootG ? instance.rootG : instance.g);
             this.instance = instance;
         }
     }
-    ngOnChanges() {
+    insertG(g) {
+        if (PlaitBoard.isBoard(this.parent)) {
+            this.parentG.prepend(g);
+        }
+        else {
+            let siblingG = PlaitElement.getComponent(this.parent).g;
+            if (this.index > 0) {
+                const brotherElement = this.parent.children[this.index - 1];
+                const lastElement = PlaitNode.last(this.board, PlaitBoard.findPath(this.board, brotherElement));
+                const siblingElement = lastElement || brotherElement;
+                siblingG = PlaitElement.getComponent(siblingElement).g;
+            }
+            this.parentG.insertBefore(g, siblingG);
+        }
+    }
+    ngOnChanges(simpleChanges) {
         if (this.initialized) {
+            NODE_TO_INDEX.set(this.element, this.index);
+            NODE_TO_PARENT.set(this.element, this.parent);
+            const elementChanged = simpleChanges['element'];
             const context = this.getContext();
-            if (this.instance) {
-                this.instance.context = context.current;
+            if (elementChanged && isSelectedElement(this.board, elementChanged.previousValue)) {
+                context.selected = true;
+                removeSelectedElement(this.board, elementChanged.previousValue);
+                addSelectedElement(this.board, this.element);
             }
-            const result = this.board.redrawElement(context.current, context.previous);
-            if (result && result.length > 0) {
-                this.gGroup.childNodes.forEach(g => g.remove());
-                result.forEach(g => {
-                    this.gGroup.appendChild(g);
-                });
+            if (this.instance) {
+                this.instance.context = context;
             }
         }
     }
     getContext() {
-        const current = {
+        const isSelected = isSelectedElement(this.board, this.element);
+        const context = {
             element: this.element,
-            selection: this.selection,
-            board: this.board
+            board: this.board,
+            selected: isSelected,
+            effect: this.effect
         };
-        if (this.context) {
-            const previous = Object.assign({}, this.context);
-            this.context = current;
-            return { current, previous };
-        }
-        else {
-            return { current };
-        }
+        return context;
     }
     ngOnDestroy() {
-        this.gGroup.remove();
-        this.board.destroyElement(this.getContext().current);
+        this.board.destroyElement(this.getContext());
     }
 }
 PlaitElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitElementComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PlaitElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", board: "board", viewport: "viewport", selection: "selection" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PlaitElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitElementComponent, selector: "plait-element", inputs: { index: "index", element: "element", parent: "parent", board: "board", effect: "effect", parentG: "parentG" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitElementComponent, decorators: [{
             type: Component,
             args: [{
@@ -1774,11 +2026,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 type: Input
             }], element: [{
                 type: Input
+            }], parent: [{
+                type: Input
             }], board: [{
                 type: Input
-            }], viewport: [{
+            }], effect: [{
+                type: Input
+            }], parentG: [{
+                type: Input
+            }] } });
+
+class PlaitChildrenElement {
+    constructor() {
+        this.trackBy = (index, element) => {
+            return element.id;
+        };
+    }
+    ngOnInit() {
+        if (!this.parent) {
+            this.parent = this.board;
+        }
+        if (!this.parentG) {
+            this.parentG = PlaitBoard.getElementHost(this.board);
+        }
+    }
+}
+PlaitChildrenElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitChildrenElement, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PlaitChildrenElement.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitChildrenElement, selector: "plait-children", inputs: { board: "board", parent: "parent", effect: "effect", parentG: "parentG" }, ngImport: i0, template: `
+        <plait-element
+            *ngFor="let item of parent.children; let index = index; trackBy: trackBy"
+            [index]="index"
+            [element]="item"
+            [parent]="parent"
+            [board]="board"
+            [effect]="effect"
+            [parentG]="parentG"
+        ></plait-element>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "parent", "board", "effect", "parentG"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitChildrenElement, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-children',
+                    template: `
+        <plait-element
+            *ngFor="let item of parent.children; let index = index; trackBy: trackBy"
+            [index]="index"
+            [element]="item"
+            [parent]="parent"
+            [board]="board"
+            [effect]="effect"
+            [parentG]="parentG"
+        ></plait-element>
+    `
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { board: [{
+                type: Input
+            }], parent: [{
+                type: Input
+            }], effect: [{
                 type: Input
-            }], selection: [{
+            }], parentG: [{
                 type: Input
             }] } });
 
@@ -1855,12 +2162,12 @@ class PlaitBoardComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    constructor(cdr, renderer2, elementRef, ngZone) {
+    constructor(cdr, elementRef, ngZone) {
         this.cdr = cdr;
-        this.renderer2 = renderer2;
         this.elementRef = elementRef;
         this.ngZone = ngZone;
         this.hasInitialized = false;
+        this.effect = {};
         this.destroy$ = new Subject();
         this.plaitValue = [];
         this.plaitPlugins = [];
@@ -1886,7 +2193,7 @@ class PlaitBoardComponent {
         BOARD_TO_HOST.set(this.board, this.host);
         BOARD_TO_ELEMENT_HOST.set(this.board, elementHost);
         BOARD_TO_ON_CHANGE.set(this.board, () => {
-            this.cdr.detectChanges();
+            this.detect();
             const changeEvent = {
                 children: this.board.children,
                 operations: this.board.operations,
@@ -1897,6 +2204,10 @@ class PlaitBoardComponent {
         });
         this.hasInitialized = true;
     }
+    detect() {
+        this.effect = {};
+        this.cdr.detectChanges();
+    }
     mouseLeaveListener() {
         fromEvent(this.host, 'mouseleave')
             .pipe(takeUntil(this.destroy$))
@@ -2068,17 +2379,11 @@ class PlaitBoardComponent {
         this.cdr.markForCheck();
     }
 }
-PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitBoardComponent, selector: "plait-board", inputs: { plaitValue: "plaitValue", plaitViewport: "plaitViewport", plaitPlugins: "plaitPlugins", plaitOptions: "plaitOptions" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.focused": "this.isFocused" } }, queries: [{ propertyName: "toolbarTemplateRef", first: true, predicate: ["plaitToolbar"], descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "viewportContainer", first: true, predicate: ["viewportContainer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;"><g class="element-host"></g></svg>
-            <plait-element
-                *ngFor="let item of board.children; let index = index; trackBy: trackBy"
-                [index]="index"
-                [element]="item"
-                [board]="board"
-                [selection]="board.selection"
-            ></plait-element>
+            <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
@@ -2089,7 +2394,7 @@ PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             (resetZoomHandel)="resetZoomHandel()"
         ></plait-toolbar>
         <ng-content></ng-content>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "board", "viewport", "selection"] }, { kind: "component", type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: ["board"], outputs: ["adaptHandle", "zoomInHandle", "zoomOutHandle", "resetZoomHandel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }, { kind: "component", type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: ["board"], outputs: ["adaptHandle", "zoomInHandle", "zoomOutHandle", "resetZoomHandel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitBoardComponent, decorators: [{
             type: Component,
             args: [{
@@ -2097,13 +2402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                     template: `
         <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;"><g class="element-host"></g></svg>
-            <plait-element
-                *ngFor="let item of board.children; let index = index; trackBy: trackBy"
-                [index]="index"
-                [element]="item"
-                [board]="board"
-                [selection]="board.selection"
-            ></plait-element>
+            <plait-children [board]="board" [effect]="effect"></plait-children>
         </div>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
@@ -2117,7 +2416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { plaitValue: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { plaitValue: [{
                 type: Input
             }], plaitViewport: [{
                 type: Input
@@ -2149,80 +2448,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 args: ['viewportContainer', { read: ElementRef, static: true }]
             }] } });
 
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
-        return true;
-    }
-    return false;
-}
-
-class PlaitPluginElementComponent {
-    set context(value) {
-        if (hasBeforeContextChange(this)) {
-            this.beforeContextChange(value);
-        }
-        const elementChanged = this.element && this.element !== value.element;
-        if (elementChanged) {
-            if (isSelectedElement(this.board, this.element)) {
-                removeSelectedElement(this.board, this.element);
-                addSelectedElement(this.board, value.element);
-            }
-        }
-        this._context = value;
-        if (this.element) {
-            ELEMENT_TO_PLUGIN_COMPONENT.set(this.element, this);
-        }
-        this.onContextChange();
-    }
-    get context() {
-        return this._context;
-    }
-    get element() {
-        return this.context && this.context.element;
-    }
-    get selection() {
-        return this.context && this.context.selection;
-    }
-    get board() {
-        return this.context && this.context.board;
-    }
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.initialized = false;
-        this.g = createG();
-    }
-    onContextChange() {
-        if (!this.initialized) {
-            return;
-        }
-        this.cdr.markForCheck();
-    }
-    ngOnInit() {
-        var _a;
-        const type = ((_a = this.element) === null || _a === void 0 ? void 0 : _a.type) || 'default-plugin-element';
-        this.g.setAttribute(`plait-${type}`, 'true');
-        this.initialized = true;
-    }
-    ngOnDestroy() {
-        ELEMENT_TO_PLUGIN_COMPONENT.delete(this.element);
-        removeSelectedElement(this.board, this.element);
-        this.g.remove();
-    }
-}
-PlaitPluginElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-PlaitPluginElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitPluginElementComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { context: [{
-                type: Input
-            }] } });
-const ELEMENT_TO_PLUGIN_COMPONENT = new WeakMap();
-
-const COMPONENTS = [PlaitBoardComponent, PlaitElementComponent, PlaitToolbarComponent];
+const COMPONENTS = [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent, PlaitToolbarComponent];
 class PlaitModule {
 }
 PlaitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PlaitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, declarations: [PlaitBoardComponent, PlaitElementComponent, PlaitToolbarComponent], imports: [BrowserModule], exports: [PlaitBoardComponent, PlaitElementComponent, PlaitToolbarComponent] });
+PlaitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, declarations: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent, PlaitToolbarComponent], imports: [BrowserModule], exports: [PlaitBoardComponent, PlaitChildrenElement, PlaitElementComponent, PlaitToolbarComponent] });
 PlaitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, imports: [BrowserModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitModule, decorators: [{
             type: NgModule,
@@ -2241,5 +2471,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_PLUGIN_COMPONENT, FLUSHING, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NS, Path, PlaitBoard, PlaitBoardComponent, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPointerType, PlaitToolbarComponent, Point, RectangleClient, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, calcElementIntersectionSelection, changeZoom, clampZoomLevel, clearSelectionMoving, clearViewportOrigination, createG, createSVG, createSelectionOuterG, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawArrow, drawRoundRectangle, fitViewport, getBoardRectangle, getElementHostBBox, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isFromScrolling, isFromViewportChange, isInPlaitBoard, isIntersectionElements, isNullOrUndefined, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, setViewport, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withSelection };
+export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_COMPONENT, FLUSHING, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NODE_TO_INDEX, NODE_TO_PARENT, NS, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPointerType, PlaitToolbarComponent, Point, RectangleClient, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, changeZoom, clampZoomLevel, clearSelectionMoving, clearViewportOrigination, createG, createSVG, createSelectionOuterG, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawAbstractRoundRectangle, drawArrow, drawCircle, drawLine, drawRoundRectangle, fitViewport, getBoardRectangle, getElementHostBBox, getHitElements, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isFromScrolling, isFromViewportChange, isInPlaitBoard, isIntersectionElements, isNullOrUndefined, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, setViewport, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withSelection };
 //# sourceMappingURL=plait-core.mjs.map