@meta2d/core 1.0.52 → 1.0.54

package/src/canvas/canvas.js

@@ -82,7 +82,7 @@ var __values = (this && this.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 import { KeydownType } from '../options';
-import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, getGlobalColor, clearLifeCycle, rotatePen, calcTextAutoWidth, getGradientAnimatePath, CanvasLayer, ctxFlip, ctxRotate, setGlobalAlpha, drawImage, setElemPosition, getAllFollowers, } from '../pen';
+import { addLineAnchor, calcIconRect, calcTextRect, calcWorldAnchors, calcWorldRects, LockState, nearestAnchor, PenType, pushPenAnchor, removePenAnchor, renderPen, scalePen, translateLine, deleteTempAnchor, connectLine, disconnectLine, getAnchor, calcAnchorDock, calcMoveDock, calcTextLines, setNodeAnimate, setLineAnimate, calcPenRect, setChildrenActive, getParent, setHover, randomId, getPensLock, getToAnchor, getFromAnchor, calcPadding, getPensDisableRotate, getPensDisableResize, needCalcTextRectProps, calcResizeDock, needPatchFlagsPenRectProps, needCalcIconRectProps, isDomShapes, renderPenRaw, needSetPenProps, getAllChildren, calcInView, isShowChild, getTextColor, getGlobalColor, clearLifeCycle, rotatePen, calcTextAutoWidth, getGradientAnimatePath, CanvasLayer, ctxFlip, ctxRotate, setGlobalAlpha, drawImage, setElemPosition, getAllFollowers, calcChildrenInitRect, } from '../pen';
 import { calcRotate, distance, getDistance, hitPoint, PointType, PrevNextType, rotatePoint, samePoint, scalePoint, translatePoint, TwoWay, } from '../point';
 import { calcCenter, calcRightBottom, calcRelativePoint, getRect, getRectOfPoints, pointInRect, pointInSimpleRect, rectInRect, rectToPoints, resizeRect, translateRect, pointInPolygon } from '../rect';
 import { EditType, globalStore, } from '../store';
