@meta2d/core 1.0.51 → 1.0.53

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':
@@ -656,7 +688,7 @@ var Canvas = /** @class */ (function () {
                             }
                             else {
                                 //图元进入编辑模式
-                                pen.calculative.focus = !pen.calculative.focus;
+                                pen.calculative.focus = true;
                             }
                         });
                         _this.render();
@@ -668,6 +700,16 @@ var Canvas = /** @class */ (function () {
                     }
                     _this.drawingLineName = undefined;
                     _this.stopPencil();
+                    if (_this.store.active) {
+                        _this.store.active.forEach(function (pen) {
+                            if (pen.type) {
+                            }
+                            else {
+                                //图元退出编辑模式
+                                pen.calculative.focus = false;
+                            }
+                        });
+                    }
                     if (_this.movingPens) {
                         _this.getAllByPens(_this.movingPens).forEach(function (pen) {
                             _this.store.pens[pen.id] = undefined;
@@ -981,6 +1023,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);
@@ -1207,6 +1256,9 @@ var Canvas = /** @class */ (function () {
                         });
                         break;
                 }
+                if (_this.store.hover) {
+                    _this.store.hover.calculative.mouseDown = true;
+                }
                 _this.store.emitter.emit('mousedown', {
                     x: e.x,
                     y: e.y,
@@ -1216,7 +1268,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;
@@ -1245,6 +1297,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) {
@@ -1298,7 +1366,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),
@@ -1318,17 +1386,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;
@@ -1368,7 +1436,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) {
                                 //执行图元的操作
@@ -1399,8 +1467,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' &&
@@ -1629,22 +1697,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) {
@@ -1657,6 +1730,9 @@ var Canvas = /** @class */ (function () {
                         pen: _this.store.hover,
                     });
                 }
+                if (_this.store.hover) {
+                    _this.store.hover.calculative.mouseDown = false;
+                }
                 _this.store.emitter.emit('mouseup', {
                     x: e.x,
                     y: e.y,
@@ -1671,7 +1747,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]);
@@ -1788,6 +1867,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;
@@ -2839,7 +2921,7 @@ var Canvas = /** @class */ (function () {
             var e_6, _a;
             _this.clearDropdownList();
             var pen = _this.store.pens[_this.inputDiv.dataset.penId];
-            if (!_this.store.data.locked && !['table'].includes(pen.name)) {
+            if (!_this.store.data.locked && !['tablePlus'].includes(pen.name)) {
                 return;
             }
             _this.dropdown.style.display = 'block';
@@ -2930,6 +3012,36 @@ var Canvas = /** @class */ (function () {
             _this.render();
             _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);
@@ -3270,14 +3382,14 @@ var Canvas = /** @class */ (function () {
                                     }
                                     if (pen.dataset) {
                                         if (num % 2 === 0) {
-                                            lastW = pen.width + 10;
+                                            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;
                                         }
                                     }
                                 }
@@ -3671,6 +3783,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);
@@ -4468,6 +4581,11 @@ var Canvas = /** @class */ (function () {
             }
             globalStore.anchors[pen.name](pen);
         }
+        if (!pen.anchors) {
+            var anchors = deepClone(this.store.options.defaultAnchors);
+            anchors.forEach(function (item, index) { item.id = "" + index; item.penId = pen.id; });
+            pen.anchors = anchors;
+        }
         this.updatePenRect(pen);
         if (!pen.anchors && pen.calculative.worldAnchors) {
             pen.anchors = pen.calculative.worldAnchors.map(function (pt) {
@@ -5465,7 +5583,7 @@ var Canvas = /** @class */ (function () {
     };
     Canvas.prototype.moveLineAnchor = function (pt, keyOptions) {
         var _this = this;
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         if (!this.activeRect || this.store.data.locked) {
             return;
         }
@@ -5476,8 +5594,8 @@ var Canvas = /** @class */ (function () {
             var pen = this.store.pens[this.store.activeAnchor.connectTo];
             disconnectLine(pen, getAnchor(pen, this.store.activeAnchor.anchorId), this.store.pens[this.store.activeAnchor.penId], this.store.activeAnchor);
         }
-        var anchorId = this.store.activeAnchor.id;
-        var connectedLine = (_c = (_b = this.store.pens[this.store.activeAnchor.penId]) === null || _b === void 0 ? void 0 : _b.connectedLines) === null || _c === void 0 ? void 0 : _c.filter(function (item) { return item.anchor === anchorId; });
+        var anchorId = (_b = this.store.activeAnchor) === null || _b === void 0 ? void 0 : _b.id;
+        var connectedLine = (_d = (_c = this.store.pens[this.store.activeAnchor.penId]) === null || _c === void 0 ? void 0 : _c.connectedLines) === null || _d === void 0 ? void 0 : _d.filter(function (item) { return item.anchor === anchorId; });
         if (connectedLine && connectedLine.length > 0) {
             connectedLine.forEach(function (connected) {
                 var pen = _this.store.pens[connected.lineId];
@@ -5557,7 +5675,7 @@ var Canvas = /** @class */ (function () {
                 to.prev = undefined;
                 // 重新自动计算连线
                 if (line.lineName !== 'polyline') {
-                    (_d = this[line.lineName]) === null || _d === void 0 ? void 0 : _d.call(this, this.store, line);
+                    (_e = this[line.lineName]) === null || _e === void 0 ? void 0 : _e.call(this, this.store, line);
                 }
             }
         }
@@ -6934,7 +7052,7 @@ var Canvas = /** @class */ (function () {
         };
         this.inputDiv.oninput = function (e) {
             var pen = _this.store.pens[_this.inputDiv.dataset.penId];
-            if (pen.inputType === 'number') {
+            if (pen && pen.inputType === 'number') {
                 var value = e.target.innerText;
                 var numericValue = value.replace(/[^0-9]/g, ''); // 移除非数字字符
                 // 如果输入的值不是纯数字，则替换为纯数字
@@ -7040,7 +7158,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;
         }
@@ -7080,6 +7198,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;
@@ -7127,6 +7248,9 @@ var Canvas = /** @class */ (function () {
                 if (needCalcIconRectProps.includes(k)) {
                     willCalcIconRect = true;
                 }
+                if (pen.image && pen.name !== 'gif' && ['globalAlpha', 'flipY', 'flipX', 'x', 'y', 'width', 'height'].includes(k)) {
+                    willRenderImage = true;
+                }
             }
             else {
                 // 复合属性，如abc.def.ghi
@@ -7435,11 +7559,11 @@ var Canvas = /** @class */ (function () {
         }
         return canvas.toDataURL();
     };
-    Canvas.prototype.activeToPng = function (padding) {
+    Canvas.prototype.activeToPng = function (padding, maxWidth) {
         if (padding === void 0) { padding = 2; }
-        return this.pensToPng(this.store.active, padding);
+        return this.pensToPng(this.store.active, padding, maxWidth);
     };
-    Canvas.prototype.pensToPng = function (pens, padding) {
+    Canvas.prototype.pensToPng = function (pens, padding, maxWidth) {
         var e_26, _a;
         if (pens === void 0) { pens = this.store.active; }
         if (padding === void 0) { padding = 2; }
@@ -7459,6 +7583,9 @@ var Canvas = /** @class */ (function () {
         rect.width += p[3] + p[1];
         rect.height += p[0] + p[2];
         calcRightBottom(rect);
+        var scale = (maxWidth || rect.width) / rect.width;
+        rect.width *= scale;
+        rect.height *= scale;
         var canvas = document.createElement('canvas');
         canvas.width = rect.width;
         canvas.height = rect.height;
@@ -7472,8 +7599,17 @@ var Canvas = /** @class */ (function () {
         }
         var ctx = canvas.getContext('2d');
         ctx.textBaseline = 'middle'; // 默认垂直居中
+        ctx.scale(scale, scale);
+        var background = this.store.data.background || this.store.options.background;
+        if (background) {
+            // 绘制背景颜色
+            ctx.save();
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, oldRect.width + (p[3] + p[1]), oldRect.height + (p[0] + p[2]));
+            ctx.restore();
+        }
         // // 平移画布，画笔的 worldRect 不变化
-        ctx.translate(-oldRect.x, -oldRect.y);
+        ctx.translate(-oldRect.x + p[3], -oldRect.y + p[0]);
         try {
             for (var _b = __values(this.store.data.pens), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var pen = _c.value;
@@ -7602,6 +7738,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();
@@ -7620,6 +7767,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) {