@plait/core 0.0.55 → 0.0.57

package/fesm2020/plait-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, EventEmitter, HostBinding, Output, ElementRef, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, HostBinding, Output, ElementRef, ViewChild, ContentChild, Directive, NgModule } from '@angular/core';
 import rough from 'roughjs/bin/rough';
 import { Subject, fromEvent } from 'rxjs';
 import { takeUntil, filter } from 'rxjs/operators';
@@ -11,16 +11,21 @@ import { BrowserModule } from '@angular/platform-browser';
 const CLIP_BOARD_FORMAT_KEY = 'x-plait-fragment';
 const SCROLL_BAR_WIDTH = 20;
 
-var BaseCursorStatus;
-(function (BaseCursorStatus) {
-    BaseCursorStatus["move"] = "move";
-    BaseCursorStatus["select"] = "select";
-    BaseCursorStatus["drag"] = "drag";
-})(BaseCursorStatus || (BaseCursorStatus = {}));
+var PlaitPointerType;
+(function (PlaitPointerType) {
+    PlaitPointerType["hand"] = "hand";
+    PlaitPointerType["selection"] = "selection";
+})(PlaitPointerType || (PlaitPointerType = {}));
 
-/**
- * Extendable Custom Types Interface
- */
+function isNullOrUndefined(value) {
+    return value === null || value === undefined;
+}
+
+const Viewport = {
+    isViewport: (value) => {
+        return (!isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor) && !isNullOrUndefined(value.originationCoord));
+    }
+};
 
 const Path = {
     parent(path) {
@@ -155,7 +160,7 @@ const Path = {
                     break;
                 }
             }
-            return null;
+            return p;
         });
     }
 };
@@ -179,93 +184,6 @@ const PlaitNode = {
     }
 };
 