@@ -120,6 +120,7 @@ var Canvas = /** @class */ (function () {
         this.patchFlagsLines = new Set();
         this.lastMouseTime = 0;
         this.hoverTimer = 0;
+        this.fitTimer = 0;
         this.patchFlags = false;
         this.lastRender = 0;
         this.touchStart = 0;
@@ -319,6 +320,33 @@ var Canvas = /** @class */ (function () {
                 }
             }
             var x = e.offsetX, y = e.offsetY;
+            // if (this.parent.map && e.target === this.parent.map?.box) {
+            //   //放大镜缩放
+            //   const width = this.store.data.width || this.store.options.width;
+            //   const height = this.store.data.height || this.store.options.height;
+            //   if (width && height) {
+            //     //大屏
+            //     x =
+            //       (x / this.parent.map.boxWidth) * width * this.store.data.scale +
+            //       this.store.data.origin.x;
+            //     y =
+            //       (y / this.parent.map.boxHeight) * height * this.store.data.scale +
+            //       this.store.data.origin.y;
+            //     const rect = this.canvas.getBoundingClientRect();
+            //     x = x + rect.left;
+            //     y = y + rect.top;
+            //   } else {
+            //     const rect = this.parent.getRect();
+            //     x =
+            //       (x / this.parent.map.boxWidth) * rect.width +
+            //       rect.x +
+            //       this.store.data.x;
+            //     y =
+            //       (y / this.parent.map.boxHeight) * rect.height +
+            //       rect.y +
+            //       this.store.data.y;
+            //   }
+            // }
             _this.scale(_this.store.data.scale + scaleOff, { x: x, y: y });
             _this.externalElements.focus(); // 聚焦
         };
@@ -428,6 +456,10 @@ var Canvas = /** @class */ (function () {
                     break;
                 case 'Delete':
                 case 'Backspace':
+                    if (_this.canvasImage.fitFlag && _this.canvasImage.activeFit) {
+                        _this.deleteFit();
+                        break;
+                    }
                     !_this.store.data.locked && _this.delete();
                     break;
                 case 'ArrowLeft':
@@ -811,6 +843,15 @@ var Canvas = /** @class */ (function () {
                             this.calibrateMouse(pt);
                             this.dropPens(obj, pt);
                             this.addCaches = [];
+                            // 拖拽新增图元判断是否是在容器上
+                            this.getContainerHover(pt);
+                            this.mousePos.x = pt.x;
+                            this.mousePos.y = pt.y;
+                            this.store.emitter.emit('mouseup', {
+                                x: pt.x,
+                                y: pt.y,
+                                pen: this.store.hoverContainer,
+                            });
                         }
                         this.store.emitter.emit('drop', obj || json);
                         return [2 /*return*/];
@@ -991,6 +1032,13 @@ var Canvas = /** @class */ (function () {
             _this.mousePos.y = e.y;
             _this.mouseDown = e;
             _this.lastMouseTime = performance.now();
+            if (_this.canvasImage.fitFlag) {
+                if (!_this.canvasImage.currentFit) {
+                    //选中布局容器
+                    _this.calcuActiveFit();
+                }
+                return;
+            }
             // Set anchor of pen.
             if (_this.hotkeyType === HotkeyType.AddAnchor) {
                 _this.setAnchor(_this.store.pointAt);
@@ -1229,7 +1277,7 @@ var Canvas = /** @class */ (function () {
             _this.render();
         };
         this.onMouseMove = function (e) {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             if (_this.store.data.locked === LockState.Disable) {
                 _this.hoverType = HoverType.None;
                 return;
@@ -1258,6 +1306,22 @@ var Canvas = /** @class */ (function () {
                 _this.render();
                 return;
             }
+            if (_this.canvasImage.fitFlag) {
+                if (_this.canvasImage.activeFit) {
+                    var now_2 = performance.now();
+                    if (now_2 - _this.fitTimer > 100) {
+                        if (_this.mouseDown) {
+                            // 容器大小变化
+                            _this.updateFit(e);
+                        }
+                        else {
+                            _this.inFitBorder(_this.mousePos);
+                        }
+                        _this.fitTimer = now_2;
+                    }
+                    return;
+                }
+            }
             if (_this.mouseDown && !_this.store.options.disableTranslate) {
                 // 画布平移前提
                 if (_this.mouseRight === MouseRight.Down) {
@@ -1311,7 +1375,7 @@ var Canvas = /** @class */ (function () {
                         return;
                     }
                     // 框选
-                    if (e.buttons === 1 && (e.ctrlKey || !_this.hoverType && !_this.hotkeyType)) {
+                    if (e.buttons === 1 && (e.ctrlKey || !_this.hoverType && !_this.hotkeyType) && !(e.ctrlKey && (_this.store.activeAnchor || ((_a = _this.store.active) === null || _a === void 0 ? void 0 : _a.length)))) {
                         _this.dragRect = {
                             x: Math.min(_this.mouseDown.x, e.x),
                             y: Math.min(_this.mouseDown.y, e.y),
@@ -1331,17 +1395,17 @@ var Canvas = /** @class */ (function () {
                         _this.render();
                         return;
                     }
-                    else if (!((_a = _this.store.active[0]) === null || _a === void 0 ? void 0 : _a.locked)) {
+                    else if (!((_b = _this.store.active[0]) === null || _b === void 0 ? void 0 : _b.locked)) {
                         var pt = { x: e.x, y: e.y };
                         // Move line anchor
                         if (_this.hoverType === HoverType.LineAnchor) {
-                            if ((_this.dockInAnchor(e) || ((_b = _this.store.active[0]) === null || _b === void 0 ? void 0 : _b.lineName) === 'line') &&
+                            if ((_this.dockInAnchor(e) || ((_c = _this.store.active[0]) === null || _c === void 0 ? void 0 : _c.lineName) === 'line') &&
                                 !_this.store.options.disableDock &&
                                 !_this.store.options.disableLineDock) {
                                 _this.clearDock();
                                 _this.dock = calcAnchorDock(_this.store, pt, _this.store.activeAnchor);
-                                ((_c = _this.dock) === null || _c === void 0 ? void 0 : _c.xDock) && (pt.x += _this.dock.xDock.step);
-                                ((_d = _this.dock) === null || _d === void 0 ? void 0 : _d.yDock) && (pt.y += _this.dock.yDock.step);
+                                ((_d = _this.dock) === null || _d === void 0 ? void 0 : _d.xDock) && (pt.x += _this.dock.xDock.step);
+                                ((_e = _this.dock) === null || _e === void 0 ? void 0 : _e.yDock) && (pt.y += _this.dock.yDock.step);
                             }
                             _this.moveLineAnchor(pt, e);
                             return;
@@ -1381,7 +1445,7 @@ var Canvas = /** @class */ (function () {
                         if (_this.store.active.length === 1) {
                             var activePen = _this.store.active[0];
                             if (activePen.locked === undefined || activePen.locked < LockState.DisableMove) {
-                                (_e = activePen === null || activePen === void 0 ? void 0 : activePen.onMouseMove) === null || _e === void 0 ? void 0 : _e.call(activePen, activePen, _this.mousePos);
+                                (_f = activePen === null || activePen === void 0 ? void 0 : activePen.onMouseMove) === null || _f === void 0 ? void 0 : _f.call(activePen, activePen, _this.mousePos);
                             }
                             if (activePen.calculative.focus) {
                                 //执行图元的操作
@@ -1412,8 +1476,8 @@ var Canvas = /** @class */ (function () {
                     !_this.store.options.disableLineDock) {
                     _this.clearDock();
                     _this.dock = calcAnchorDock(_this.store, pt);
-                    ((_f = _this.dock) === null || _f === void 0 ? void 0 : _f.xDock) && (pt.x += _this.dock.xDock.step);
-                    ((_g = _this.dock) === null || _g === void 0 ? void 0 : _g.yDock) && (pt.y += _this.dock.yDock.step);
+                    ((_g = _this.dock) === null || _g === void 0 ? void 0 : _g.xDock) && (pt.x += _this.dock.xDock.step);
+                    ((_h = _this.dock) === null || _h === void 0 ? void 0 : _h.yDock) && (pt.y += _this.dock.yDock.step);
                 }
                 if (_this.mouseDown &&
                     _this.drawingLineName === 'curve' &&
@@ -1642,22 +1706,27 @@ var Canvas = /** @class */ (function () {
             });
             _this.patchFlagsLines.clear();
             if (_this.dragRect) {
-                var pens = _this.store.data.pens.filter(function (pen) {
-                    if (pen.visible === false ||
-                        pen.locked >= LockState.DisableMove ||
-                        pen.parentId || pen.isRuleLine) {
-                        return false;
-                    }
-                    if (rectInRect(pen.calculative.worldRect, _this.dragRect, e.ctrlKey || _this.store.options.dragAllIn)) {
-                        // 先判断在区域内，若不在区域内，则锚点肯定不在框选区域内，避免每条连线过度计算
-                        if (pen.type === PenType.Line && !_this.store.options.dragAllIn) {
-                            return lineInRect(pen, _this.dragRect);
+                if (_this.canvasImage.fitFlag) {
+                    _this.makeFit();
+                }
+                else {
+                    var pens = _this.store.data.pens.filter(function (pen) {
+                        if (pen.visible === false ||
+                            pen.locked >= LockState.DisableMove ||
+                            pen.parentId || pen.isRuleLine) {
+                            return false;
+                        }
+                        if (rectInRect(pen.calculative.worldRect, _this.dragRect, e.ctrlKey || _this.store.options.dragAllIn)) {
+                            // 先判断在区域内，若不在区域内，则锚点肯定不在框选区域内，避免每条连线过度计算
+                            if (pen.type === PenType.Line && !_this.store.options.dragAllIn) {
+                                return lineInRect(pen, _this.dragRect);
+                            }
+                            return true;
                         }
-                        return true;
-                    }
-                });
-                //框选
-                _this.active(pens);
+                    });
+                    //框选
+                    _this.active(pens);
+                }
             }
             if (e.button !== 2) {
                 if (distance(_this.mouseDown, e) < 2) {
@@ -1673,11 +1742,13 @@ var Canvas = /** @class */ (function () {
                 if (_this.store.hover) {
                     _this.store.hover.calculative.mouseDown = false;
                 }
-                _this.store.emitter.emit('mouseup', {
-                    x: e.x,
-                    y: e.y,
-                    pen: _this.store.hover,
-                });
+                if (_this.store.hover != _this.store.hoverContainer) {
+                    _this.store.emitter.emit('mouseup', {
+                        x: e.x,
+                        y: e.y,
+                        pen: _this.store.hover,
+                    });
+                }
                 _this.store.emitter.emit('mouseup', {
                     x: e.x,
                     y: e.y,
@@ -1687,7 +1758,10 @@ var Canvas = /** @class */ (function () {
             if (_this.willInactivePen) {
                 _this.willInactivePen.calculative.active = undefined;
                 setChildrenActive(_this.willInactivePen, false); // 子节点取消激活
-                _this.store.active.splice(_this.store.active.findIndex(function (p) { return p === _this.willInactivePen; }), 1);
+                var index = _this.store.active.findIndex(function (p) { return p === _this.willInactivePen; });
+                if (index >= 0) {
+                    _this.store.active.splice(index, 1);
+                }
                 _this.calcActiveRect();
                 _this.willInactivePen = undefined;
                 _this.store.emitter.emit('inactive', [_this.willInactivePen]);
@@ -1765,8 +1839,7 @@ var Canvas = /** @class */ (function () {
                     var pen = containerPens[i];
                     if (pen.visible == false ||
                         pen.calculative.inView == false ||
-                        pen.locked === LockState.Disable ||
-                        pen.calculative.active) {
+                        pen.locked === LockState.Disable) {
                         continue;
                     }
                     if (pointInRect(pt, pen.calculative.worldRect)) {
@@ -1789,7 +1862,8 @@ var Canvas = /** @class */ (function () {
                         _this.store.hoverContainer = undefined;
                         if (_this.store.lastHoverContainer !== _this.store.hoverContainer) {
                             _this.patchFlags = true;
-                            if (_this.store.lastHoverContainer) {
+                            var movingPen = _this.store.lastHoverContainer.calculative.canvas.store.pens[_this.store.lastHoverContainer.id + movingSuffix];
+                            if (_this.store.lastHoverContainer && !movingPen) {
                                 _this.store.lastHoverContainer.calculative.containerHover = false;
                                 _this.store.emitter.emit('leave', _this.store.lastHoverContainer);
                             }
@@ -1804,6 +1878,9 @@ var Canvas = /** @class */ (function () {
             if (_this.dragRect) {
                 return;
             }
+            if (_this.canvasImage.fitFlag) {
+                return;
+            }
             var hoverType = HoverType.None;
             _this.store.hover = undefined;
             _this.store.hoverAnchor = undefined;
@@ -2838,6 +2915,7 @@ var Canvas = /** @class */ (function () {
                         pens: [deepClone(pen, true)],
                         initPens: initPens,
                     });
+                    _this.store.emitter.emit('change', pen);
                     _this.store.emitter.emit('valueUpdate', pen);
                 }
                 else if (pen.text === _this.inputDiv.dataset.value && pen.calculative.textLines.length == 0) {
@@ -2944,8 +3022,39 @@ var Canvas = /** @class */ (function () {
                 initPens: initPens,
             });
             _this.render();
+            _this.store.emitter.emit('change', pen);
             _this.store.emitter.emit('valueUpdate', pen);
         };
+        this.inFitBorder = function (pt) {
+            var current = undefined;
+            var width = (_this.store.data.width || _this.store.options.width);
+            var height = (_this.store.data.height || _this.store.options.height);
+            var point = {
+                x: (pt.x - _this.store.data.origin.x) / _this.store.data.scale,
+                y: (pt.y - _this.store.data.origin.y) / _this.store.data.scale,
+            };
+            var fit = _this.canvasImage.activeFit;
+            // if (pointInRect(point, { x:fit.x-0.01, y:0, width, height })) {
+            _this.externalElements.style.cursor = 'default';
+            if (point.y > height * fit.y - 10 && point.y < height * fit.y + 10) {
+                current = 'top';
+                _this.externalElements.style.cursor = 'row-resize';
+            }
+            if (point.y > height * (fit.y + fit.height) - 10 && point.y < height * (fit.y + fit.height) + 10) {
+                current = 'bottom';
+                _this.externalElements.style.cursor = 'row-resize';
+            }
+            if (point.x > width * fit.x - 10 && point.x < width * fit.x) {
+                current = 'left';
+                _this.externalElements.style.cursor = 'col-resize';
+            }
+            if (point.x > width * (fit.x + fit.width) - 10 && point.x < width * (fit.x + fit.width) + 10) {
+                current = 'right';
+                _this.externalElements.style.cursor = 'col-resize';
+            }
+            // }
+            _this.canvasImage.currentFit = current;
+        };
         this.canvasTemplate = new CanvasTemplate(parentElement, store);
         this.canvasTemplate.canvas.style.zIndex = '1';
         this.canvasImageBottom = new CanvasImage(parentElement, store, true);
@@ -3286,14 +3395,14 @@ var Canvas = /** @class */ (function () {
                                     }
                                     if (pen.dataset) {
                                         if (num % 2 === 0) {
-                                            lastW = pen.width - 40;
+                                            lastW = pen.width - 40 * this.store.data.scale;
                                         }
                                         else {
                                             lastW = 0;
                                         }
                                         num++;
                                         if (num % 2 === 0) {
-                                            lastH += pen.height + 10;
+                                            lastH += pen.height + 10 * this.store.data.scale;
                                         }
                                     }
                                 }
@@ -3687,6 +3796,7 @@ var Canvas = /** @class */ (function () {
                 pen.calculative.initRect.ey =
                     pen.calculative.y + pen.calculative.height;
             }
+            calcChildrenInitRect(pen);
         });
         // active 消息表示拖拽结束
         // this.store.emitter.emit('active', this.store.active);
@@ -4292,8 +4402,8 @@ var Canvas = /** @class */ (function () {
                         if (_this.store.data.pens[i].type &&
                             _this.store.data.pens[i].lastConnected) {
                             for (var key in _this.store.data.pens[i].lastConnected) {
-                                _this.store.pens[key].connectedLines =
-                                    _this.store.data.pens[i].lastConnected[key];
+                                _this.store.pens[key] && (_this.store.pens[key].connectedLines =
+                                    _this.store.data.pens[i].lastConnected[key]);
                             }
                         }
                         _this.store.data.pens[i] = pen;
@@ -4333,7 +4443,7 @@ var Canvas = /** @class */ (function () {
                     _this.store.pens[pen.id] = pen;
                     if (pen.type && pen.lastConnected) {
                         for (var key in pen.lastConnected) {
-                            _this.store.pens[key].connectedLines = pen.lastConnected[key];
+                            _this.store.pens[key] && (_this.store.pens[key].connectedLines = pen.lastConnected[key]);
                         }
                     }
                     pen.calculative.canvas = _this;
@@ -4385,7 +4495,7 @@ var Canvas = /** @class */ (function () {
                     _this.store.pens[pen.id] = pen;
                     if (pen.type && pen.lastConnected) {
                         for (var key in pen.lastConnected) {
-                            _this.store.pens[key].connectedLines = pen.lastConnected[key];
+                            _this.store.pens[key] && (_this.store.pens[key].connectedLines = pen.lastConnected[key]);
                         }
                     }
                     pen.calculative.canvas = _this;
@@ -6019,7 +6129,7 @@ var Canvas = /** @class */ (function () {
         if (!pen.connectedLines) {
             return;
         }
-        pen.connectedLines.forEach(function (item) {
+        pen.connectedLines.forEach(function (item, index) {
             var line = _this.store.pens[item.lineId];
             // 活动层的线不需要更新，会在活动层处理
             if (!line || line.calculative.active) {
@@ -6029,6 +6139,11 @@ var Canvas = /** @class */ (function () {
             if (!lineAnchor) {
                 return;
             }
+            if (!lineAnchor.connectTo) {
+                // 如果pen有连接关系但连线中没有连接关系，删除pen的连接关系
+                pen.connectedLines.splice(index, 1);
+                return;
+            }
             if (line.autoFrom) {
                 var from = getFromAnchor(line);
                 if (from.id === lineAnchor.id) {
@@ -6987,6 +7102,7 @@ var Canvas = /** @class */ (function () {
                     _this.inputDiv.style.paddingTop = '';
                 }
             }
+            _this.store.emitter.emit('input', pen);
         };
         this.inputDiv.onclick = function (e) {
             e.stopPropagation();
@@ -7061,7 +7177,7 @@ var Canvas = /** @class */ (function () {
     };
     Canvas.prototype.changePenId = function (oldId, newId) {
         var _this = this;
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (oldId === newId) {
             return;
         }
@@ -7101,6 +7217,9 @@ var Canvas = /** @class */ (function () {
                 calcWorldAnchors(line);
             });
         }
+        //锚点
+        (_f = pen.anchors) === null || _f === void 0 ? void 0 : _f.forEach(function (anchor) { return anchor.penId = newId; });
+        (_g = pen.calculative.worldAnchors) === null || _g === void 0 ? void 0 : _g.forEach(function (anchor) { return anchor.penId = newId; });
     };
     Canvas.prototype.updateValue = function (pen, data) {
         var _a, _b, _c, _d, _e, _f;
@@ -7638,6 +7757,17 @@ var Canvas = /** @class */ (function () {
         if (!isFinite(rect.width)) {
             throw new Error('can not move view, because width is not finite');
         }
+        var width = this.store.data.width || this.store.options.width;
+        var height = this.store.data.height || this.store.options.height;
+        if (width && height) {
+            //大屏
+            rect = {
+                x: this.store.data.origin.x,
+                y: this.store.data.origin.y,
+                width: width * this.store.data.scale,
+                height: height * this.store.data.scale,
+            };
+        }
         this.store.data.x = this.canvas.clientWidth / 2 - x * rect.width - rect.x;
         this.store.data.y = this.canvas.clientHeight / 2 - y * rect.height - rect.y;
         this.onMovePens();
@@ -7656,6 +7786,341 @@ var Canvas = /** @class */ (function () {
         this.externalElements.style.cursor = 'default';
         this.render();
     };
+    Canvas.prototype.showFit = function () {
+        this.store.data.locked = 0;
+        this.canvasImage.fitFlag = true;
+        this.canvasImage.activeFit = undefined;
+        this.canvasImage.currentFit = undefined;
+        if (!this.store.data.fits) {
+            this.store.data.fits = [];
+        }
+        this.store.data.fits.forEach(function (fit) { return fit.active = false; });
+        this.canvasImage.init();
+        this.canvasImage.render();
+    };
+    Canvas.prototype.hideFit = function () {
+        this.canvasImage.fitFlag = false;
+        this.canvasImage.activeFit = undefined;
+        this.canvasImage.currentFit = undefined;
+        this.canvasImage.init();
+        this.canvasImage.render();
+    };
+    Canvas.prototype.makeFit = function () {
+        var _this = this;
+        if (this.dragRect.width < 100 && this.dragRect.height < 100) {
+            return;
+        }
+        //将所有当前框选的图元设置到该容器中
+        var pens = this.store.data.pens.filter(function (pen) {
+            if (
+            // pen.locked >= LockState.DisableMove || 
+            pen.parentId || pen.isRuleLine) {
+                return false;
+            }
+            if (rectInRect(pen.calculative.worldRect, _this.dragRect, true)) {
+                // 先判断在区域内，若不在区域内，则锚点肯定不在框选区域内，避免每条连线过度计算
+                if (pen.type === PenType.Line && !_this.store.options.dragAllIn) {
+                    return lineInRect(pen, _this.dragRect);
+                }
+                return true;
+            }
+        });
+        if (!pens.length) {
+            return;
+        }
+        var _rect = this.parent.getRect(pens);
+        var scale = this.store.data.scale;
+        var width = this.store.data.width || this.store.options.width;
+        var height = this.store.data.height || this.store.options.height;
+        var x = (Math.floor(_rect.x) - this.store.data.origin.x) / scale / width;
+        var y = (Math.floor(_rect.y) - this.store.data.origin.y) / scale / height;
+        var rect = {
+            x: x,
+            y: y,
+            width: (Math.ceil(_rect.width) + 1) / scale / width,
+            height: (Math.ceil(_rect.height) + 1) / scale / height,
+            children: pens.map(function (pen) { return pen.id; }),
+            id: s8(),
+            active: true
+        };
+        if (rect.x < -0.1) {
+            rect.x = -0.1;
+        }
+        if (rect.y < -0.1) {
+            rect.y = -0.1;
+        }
+        if (rect.width > 0.5) {
+            rect.left = true;
+            rect.right = true;
+            rect.leftValue = (rect.x - 0) * scale * width;
+            rect.rightValue = (1 - (rect.x + rect.width)) * scale * width;
+        }
+        else {
+            if (rect.x < 0.5) {
+                rect.left = true;
+                rect.leftValue = (rect.x - 0) * scale * width;
+            }
+            else {
+                rect.right = true;
+                rect.rightValue = (1 - (rect.x + rect.width)) * scale * width;
+            }
+        }
+        if (rect.leftValue < 1) {
+            rect.leftValue = 0;
+        }
+        if (rect.rightValue < 1) {
+            rect.rightValue = 0;
+        }
+        if (rect.height > 0.5) {
+            rect.top = true;
+            rect.bottom = true;
+            rect.topValue = (rect.y - 0) * scale * height;
+            rect.bottomValue = (1 - (rect.y + rect.height)) * scale * height;
+        }
+        else {
+            if (rect.y < 0.5) {
+                rect.top = true;
+                rect.topValue = (rect.y - 0) * scale * height;
+            }
+            else {
+                rect.bottom = true;
+                rect.bottomValue = (1 - (rect.y + rect.height)) * scale * height;
+            }
+        }
+        if (rect.topValue < 1) {
+            rect.topValue = 0;
+        }
+        if (rect.bottomValue < 1) {
+            rect.bottomValue = 0;
+        }
+        if (!this.store.data.fits) {
+            this.store.data.fits = [];
+        }
+        this.store.data.fits.forEach(function (fit) { fit.active = false; });
+        this.store.data.fits.push(rect);
+        this.canvasImage.activeFit = rect;
+        this.store.emitter.emit('fit', rect);
+        this.canvasImage.init();
+        this.canvasImage.render();
+    };
+    Canvas.prototype.updateFit = function (e) {
+        var _this = this;
+        var scale = this.store.data.scale;
+        var width = this.store.data.width || this.store.options.width;
+        var height = this.store.data.height || this.store.options.height;
+        var x = (e.x - this.store.data.origin.x) / scale / width;
+        var y = (e.y - this.store.data.origin.y) / scale / height;
+        if (this.canvasImage.currentFit) {
+            var fit = this.canvasImage.activeFit;
+            if (this.canvasImage.currentFit === 'top') {
+                if (y < -0.1) {
+                    y = -0.1;
+                }
+                var gap = y - fit.y;
+                fit.height -= gap;
+                if (fit.height < 0.01) {
+                    fit.height = 0.01;
+                    return;
+                }
+                fit.y = y;
+            }
+            if (this.canvasImage.currentFit === 'bottom') {
+                if (y > 1.1) {
+                    y = 1.1;
+                }
+                fit.height = y - fit.y;
+                if (fit.height <= 0.01) {
+                    fit.height = 0.01;
+                }
+            }
+            if (this.canvasImage.currentFit === 'left') {
+                if (x < -0.1) {
+                    x = -0.1;
+                }
+                var gap = x - fit.x;
+                fit.width -= gap;
+                if (fit.width < 0.01) {
+                    fit.width = 0.01;
+                    return;
+                }
+                fit.x = x;
+            }
+            if (this.canvasImage.currentFit === 'right') {
+                if (x > 1.1) {
+                    x = 1.1;
+                }
+                fit.width = x - fit.x;
+                if (fit.width <= 0.01) {
+                    fit.width = 0.01;
+                }
+            }
+            var rect_2 = {
+                x: fit.x * width * scale + this.store.data.origin.x,
+                y: fit.y * height * scale + this.store.data.origin.y,
+                width: fit.width * width * scale,
+                height: fit.height * height * scale,
+            };
+            calcRightBottom(rect_2);
+            var pens = this.store.data.pens.filter(function (pen) {
+                if (
+                // pen.locked >= LockState.DisableMove || 
+                pen.parentId || pen.isRuleLine) {
+                    return false;
+                }
+                if (rectInRect(pen.calculative.worldRect, rect_2, true)) {
+                    if (pen.type === PenType.Line && !_this.store.options.dragAllIn) {
+                        return lineInRect(pen, rect_2);
+                    }
+                    return true;
+                }
+            });
+            fit.left = undefined;
+            fit.leftValue = undefined;
+            fit.right = undefined;
+            fit.rightValue = undefined;
+            fit.top = undefined;
+            fit.topValue = undefined;
+            fit.bottom = undefined;
+            fit.bottomValue = undefined;
+            if (fit.width > 0.5) {
+                fit.left = true;
+                fit.right = true;
+                fit.leftValue = (fit.x - 0) * scale * width;
+                fit.rightValue = ((1 - (fit.x + fit.width)) * scale * width);
+            }
+            else {
+                if (fit.x < 0.5) {
+                    fit.left = true;
+                    fit.leftValue = (fit.x - 0) * scale * width;
+                }
+                else {
+                    fit.right = true;
+                    fit.rightValue = ((1 - (fit.x + fit.width)) * scale * width);
+                }
+            }
+            if (Math.abs(fit.leftValue) < 1) {
+                fit.leftValue = 0;
+            }
+            if (Math.abs(fit.rightValue) < 1) {
+                fit.rightValue = 0;
+            }
+            if (fit.height > 0.5) {
+                fit.top = true;
+                fit.bottom = true;
+                fit.topValue = (fit.y - 0) * scale * height;
+                fit.bottomValue = (1 - (fit.y + fit.height)) * scale * height;
+            }
+            else {
+                if (fit.y < 0.5) {
+                    fit.top = true;
+                    fit.topValue = (fit.y - 0) * scale * height;
+                }
+                else {
+                    fit.bottom = true;
+                    fit.bottomValue = (1 - (fit.y + fit.height)) * scale * height;
+                }
+            }
+            if (Math.abs(fit.topValue) < 1) {
+                fit.topValue = 0;
+            }
+            if (Math.abs(fit.bottomValue) < 1) {
+                fit.bottomValue = 0;
+            }
+            fit.children = pens.map(function (pen) { return pen.id; });
+            this.store.emitter.emit('fit', fit);
+            this.mouseDown.x = e.x;
+            this.mouseDown.y = e.y;
+            this.canvasImage.init();
+            this.canvasImage.render();
+        }
+    };
+    Canvas.prototype.updateFitRect = function (fit) {
+        if (fit === void 0) { fit = this.canvasImage.activeFit; }
+        var width = this.store.data.width || this.store.options.width;
+        var height = this.store.data.height || this.store.options.height;
+        if (fit.left) {
+            if (fit.leftValue) {
+                fit.x = Math.abs(fit.leftValue) < 1 ? fit.leftValue : fit.leftValue / width;
+            }
+            else {
+                fit.x = 0;
+            }
+        }
+        if (fit.right) {
+            if (fit.rightValue) {
+                fit.width = 1 - (Math.abs(fit.rightValue) < 1 ? fit.rightValue : fit.rightValue / width) - fit.x;
+            }
+            else {
+                fit.width = 1 - fit.x;
+            }
+        }
+        if (fit.top) {
+            if (fit.topValue) {
+                fit.y = Math.abs(fit.topValue) < 1 ? fit.topValue : fit.topValue / height;
+            }
+            else {
+                fit.y = 0;
+            }
+        }
+        if (fit.bottom) {
+            if (fit.bottomValue) {
+                fit.height = 1 - (Math.abs(fit.bottomValue) < 1 ? fit.bottomValue : fit.bottomValue / height) - fit.y;
+            }
+            else {
+                fit.height = 1 - fit.y;
+            }
+        }
+        this.canvasImage.init();
+        this.canvasImage.render();
+    };
+    Canvas.prototype.deleteFit = function (fit) {
+        if (fit === void 0) { fit = this.canvasImage.activeFit; }
+        if (!fit) {
+            return;
+        }
+        var index = this.store.data.fits.findIndex(function (item) { return item.id === fit.id; });
+        this.store.data.fits.splice(index, 1);
+        this.canvasImage.activeFit = undefined;
+        this.canvasImage.init();
+        this.canvasImage.render();
+        this.store.emitter.emit('fit', undefined);
+    };
+    Canvas.prototype.calcuActiveFit = function () {
+        var _a;
+        var width = this.store.data.width || this.store.options.width;
+        var height = this.store.data.height || this.store.options.height;
+        var downX = (this.mouseDown.x - this.store.data.origin.x) / this.store.data.scale / width;
+        var downY = (this.mouseDown.y - this.store.data.origin.y) / this.store.data.scale / height;
+        var idx = -1;
+        var lastActiveIdx = -1;
+        (_a = this.store.data.fits) === null || _a === void 0 ? void 0 : _a.forEach(function (fit, index) {
+            fit.ex = null;
+            fit.ey = null;
+            if (pointInRect({ x: downX, y: downY }, fit)) {
+                idx = index;
+            }
+            ;
+            if (fit.active) {
+                lastActiveIdx = index;
+            }
+        });
+        if (idx !== -1 && idx !== lastActiveIdx) {
+            this.canvasImage.activeFit = this.store.data.fits[idx];
+            this.store.data.fits[idx].active = true;
+            if (lastActiveIdx !== -1) {
+                this.store.data.fits[lastActiveIdx].active = false;
+            }
+            this.store.emitter.emit('fit', this.store.data.fits[idx]);
+        }
+        else if (idx === -1 && lastActiveIdx !== -1) {
+            this.store.data.fits[lastActiveIdx].active = false;
+            this.store.emitter.emit('fit', undefined);
+            this.canvasImage.activeFit = null;
+        }
+        this.inactive();
+        this.canvasImage.init();
+        this.canvasImage.render();
+    };
     Canvas.prototype.toggleMagnifier = function () {
         this.magnifierCanvas.magnifier = !this.magnifierCanvas.magnifier;
         if (this.magnifierCanvas.magnifier) {