-const isSetViewportOperation = (value) => {
-    return value.type === 'set_viewport';
-};
-const inverse = (op) => {
-    switch (op.type) {
-        case 'insert_node': {
-            return { ...op, type: 'remove_node' };
-        }
-        case 'remove_node': {
-            return { ...op, type: 'insert_node' };
-        }
-        case 'move_node': {
-            const { newPath, path } = op;
-            // PERF: in this case the move operation is a no-op anyways.
-            if (Path.equals(newPath, path)) {
-                return op;
-            }
-            if (Path.isSibling(path, newPath)) {
-                const inversePath = Path.transform(path, op);
-                return { ...op, path: inversePath, newPath: path };
-            }
-            return { ...op, path: newPath, newPath: path };
-        }
-        case 'set_node': {
-            const { properties, newProperties } = op;
-            return { ...op, properties: newProperties, newProperties: properties };
-        }
-        case 'set_selection': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: null
-                };
-            }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: null,
-                    newProperties: properties
-                };
-            }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
-            }
-        }
-        case 'set_viewport': {
-            const { properties, newProperties } = op;
-            if (properties == null) {
-                return {
-                    ...op,
-                    properties: newProperties,
-                    newProperties: newProperties
-                };
-            }
-            else if (newProperties == null) {
-                return {
-                    ...op,
-                    properties: properties,
-                    newProperties: properties
-                };
-            }
-            else {
-                return { ...op, properties: newProperties, newProperties: properties };
-            }
-        }
-    }
-};
-const PlaitOperation = {
-    isSetViewportOperation,
-    inverse
-};
-
-function isNullOrUndefined(value) {
-    return value === null || value === undefined;
-}
-
-const Viewport = {
-    isViewport: (value) => {
-        return !isNullOrUndefined(value.zoom) && !isNullOrUndefined(value.viewBackgroundColor) && !isNullOrUndefined(value.canvasPoint);
-    }
-};
-
-const SAVING = new WeakMap();
-const MERGING = new WeakMap();
-
 const applyToDraft = (board, selection, viewport, op) => {
     switch (op.type) {
         case 'insert_node': {
@@ -472,8 +390,7 @@ function createBoard(host, children, options) {
         host,
         viewport: {
             zoom: 1,
-            viewBackgroundColor: '#000',
-            canvasPoint: []
+            viewBackgroundColor: '#000'
         },
         children,
         operations: [],
@@ -482,7 +399,7 @@ function createBoard(host, children, options) {
             undos: []
         },
         selection: null,
-        cursor: BaseCursorStatus.select,
+        pointer: PlaitPointerType.selection,
         options: options || {
             readonly: false,
             allowClearBoard: false,
@@ -513,8 +430,8 @@ function createBoard(host, children, options) {
         insertFragment: (data) => { },
         deleteFragment: (data) => { },
         drawElement: (context) => [],
-        redrawElement: (context, changes) => [],
-        destroyElement: () => { }
+        redrawElement: (context, previousContext) => { },
+        destroyElement: (context) => { }
     };
     return board;
 }
@@ -531,6 +448,96 @@ function withBoard(board) {
     return board;
 }
 
+/**
+ * Extendable Custom Types Interface
+ */
+
+const isSetViewportOperation = (value) => {
+    return value.type === 'set_viewport';
+};
+const inverse = (op) => {
+    switch (op.type) {
+        case 'insert_node': {
+            return { ...op, type: 'remove_node' };
+        }
+        case 'remove_node': {
+            return { ...op, type: 'insert_node' };
+        }
+        case 'move_node': {
+            const { newPath, path } = op;
+            // PERF: in this case the move operation is a no-op anyways.
+            if (Path.equals(newPath, path)) {
+                return op;
+            }
+            // when operation path is [0,0] -> [0,2], should exec Path.transform to get [0,1] -> [0,0]
+            // shoud not return [0,2] -> [0,0] #WIK-8981
+            // if (Path.isSibling(path, newPath)) {
+            //     return { ...op, path: newPath, newPath: path };
+            // }
+            // If the move does not happen within a single parent it is possible
+            // for the move to impact the true path to the location where the node
+            // was removed from and where it was inserted. We have to adjust for this
+            // and find the original path. We can accomplish this (only in non-sibling)
+            // moves by looking at the impact of the move operation on the node
+            // after the original move path.
+            const inversePath = Path.transform(path, op);
+            const inverseNewPath = Path.transform(Path.next(path), op);
+            return { ...op, path: inversePath, newPath: inverseNewPath };
+        }
+        case 'set_node': {
+            const { properties, newProperties } = op;
+            return { ...op, properties: newProperties, newProperties: properties };
+        }
+        case 'set_selection': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: null
+                };
+            }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: null,
+                    newProperties: properties
+                };
+            }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
+            }
+        }
+        case 'set_viewport': {
+            const { properties, newProperties } = op;
+            if (properties == null) {
+                return {
+                    ...op,
+                    properties: newProperties,
+                    newProperties: newProperties
+                };
+            }
+            else if (newProperties == null) {
+                return {
+                    ...op,
+                    properties: properties,
+                    newProperties: properties
+                };
+            }
+            else {
+                return { ...op, properties: newProperties, newProperties: properties };
+            }
+        }
+    }
+};
+const PlaitOperation = {
+    isSetViewportOperation,
+    inverse
+};
+
+const SAVING = new WeakMap();
+const MERGING = new WeakMap();
+
 function transformPoints(board, points) {
     const newPoints = points.map(point => {
         return transformPoint(board, point);
@@ -545,17 +552,9 @@ function transformPoint(board, point) {
     const newPoint = [x, y];
     return newPoint;
 }
-function calculateZoom(zoom, minZoom = 0.2, maxZoom = 4) {
-    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
-}
 function isNoSelectionElement(e) {
     return e.target?.closest('.plait-board-attached');
 }
-const updateCursorStatus = (board, cursor) => {
-    if (cursor) {
-        board.cursor = cursor;
-    }
-};
 
 const NS = 'http://www.w3.org/2000/svg';
 function toPoint(x, y, container) {
@@ -813,73 +812,98 @@ function distanceBetweenPointAndPoint(x1, y1, x2, y2) {
     return Math.hypot(dx, dy);
 }
 
-function invert(oldMatrix, newMatrix) {
-    let n = newMatrix[0], r = newMatrix[1], a = newMatrix[2], i = newMatrix[3], o = newMatrix[4], c = newMatrix[5], l = newMatrix[6], s = newMatrix[7], u = newMatrix[8], d = u * o - c * s, h = -u * i + c * l, f = s * i - o * l, p = n * d + r * h + a * f;
-    return p
-        ? ((p = 1 / p),
-            (oldMatrix[0] = d * p),
-            (oldMatrix[1] = (-u * r + a * s) * p),
-            (oldMatrix[2] = (c * r - a * o) * p),
-            (oldMatrix[3] = h * p),
-            (oldMatrix[4] = (u * n - a * l) * p),
-            (oldMatrix[5] = (-c * n + a * i) * p),
-            (oldMatrix[6] = f * p),
-            (oldMatrix[7] = (-s * n + r * l) * p),
-            (oldMatrix[8] = (o * n - r * i) * p),
-            oldMatrix)
-        : null;
+/**
+ * 逆矩阵
+ * [a c e]
+ * [b d f]
+ * [0 0 1]
+ * @param newMatrix 输出返回矩阵
+ * @param matrix 新矩阵
+ * @returns 逆矩阵
+ */
+function invertMatrix(newMatrix, matrix) {
+    const [n, r, a, i, o, c, l, s, u] = matrix;
+    const determinant = u * o - c * s;
+    const h = -u * i + c * l;
+    const f = s * i - o * l;
+    const product = n * determinant + r * h + a * f;
+    if (!product) {
+        return null;
+    }
+    const reciprocal = 1 / product;
+    newMatrix[0] = determinant * reciprocal;
+    newMatrix[1] = (-u * r + a * s) * reciprocal;
+    newMatrix[2] = (c * r - a * o) * reciprocal;
+    newMatrix[3] = h * reciprocal;
+    newMatrix[4] = (u * n - a * l) * reciprocal;
+    newMatrix[5] = (-c * n + a * i) * reciprocal;
+    newMatrix[6] = f * reciprocal;
+    newMatrix[7] = (-s * n + r * l) * reciprocal;
+    newMatrix[8] = (o * n - r * i) * reciprocal;
+    return newMatrix;
 }
-function transformMat3(e, t, n) {
-    e = [t[0] * n[0] + t[1] * n[3] + t[2] * n[6], t[0] * n[1] + t[1] * n[4] + t[2] * n[7], t[0] * n[2] + t[1] * n[5] + t[2] * n[8]];
-    return e;
+/**
+ * 将视图坐标与反转矩阵相乘，以得到原始坐标
+ * 使用给定的矩阵进行转换
+ * 矩阵与向量乘法，3 维向量与3x3矩阵的乘积
+ * [m11 m12 m13][v1]
+ * [m21 m22 m23][v2]
+ * [m31 m32 m33][v3]
+ * @param out 输出结果向量
+ * @param t 要转换的向量
+ * @param n 矩阵转换
+ * @returns [v1 * m11 + v2 * m12 + v3 * m13, v1 * m21 + v2 * m22 + v3 * m23, v1 * m31 + v2 * m32 + v3 * m33];
+ */
+function transformMat3(out, vector, matrix) {
+    out = [
+        vector[0] * matrix[0] + vector[1] * matrix[3] + vector[2] * matrix[6],
+        vector[0] * matrix[1] + vector[1] * matrix[4] + vector[2] * matrix[7],
+        vector[0] * matrix[2] + vector[1] * matrix[5] + vector[2] * matrix[8]
+    ];
+    return out;
 }
-function convertPoint(arr) {
-    return Array.isArray(arr)
+/**
+ * 规范 point
+ * @param point
+ * @returns point
+ */
+function normalizePoint(point) {
+    return Array.isArray(point)
         ? {
-            x: arr[0],
-            y: arr[1]
+            x: point[0],
+            y: point[1]
         }
-        : arr;
-}
-function invertClient(board, point, matrix) {
-    const convert = convertPoint(point);
-    const clientBox = getViewportClientBox(board);
-    const newPoint = [convert.x - clientBox.x, convert.y - clientBox.y, 1];
-    const invertMatrix = invert([], matrix);
-    const newMatrix = transformMat3([], [newPoint[0], newPoint[1], 1], invertMatrix);
-    return [newMatrix[0], newMatrix[1]];
-}
-function invertViewport(point, matrix) {
-    const newPoint = convertPoint(point);
-    const invertMatrix = invert([], matrix);
-    return transformMat3([], [newPoint.x, newPoint.y, 1], invertMatrix);
+        : point;
 }
-function convertViewport(point, matrix) {
-    const newPoint = convertPoint(point);
-    return transformMat3([], [newPoint.x, newPoint.y, 1], matrix);
+/**
+ * 将一个点坐标反转回它的原始坐标
+ * @param point 表示要反转的点的视图坐标，它是一个长度为 2 的数组，存储点的 x 和 y 坐标
+ * @param matrix 表示视图矩阵，是在视图中对图形进行缩放和平移时使用的矩阵
+ * @returns 最终结果是一个长度为 3 的数组，存储点的 x，y 和 w 坐标（w 坐标是点的齐次坐标)
+ */
+function invertViewportCoordinates(point, matrix) {
+    const { x, y } = normalizePoint(point);
+    const invertedMatrix = invertMatrix([], matrix);
+    return transformMat3([], [x, y, 1], invertedMatrix);
 }
-function getViewportCanvasBox(board, matrix) {
-    const clientBox = getViewportClientBox(board);
-    const client = invertClient(board, [clientBox.minX, clientBox.minY], matrix);
-    const newClient = invertClient(board, [clientBox.maxX, clientBox.maxY], matrix);
-    return {
-        minX: client[0],
-        minY: client[1],
-        maxX: newClient[0],
-        maxY: newClient[1],
-        x: client[0],
-        y: client[1],
-        width: newClient[0] - client[0],
-        height: newClient[1] - client[1]
-    };
+function convertToViewportCoordinates(point, matrix) {
+    const { x, y } = normalizePoint(point);
+    return transformMat3([], [x, y, 1], matrix);
 }
-function getViewportClientBox(board) {
+/**
+ * 获取 contentContainer 的 clientBox
+ * @param board
+ * @returns
+ */
+function getViewportContainerBox(board) {
+    const { hideScrollbar } = board.options;
+    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
     const container = board.host?.parentElement;
     const containerRect = container?.getBoundingClientRect();
     const x = containerRect.x || containerRect.left;
     const y = containerRect.y || containerRect.top;
-    const width = containerRect.width - SCROLL_BAR_WIDTH;
-    const height = containerRect.height - SCROLL_BAR_WIDTH;
+    const width = containerRect.width - scrollBarWidth;
+    const height = containerRect.height - scrollBarWidth;
     return {
         minX: x,
         minY: y,
@@ -891,41 +915,70 @@ function getViewportClientBox(board) {
         height
     };
 }
-function getGraphicsBBox(board) {
-    const rootGroup = board.host.firstChild;
-    const rootGroupBox = rootGroup.getBBox();
-    return rootGroupBox;
+/**
+ * 获取 board.plait-board 的 clientBox
+ * @param board
+ * @returns
+ */
+function getBoardClientBox(board) {
+    const { hideScrollbar } = board.options;
+    const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+    const boardEl = board.host?.parentElement?.parentElement;
+    const elRect = boardEl?.getBoundingClientRect();
+    return {
+        width: elRect.width + scrollBarWidth,
+        height: elRect.height + scrollBarWidth
+    };
 }
-function calculateBBox(board, zoom) {
-    const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
-    // const clientBox = getViewportClientBox(board);
+/**
+ * 获取 rootGroup 相对于当前 svg 空间的最小矩阵坐标
+ */
+function getRootGroupBBox(board, zoom) {
     const rootGroup = board.host.firstChild;
     const rootGroupBox = rootGroup.getBBox();
-    let box = {};
-    const containerWidth = boardComponent.width / zoom;
-    const containerHeight = boardComponent.height / zoom;
+    const viewportContainerBox = getViewportContainerBox(board);
+    const containerWidth = viewportContainerBox.width / zoom;
+    const containerHeight = viewportContainerBox.height / zoom;
+    let left;
+    let right;
+    let top;
+    let bottom;
     if (rootGroupBox.width < containerWidth) {
         const offsetX = rootGroupBox.x + rootGroupBox.width / 2;
         const containerX = containerWidth / 2;
-        box.left = offsetX - containerX;
-        box.right = offsetX + containerX;
+        left = offsetX - containerX;
+        right = offsetX + containerX;
     }
     else {
-        box.left = rootGroupBox.x;
-        box.right = rootGroupBox.x + rootGroupBox.width;
+        left = rootGroupBox.x;
+        right = rootGroupBox.x + rootGroupBox.width;
     }
     if (rootGroupBox.height < containerHeight) {
         const offsetY = rootGroupBox.y + rootGroupBox.height / 2;
         const containerY = containerHeight / 2;
-        box.top = offsetY - containerY;
-        box.bottom = offsetY + containerY;
+        top = offsetY - containerY;
+        bottom = offsetY + containerY;
     }
     else {
-        box.top = rootGroupBox.y;
-        box.bottom = rootGroupBox.y + rootGroupBox.height;
+        top = rootGroupBox.y;
+        bottom = rootGroupBox.y + rootGroupBox.height;
     }
-    // 在新的缩放比容器宽高下的内容盒子位置
-    return box;
+    return {
+        left,
+        right,
+        top,
+        bottom
+    };
+}
+/**
+ * 验证缩放比是否符合限制，如果超出限制，则返回合适的缩放比
+ * @param zoom 缩放比
+ * @param minZoom 最小缩放比
+ * @param maxZoom 最大缩放比
+ * @returns 正确的缩放比
+ */
+function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
+    return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
 }
 
 function withHistory(board) {
@@ -1012,7 +1065,13 @@ function withHistory(board) {
     return board;
 }
 
-function withMove(board) {
+const updatePointerType = (board, pointer) => {
+    board.pointer = pointer;
+    const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
+    boardComponent?.markForCheck();
+};
+
+function withHandPointer(board) {
     const { mousedown, mousemove, globalMouseup, keydown, keyup } = board;
     const plaitBoardMove = {
         x: 0,
@@ -1020,12 +1079,12 @@ function withMove(board) {
     };
     board.mousedown = (event) => {
         if (board.options.readonly) {
-            updateCursorStatus(board, BaseCursorStatus.move);
+            updatePointerType(board, PlaitPointerType.hand);
         }
         else if (!board.selection) {
-            updateCursorStatus(board, BaseCursorStatus.select);
+            updatePointerType(board, PlaitPointerType.selection);
         }
-        if (board.cursor === BaseCursorStatus.move && board.selection) {
+        if (board.pointer === PlaitPointerType.hand && board.selection) {
             const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
             boardComponent.movingChange(true);
             plaitBoardMove.x = event.x;
@@ -1036,10 +1095,11 @@ function withMove(board) {
     };
     board.mousemove = (event) => {
         const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
-        if (board.cursor === BaseCursorStatus.move && board.selection && boardComponent.isMoving) {
+        if (board.pointer === PlaitPointerType.hand && board.selection && boardComponent.isMoving) {
             const left = event.x - plaitBoardMove.x;
             const top = event.y - plaitBoardMove.y;
-            boardComponent.setScroll(boardComponent.scrollLeft - left, boardComponent.scrollTop - top);
+            const { scrollLeft, scrollTop } = boardComponent.viewportState;
+            boardComponent.setScroll(scrollLeft - left, scrollTop - top);
             plaitBoardMove.x = event.x;
             plaitBoardMove.y = event.y;
         }
@@ -1056,8 +1116,8 @@ function withMove(board) {
     };
     board.keydown = (event) => {
         if (board.selection && event.code === 'Space') {
-            if (board.cursor !== BaseCursorStatus.move) {
-                updateCursorStatus(board, BaseCursorStatus.move);
+            if (board.pointer !== PlaitPointerType.hand) {
+                updatePointerType(board, PlaitPointerType.hand);
                 const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
                 boardComponent.cdr.markForCheck();
             }
@@ -1067,7 +1127,7 @@ function withMove(board) {
     };
     board.keyup = (event) => {
         if (board.selection && !board.options.readonly && event.code === 'Space') {
-            updateCursorStatus(board, BaseCursorStatus.select);
+            updatePointerType(board, PlaitPointerType.selection);
             const boardComponent = PLAIT_BOARD_TO_COMPONENT.get(board);
             boardComponent.cdr.markForCheck();
         }
@@ -1108,7 +1168,9 @@ function withSelection(board) {
             Transforms.setSelection(board, { anchor: start, focus: start });
         }
         else {
-            Transforms.setSelection(board, null);
+            if (board.selection !== null) {
+                Transforms.setSelection(board, null);
+            }
         }
         start = null;
         end = null;
@@ -1130,24 +1192,60 @@ class PlaitElementComponent {
     }
     initialize() {
         this.initialized = true;
-        this.groupG = createG();
-        this.renderer2.setAttribute(this.groupG, 'plait-element-group', this.index.toString());
-        this.host.append(this.groupG);
+        this.gGroup = createG();
+        this.renderer2.setAttribute(this.gGroup, 'plait-element-group', this.index.toString());
+        this.host.append(this.gGroup);
     }
     drawElement() {
-        const gArray = this.board.drawElement({ elementInstance: this });
-        gArray.forEach(g => {
-            this.groupG.appendChild(g);
-        });
+        const context = this.getContext();
+        const result = this.board.drawElement(context.current);
+        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);
+            this.instance = instance;
+        }
     }
-    ngOnChanges(changes) {
+    ngOnChanges() {
         if (this.initialized) {
-            this.board.redrawElement({ elementInstance: this }, changes);
+            const context = this.getContext();
+            if (this.instance) {
+                this.instance.context = context.current;
+            }
+            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);
+                });
+            }
+        }
+    }
+    getContext() {
+        const current = {
+            element: this.element,
+            selection: this.selection,
+            board: this.board,
+            host: this.host
+        };
+        if (this.context) {
+            const previous = { ...this.context };
+            this.context = current;
+            return { current, previous };
+        }
+        else {
+            return { current };
         }
     }
     ngOnDestroy() {
-        this.board.destroyElement();
-        this.groupG.remove();
+        this.gGroup.remove();
+        this.board.destroyElement(this.getContext().current);
     }
 }
 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 });
@@ -1175,27 +1273,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
 class PlaitToolbarComponent {
     constructor() {
-        this._viewZoom = 100;
+        this.PlaitPointerType = PlaitPointerType;
         this.hostClass = `plait-board-toolbar`;
-        this.moveHandle = new EventEmitter();
         this.adaptHandle = new EventEmitter();
         this.zoomInHandle = new EventEmitter();
         this.zoomOutHandle = new EventEmitter();
         this.resetZoomHandel = new EventEmitter();
     }
-    set viewZoom(zoom) {
-        this._viewZoom = Number(((zoom ?? 1) * 100).toFixed(0));
+    get zoom() {
+        const zoom = this.board?.viewport.zoom || 1;
+        return Number((zoom * 100).toFixed(0));
     }
-    get viewZoom() {
-        return this._viewZoom;
+    get pointerType() {
+        return this.board.pointer || PlaitPointerType.selection;
     }
-    dragMove() {
-        if (this.cursorStatus !== BaseCursorStatus.move) {
-            this.moveHandle.emit(BaseCursorStatus.move);
-        }
-        else {
-            this.moveHandle.emit(BaseCursorStatus.select);
-        }
+    activeHand() {
+        updatePointerType(this.board, this.pointerType === PlaitPointerType.hand ? PlaitPointerType.selection : PlaitPointerType.hand);
     }
     // 适应画布
     adapt() {
@@ -1214,19 +1307,15 @@ class PlaitToolbarComponent {
     }
 }
 PlaitToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PlaitToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: { cursorStatus: "cursorStatus", viewZoom: "viewZoom" }, outputs: { moveHandle: "moveHandle", adaptHandle: "adaptHandle", zoomInHandle: "zoomInHandle", zoomOutHandle: "zoomOutHandle", resetZoomHandel: "resetZoomHandel" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"zoom-toolbar island plait-board-attached\">\n    <a class=\"toolbar-item plait-action-icon\" [ngClass]=\"{ 'icon-active': cursorStatus === 'move' }\" (click)=\"dragMove()\">\n        <ng-template [ngTemplateOutlet]=\"dragMoveTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"adapt()\">\n        <ng-template [ngTemplateOutlet]=\"adaptTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomOut()\">\n        <ng-template [ngTemplateOutlet]=\"zoomOutTemplate\"></ng-template>\n    </a>\n    <div class=\"toolbar-item zoom-value\" (mousedown)=\"resetZoom()\">{{ viewZoom }}%</div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomIn()\">\n        <ng-template [ngTemplateOutlet]=\"zoomInTemplate\"></ng-template>\n    </a>\n</div>\n\n<ng-template #dragMoveTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M8.44583468,0.500225887 C9.07406934,0.510185679 9.54739531,0.839591366 9.86192311,1.34305279 C9.89696656,1.39914649 9.92878401,1.45492964 9.9576026,1.50991157 L9.9576026,1.50991157 L10.0210033,1.64201027 L10.061978,1.62350755 C10.1972891,1.56834247 10.3444107,1.53218464 10.5027907,1.51755353 L10.5027907,1.51755353 L10.6649031,1.51019133 C11.4883708,1.51019133 12.0208782,1.99343346 12.3023042,2.66393278 C12.3903714,2.87392911 12.4344191,3.10047818 12.4339446,3.3257952 L12.4339446,3.3257952 L12.4360033,3.80501027 L12.5160535,3.78341501 C12.6124478,3.76124046 12.7138812,3.74739854 12.820201,3.74250274 L12.820201,3.74250274 L12.9833264,3.74194533 C13.6121166,3.7657478 14.0645887,4.0801724 14.3087062,4.56112689 C14.4521117,4.8436609 14.4987984,5.11349437 14.4999262,5.33449618 L14.4999262,5.33449618 L14.3922653,12.049414 C14.3784752,12.909177 14.0717787,13.7360948 13.5212406,14.3825228 C13.4055676,14.5183496 13.2843697,14.643961 13.1582361,14.7596335 C12.4634771,15.3967716 11.755103,15.6538706 11.1897396,15.7000055 L11.1897396,15.7000055 L7.4723083,15.6798158 C7.14276373,15.634268 6.81580098,15.5154267 6.49455235,15.3472501 C6.25643701,15.2225944 6.06881706,15.0975452 5.88705731,14.9494308 L5.88705731,14.9494308 L2.55198782,11.500873 C2.39559475,11.3769079 2.17626793,11.1748532 1.9548636,10.9139403 C1.57867502,10.4706225 1.33501976,10.0139923 1.30330257,9.52833025 C1.28093191,9.18578476 1.37200912,8.85641102 1.5826788,8.56872564 C1.82538833,8.23725279 2.12881965,8.02107162 2.47470569,7.92957033 C2.95807982,7.80169771 3.42705723,7.92468989 3.86509644,8.18731167 C4.04431391,8.29475961 4.1816109,8.40304483 4.26225571,8.47866867 L4.26225571,8.47866867 L4.61400328,8.79701027 L4.57247249,3.59275349 L4.57628524,3.46204923 C4.5897691,3.23444442 4.64087578,2.95701848 4.75937106,2.66961597 C5.01017272,2.06131302 5.49670227,1.64692543 6.21363856,1.60818786 C6.44223508,1.59583681 6.65042099,1.62176802 6.83696985,1.68057551 L6.83696985,1.68057551 L6.86400328,1.69001027 C6.88501862,1.63593052 6.90764242,1.58175442 6.9331867,1.52672633 L6.9331867,1.52672633 L7.01883595,1.35955614 C7.31549194,0.832047939 7.79476072,0.48993549 8.44583468,0.500225887 Z M8.42684173,1.70001476 C8.26825412,1.69756905 8.16339456,1.77242008 8.06478367,1.94776814 C8.03967773,1.99241107 8.01831703,2.03811495 8.00083464,2.07855067 L8.00083464,2.07855067 L7.94879157,2.2035905 L7.94354455,2.20731401 L7.943,3.161 L7.97170661,3.16123746 L7.97170661,7.60991883 L6.77170661,7.60991883 L6.771,3.338 L6.74362358,3.33880359 C6.74284189,3.29064626 6.73014163,3.20282206 6.7002616,3.11094408 L6.66446012,3.01903385 C6.58982025,2.85766739 6.49843292,2.79455071 6.27838133,2.80644008 C6.07001018,2.81769881 5.95642108,2.91444507 5.86877664,3.12702089 C5.79792279,3.29887224 5.77228127,3.48655908 5.77246879,3.58977183 L5.77246879,3.58977183 L5.83613619,11.5252021 L3.41863956,9.33477657 L3.31637296,9.25979571 L3.24805011,9.21651224 C3.06096922,9.10434987 2.89279975,9.06024641 2.78159879,9.0896637 C2.71007735,9.10858411 2.63607367,9.1613084 2.55086305,9.27768211 C2.51020424,9.33320478 2.49638061,9.38319687 2.50075171,9.4501283 C2.51206889,9.62341997 2.64503022,9.87260054 2.86983366,10.1375191 C3.03268834,10.3294345 3.19762053,10.4813781 3.35554956,10.6131022 L3.35554956,10.6131022 L6.68454317,14.0569073 C6.71106575,14.0773808 6.74806086,14.1037158 6.79369091,14.1335929 L6.79369091,14.1335929 L6.95464838,14.2315311 L7.05111031,14.2841211 C7.25978123,14.3933622 7.46253523,14.4670573 7.55685495,14.4854708 L7.55685495,14.4854708 L11.1407985,14.5022108 C11.1503576,14.5013899 11.1627905,14.4997539 11.1779002,14.4971772 L11.1779002,14.4971772 L11.2991076,14.4694224 C11.3491682,14.4557375 11.4083624,14.437284 11.4751158,14.4130563 C11.769383,14.3062543 12.066676,14.1324596 12.3471758,13.8752234 C12.4371203,13.7927386 12.5240597,13.7026333 12.607654,13.6044743 C12.9760464,13.1719172 13.183059,12.6137678 13.1924195,12.030173 L13.1924195,12.030173 L13.3000132,5.32832551 C13.2997939,5.29016685 13.2826117,5.19085946 13.2386527,5.10425262 C13.1843838,4.99733326 13.1129774,4.94771265 12.9379578,4.94108739 C12.6814739,4.93138871 12.534132,5.11189595 12.4756792,5.39480062 L12.4768718,7.52734922 L11.2768718,7.52734922 L11.276,5.688 L11.2462883,5.6883208 L11.2339541,3.32771285 C11.2341,3.2560396 11.2209054,3.18817621 11.1957482,3.12818892 C11.0820579,2.85732094 10.9199288,2.71019133 10.6649031,2.71019133 C10.456829,2.71019133 10.3197487,2.87378067 10.2524297,3.11264939 L10.2530225,7.512783 L9.05302254,7.512783 L9.053,3.288 L9.01554331,3.28724203 L8.98800328,2.29901027 L8.9629175,2.22263368 C8.94515567,2.17417174 8.92167756,2.11937748 8.8924232,2.06330056 L8.8924232,2.06330056 L8.84420197,1.9788544 C8.72758855,1.79219249 8.59915015,1.70280728 8.42684173,1.70001476 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #adaptTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit canvas</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit-canvas\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M14.9971494,10.4 L14.9971494,13.4020516 C14.9971494,14.2366152 14.3581879,14.9219414 13.542782,14.9955129 L13.3971494,15.0020516 L10.4,15.0020516 L10.4,13.8020516 L13.3971494,13.8020516 C13.590449,13.8020516 13.7517243,13.6649388 13.7890228,13.4826656 L13.7971494,13.4020516 L13.7971494,10.4 L14.9971494,10.4 Z M2.2,10.4 L2.2,13.3971494 C2.2,13.590449 2.3371128,13.7517243 2.51938605,13.7890228 L2.6,13.7971494 L5.60205161,13.7971494 L5.60205161,14.9971494 L2.6,14.9971494 C1.76543638,14.9971494 1.08011021,14.3581879 1.00653868,13.542782 L1,13.3971494 L1,10.4 L2.2,10.4 Z M10.5024511,4.9 C11.3861067,4.9 12.1024511,5.6163444 12.1024511,6.5 L12.1024511,6.5 L12.1024511,9.5 C12.1024511,10.3836556 11.3861067,11.1 10.5024511,11.1 L10.5024511,11.1 L5.50245112,11.1 C4.61879552,11.1 3.90245112,10.3836556 3.90245112,9.5 L3.90245112,9.5 L3.90245112,6.5 C3.90245112,5.6163444 4.61879552,4.9 5.50245112,4.9 L5.50245112,4.9 Z M10.5024511,6.1 L5.50245112,6.1 C5.28153722,6.1 5.10245112,6.2790861 5.10245112,6.5 L5.10245112,6.5 L5.10245112,9.5 C5.10245112,9.7209139 5.28153722,9.9 5.50245112,9.9 L5.50245112,9.9 L10.5024511,9.9 C10.723365,9.9 10.9024511,9.7209139 10.9024511,9.5 L10.9024511,9.5 L10.9024511,6.5 C10.9024511,6.2790861 10.723365,6.1 10.5024511,6.1 L10.5024511,6.1 Z M5.59714938,1 L5.59714938,2.2 L2.6,2.2 C2.40670034,2.2 2.24542508,2.3371128 2.20812658,2.51938605 L2.2,2.6 L2.2,5.60205161 L1,5.60205161 L1,2.6 C1,1.76543638 1.63896152,1.08011021 2.45436739,1.00653868 L2.6,1 L5.59714938,1 Z M13.3971494,1 L13.542782,1.00653868 C14.3581879,1.08011021 14.9971494,1.76543638 14.9971494,2.6 L14.9971494,2.6 L14.9971494,5.60205161 L13.7971494,5.60205161 L13.7971494,2.6 L13.7890228,2.51938605 C13.7517243,2.3371128 13.590449,2.2 13.3971494,2.2 L13.3971494,2.2 L10.4,2.2 L10.4,1 L13.3971494,1 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n<ng-template #zoomOutTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-out</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-out\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,2.73225886e-13 C10.6331505,2.73225886e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.58522109e-14,10.6331505 4.58522109e-14,6.85 C4.58522109e-14,3.06684946 3.06684946,2.73225886e-13 6.85,2.73225886e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M4.6,6.2 L9.12944565,6.2 C9.4608165,6.2 9.72944565,6.46862915 9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L4.6,7.4 C4.26862915,7.4 4,7.13137085 4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L9.12944565,6.2 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #zoomInTemplate\n    ><svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-in</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-in\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,-1.81188398e-13 C10.6331505,-1.81188398e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.61852778e-14,10.6331505 4.61852778e-14,6.85 C4.61852778e-14,3.06684946 3.06684946,-1.81188398e-13 6.85,-1.81188398e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M6.86472282,3.93527718 C7.16295659,3.93527718 7.41036958,4.15286679 7.45686984,4.43795406 L7.46472282,4.53527718 L7.464,6.19927718 L9.12944565,6.2 C9.42767941,6.2 9.6750924,6.41758961 9.72159266,6.70267688 L9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L7.464,7.39927718 L7.46472282,9.06472282 C7.46472282,9.36295659 7.24713321,9.61036958 6.96204594,9.65686984 L6.86472282,9.66472282 C6.56648906,9.66472282 6.31907607,9.44713321 6.27257581,9.16204594 L6.26472282,9.06472282 L6.264,7.39927718 L4.6,7.4 C4.30176624,7.4 4.05435325,7.18241039 4.00785299,6.89732312 L4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L6.264,6.19927718 L6.26472282,4.53527718 C6.26472282,4.2701805 6.43664548,4.0452385 6.67507642,3.96586557 L6.76739971,3.94313016 L6.86472282,3.93527718 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PlaitToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: { board: "board" }, outputs: { adaptHandle: "adaptHandle", zoomInHandle: "zoomInHandle", zoomOutHandle: "zoomOutHandle", resetZoomHandel: "resetZoomHandel" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"zoom-toolbar island plait-board-attached\">\n    <a class=\"toolbar-item plait-action-icon\" [ngClass]=\"{ 'icon-active': pointerType === PlaitPointerType.hand}\" (click)=\"activeHand()\">\n        <ng-template [ngTemplateOutlet]=\"dragMoveTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"adapt()\">\n        <ng-template [ngTemplateOutlet]=\"adaptTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomOut()\">\n        <ng-template [ngTemplateOutlet]=\"zoomOutTemplate\"></ng-template>\n    </a>\n    <div class=\"toolbar-item zoom-value\" (mousedown)=\"resetZoom()\">{{ zoom }}%</div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomIn()\">\n        <ng-template [ngTemplateOutlet]=\"zoomInTemplate\"></ng-template>\n    </a>\n</div>\n\n<ng-template #dragMoveTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M8.44583468,0.500225887 C9.07406934,0.510185679 9.54739531,0.839591366 9.86192311,1.34305279 C9.89696656,1.39914649 9.92878401,1.45492964 9.9576026,1.50991157 L9.9576026,1.50991157 L10.0210033,1.64201027 L10.061978,1.62350755 C10.1972891,1.56834247 10.3444107,1.53218464 10.5027907,1.51755353 L10.5027907,1.51755353 L10.6649031,1.51019133 C11.4883708,1.51019133 12.0208782,1.99343346 12.3023042,2.66393278 C12.3903714,2.87392911 12.4344191,3.10047818 12.4339446,3.3257952 L12.4339446,3.3257952 L12.4360033,3.80501027 L12.5160535,3.78341501 C12.6124478,3.76124046 12.7138812,3.74739854 12.820201,3.74250274 L12.820201,3.74250274 L12.9833264,3.74194533 C13.6121166,3.7657478 14.0645887,4.0801724 14.3087062,4.56112689 C14.4521117,4.8436609 14.4987984,5.11349437 14.4999262,5.33449618 L14.4999262,5.33449618 L14.3922653,12.049414 C14.3784752,12.909177 14.0717787,13.7360948 13.5212406,14.3825228 C13.4055676,14.5183496 13.2843697,14.643961 13.1582361,14.7596335 C12.4634771,15.3967716 11.755103,15.6538706 11.1897396,15.7000055 L11.1897396,15.7000055 L7.4723083,15.6798158 C7.14276373,15.634268 6.81580098,15.5154267 6.49455235,15.3472501 C6.25643701,15.2225944 6.06881706,15.0975452 5.88705731,14.9494308 L5.88705731,14.9494308 L2.55198782,11.500873 C2.39559475,11.3769079 2.17626793,11.1748532 1.9548636,10.9139403 C1.57867502,10.4706225 1.33501976,10.0139923 1.30330257,9.52833025 C1.28093191,9.18578476 1.37200912,8.85641102 1.5826788,8.56872564 C1.82538833,8.23725279 2.12881965,8.02107162 2.47470569,7.92957033 C2.95807982,7.80169771 3.42705723,7.92468989 3.86509644,8.18731167 C4.04431391,8.29475961 4.1816109,8.40304483 4.26225571,8.47866867 L4.26225571,8.47866867 L4.61400328,8.79701027 L4.57247249,3.59275349 L4.57628524,3.46204923 C4.5897691,3.23444442 4.64087578,2.95701848 4.75937106,2.66961597 C5.01017272,2.06131302 5.49670227,1.64692543 6.21363856,1.60818786 C6.44223508,1.59583681 6.65042099,1.62176802 6.83696985,1.68057551 L6.83696985,1.68057551 L6.86400328,1.69001027 C6.88501862,1.63593052 6.90764242,1.58175442 6.9331867,1.52672633 L6.9331867,1.52672633 L7.01883595,1.35955614 C7.31549194,0.832047939 7.79476072,0.48993549 8.44583468,0.500225887 Z M8.42684173,1.70001476 C8.26825412,1.69756905 8.16339456,1.77242008 8.06478367,1.94776814 C8.03967773,1.99241107 8.01831703,2.03811495 8.00083464,2.07855067 L8.00083464,2.07855067 L7.94879157,2.2035905 L7.94354455,2.20731401 L7.943,3.161 L7.97170661,3.16123746 L7.97170661,7.60991883 L6.77170661,7.60991883 L6.771,3.338 L6.74362358,3.33880359 C6.74284189,3.29064626 6.73014163,3.20282206 6.7002616,3.11094408 L6.66446012,3.01903385 C6.58982025,2.85766739 6.49843292,2.79455071 6.27838133,2.80644008 C6.07001018,2.81769881 5.95642108,2.91444507 5.86877664,3.12702089 C5.79792279,3.29887224 5.77228127,3.48655908 5.77246879,3.58977183 L5.77246879,3.58977183 L5.83613619,11.5252021 L3.41863956,9.33477657 L3.31637296,9.25979571 L3.24805011,9.21651224 C3.06096922,9.10434987 2.89279975,9.06024641 2.78159879,9.0896637 C2.71007735,9.10858411 2.63607367,9.1613084 2.55086305,9.27768211 C2.51020424,9.33320478 2.49638061,9.38319687 2.50075171,9.4501283 C2.51206889,9.62341997 2.64503022,9.87260054 2.86983366,10.1375191 C3.03268834,10.3294345 3.19762053,10.4813781 3.35554956,10.6131022 L3.35554956,10.6131022 L6.68454317,14.0569073 C6.71106575,14.0773808 6.74806086,14.1037158 6.79369091,14.1335929 L6.79369091,14.1335929 L6.95464838,14.2315311 L7.05111031,14.2841211 C7.25978123,14.3933622 7.46253523,14.4670573 7.55685495,14.4854708 L7.55685495,14.4854708 L11.1407985,14.5022108 C11.1503576,14.5013899 11.1627905,14.4997539 11.1779002,14.4971772 L11.1779002,14.4971772 L11.2991076,14.4694224 C11.3491682,14.4557375 11.4083624,14.437284 11.4751158,14.4130563 C11.769383,14.3062543 12.066676,14.1324596 12.3471758,13.8752234 C12.4371203,13.7927386 12.5240597,13.7026333 12.607654,13.6044743 C12.9760464,13.1719172 13.183059,12.6137678 13.1924195,12.030173 L13.1924195,12.030173 L13.3000132,5.32832551 C13.2997939,5.29016685 13.2826117,5.19085946 13.2386527,5.10425262 C13.1843838,4.99733326 13.1129774,4.94771265 12.9379578,4.94108739 C12.6814739,4.93138871 12.534132,5.11189595 12.4756792,5.39480062 L12.4768718,7.52734922 L11.2768718,7.52734922 L11.276,5.688 L11.2462883,5.6883208 L11.2339541,3.32771285 C11.2341,3.2560396 11.2209054,3.18817621 11.1957482,3.12818892 C11.0820579,2.85732094 10.9199288,2.71019133 10.6649031,2.71019133 C10.456829,2.71019133 10.3197487,2.87378067 10.2524297,3.11264939 L10.2530225,7.512783 L9.05302254,7.512783 L9.053,3.288 L9.01554331,3.28724203 L8.98800328,2.29901027 L8.9629175,2.22263368 C8.94515567,2.17417174 8.92167756,2.11937748 8.8924232,2.06330056 L8.8924232,2.06330056 L8.84420197,1.9788544 C8.72758855,1.79219249 8.59915015,1.70280728 8.42684173,1.70001476 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #adaptTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit canvas</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit-canvas\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M14.9971494,10.4 L14.9971494,13.4020516 C14.9971494,14.2366152 14.3581879,14.9219414 13.542782,14.9955129 L13.3971494,15.0020516 L10.4,15.0020516 L10.4,13.8020516 L13.3971494,13.8020516 C13.590449,13.8020516 13.7517243,13.6649388 13.7890228,13.4826656 L13.7971494,13.4020516 L13.7971494,10.4 L14.9971494,10.4 Z M2.2,10.4 L2.2,13.3971494 C2.2,13.590449 2.3371128,13.7517243 2.51938605,13.7890228 L2.6,13.7971494 L5.60205161,13.7971494 L5.60205161,14.9971494 L2.6,14.9971494 C1.76543638,14.9971494 1.08011021,14.3581879 1.00653868,13.542782 L1,13.3971494 L1,10.4 L2.2,10.4 Z M10.5024511,4.9 C11.3861067,4.9 12.1024511,5.6163444 12.1024511,6.5 L12.1024511,6.5 L12.1024511,9.5 C12.1024511,10.3836556 11.3861067,11.1 10.5024511,11.1 L10.5024511,11.1 L5.50245112,11.1 C4.61879552,11.1 3.90245112,10.3836556 3.90245112,9.5 L3.90245112,9.5 L3.90245112,6.5 C3.90245112,5.6163444 4.61879552,4.9 5.50245112,4.9 L5.50245112,4.9 Z M10.5024511,6.1 L5.50245112,6.1 C5.28153722,6.1 5.10245112,6.2790861 5.10245112,6.5 L5.10245112,6.5 L5.10245112,9.5 C5.10245112,9.7209139 5.28153722,9.9 5.50245112,9.9 L5.50245112,9.9 L10.5024511,9.9 C10.723365,9.9 10.9024511,9.7209139 10.9024511,9.5 L10.9024511,9.5 L10.9024511,6.5 C10.9024511,6.2790861 10.723365,6.1 10.5024511,6.1 L10.5024511,6.1 Z M5.59714938,1 L5.59714938,2.2 L2.6,2.2 C2.40670034,2.2 2.24542508,2.3371128 2.20812658,2.51938605 L2.2,2.6 L2.2,5.60205161 L1,5.60205161 L1,2.6 C1,1.76543638 1.63896152,1.08011021 2.45436739,1.00653868 L2.6,1 L5.59714938,1 Z M13.3971494,1 L13.542782,1.00653868 C14.3581879,1.08011021 14.9971494,1.76543638 14.9971494,2.6 L14.9971494,2.6 L14.9971494,5.60205161 L13.7971494,5.60205161 L13.7971494,2.6 L13.7890228,2.51938605 C13.7517243,2.3371128 13.590449,2.2 13.3971494,2.2 L13.3971494,2.2 L10.4,2.2 L10.4,1 L13.3971494,1 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n<ng-template #zoomOutTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-out</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-out\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,2.73225886e-13 C10.6331505,2.73225886e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.58522109e-14,10.6331505 4.58522109e-14,6.85 C4.58522109e-14,3.06684946 3.06684946,2.73225886e-13 6.85,2.73225886e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M4.6,6.2 L9.12944565,6.2 C9.4608165,6.2 9.72944565,6.46862915 9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L4.6,7.4 C4.26862915,7.4 4,7.13137085 4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L9.12944565,6.2 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #zoomInTemplate\n    ><svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-in</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-in\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,-1.81188398e-13 C10.6331505,-1.81188398e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.61852778e-14,10.6331505 4.61852778e-14,6.85 C4.61852778e-14,3.06684946 3.06684946,-1.81188398e-13 6.85,-1.81188398e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M6.86472282,3.93527718 C7.16295659,3.93527718 7.41036958,4.15286679 7.45686984,4.43795406 L7.46472282,4.53527718 L7.464,6.19927718 L9.12944565,6.2 C9.42767941,6.2 9.6750924,6.41758961 9.72159266,6.70267688 L9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L7.464,7.39927718 L7.46472282,9.06472282 C7.46472282,9.36295659 7.24713321,9.61036958 6.96204594,9.65686984 L6.86472282,9.66472282 C6.56648906,9.66472282 6.31907607,9.44713321 6.27257581,9.16204594 L6.26472282,9.06472282 L6.264,7.39927718 L4.6,7.4 C4.30176624,7.4 4.05435325,7.18241039 4.00785299,6.89732312 L4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L6.264,6.19927718 L6.26472282,4.53527718 C6.26472282,4.2701805 6.43664548,4.0452385 6.67507642,3.96586557 L6.76739971,3.94313016 L6.86472282,3.93527718 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n", directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'plait-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"zoom-toolbar island plait-board-attached\">\n    <a class=\"toolbar-item plait-action-icon\" [ngClass]=\"{ 'icon-active': cursorStatus === 'move' }\" (click)=\"dragMove()\">\n        <ng-template [ngTemplateOutlet]=\"dragMoveTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"adapt()\">\n        <ng-template [ngTemplateOutlet]=\"adaptTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomOut()\">\n        <ng-template [ngTemplateOutlet]=\"zoomOutTemplate\"></ng-template>\n    </a>\n    <div class=\"toolbar-item zoom-value\" (mousedown)=\"resetZoom()\">{{ viewZoom }}%</div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomIn()\">\n        <ng-template [ngTemplateOutlet]=\"zoomInTemplate\"></ng-template>\n    </a>\n</div>\n\n<ng-template #dragMoveTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M8.44583468,0.500225887 C9.07406934,0.510185679 9.54739531,0.839591366 9.86192311,1.34305279 C9.89696656,1.39914649 9.92878401,1.45492964 9.9576026,1.50991157 L9.9576026,1.50991157 L10.0210033,1.64201027 L10.061978,1.62350755 C10.1972891,1.56834247 10.3444107,1.53218464 10.5027907,1.51755353 L10.5027907,1.51755353 L10.6649031,1.51019133 C11.4883708,1.51019133 12.0208782,1.99343346 12.3023042,2.66393278 C12.3903714,2.87392911 12.4344191,3.10047818 12.4339446,3.3257952 L12.4339446,3.3257952 L12.4360033,3.80501027 L12.5160535,3.78341501 C12.6124478,3.76124046 12.7138812,3.74739854 12.820201,3.74250274 L12.820201,3.74250274 L12.9833264,3.74194533 C13.6121166,3.7657478 14.0645887,4.0801724 14.3087062,4.56112689 C14.4521117,4.8436609 14.4987984,5.11349437 14.4999262,5.33449618 L14.4999262,5.33449618 L14.3922653,12.049414 C14.3784752,12.909177 14.0717787,13.7360948 13.5212406,14.3825228 C13.4055676,14.5183496 13.2843697,14.643961 13.1582361,14.7596335 C12.4634771,15.3967716 11.755103,15.6538706 11.1897396,15.7000055 L11.1897396,15.7000055 L7.4723083,15.6798158 C7.14276373,15.634268 6.81580098,15.5154267 6.49455235,15.3472501 C6.25643701,15.2225944 6.06881706,15.0975452 5.88705731,14.9494308 L5.88705731,14.9494308 L2.55198782,11.500873 C2.39559475,11.3769079 2.17626793,11.1748532 1.9548636,10.9139403 C1.57867502,10.4706225 1.33501976,10.0139923 1.30330257,9.52833025 C1.28093191,9.18578476 1.37200912,8.85641102 1.5826788,8.56872564 C1.82538833,8.23725279 2.12881965,8.02107162 2.47470569,7.92957033 C2.95807982,7.80169771 3.42705723,7.92468989 3.86509644,8.18731167 C4.04431391,8.29475961 4.1816109,8.40304483 4.26225571,8.47866867 L4.26225571,8.47866867 L4.61400328,8.79701027 L4.57247249,3.59275349 L4.57628524,3.46204923 C4.5897691,3.23444442 4.64087578,2.95701848 4.75937106,2.66961597 C5.01017272,2.06131302 5.49670227,1.64692543 6.21363856,1.60818786 C6.44223508,1.59583681 6.65042099,1.62176802 6.83696985,1.68057551 L6.83696985,1.68057551 L6.86400328,1.69001027 C6.88501862,1.63593052 6.90764242,1.58175442 6.9331867,1.52672633 L6.9331867,1.52672633 L7.01883595,1.35955614 C7.31549194,0.832047939 7.79476072,0.48993549 8.44583468,0.500225887 Z M8.42684173,1.70001476 C8.26825412,1.69756905 8.16339456,1.77242008 8.06478367,1.94776814 C8.03967773,1.99241107 8.01831703,2.03811495 8.00083464,2.07855067 L8.00083464,2.07855067 L7.94879157,2.2035905 L7.94354455,2.20731401 L7.943,3.161 L7.97170661,3.16123746 L7.97170661,7.60991883 L6.77170661,7.60991883 L6.771,3.338 L6.74362358,3.33880359 C6.74284189,3.29064626 6.73014163,3.20282206 6.7002616,3.11094408 L6.66446012,3.01903385 C6.58982025,2.85766739 6.49843292,2.79455071 6.27838133,2.80644008 C6.07001018,2.81769881 5.95642108,2.91444507 5.86877664,3.12702089 C5.79792279,3.29887224 5.77228127,3.48655908 5.77246879,3.58977183 L5.77246879,3.58977183 L5.83613619,11.5252021 L3.41863956,9.33477657 L3.31637296,9.25979571 L3.24805011,9.21651224 C3.06096922,9.10434987 2.89279975,9.06024641 2.78159879,9.0896637 C2.71007735,9.10858411 2.63607367,9.1613084 2.55086305,9.27768211 C2.51020424,9.33320478 2.49638061,9.38319687 2.50075171,9.4501283 C2.51206889,9.62341997 2.64503022,9.87260054 2.86983366,10.1375191 C3.03268834,10.3294345 3.19762053,10.4813781 3.35554956,10.6131022 L3.35554956,10.6131022 L6.68454317,14.0569073 C6.71106575,14.0773808 6.74806086,14.1037158 6.79369091,14.1335929 L6.79369091,14.1335929 L6.95464838,14.2315311 L7.05111031,14.2841211 C7.25978123,14.3933622 7.46253523,14.4670573 7.55685495,14.4854708 L7.55685495,14.4854708 L11.1407985,14.5022108 C11.1503576,14.5013899 11.1627905,14.4997539 11.1779002,14.4971772 L11.1779002,14.4971772 L11.2991076,14.4694224 C11.3491682,14.4557375 11.4083624,14.437284 11.4751158,14.4130563 C11.769383,14.3062543 12.066676,14.1324596 12.3471758,13.8752234 C12.4371203,13.7927386 12.5240597,13.7026333 12.607654,13.6044743 C12.9760464,13.1719172 13.183059,12.6137678 13.1924195,12.030173 L13.1924195,12.030173 L13.3000132,5.32832551 C13.2997939,5.29016685 13.2826117,5.19085946 13.2386527,5.10425262 C13.1843838,4.99733326 13.1129774,4.94771265 12.9379578,4.94108739 C12.6814739,4.93138871 12.534132,5.11189595 12.4756792,5.39480062 L12.4768718,7.52734922 L11.2768718,7.52734922 L11.276,5.688 L11.2462883,5.6883208 L11.2339541,3.32771285 C11.2341,3.2560396 11.2209054,3.18817621 11.1957482,3.12818892 C11.0820579,2.85732094 10.9199288,2.71019133 10.6649031,2.71019133 C10.456829,2.71019133 10.3197487,2.87378067 10.2524297,3.11264939 L10.2530225,7.512783 L9.05302254,7.512783 L9.053,3.288 L9.01554331,3.28724203 L8.98800328,2.29901027 L8.9629175,2.22263368 C8.94515567,2.17417174 8.92167756,2.11937748 8.8924232,2.06330056 L8.8924232,2.06330056 L8.84420197,1.9788544 C8.72758855,1.79219249 8.59915015,1.70280728 8.42684173,1.70001476 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #adaptTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit canvas</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit-canvas\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M14.9971494,10.4 L14.9971494,13.4020516 C14.9971494,14.2366152 14.3581879,14.9219414 13.542782,14.9955129 L13.3971494,15.0020516 L10.4,15.0020516 L10.4,13.8020516 L13.3971494,13.8020516 C13.590449,13.8020516 13.7517243,13.6649388 13.7890228,13.4826656 L13.7971494,13.4020516 L13.7971494,10.4 L14.9971494,10.4 Z M2.2,10.4 L2.2,13.3971494 C2.2,13.590449 2.3371128,13.7517243 2.51938605,13.7890228 L2.6,13.7971494 L5.60205161,13.7971494 L5.60205161,14.9971494 L2.6,14.9971494 C1.76543638,14.9971494 1.08011021,14.3581879 1.00653868,13.542782 L1,13.3971494 L1,10.4 L2.2,10.4 Z M10.5024511,4.9 C11.3861067,4.9 12.1024511,5.6163444 12.1024511,6.5 L12.1024511,6.5 L12.1024511,9.5 C12.1024511,10.3836556 11.3861067,11.1 10.5024511,11.1 L10.5024511,11.1 L5.50245112,11.1 C4.61879552,11.1 3.90245112,10.3836556 3.90245112,9.5 L3.90245112,9.5 L3.90245112,6.5 C3.90245112,5.6163444 4.61879552,4.9 5.50245112,4.9 L5.50245112,4.9 Z M10.5024511,6.1 L5.50245112,6.1 C5.28153722,6.1 5.10245112,6.2790861 5.10245112,6.5 L5.10245112,6.5 L5.10245112,9.5 C5.10245112,9.7209139 5.28153722,9.9 5.50245112,9.9 L5.50245112,9.9 L10.5024511,9.9 C10.723365,9.9 10.9024511,9.7209139 10.9024511,9.5 L10.9024511,9.5 L10.9024511,6.5 C10.9024511,6.2790861 10.723365,6.1 10.5024511,6.1 L10.5024511,6.1 Z M5.59714938,1 L5.59714938,2.2 L2.6,2.2 C2.40670034,2.2 2.24542508,2.3371128 2.20812658,2.51938605 L2.2,2.6 L2.2,5.60205161 L1,5.60205161 L1,2.6 C1,1.76543638 1.63896152,1.08011021 2.45436739,1.00653868 L2.6,1 L5.59714938,1 Z M13.3971494,1 L13.542782,1.00653868 C14.3581879,1.08011021 14.9971494,1.76543638 14.9971494,2.6 L14.9971494,2.6 L14.9971494,5.60205161 L13.7971494,5.60205161 L13.7971494,2.6 L13.7890228,2.51938605 C13.7517243,2.3371128 13.590449,2.2 13.3971494,2.2 L13.3971494,2.2 L10.4,2.2 L10.4,1 L13.3971494,1 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n<ng-template #zoomOutTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-out</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-out\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,2.73225886e-13 C10.6331505,2.73225886e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.58522109e-14,10.6331505 4.58522109e-14,6.85 C4.58522109e-14,3.06684946 3.06684946,2.73225886e-13 6.85,2.73225886e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M4.6,6.2 L9.12944565,6.2 C9.4608165,6.2 9.72944565,6.46862915 9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L4.6,7.4 C4.26862915,7.4 4,7.13137085 4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L9.12944565,6.2 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #zoomInTemplate\n    ><svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-in</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-in\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,-1.81188398e-13 C10.6331505,-1.81188398e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.61852778e-14,10.6331505 4.61852778e-14,6.85 C4.61852778e-14,3.06684946 3.06684946,-1.81188398e-13 6.85,-1.81188398e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M6.86472282,3.93527718 C7.16295659,3.93527718 7.41036958,4.15286679 7.45686984,4.43795406 L7.46472282,4.53527718 L7.464,6.19927718 L9.12944565,6.2 C9.42767941,6.2 9.6750924,6.41758961 9.72159266,6.70267688 L9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L7.464,7.39927718 L7.46472282,9.06472282 C7.46472282,9.36295659 7.24713321,9.61036958 6.96204594,9.65686984 L6.86472282,9.66472282 C6.56648906,9.66472282 6.31907607,9.44713321 6.27257581,9.16204594 L6.26472282,9.06472282 L6.264,7.39927718 L4.6,7.4 C4.30176624,7.4 4.05435325,7.18241039 4.00785299,6.89732312 L4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L6.264,6.19927718 L6.26472282,4.53527718 C6.26472282,4.2701805 6.43664548,4.0452385 6.67507642,3.96586557 L6.76739971,3.94313016 L6.86472282,3.93527718 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n" }]
+            args: [{ selector: 'plait-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"zoom-toolbar island plait-board-attached\">\n    <a class=\"toolbar-item plait-action-icon\" [ngClass]=\"{ 'icon-active': pointerType === PlaitPointerType.hand}\" (click)=\"activeHand()\">\n        <ng-template [ngTemplateOutlet]=\"dragMoveTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"adapt()\">\n        <ng-template [ngTemplateOutlet]=\"adaptTemplate\"></ng-template>\n    </a>\n    <div class=\"divider\"></div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomOut()\">\n        <ng-template [ngTemplateOutlet]=\"zoomOutTemplate\"></ng-template>\n    </a>\n    <div class=\"toolbar-item zoom-value\" (mousedown)=\"resetZoom()\">{{ zoom }}%</div>\n    <a class=\"toolbar-item plait-action-icon\" (mousedown)=\"zoomIn()\">\n        <ng-template [ngTemplateOutlet]=\"zoomInTemplate\"></ng-template>\n    </a>\n</div>\n\n<ng-template #dragMoveTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/hand\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M8.44583468,0.500225887 C9.07406934,0.510185679 9.54739531,0.839591366 9.86192311,1.34305279 C9.89696656,1.39914649 9.92878401,1.45492964 9.9576026,1.50991157 L9.9576026,1.50991157 L10.0210033,1.64201027 L10.061978,1.62350755 C10.1972891,1.56834247 10.3444107,1.53218464 10.5027907,1.51755353 L10.5027907,1.51755353 L10.6649031,1.51019133 C11.4883708,1.51019133 12.0208782,1.99343346 12.3023042,2.66393278 C12.3903714,2.87392911 12.4344191,3.10047818 12.4339446,3.3257952 L12.4339446,3.3257952 L12.4360033,3.80501027 L12.5160535,3.78341501 C12.6124478,3.76124046 12.7138812,3.74739854 12.820201,3.74250274 L12.820201,3.74250274 L12.9833264,3.74194533 C13.6121166,3.7657478 14.0645887,4.0801724 14.3087062,4.56112689 C14.4521117,4.8436609 14.4987984,5.11349437 14.4999262,5.33449618 L14.4999262,5.33449618 L14.3922653,12.049414 C14.3784752,12.909177 14.0717787,13.7360948 13.5212406,14.3825228 C13.4055676,14.5183496 13.2843697,14.643961 13.1582361,14.7596335 C12.4634771,15.3967716 11.755103,15.6538706 11.1897396,15.7000055 L11.1897396,15.7000055 L7.4723083,15.6798158 C7.14276373,15.634268 6.81580098,15.5154267 6.49455235,15.3472501 C6.25643701,15.2225944 6.06881706,15.0975452 5.88705731,14.9494308 L5.88705731,14.9494308 L2.55198782,11.500873 C2.39559475,11.3769079 2.17626793,11.1748532 1.9548636,10.9139403 C1.57867502,10.4706225 1.33501976,10.0139923 1.30330257,9.52833025 C1.28093191,9.18578476 1.37200912,8.85641102 1.5826788,8.56872564 C1.82538833,8.23725279 2.12881965,8.02107162 2.47470569,7.92957033 C2.95807982,7.80169771 3.42705723,7.92468989 3.86509644,8.18731167 C4.04431391,8.29475961 4.1816109,8.40304483 4.26225571,8.47866867 L4.26225571,8.47866867 L4.61400328,8.79701027 L4.57247249,3.59275349 L4.57628524,3.46204923 C4.5897691,3.23444442 4.64087578,2.95701848 4.75937106,2.66961597 C5.01017272,2.06131302 5.49670227,1.64692543 6.21363856,1.60818786 C6.44223508,1.59583681 6.65042099,1.62176802 6.83696985,1.68057551 L6.83696985,1.68057551 L6.86400328,1.69001027 C6.88501862,1.63593052 6.90764242,1.58175442 6.9331867,1.52672633 L6.9331867,1.52672633 L7.01883595,1.35955614 C7.31549194,0.832047939 7.79476072,0.48993549 8.44583468,0.500225887 Z M8.42684173,1.70001476 C8.26825412,1.69756905 8.16339456,1.77242008 8.06478367,1.94776814 C8.03967773,1.99241107 8.01831703,2.03811495 8.00083464,2.07855067 L8.00083464,2.07855067 L7.94879157,2.2035905 L7.94354455,2.20731401 L7.943,3.161 L7.97170661,3.16123746 L7.97170661,7.60991883 L6.77170661,7.60991883 L6.771,3.338 L6.74362358,3.33880359 C6.74284189,3.29064626 6.73014163,3.20282206 6.7002616,3.11094408 L6.66446012,3.01903385 C6.58982025,2.85766739 6.49843292,2.79455071 6.27838133,2.80644008 C6.07001018,2.81769881 5.95642108,2.91444507 5.86877664,3.12702089 C5.79792279,3.29887224 5.77228127,3.48655908 5.77246879,3.58977183 L5.77246879,3.58977183 L5.83613619,11.5252021 L3.41863956,9.33477657 L3.31637296,9.25979571 L3.24805011,9.21651224 C3.06096922,9.10434987 2.89279975,9.06024641 2.78159879,9.0896637 C2.71007735,9.10858411 2.63607367,9.1613084 2.55086305,9.27768211 C2.51020424,9.33320478 2.49638061,9.38319687 2.50075171,9.4501283 C2.51206889,9.62341997 2.64503022,9.87260054 2.86983366,10.1375191 C3.03268834,10.3294345 3.19762053,10.4813781 3.35554956,10.6131022 L3.35554956,10.6131022 L6.68454317,14.0569073 C6.71106575,14.0773808 6.74806086,14.1037158 6.79369091,14.1335929 L6.79369091,14.1335929 L6.95464838,14.2315311 L7.05111031,14.2841211 C7.25978123,14.3933622 7.46253523,14.4670573 7.55685495,14.4854708 L7.55685495,14.4854708 L11.1407985,14.5022108 C11.1503576,14.5013899 11.1627905,14.4997539 11.1779002,14.4971772 L11.1779002,14.4971772 L11.2991076,14.4694224 C11.3491682,14.4557375 11.4083624,14.437284 11.4751158,14.4130563 C11.769383,14.3062543 12.066676,14.1324596 12.3471758,13.8752234 C12.4371203,13.7927386 12.5240597,13.7026333 12.607654,13.6044743 C12.9760464,13.1719172 13.183059,12.6137678 13.1924195,12.030173 L13.1924195,12.030173 L13.3000132,5.32832551 C13.2997939,5.29016685 13.2826117,5.19085946 13.2386527,5.10425262 C13.1843838,4.99733326 13.1129774,4.94771265 12.9379578,4.94108739 C12.6814739,4.93138871 12.534132,5.11189595 12.4756792,5.39480062 L12.4768718,7.52734922 L11.2768718,7.52734922 L11.276,5.688 L11.2462883,5.6883208 L11.2339541,3.32771285 C11.2341,3.2560396 11.2209054,3.18817621 11.1957482,3.12818892 C11.0820579,2.85732094 10.9199288,2.71019133 10.6649031,2.71019133 C10.456829,2.71019133 10.3197487,2.87378067 10.2524297,3.11264939 L10.2530225,7.512783 L9.05302254,7.512783 L9.053,3.288 L9.01554331,3.28724203 L8.98800328,2.29901027 L8.9629175,2.22263368 C8.94515567,2.17417174 8.92167756,2.11937748 8.8924232,2.06330056 L8.8924232,2.06330056 L8.84420197,1.9788544 C8.72758855,1.79219249 8.59915015,1.70280728 8.42684173,1.70001476 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #adaptTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit canvas</title>\n        <g id=\"1.Base\u57FA\u7840/1.icon\u56FE\u6807/2.normal/Fit-canvas\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M14.9971494,10.4 L14.9971494,13.4020516 C14.9971494,14.2366152 14.3581879,14.9219414 13.542782,14.9955129 L13.3971494,15.0020516 L10.4,15.0020516 L10.4,13.8020516 L13.3971494,13.8020516 C13.590449,13.8020516 13.7517243,13.6649388 13.7890228,13.4826656 L13.7971494,13.4020516 L13.7971494,10.4 L14.9971494,10.4 Z M2.2,10.4 L2.2,13.3971494 C2.2,13.590449 2.3371128,13.7517243 2.51938605,13.7890228 L2.6,13.7971494 L5.60205161,13.7971494 L5.60205161,14.9971494 L2.6,14.9971494 C1.76543638,14.9971494 1.08011021,14.3581879 1.00653868,13.542782 L1,13.3971494 L1,10.4 L2.2,10.4 Z M10.5024511,4.9 C11.3861067,4.9 12.1024511,5.6163444 12.1024511,6.5 L12.1024511,6.5 L12.1024511,9.5 C12.1024511,10.3836556 11.3861067,11.1 10.5024511,11.1 L10.5024511,11.1 L5.50245112,11.1 C4.61879552,11.1 3.90245112,10.3836556 3.90245112,9.5 L3.90245112,9.5 L3.90245112,6.5 C3.90245112,5.6163444 4.61879552,4.9 5.50245112,4.9 L5.50245112,4.9 Z M10.5024511,6.1 L5.50245112,6.1 C5.28153722,6.1 5.10245112,6.2790861 5.10245112,6.5 L5.10245112,6.5 L5.10245112,9.5 C5.10245112,9.7209139 5.28153722,9.9 5.50245112,9.9 L5.50245112,9.9 L10.5024511,9.9 C10.723365,9.9 10.9024511,9.7209139 10.9024511,9.5 L10.9024511,9.5 L10.9024511,6.5 C10.9024511,6.2790861 10.723365,6.1 10.5024511,6.1 L10.5024511,6.1 Z M5.59714938,1 L5.59714938,2.2 L2.6,2.2 C2.40670034,2.2 2.24542508,2.3371128 2.20812658,2.51938605 L2.2,2.6 L2.2,5.60205161 L1,5.60205161 L1,2.6 C1,1.76543638 1.63896152,1.08011021 2.45436739,1.00653868 L2.6,1 L5.59714938,1 Z M13.3971494,1 L13.542782,1.00653868 C14.3581879,1.08011021 14.9971494,1.76543638 14.9971494,2.6 L14.9971494,2.6 L14.9971494,5.60205161 L13.7971494,5.60205161 L13.7971494,2.6 L13.7890228,2.51938605 C13.7517243,2.3371128 13.590449,2.2 13.3971494,2.2 L13.3971494,2.2 L10.4,2.2 L10.4,1 L13.3971494,1 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n<ng-template #zoomOutTemplate>\n    <svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-out</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-out\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,2.73225886e-13 C10.6331505,2.73225886e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.58522109e-14,10.6331505 4.58522109e-14,6.85 C4.58522109e-14,3.06684946 3.06684946,2.73225886e-13 6.85,2.73225886e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M4.6,6.2 L9.12944565,6.2 C9.4608165,6.2 9.72944565,6.46862915 9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L4.6,7.4 C4.26862915,7.4 4,7.13137085 4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L9.12944565,6.2 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n\n<ng-template #zoomInTemplate\n    ><svg\n        width=\"16px\"\n        height=\"16px\"\n        viewBox=\"0 0 16 16\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    >\n        <title>action/zoom-in</title>\n        <desc>Created with Sketch.</desc>\n        <g id=\"action/zoom-in\" stroke=\"none\" stroke-width=\"1\" fill-rule=\"evenodd\">\n            <path\n                d=\"M6.85,-1.81188398e-13 C10.6331505,-1.81188398e-13 13.7,3.06684946 13.7,6.85 C13.7,8.54194045 13.0865836,10.0906098 12.0700142,11.2857448 L15.4201976,14.5717081 C15.6567367,14.8037768 15.6603607,15.1836585 15.4282919,15.4201976 C15.1962232,15.6567367 14.8163415,15.6603607 14.5798024,15.4282919 L14.5798024,15.4282919 L11.2163456,12.128262 C10.0309427,13.1099691 8.50937591,13.7 6.85,13.7 C3.06684946,13.7 4.61852778e-14,10.6331505 4.61852778e-14,6.85 C4.61852778e-14,3.06684946 3.06684946,-1.81188398e-13 6.85,-1.81188398e-13 Z M6.85,1.2 C3.72959116,1.2 1.2,3.72959116 1.2,6.85 C1.2,9.97040884 3.72959116,12.5 6.85,12.5 C8.31753357,12.5 9.65438791,11.9404957 10.6588859,11.0231643 C10.6855412,10.9625408 10.7245275,10.9050898 10.7743982,10.8542584 C10.8288931,10.7987137 10.8915387,10.7560124 10.9585649,10.7261903 C11.9144009,9.71595758 12.5,8.35136579 12.5,6.85 C12.5,3.72959116 9.97040884,1.2 6.85,1.2 Z M6.86472282,3.93527718 C7.16295659,3.93527718 7.41036958,4.15286679 7.45686984,4.43795406 L7.46472282,4.53527718 L7.464,6.19927718 L9.12944565,6.2 C9.42767941,6.2 9.6750924,6.41758961 9.72159266,6.70267688 L9.72944565,6.8 C9.72944565,7.09823376 9.51185604,7.34564675 9.22676876,7.39214701 L9.12944565,7.4 L7.464,7.39927718 L7.46472282,9.06472282 C7.46472282,9.36295659 7.24713321,9.61036958 6.96204594,9.65686984 L6.86472282,9.66472282 C6.56648906,9.66472282 6.31907607,9.44713321 6.27257581,9.16204594 L6.26472282,9.06472282 L6.264,7.39927718 L4.6,7.4 C4.30176624,7.4 4.05435325,7.18241039 4.00785299,6.89732312 L4,6.8 C4,6.50176624 4.21758961,6.25435325 4.50267688,6.20785299 L4.6,6.2 L6.264,6.19927718 L6.26472282,4.53527718 C6.26472282,4.2701805 6.43664548,4.0452385 6.67507642,3.96586557 L6.76739971,3.94313016 L6.86472282,3.93527718 Z\"\n                id=\"\u5F62\u72B6\u7ED3\u5408\"\n                fill-rule=\"nonzero\"\n            ></path>\n        </g>\n    </svg>\n</ng-template>\n" }]
         }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], cursorStatus: [{
-                type: Input
-            }], viewZoom: [{
+            }], board: [{
                 type: Input
-            }], moveHandle: [{
-                type: Output
             }], adaptHandle: [{
                 type: Output
             }], zoomInHandle: [{
@@ -1244,13 +1333,12 @@ class PlaitBoardComponent {
         this.elementRef = elementRef;
         this.hasInitialized = false;
         this.destroy$ = new Subject();
-        this.autoFitPadding = 8;
+        this.viewportState = {
+            zoom: 1,
+            autoFitPadding: 8,
+            scrollBarWidth: SCROLL_BAR_WIDTH
+        };
         this.isMoving = false;
-        this.zoom = 1;
-        this.viewportCanvasBox = {};
-        this.focusPoint = [0, 0];
-        this.width = 0;
-        this.height = 0;
         this.plaitValue = [];
         this.plaitPlugins = [];
         this.plaitChange = new EventEmitter();
@@ -1259,9 +1347,6 @@ class PlaitBoardComponent {
             return index;
         };
     }
-    get isMoveMode() {
-        return this.board.cursor === BaseCursorStatus.move;
-    }
     get host() {
         return this.svg.nativeElement;
     }
@@ -1269,19 +1354,21 @@ class PlaitBoardComponent {
         return this.board?.selection;
     }
     get hostClass() {
-        return `plait-board-container ${this.board.cursor}`;
+        return `plait-board-container ${this.board.pointer}`;
     }
     get readonly() {
         return this.board.options.readonly;
     }
     get moving() {
-        return this.board.cursor === BaseCursorStatus.move && this.isMoving;
+        return this.board.pointer === PlaitPointerType.hand && this.isMoving;
     }
     get focused() {
         return this.isFocused;
     }
     ngOnInit() {
-        const roughSVG = rough.svg(this.host, { options: { roughness: 0, strokeWidth: 1 } });
+        const roughSVG = rough.svg(this.host, {
+            options: { roughness: 0, strokeWidth: 1 }
+        });
         HOST_TO_ROUGH_SVG.set(this.host, roughSVG);
         this.initializePlugins();
         this.initializeEvents();
@@ -1294,9 +1381,6 @@ class PlaitBoardComponent {
                 viewport: this.board.viewport,
                 selection: this.board.selection
             };
-            if (this.board.operations.length > 0) {
-                this.updateViewport();
-            }
             this.plaitChange.emit(changeEvent);
         });
         this.hasInitialized = true;
@@ -1315,12 +1399,12 @@ class PlaitBoardComponent {
     }
     ngAfterViewInit() {
         this.plaitBoardInitialized.emit(this.board);
-        this.initContainerSize();
-        this.setViewport(1);
-        this.plaitViewport ? this.initCanvas(this.plaitViewport) : this.focusGraphicCenter();
+        this.initViewportContainer();
+        this.calcViewBox(this.viewportState.zoom);
+        this.initViewport();
     }
     initializePlugins() {
-        let board = withMove(withHistory(withSelection(withBoard(createBoard(this.host, this.plaitValue, this.plaitOptions)))));
+        let board = withHandPointer(withHistory(withSelection(withBoard(createBoard(this.host, this.plaitValue, this.plaitOptions)))));
         this.plaitPlugins.forEach(plugin => {
             board = plugin(board);
         });
@@ -1328,6 +1412,11 @@ class PlaitBoardComponent {
         if (this.plaitViewport) {
             this.board.viewport = this.plaitViewport;
         }
+        const scrollBarWidth = this.plaitOptions?.hideScrollbar ? SCROLL_BAR_WIDTH : 0;
+        this.updateViewportState({
+            scrollBarWidth,
+            zoom: this.board.viewport?.zoom ?? 1
+        });
     }
     initializeEvents() {
         fromEvent(this.host, 'mousedown')
@@ -1388,245 +1477,207 @@ class PlaitBoardComponent {
             this.board?.setFragment(event.clipboardData);
             this.board?.deleteFragment(event.clipboardData);
         });
-        fromEvent(this.contentContainer.nativeElement, 'mousemove')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !!this.isFocused;
-        }))
-            .subscribe((e) => {
-            this.focusPoint = [e.clientX, e.clientY];
-        });
-        fromEvent(this.contentContainer.nativeElement, 'mouseleave')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return !!this.isFocused;
-        }))
-            .subscribe((e) => {
-            this.resetFocusPoint();
-        });
-        fromEvent(this.contentContainer.nativeElement, 'scroll')
+        fromEvent(this.viewportContainer.nativeElement, 'scroll')
             .pipe(takeUntil(this.destroy$), filter(() => {
             return !!this.isFocused;
         }))
             .subscribe((event) => {
-            const scrollLeft = event.target.scrollLeft;
-            const scrollTop = event.target.scrollTop;
-            (Math.abs(this.scrollLeft - scrollLeft) <= 1 && Math.abs(this.scrollTop - scrollTop) <= 1) ||
-                this.setScroll(scrollLeft, scrollTop);
+            const { scrollLeft, scrollTop } = event.target;
+            const left = this.viewportState.scrollLeft;
+            const top = this.viewportState.scrollTop;
+            if (Math.abs(left - scrollLeft) >= 1 || Math.abs(top - scrollTop) >= 1) {
+                this.setScrollLeft(scrollLeft);
+                this.setScrollTop(scrollTop);
+                this.setViewport();
+            }
         });
         this.resizeElement();
     }
     resizeElement() {
         this.resizeObserver = new ResizeObserver(entries => {
             for (let entry of entries) {
-                const { width, height } = entry.contentRect;
-                const hideScrollbar = this.board.options.hideScrollbar;
-                const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-                this.width = width + scrollBarWidth;
-                this.height = height + scrollBarWidth;
-                this.changeSize();
+                this.initViewportContainer();
+                this.calcViewBox(this.board.viewport.zoom);
+                this.updateViewBoxStyles();
+                this.updateViewportScrolling();
+                this.setViewport();
             }
         });
         this.resizeObserver.observe(this.elementRef.nativeElement);
     }
-    initContainerSize() {
-        const clientBox = getViewportClientBox(this.board);
-        this.width = clientBox.width;
-        this.height = clientBox.height;
-        this.resizeViewport();
-    }
-    resizeViewport() {
-        const container = this.elementRef.nativeElement?.parentElement;
-        const containerRect = container?.getBoundingClientRect();
-        const hideScrollbar = this.board.options.hideScrollbar;
-        const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-        const width = `${containerRect.width + scrollBarWidth}px`;
-        const height = `${containerRect.height + scrollBarWidth}px`;
-        this.renderer2.setStyle(this.contentContainer.nativeElement, 'width', width);
-        this.renderer2.setStyle(this.contentContainer.nativeElement, 'height', height);
-        this.renderer2.setStyle(this.contentContainer.nativeElement, 'maxWidth', width);
-        this.renderer2.setStyle(this.contentContainer.nativeElement, 'maxHeight', height);
-    }
-    setMatrix() {
-        const viewBox = this.viewBox;
-        const zoom = this.zoom;
-        this.matrix = [zoom, 0, 0, 0, zoom, 0, -this.scrollLeft - zoom * viewBox[0], -this.scrollTop - zoom * viewBox[1], 1];
-    }
-    updateViewport() {
-        const clientBox = getViewportClientBox(this.board);
-        this.setViewport(this.board.viewport.zoom, [clientBox.x, clientBox.y]);
-    }
-    setViewport(zoom, focusPoint) {
-        zoom = zoom ?? this.zoom;
-        zoom = calculateZoom(zoom);
-        if (zoom !== this.zoom) {
-            this.zoom = zoom;
-        }
-        focusPoint = focusPoint ?? this.focusPoint;
+    updateViewportState(state) {
+        this.viewportState = {
+            ...this.viewportState,
+            ...state
+        };
+    }
+    initViewportContainer() {
+        const { width, height } = getBoardClientBox(this.board);
+        this.renderer2.setStyle(this.viewportContainer.nativeElement, 'width', `${width}px`);
+        this.renderer2.setStyle(this.viewportContainer.nativeElement, 'height', `${height}px`);
+    }
+    initViewport() {
+        const viewport = this.board.viewport;
+        const originationCoord = viewport?.originationCoord;
+        const zoom = viewport?.zoom ?? this.viewportState.zoom;
+        if (originationCoord) {
+            const matrix = this.getMatrix();
+            const [pointX, pointY] = invertViewportCoordinates([0, 0], matrix);
+            const scrollLeft = this.viewportState.scrollLeft;
+            const scrollTop = this.viewportState.scrollTop;
+            const left = scrollLeft + (originationCoord[0] - pointX) * zoom;
+            const top = scrollTop + (originationCoord[1] - pointY) * zoom;
+            this.setScroll(left, top);
+        }
+        else {
+            this.adaptHandle();
+        }
+    }
+    calcViewBox(zoom = this.viewportState.zoom) {
+        zoom = clampZoomLevel(zoom);
+        const scrollBarWidth = this.viewportState.scrollBarWidth;
+        const viewportContainerBox = getViewportContainerBox(this.board);
+        const groupBBox = getRootGroupBBox(this.board, zoom);
+        const horizontalPadding = viewportContainerBox.width / 2;
+        const verticalPadding = viewportContainerBox.height / 2;
+        const viewportWidth = (groupBBox.right - groupBBox.left) * zoom + 2 * horizontalPadding + scrollBarWidth;
+        const viewportHeight = (groupBBox.bottom - groupBBox.top) * zoom + 2 * verticalPadding + scrollBarWidth;
+        const viewBox = [
+            groupBBox.left - horizontalPadding / zoom,
+            groupBBox.top - verticalPadding / zoom,
+            viewportWidth / zoom,
+            viewportHeight / zoom
+        ];
+        const matrix = this.getMatrix();
         let scrollLeft;
         let scrollTop;
-        const clientBox = getViewportClientBox(this.board);
-        const matrix = this.matrix;
-        const box = calculateBBox(this.board, zoom);
-        const padding = [this.height / 2, this.width / 2];
-        const rootGroupWidth = box.right - box.left;
-        const rootGroupHeight = box.bottom - box.top;
-        const canvasWidth = rootGroupWidth * zoom + 2 * padding[1];
-        const canvasHeight = rootGroupHeight * zoom + 2 * padding[0];
-        const viewBox = [box.left - padding[1] / zoom, box.top - padding[0] / zoom, canvasWidth / zoom, canvasHeight / zoom];
-        if (matrix) {
-            const canvasPoint = [focusPoint[0] - clientBox.x, focusPoint[1] - clientBox.y, 1];
-            const invertMatrix = invert([], matrix);
-            const matrix1 = transformMat3([], [canvasPoint[0], canvasPoint[1], 1], invertMatrix);
-            const matrix2 = [zoom, 0, 0, 0, zoom, 0, -zoom * viewBox[0], -zoom * viewBox[1], 1];
-            const newMatrix = transformMat3([], matrix1, matrix2);
-            scrollLeft = newMatrix[0] - canvasPoint[0];
-            scrollTop = newMatrix[1] - canvasPoint[1];
+        if (matrix.length > 0) {
+            // focusPoint
+            const focusX = viewportContainerBox.x + viewportContainerBox.width / 2;
+            const focusY = viewportContainerBox.y + viewportContainerBox.height / 2;
+            const viewportContainerPoint = [focusX - viewportContainerBox.x, focusY - viewportContainerBox.y, 1];
+            const point = invertViewportCoordinates([viewportContainerPoint[0], viewportContainerPoint[1]], matrix);
+            const newMatrix = [zoom, 0, 0, 0, zoom, 0, -zoom * viewBox[0], -zoom * viewBox[1], 1];
+            const newPoint = transformMat3([], point, newMatrix);
+            scrollLeft = newPoint[0] - viewportContainerPoint[0];
+            scrollTop = newPoint[1] - viewportContainerPoint[1];
         }
         else {
-            scrollLeft = (canvasWidth - clientBox.width) / 2;
-            scrollTop = padding[0] / 2 - box.top;
+            scrollLeft = horizontalPadding;
+            scrollTop = verticalPadding;
         }
-        this.canvasWidth = canvasWidth;
-        this.canvasHeight = canvasHeight;
-        this.zoom = zoom;
-        this.viewBox = viewBox;
+        this.updateViewportState({
+            viewportWidth,
+            viewportHeight,
+            zoom,
+            viewBox
+        });
         this.setScrollLeft(scrollLeft);
         this.setScrollTop(scrollTop);
-        this.change();
+    }
+    getMatrix() {
+        const { viewBox, zoom, scrollLeft, scrollTop } = this.viewportState;
+        if (scrollLeft >= 0 && scrollTop >= 0) {
+            return [zoom, 0, 0, 0, zoom, 0, -scrollLeft - zoom * viewBox[0], -scrollTop - zoom * viewBox[1], 1];
+        }
+        return [];
     }
     setScrollLeft(left) {
-        const hideScrollbar = this.board.options.hideScrollbar;
-        const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-        const width = this.canvasWidth - this.width + scrollBarWidth;
-        this.scrollLeft = left < 0 ? 0 : left > width ? width : left;
+        const viewportContainerBox = getViewportContainerBox(this.board);
+        const { viewportWidth, scrollBarWidth } = this.viewportState;
+        const width = viewportWidth - viewportContainerBox.width + scrollBarWidth;
+        this.viewportState.scrollLeft = left < 0 ? 0 : left > width ? width : left;
     }
     setScrollTop(top) {
-        const hideScrollbar = this.board.options.hideScrollbar;
-        const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
-        const height = this.canvasHeight - this.height + scrollBarWidth;
-        this.scrollTop = top < 0 ? 0 : top > height ? height : top;
+        const viewportContainerBox = getViewportContainerBox(this.board);
+        const { viewportHeight, scrollBarWidth } = this.viewportState;
+        const height = viewportHeight - viewportContainerBox.height + scrollBarWidth;
+        this.viewportState.scrollTop = top < 0 ? 0 : top > height ? height : top;
     }
     setScroll(left, top) {
         this.setScrollLeft(left);
         this.setScrollTop(top);
-        this.change();
-    }
-    moveTo(point, zoom) {
-        zoom = zoom ?? this.zoom;
-        const r = invertViewport([0, 0], this.matrix);
-        this.setScroll(this.scrollLeft + (point[0] - r[0]) * zoom, this.scrollTop + (point[1] - r[1]) * zoom);
-    }
-    scrollIntoView(node) {
-        const canvasRect = this.host.getBoundingClientRect();
-        if (!(canvasRect.width <= this.width && canvasRect.height <= this.height)) {
-            const point = convertViewport([node.x, node.y], this.matrix);
-            const fullPoint = convertViewport([node.x + node.width, node.y + node.height], this.matrix);
-            const width = this.width;
-            const height = this.height;
-            let left = this.scrollLeft;
-            let top = this.scrollTop;
-            if (fullPoint[0] > width - SCROLL_BAR_WIDTH) {
-                left += fullPoint[0] - width + SCROLL_BAR_WIDTH;
-            }
-            if (fullPoint[1] > height - SCROLL_BAR_WIDTH) {
-                top += fullPoint[1] - height + SCROLL_BAR_WIDTH;
-            }
-            (left === this.scrollLeft && top === this.scrollTop) || this.setScroll(left, top);
-        }
-    }
-    change() {
-        this.resizeViewport();
-        this.renderer2.setStyle(this.host, 'display', 'block');
-        this.renderer2.setStyle(this.host, 'width', `${this.canvasWidth}px`);
-        this.renderer2.setStyle(this.host, 'height', `${this.canvasHeight}px`);
-        if (this.viewBox && this.viewBox[2] > 0 && this.viewBox[3] > 0) {
-            this.renderer2.setAttribute(this.host, 'viewBox', this.viewBox.join(','));
+        this.updateViewBoxStyles();
+        this.updateViewportScrolling();
+        this.setViewport();
+    }
+    updateViewBoxStyles() {
+        const { host, viewportState } = this;
+        const { viewportWidth, viewportHeight, viewBox } = viewportState;
+        this.renderer2.setStyle(host, 'display', 'block');
+        this.renderer2.setStyle(host, 'width', `${viewportWidth}px`);
+        this.renderer2.setStyle(host, 'height', `${viewportHeight}px`);
+        if (viewBox && viewBox[2] > 0 && viewBox[3] > 0) {
+            this.renderer2.setAttribute(host, 'viewBox', viewBox.join(' '));
         }
-        this.contentContainer.nativeElement.scrollLeft = this.scrollLeft;
-        this.contentContainer.nativeElement.scrollTop = this.scrollTop;
-        this.setMatrix();
-        this.setViewportSetting();
-        this.viewportCanvasBox = getViewportCanvasBox(this.board, this.matrix);
     }
-    restoreCanvasPoint(point, zoom) {
-        zoom = zoom ?? this.zoom;
-        this.setViewport(zoom);
-        this.moveTo(point, zoom);
+    updateViewportScrolling() {
+        const { viewportContainer, viewportState } = this;
+        const { scrollLeft, scrollTop } = viewportState;
+        viewportContainer.nativeElement.scrollLeft = scrollLeft;
+        viewportContainer.nativeElement.scrollTop = scrollTop;
     }
-    initCanvas(viewport) {
-        const canvasPoint = viewport?.canvasPoint;
-        if (canvasPoint) {
-            this.restoreCanvasPoint(canvasPoint, viewport.zoom);
-        }
-        else {
-            this.setViewport(viewport.zoom);
-            this.setScroll(this.scrollLeft, this.scrollTop);
-        }
-    }
-    focusGraphicCenter() {
-        const rootGroup = this.board.host.firstChild;
-        const rootGroupBox = rootGroup.getBBox();
-        this.focus([rootGroupBox.x + rootGroupBox.width / 2, rootGroupBox.y + rootGroupBox.height / 2]);
-        this.change();
-        this.setViewport(1);
-    }
-    focus(point) {
-        const clientBox = getViewportClientBox(this.board);
-        const matrix = transformMat3([], [point[0], point[1], 1], this.matrix);
-        const newPoint = [clientBox.width / 2, clientBox.height / 2];
-        const scrollLeft = newPoint[0] - matrix[0];
-        const scrollTop = newPoint[1] - matrix[1];
-        this.setScrollLeft(this.scrollLeft - scrollLeft);
-        this.setScrollTop(this.scrollTop - scrollTop);
-        this.setMatrix();
-    }
-    resetFocusPoint() {
-        const clientBox = getViewportClientBox(this.board);
-        this.focusPoint = [clientBox.x + clientBox.width / 2, clientBox.y + clientBox.height / 2];
-    }
-    setViewportSetting() {
+    setViewport() {
         const viewport = this.board?.viewport;
-        Transforms.setViewport(this.board, {
-            ...viewport,
-            zoom: this.zoom,
-            canvasPoint: invertViewport([0, 0], this.matrix)
-        });
-    }
-    changeSize() {
-        this.updateViewport();
-    }
-    // 拖拽模式
-    changeMoveMode(cursorStatus) {
-        updateCursorStatus(this.board, cursorStatus);
-        this.cdr.markForCheck();
+        const oldOriginationCoord = viewport?.originationCoord ?? [];
+        const matrix = this.getMatrix();
+        const originationCoord = invertViewportCoordinates([0, 0], matrix);
+        if (!originationCoord.every((item, index) => item === oldOriginationCoord[index])) {
+            Transforms.setViewport(this.board, {
+                ...viewport,
+                zoom: this.viewportState.zoom,
+                originationCoord
+            });
+        }
     }
-    // 适应画布
     adaptHandle() {
-        const clientBox = getViewportClientBox(this.board);
+        const containerBox = getViewportContainerBox(this.board);
         const rootGroup = this.host.firstChild;
+        const matrix = this.getMatrix();
         const rootGroupBox = rootGroup.getBBox();
-        const viewportWidth = clientBox.width - 2 * this.autoFitPadding;
-        const viewportHeight = clientBox.height - 2 * this.autoFitPadding;
-        let zoom = this.zoom;
+        const centerPoint = [containerBox.width / 2, containerBox.height / 2];
+        const rootGroupCenterX = rootGroupBox.x + rootGroupBox.width / 2;
+        const rootGroupCenterY = rootGroupBox.y + rootGroupBox.height / 2;
+        const transformedPoint = transformMat3([], [rootGroupCenterX, rootGroupCenterY, 1], matrix);
+        const offsetLeft = centerPoint[0] - transformedPoint[0];
+        const offsetTop = centerPoint[1] - transformedPoint[1];
+        const { autoFitPadding, zoom, scrollLeft, scrollTop } = this.viewportState;
+        const viewportWidth = containerBox.width - 2 * autoFitPadding;
+        const viewportHeight = containerBox.height - 2 * autoFitPadding;
+        let newZoom = zoom;
         if (viewportWidth < rootGroupBox.width || viewportHeight < rootGroupBox.height) {
-            zoom = Math.min(viewportWidth / rootGroupBox.width, viewportHeight / rootGroupBox.height);
+            newZoom = Math.min(viewportWidth / rootGroupBox.width, viewportHeight / rootGroupBox.height);
         }
         else {
-            zoom = 1;
+            newZoom = 1;
         }
-        this.focus([rootGroupBox.x + rootGroupBox.width / 2, rootGroupBox.y + rootGroupBox.height / 2]);
-        this.resetFocusPoint();
-        this.setViewport(zoom);
+        this.setScrollLeft(scrollLeft - offsetLeft);
+        this.setScrollTop(scrollTop - offsetTop);
+        this.calcViewBox(newZoom);
+        this.updateViewBoxStyles();
+        this.updateViewportScrolling();
+        this.setViewport();
     }
-    // 放大
     zoomInHandle() {
-        this.setViewport(this.zoom + 0.1);
+        this.calcViewBox(this.viewportState.zoom + 0.1);
+        this.updateViewBoxStyles();
+        this.updateViewportScrolling();
+        this.setViewport();
     }
-    // 缩小
     zoomOutHandle() {
-        this.setViewport(this.zoom - 0.1);
+        this.calcViewBox(this.viewportState.zoom - 0.1);
+        this.updateViewBoxStyles();
+        this.updateViewportScrolling();
+        this.setViewport();
     }
     resetZoomHandel() {
-        this.setViewport(1);
+        this.calcViewBox(1);
+        this.updateViewBoxStyles();
+        this.updateViewportScrolling();
+        this.setViewport();
+    }
+    movingChange(isMoving) {
+        this.isMoving = isMoving;
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -1636,58 +1687,83 @@ class PlaitBoardComponent {
             this.resizeObserver.disconnect();
         }
     }
-    movingChange(isMoving) {
-        this.isMoving = isMoving;
+    markForCheck() {
+        this.cdr.markForCheck();
+    }
+    scrollToRectangle(client) {
+        this.calcViewBox();
+        this.updateViewBoxStyles();
+        this.updateViewportScrolling();
+        this.setViewport();
+        const svgRect = this.host.getBoundingClientRect();
+        const viewportContainerBox = getViewportContainerBox(this.board);
+        if (svgRect.width > viewportContainerBox.width || svgRect.height > viewportContainerBox.height) {
+            const matrix = this.getMatrix();
+            const scrollBarWidth = this.viewportState.scrollBarWidth;
+            const [nodePointX, nodePointY] = convertToViewportCoordinates([client.x, client.y], matrix);
+            const [fullNodePointX, fullNodePointY] = convertToViewportCoordinates([client.x + client.width, client.y + client.height], matrix);
+            let newLeft = this.viewportState.scrollLeft;
+            let newTop = this.viewportState.scrollTop;
+            if (nodePointX < 0) {
+                newLeft -= Math.abs(nodePointX);
+            }
+            if (nodePointX > 0 && fullNodePointX > viewportContainerBox.width) {
+                newLeft += fullNodePointX - viewportContainerBox.width + scrollBarWidth;
+            }
+            if (nodePointY < 0) {
+                newTop -= Math.abs(nodePointY);
+            }
+            if (nodePointY > 0 && fullNodePointY > viewportContainerBox.height) {
+                newTop += fullNodePointY - viewportContainerBox.height + scrollBarWidth;
+            }
+            if (newLeft !== this.viewportState.scrollLeft || newTop !== this.viewportState.scrollTop) {
+                this.setScroll(newLeft, newTop);
+            }
+        }
     }
 }
 PlaitBoardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitBoardComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], 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", plaitOptions: "plaitOptions" }, outputs: { plaitChange: "plaitChange", plaitBoardInitialized: "plaitBoardInitialized" }, host: { properties: { "class": "this.hostClass", "class.readonly": "this.readonly", "class.moving": "this.moving", "class.focused": "this.focused" } }, queries: [{ propertyName: "toolbarTemplateRef", first: true, predicate: ["plaitToolbar"], descendants: true }], viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, static: true }, { propertyName: "contentContainer", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div class="viewport-container" #container>
+PlaitBoardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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.moving": "this.moving", "class.focused": "this.focused" } }, 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;"></svg>
             <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>
         </div>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
-            [cursorStatus]="board.cursor"
-            [viewZoom]="board.viewport!.zoom"
-            (moveHandle)="changeMoveMode($event)"
+            [board]="board"
             (adaptHandle)="adaptHandle()"
             (zoomInHandle)="zoomInHandle()"
             (zoomOutHandle)="zoomOutHandle()"
             (resetZoomHandel)="resetZoomHandel()"
         ></plait-toolbar>
         <ng-content></ng-content>
-    `, isInline: true, components: [{ type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "board", "viewport", "selection", "host"] }, { type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: ["cursorStatus", "viewZoom"], outputs: ["moveHandle", "adaptHandle", "zoomInHandle", "zoomOutHandle", "resetZoomHandel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: PlaitElementComponent, selector: "plait-element", inputs: ["index", "element", "board", "viewport", "selection", "host"] }, { type: PlaitToolbarComponent, selector: "plait-toolbar", inputs: ["board"], outputs: ["adaptHandle", "zoomInHandle", "zoomOutHandle", "resetZoomHandel"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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: `
-        <div class="viewport-container" #container>
+        <div class="viewport-container" #viewportContainer>
             <svg #svg width="100%" height="100%" style="position: relative;"></svg>
             <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>
         </div>
         <plait-toolbar
             *ngIf="isFocused && !toolbarTemplateRef"
-            [cursorStatus]="board.cursor"
-            [viewZoom]="board.viewport!.zoom"
-            (moveHandle)="changeMoveMode($event)"
+            [board]="board"
             (adaptHandle)="adaptHandle()"
             (zoomInHandle)="zoomInHandle()"
             (zoomOutHandle)="zoomOutHandle()"
@@ -1727,10 +1803,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], toolbarTemplateRef: [{
                 type: ContentChild,
                 args: ['plaitToolbar']
-            }], contentContainer: [{
+            }], viewportContainer: [{
                 type: ViewChild,
-                args: ['container', { read: ElementRef, static: true }]
+                args: ['viewportContainer', { read: ElementRef, static: true }]
+            }] } });
+
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+
+class PlaitPluginElementComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.initialized = false;
+        this.g = createG();
+    }
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        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;
+    }
+    get host() {
+        return this.context && this.context.host;
+    }
+    onContextChange() {
+        if (!this.initialized) {
+            return;
+        }
+        this.cdr.markForCheck();
+    }
+    ngOnInit() {
+        const type = this.element?.type || 'default-plugin-element';
+        this.g.setAttribute(`plait-${type}`, 'true');
+        this.initialized = true;
+    }
+    ngOnDestroy() {
+        ELEMENT_TO_PLUGIN_COMPONENT.delete(this.element);
+        this.g.remove();
+    }
+}
+PlaitPluginElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PlaitPluginElementComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+PlaitPluginElementComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: PlaitPluginElementComponent, inputs: { context: "context" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", 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];
 class PlaitModule {
@@ -1755,5 +1894,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BOARD_TO_ON_CHANGE, BaseCursorStatus, CLIP_BOARD_FORMAT_KEY, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MERGING, NS, PLAIT_BOARD_TO_COMPONENT, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitToolbarComponent, SAVING, SCROLL_BAR_WIDTH, Transforms, Viewport, calculateBBox, calculateZoom, convertPoint, convertViewport, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getGraphicsBBox, getViewportCanvasBox, getViewportClientBox, hotkeys, idCreator, inverse, invert, invertClient, invertViewport, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, transformPoint, transformPoints, updateCursorStatus };
+export { BOARD_TO_ON_CHANGE, CLIP_BOARD_FORMAT_KEY, ELEMENT_TO_PLUGIN_COMPONENT, FLUSHING, HOST_TO_ROUGH_SVG, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MERGING, NS, PLAIT_BOARD_TO_COMPONENT, Path, PlaitBoardComponent, PlaitElementComponent, PlaitHistoryBoard, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPointerType, PlaitToolbarComponent, SAVING, SCROLL_BAR_WIDTH, Transforms, Viewport, clampZoomLevel, convertToViewportCoordinates, createG, createSVG, createText, distanceBetweenPointAndPoint, distanceBetweenPointAndSegment, getBoardClientBox, getRootGroupBBox, getViewportContainerBox, hasBeforeContextChange, hotkeys, idCreator, inverse, invertMatrix, invertViewportCoordinates, isNoSelectionElement, isNullOrUndefined, isSetViewportOperation, normalizePoint, rotate, shouldClear, shouldMerge, shouldSave, toPoint, toRectangleClient, transformMat3, transformPoint, transformPoints };
 //# sourceMappingURL=plait-core.mjs.map