xctc-utils 1.6.49 → 1.6.50

package/dist/canvas/index.js

@@ -12,33 +12,24 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var fabric_1 = require("fabric");
+var config_1 = require("../config");
+var utils_1 = require("../utils");
+var is_1 = require("../is");
+var has_1 = require("../is/has");
+var register_1 = require("../handle/register");
+var drop_1 = require("../event/drop");
+var mouse_down_1 = require("../event/mouse-down");
+var mouse_move_1 = require("../event/mouse-move");
+var mouse_up_1 = require("../event/mouse-up");
+var mouse_wheel_1 = require("../event/mouse-wheel");
+var index_1 = require("../handle/index");
+var drop_2 = require("../event/drop");
+var create_1 = require("../handle/create");
+var query_1 = require("../handle/query");
+var update_1 = require("../handle/update");
+var changed_1 = require("../event/changed");
 // 初始化画布创建时需要的参数-默认值
-var defaultConfig = {
-    width: 1000,
-    height: 800,
-    fireRightClick: true,
-    stopContextMenu: true,
-    backgroundImgUrl: "",
-    left: 0,
-    top: 0,
-    // repeat: 'no-repeat',
-    angle: 0,
-    selection: true,
-    selectable: true,
-    strokeWidth: 4,
-    scaleX: 1,
-    scaleY: 1,
-    stroke: "",
-    fill: "",
-    transparentCorners: false,
-    cornerColor: "",
-    hasControls: true,
-    hasRotatingPoint: true,
-    hasBorders: true,
-    lockMovementX: true,
-    lockMovementY: true,
-    lockScalingFlip: true // 防止翻转
-};
+var defaultConfig = __assign({}, config_1.configDefaultValue.canvasDefaultValue);
 var CanvasHooks = /** @class */ (function () {
     function CanvasHooks(config) {
         this.canvasDataSource = null;
@@ -88,23 +79,23 @@ var CanvasHooks = /** @class */ (function () {
         _.renderCanvasStatus = 1;
         var canvasId = "";
         // config 配置数据必须有画布ID参数
-        if (config && Object.keys(config).length && !config.hasOwnProperty("id")) {
+        if ((0, is_1.isObject)(config) && !(0, has_1.hasProperty)(config, "id")) {
             console.error("createCanvasFn函数接收的参数必须包含画布对应的id");
             return;
         }
-        if (config && config.hasOwnProperty("id")) {
+        if ((0, is_1.isObject)(config) && (0, has_1.hasProperty)(config, "id")) {
             _.canvasConfig = config;
-            if (!_.getDomFn(_.canvasConfig.id)) {
+            if (!(0, utils_1.getDomFn)(_.canvasConfig.id)) {
                 console.error("未查询到id=" + _.canvasConfig.id + "的canvas元素");
                 return;
             }
         }
         // 初始化画布渲染时的配置参数
         var data = __assign(__assign({}, defaultConfig), _.canvasConfig);
-        if (!_.canvasConfig.hasOwnProperty("width")) {
+        if (!(0, has_1.hasProperty)(_.canvasConfig, "width")) {
             data['width'] = _.elementSizeFn("canvasContainer").width;
         }
-        if (!_.canvasConfig.hasOwnProperty("height")) {
+        if (!(0, has_1.hasProperty)(_.canvasConfig, "height")) {
             data['height'] = _.elementSizeFn("canvasContainer").height;
         }
         var imgUrl = (data === null || data === void 0 ? void 0 : data.backgroundImgUrl) || "";
@@ -196,13 +187,7 @@ var CanvasHooks = /** @class */ (function () {
     };
     // 注册回调事件--页面生成画布实例的时候，调用该函数
     CanvasHooks.prototype.registerCallBackEventFn = function (config) {
-        console.log("canvasDataSource--", this.canvasDataSource);
-        if (!this.canvasDataSource) {
-            return;
-        }
-        if (config) {
-            this.callBackEventConfig = config;
-        }
+        new register_1.RegisterCanvasEventFn(config);
     };
     // 执行注册事件
     CanvasHooks.prototype.registerAllEventHandleFn = function () {
@@ -247,353 +232,55 @@ var CanvasHooks = /** @class */ (function () {
     };
     // 注册画布发生缩放监听事件
     CanvasHooks.prototype.registerCanvasZoomChangeEventFn = function () {
-        var _ = this;
-        var zoom = _.canvasDataSource.getZoom();
+        new register_1.RegisterCanvasZoomChangeEventFn();
     };
     // 拖拽事件注册
     CanvasHooks.prototype.registerMouseDropEventFn = function (options) {
-        console.log("registerMouseDropEventFn");
-        var _ = this;
-        // 画布元素距离浏览器左侧和顶部的距离
-        var offset = {
-            left: _.canvasDataSource.getSelectionElement().getBoundingClientRect().left,
-            top: _.canvasDataSource.getSelectionElement().getBoundingClientRect().top
-        };
-        // 鼠标坐标转换成画布的坐标（未经过缩放和平移的坐标）
-        var point = {
-            x: options.e.x - offset.left,
-            y: options.e.y - offset.top,
-        };
-        // 转换后的坐标，restorePointerVpt 不受视窗变换的影响
-        var pointerVpt = _.canvasDataSource.restorePointerVpt(point);
-        //创建元素
-        _.mousePointerDataSource = pointerVpt;
-        console.log("_.mouseDragStatus=", _.mouseDragStatus);
-        _.createDragElementFn();
-        if (!_.mouseDragStatus) {
-            _.mouseDragStatus = true;
-        }
+        new drop_1.RegisterMouseDropEventFn(options);
     };
     // 鼠标进入画布
     CanvasHooks.prototype.registerMouseOverEventFn = function (options) {
-        console.log("registerMouseOutEventFn");
+        // console.log("registerMouseOutEventFn");
         var _ = this;
         _.mouseCanvasInRangeStatus = true;
     };
     // 鼠标移出画布
     CanvasHooks.prototype.registerMouseOutEventFn = function (options) {
-        console.log("registerMouseOutEventFn");
+        // console.log("registerMouseOutEventFn");
         var _ = this;
         _.mouseCanvasInRangeStatus = false;
     };
     // 注册鼠标按下事件
     CanvasHooks.prototype.registerMouseDownEventFn = function (options) {
-        console.log("registerMouseDownEventFn");
-        var _ = this;
-        _.mouseCanvasInRangeStatus = true;
-        _.mouseWheelPointerDataSource = options;
-        var event = options.e;
-        var activeTarget = options.target || options.activeTarget;
-        console.log("activeTarget==", activeTarget);
-        _.mouseDragStatus = false;
-        _.mouseWheelStatus = false;
-        _.mouseClickType = (options === null || options === void 0 ? void 0 : options.button) || 1; // 鼠标点击类型 1 左键 2中间滚轮 3右键
-        console.log("mouseClickType==", _.mouseClickType);
-        if (_.mouseRightClickStatus) {
-            // 如果当前处于右键状态，则不再继续执行任何操作
-            // 如果菜单属于显示状态，则关闭菜单
-            if (_.canvasMenuShowStatus) {
-                _.canvasMenuShowStatus = false;
-                _.mouseRightClickStatus = false;
-                _.hiddenRightClickMenuFn();
-            }
-            return;
-        }
-        // 鼠标左键点击操作
-        if (_.mouseClickType == 1) {
-            // 开启全选操作，禁止画布拖拽
-            if (_.canvasAllSelectionStatus) {
-                _.dragLastPosDataSource.open = false;
-                _.hiddenRightClickMenuFn();
-                return;
-            }
-            // 自定义绘制选择框选状态--开始绘制
-            if (_.canvasSelectionStatus) {
-                console.log("自定义绘制选择框选状态--开始绘制");
-                _.createSelectionStatus = 1;
-                var pointer = _.canvasDataSource.getPointer(options.e);
-                _.mousePointerDataSource = { x: pointer.x, y: pointer.y };
-                _.createSelectionRectFn(options);
-                return;
-            }
-            // 如果是鼠标左键点击画布，且此时处于右键状态，则关闭右键菜单，并将菜单状态初始化
-            if (_.mouseRightClickStatus) {
-                console.log("关闭右键菜单，并将菜单状态初始化");
-                _.mouseRightClickStatus = false;
-                _.canvasMenuShowStatus = false;
-                _.dragLastPosDataSource.open = true;
-                _.dragLastPosDataSource.lastPosX = event.clientX;
-                _.dragLastPosDataSource.lastPosY = event.clientY;
-                _.canvasDragStatus = true;
-                _.hiddenRightClickMenuFn();
-                return;
-            }
-            // 点击画布上的对象执行操作
-            if (activeTarget) {
-                // 画布上的数据对象被点击
-                if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.elementKey) == "data") {
-                    _.mouseClickTargetObjectStatus = 1;
-                    return;
-                }
-                // 画布上的自定义绘制框被点击
-                if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.renderType) == "frameSelection") {
-                    _.mouseClickTargetObjectStatus = 1;
-                    return;
-                }
-            }
-            else {
-                if (!_.canvasDragStatus) {
-                    setTimeout(function () {
-                        _.canvasDragStatus = true;
-                    }, 0);
-                }
-            }
-            // 画布可拖拽状态
-            if (_.canvasDragStatus) {
-                // 如果当前点击了底层画布，则允许底层画布可以拖拽
-                console.log("允许底层画布可以拖拽");
-                if (!activeTarget) {
-                    // 如果没有获取到具体的目标对象，则默认是点击了画布底图，即开启画布的拖拽
-                    _.dragLastPosDataSource.open = true;
-                    _.dragLastPosDataSource.lastPosX = event.clientX;
-                    _.dragLastPosDataSource.lastPosY = event.clientY;
-                    return;
-                }
-            }
-            else {
-                console.log("3333");
-                _.dragLastPosDataSource.open = false;
-                return;
-            }
-        }
-        // 中间滚轮操作，仅仅允许缩放，禁止拖拽操作
-        if (_.mouseClickType == 2) {
-            _.dragLastPosDataSource.open = false;
-        }
-        // 鼠标右键操作
-        if (_.mouseClickType == 3) {
-            // 激活右键状态
-            _.mouseRightClickStatus = true;
-            _.canvasMenuShowStatus = true;
-            // 创建右键选择菜单列表
-            _.createRightClickMenuFn(options);
-        }
+        new mouse_down_1.RegisterMouseDownEventFn(options);
     };
     // 注册鼠标移动事件
     CanvasHooks.prototype.registerMouseMoveEventFn = function (options) {
-        var _ = this;
-        // 监听鼠标是否在画布范围内移动
-        var pointer = _.canvasDataSource.getPointer(options.e);
-        var inRange = pointer.x >= 0 && pointer.x <= _.canvasDataSource.width &&
-            pointer.y >= 0 && pointer.y <= _.canvasDataSource.height;
-        _.mouseCanvasInRangeStatus = inRange;
-        // 鼠标不在画布内，终止行为
-        if (!inRange) {
-            return;
-        }
-        var activeTarget = options.target || options.activeTarget;
-        _.mouseDragStatus = true;
-        _.mouseWheelStatus = true;
-        _.mouseWheelPointerDataSource = options;
-        if (_.mouseRightClickStatus) {
-            // 如果当前处于右键状态，则不再继续执行任何操作
-            return;
-        }
-        if (_.dragLastPosDataSource.open) {
-            var evt = options.e;
-            var vpt = _.canvasDataSource.viewportTransform;
-            vpt[4] += evt.clientX - _.dragLastPosDataSource.lastPosX;
-            vpt[5] += evt.clientY - _.dragLastPosDataSource.lastPosY;
-            _.canvasDataSource.requestRenderAll(); // 异步更新画板，提升性能
-            _.dragLastPosDataSource.lastPosX = evt.clientX;
-            _.dragLastPosDataSource.lastPosY = evt.clientY;
-            return;
-        }
-        // 画布上的对象被点击
-        if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.elementKey) == "data") {
-            _.mouseClickTargetObjectStatus = 2;
-            return;
-        }
-        // 画布上的自定义绘制框被点击
-        if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.renderType) == "frameSelection") {
-            _.mouseClickTargetObjectStatus = 2;
-            return;
-        }
-        // 更新自定义绘制图像数据
-        if (_.canvasSelectionStatus) {
-            _.createSelectionStatus = 2;
-            _.updateSelectionRectFn(options);
-            return;
-        }
+        new mouse_move_1.RegisterMouseMoveEventFn(options);
     };
     // 注册鼠标抬起事件
     CanvasHooks.prototype.registerMouseUpEventFn = function (options) {
-        console.log("registerMouseUpEventFn");
-        var _ = this;
-        // 鼠标不在画布内，终止行为
-        if (!_.mouseCanvasInRangeStatus) {
-            return;
-        }
-        var activeTarget = options.target || options.activeTarget;
-        var _a = _.callBackEventConfig || {}, activeTargetElementBackFn = _a.activeTargetElementBackFn, activeTargetSelectionRectBackFn = _a.activeTargetSelectionRectBackFn;
-        _.mouseWheelPointerDataSource = options;
-        console.log("activeTarget==", activeTarget);
-        console.log("_.canvasDataSource==", _.canvasDataSource.backgroundImage);
-        setTimeout(function () {
-            _.mouseWheelStatus = false;
-        }, 0);
-        if (_.mouseRightClickStatus) {
-            // 如果当前处于右键状态，则不再继续执行任何操作
-            return;
-        }
-        // 画布上的对象被点击
-        if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.elementKey) == "data") {
-            // 如果是点击对象操作，并未执行拖动，则执行点击的回调函数
-            if (_.mouseClickTargetObjectStatus == 1) {
-                if (activeTargetElementBackFn instanceof Function) {
-                    activeTargetElementBackFn(activeTarget);
-                }
-            }
-            setTimeout(function () {
-                _.mouseClickTargetObjectStatus = 3;
-            }, 0);
-            return;
-        }
-        if ((activeTarget === null || activeTarget === void 0 ? void 0 : activeTarget.renderType) == "frameSelection") {
-            // 点击了画布上自定义绘制的选择框
-            if (_.mouseClickTargetObjectStatus == 1) {
-                if (activeTargetSelectionRectBackFn instanceof Function) {
-                    activeTargetSelectionRectBackFn(activeTarget);
-                }
-            }
-            setTimeout(function () {
-                _.mouseClickTargetObjectStatus = 3;
-            }, 0);
-            return;
-        }
-        // 允许画布拖动操作
-        if (_.dragLastPosDataSource.open) {
-            _.canvasDataSource.setViewportTransform(_.canvasDataSource.viewportTransform);
-            _.dragLastPosDataSource.open = false;
-            return;
-        }
-        // 右键选择自定义绘制框，并且绘制完成，抬起鼠标，结束当次绘制
-        if (_.canvasSelectionStatus && _.mouseClickType == 1) {
-            _.createSelectionRectFinishFn(options);
-            return;
-        }
-        // _.canvasDataSource.selection = true;
-        setTimeout(function () {
-            _.mouseDragStatus = false;
-        }, 0);
+        new mouse_up_1.RegisterMouseUpEventFn(options);
     };
     // 注册鼠标滚动事件
     CanvasHooks.prototype.registerMouseWheelEventFn = function (options) {
-        var _a;
-        console.log("registerMouseWheelEventFn");
-        var _ = this;
-        _.mouseWheelPointerDataSource = options;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        if ((_a = _.canvasConfig) === null || _a === void 0 ? void 0 : _a.zoom) {
-            _.registerZoomHandleFn(options);
-        }
+        new mouse_wheel_1.RegisterMouseWheelEventFn(options);
     };
     // 滚动事件操作--画布缩放监听
     CanvasHooks.prototype.registerZoomHandleFn = function (options) {
-        var _a;
-        console.log("registerZoomHandleFn");
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        // 滚轮，向上滚一下是 -100，向下滚一下是 100
-        var delta = options.e.deltaY;
-        var zoom = _.canvasDataSource.getZoom(); // 获取画布当前缩放值
-        console.log("registerZoomHandleFn--zoom=", zoom);
-        zoom += 0.001 * delta;
-        if (zoom > 10)
-            zoom = 10; // 限制最大缩放级别
-        if (zoom < 0.2)
-            zoom = 0.2; // 限制最小缩放级别
-        _.zoomDataSource = (zoom * 100).toFixed(0);
-        // 以鼠标所在位置为原点缩放
-        _.canvasDataSource.zoomToPoint({
-            x: options.e.offsetX,
-            y: options.e.offsetY
-        }, zoom // 传入修改后的缩放级别
-        );
-        var fn = ((_a = _.callBackEventConfig) === null || _a === void 0 ? void 0 : _a.zoomListenEvent) || "";
-        if (fn && fn instanceof Function) {
-            fn(zoom, _.zoomDataSource);
-        }
+        new index_1.RegisterZoomHandleFn(options);
     };
     // 页面上发生拖拽时，拖拽完成后的数据存储函数
     CanvasHooks.prototype.dragCreateElementDataFn = function (data) {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        _.dragElementDataSource = data;
-        _.targetObjectDataSource = data;
+        new drop_2.DragCreateElementDataFn(data);
     };
     // 拖拽进入画布元素创建
     CanvasHooks.prototype.createDragElementFn = function () {
-        var _a, _b, _c, _d, _e;
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var type = ((_a = _.dragElementDataSource) === null || _a === void 0 ? void 0 : _a.renderType) || "image";
-        var top = (_b = _.mousePointerDataSource) === null || _b === void 0 ? void 0 : _b.y;
-        var left = ((_c = _.mousePointerDataSource) === null || _c === void 0 ? void 0 : _c.x) - (((_d = _.dragElementDataSource) === null || _d === void 0 ? void 0 : _d.width) / 2);
-        // 同一个对象是否允许多次创建 createMode = multiple 允许 传其他或不传不允许
-        _.targetObjectDataSource = _.dragElementDataSource;
-        if (!((_e = _.targetObjectDataSource) === null || _e === void 0 ? void 0 : _e.id)) {
-            console.error("拖入画布的元素没有唯一标识id字段，不能创建！");
-            return;
-        }
-        var item = __assign(__assign({}, _.dragElementDataSource), { top: top, left: left });
-        // 拖拽数据类型为SVG图片对象
-        if (type == "svg") {
-            _.createCanvasSvgElementFn(item);
-        }
-        else {
-            _.createCanvasImageElementFn(item);
-        }
+        new create_1.CreateDragElementFn();
     };
     // 默认加载一个列表数据到画布
     CanvasHooks.prototype.initElement2CanvasFn = function (list) {
-        var _ = this;
-        _.defaultCreateDataListStatus = false;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        if (list === null || list === void 0 ? void 0 : list.length) {
-            _.defaultCreateDataList = list;
-            list.forEach(function (item, index) {
-                if (item.hasOwnProperty("left") && item.hasOwnProperty("top")) {
-                    var type = (item === null || item === void 0 ? void 0 : item.renderType) || "image";
-                    if (type == "svg") {
-                        _.createCanvasSvgElementFn(item, index);
-                    }
-                    else {
-                        _.createCanvasImageElementFn(item, index);
-                    }
-                }
-            });
-        }
+        new create_1.InitElement2CanvasFn(list);
     };
     CanvasHooks.prototype.getCreateElementStatusFn = function (index) {
         var _ = this;
@@ -608,479 +295,80 @@ var CanvasHooks = /** @class */ (function () {
     };
     // 创建SVG到画布
     CanvasHooks.prototype.createCanvasSvgElementFn = function (item, index) {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var createDragElementBackFn = (_.callBackEventConfig || {}).createDragElementBackFn;
-        fabric_1.fabric.loadSVGFromURL(item === null || item === void 0 ? void 0 : item.address, function (objects) {
-            var svgObject = (objects === null || objects === void 0 ? void 0 : objects.length) ? objects[0] : "";
-            if (!svgObject) {
-                return;
-            }
-            console.log("createCanvasSvgElementFn-item=", item);
-            svgObject.set(__assign({ evented: true, originX: 'left', originY: 'top' }, item));
-            _.canvasDataSource.add(svgObject);
-            _.canvasDataSource.requestRenderAll();
-            _.mousePointerDataSource = null;
-            _.canvasCreateElementsDataSource.push(svgObject);
-            _.canvasCreateTargetElementsDataSource.push(svgObject);
-            _.getCreateElementStatusFn(index);
-            if (createDragElementBackFn instanceof Function) {
-                createDragElementBackFn(_.dragElementDataSource);
-            }
-            setTimeout(function () {
-                _.mouseDragStatus = false;
-            }, 0);
-        });
+        new create_1.CreateCanvasSvgElementFn(fabric_1.fabric, item, index);
     };
     // 创建图片到画布
     CanvasHooks.prototype.createCanvasImageElementFn = function (item, index) {
-        var _a;
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var createDragElementBackFn = (_.callBackEventConfig || {}).createDragElementBackFn;
-        fabric_1.fabric.Image.fromURL((_a = _.dragElementDataSource) === null || _a === void 0 ? void 0 : _a.address, function (img) {
-            img.set(__assign({}, item));
-            _.canvasDataSource.add(img);
-            _.canvasCreateElementsDataSource.push(img);
-            _.canvasCreateTargetElementsDataSource.push(img);
-            _.mousePointerDataSource = null;
-            _.canvasDataSource.requestRenderAll();
-            _.getCreateElementStatusFn(index);
-            setTimeout(function () {
-                _.mouseDragStatus = false;
-            }, 0);
-            if (createDragElementBackFn instanceof Function) {
-                createDragElementBackFn(_.dragElementDataSource);
-            }
-        }, function (exception) {
-            // 图片加载失败后的操作
-            console.error('createElement-exception-exception: ', exception);
-            // 这里可以显示文案或者进行其他错误处理
-        });
+        new create_1.CreateCanvasImageElementFn(fabric_1.fabric, item, index);
     };
     // 获取到所有被框选的对象
     CanvasHooks.prototype.getSelectionAllElementsFn = function () {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var dataList = [];
-        var selection = _.canvasSelectionElementsDataSource || [];
-        // 检查哪些图标在选择框内
-        _.canvasDataSource.forEachObject(function (obj) {
-            var isTarget = false;
-            selection.map(function (item) {
-                if (obj.intersectsWithObject(item)) {
-                    isTarget = true;
-                }
-            });
-            if (isTarget && (obj === null || obj === void 0 ? void 0 : obj.elementKey) == "data") {
-                dataList.push(obj);
-            }
-        });
-        return dataList;
+        new query_1.QuerySelectionAllElementsFn();
     };
     // 获取到指定选择框内被框选的对象
     CanvasHooks.prototype.getSelectionElementsFn = function (item) {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var dataList = [];
-        // 检查哪些图标在选择框内
-        _.canvasDataSource.forEachObject(function (obj) {
-            if (item && obj.intersectsWithObject(item) && (obj === null || obj === void 0 ? void 0 : obj.elementKey) == "data") {
-                dataList.push(obj);
-            }
-        });
-        return dataList;
+        new query_1.QuerySelectionElementsFn(item);
     };
     // 创建自定义图像
     CanvasHooks.prototype.createSelectionRectFn = function () {
-        var _a, _b;
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        _.createSelectionRectDataSource = new fabric_1.fabric.Rect({
-            left: (_a = _.mousePointerDataSource) === null || _a === void 0 ? void 0 : _a.x,
-            top: (_b = _.mousePointerDataSource) === null || _b === void 0 ? void 0 : _b.y,
-            width: 0,
-            height: 0,
-            fill: 'rgba(0,0,255,0.1)',
-            stroke: 'blue',
-            // fill:"transparent",
-            strokeWidth: 1,
-            hasControls: true,
-            hasBorders: true,
-            selectable: true,
-            evented: true,
-            hoverCursor: 'move',
-            renderType: "frameSelection", // 代表框选
-        });
-        _.canvasDataSource.add(_.createSelectionRectDataSource);
-        _.canvasDataSource.requestRenderAll();
+        new create_1.CreateSelectionRectFn(fabric_1.fabric);
     };
     // 创建全选框
     CanvasHooks.prototype.createAllSelectionRectFn = function () {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        _.createSelectionRectDataSource = new fabric_1.fabric.Rect({
-            left: 0,
-            top: 0,
-            width: _.canvasDataSource.getWidth(),
-            height: _.canvasDataSource.getHeight(),
-            fill: 'rgba(0,0,255,0.1)',
-            stroke: 'blue',
-            // fill:"transparent",
-            strokeWidth: 1,
-            hasControls: false,
-            hasBorders: false,
-            selectable: false,
-            evented: true,
-            hoverCursor: 'move',
-            renderType: "frameSelection", // 代表框选
-        });
-        _.canvasDataSource.add(_.createSelectionRectDataSource);
-        _.canvasDataSource.requestRenderAll();
+        new create_1.CreateAllSelectionRectFn(fabric_1.fabric);
     };
     // 删除全选对象选择框
     CanvasHooks.prototype.removeAllSelectionRectFn = function () {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        _.canvasDataSource.remove(_.createSelectionRectDataSource);
-        _.canvasDataSource.requestRenderAll();
+        new update_1.RemoveAllSelectionRectFn();
     };
     // 自定义选择框绘制数据更新
     CanvasHooks.prototype.updateSelectionRectFn = function (options) {
-        var _a, _b;
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        if (_.createSelectionRectDataSource) {
-            var pointer = _.canvasDataSource.getPointer(options.e);
-            var width = pointer.x - ((_a = _.mousePointerDataSource) === null || _a === void 0 ? void 0 : _a.x);
-            var height = pointer.y - ((_b = _.mousePointerDataSource) === null || _b === void 0 ? void 0 : _b.y);
-            _.createSelectionRectDataSource.set({ width: Math.abs(width), height: Math.abs(height) });
-            // _.createSelectionRectDataSource.setCoords(); // 更新控制点坐标
-            _.canvasDataSource.requestRenderAll();
-            _.createSelectionStatus = 3;
-            setTimeout(function () {
-                _.createSelectionStatus = 0;
-            }, 0);
-        }
+        new update_1.UpdateSelectionRectFn(options);
     };
     // 自定义选择框绘制完成
-    CanvasHooks.prototype.createSelectionRectFinishFn = function (options) {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        _.canvasSelectionStatus = false;
-        _.isRightClick = false;
-        _.canvasDragStatus = true;
-        _.mouseRightClickStatus = false;
-        if (_.createSelectionRectDataSource) {
-            _.canvasSelectionElementsDataSource.push(_.createSelectionRectDataSource);
-            _.canvasCreateElementsDataSource.push(_.createSelectionRectDataSource);
-            _.createSelectionRectDataSource.setCoords(); // 更新控制点坐标
-            _.createSelectionRectDataSource = null; // 清除引用，结束绘制
-        }
-    };
-    // 获取对应的DOM元素
-    CanvasHooks.prototype.getDomFn = function (id) {
-        if (!id)
-            return false;
-        var dom = document.getElementById(id);
-        if (id && dom instanceof HTMLElement) {
-            return dom;
-        }
-        return false;
+    CanvasHooks.prototype.createSelectionRectFinishFn = function () {
+        new update_1.CreateSelectionRectFinishFn();
     };
     CanvasHooks.prototype.init = function () {
         var _ = this;
     };
     // 获取画布容器的宽高
     CanvasHooks.prototype.elementSizeFn = function (id) {
-        var _ = this;
-        var box = _.getDomFn(id);
-        if (!box) {
-            console.error("canvas外层必须套一层id=canvasContainer的DOM元素");
-        }
-        var height = box.clientHeight;
-        var width = box.clientWidth;
-        return {
-            height: height,
-            width: width
-        };
+        new query_1.QueryElementSizeFn(id);
     };
     // 右键菜单管理
     CanvasHooks.prototype.createRightClickMenuFn = function (options) {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var rightButtonsDataSource = (_.canvasHandleConfig || {}).rightButtonsDataSource;
-        var rightButtonMenuClickBackFn = (_.callBackEventConfig || {}).rightButtonMenuClickBackFn;
-        if (!(rightButtonsDataSource === null || rightButtonsDataSource === void 0 ? void 0 : rightButtonsDataSource.length)) {
-            return;
-        }
-        var canvasContainer = _.getDomFn("canvasContainer");
-        var oldMenuBox = _.getDomFn("menuBox");
-        if (canvasContainer && oldMenuBox) {
-            canvasContainer === null || canvasContainer === void 0 ? void 0 : canvasContainer.removeChild(oldMenuBox);
-        }
-        var menuBox = _.createElementFn("menuBox", "div");
-        if (rightButtonsDataSource === null || rightButtonsDataSource === void 0 ? void 0 : rightButtonsDataSource.length) {
-            var ulBox_1 = _.createElementFn("ulBox", "ul");
-            ulBox_1.style = "\n            list-style-type: none;\n            padding:0px;\n            margin:0px;\n            ";
-            var liStype_1 = "\n            padding:8px 12px;\n            cursor: pointer;\n            border-radius:4px;\n            font-size:16px;\n            ";
-            rightButtonsDataSource.forEach(function (item, index) {
-                var liItem = _.createElementFn("li", "liBox".concat(index + 1), index);
-                liItem.innerHTML = (item === null || item === void 0 ? void 0 : item.label) || "请传入label值";
-                liItem.style = liStype_1;
-                liItem.className = "right-menu-button";
-                liItem.addEventListener("click", function (event) {
-                    // 点击右键菜单回调函数
-                    console.log("rightButtonMenuClickBackFn==", rightButtonMenuClickBackFn);
-                    if (rightButtonMenuClickBackFn instanceof Function) {
-                        rightButtonMenuClickBackFn(event.target['data-index']);
-                    }
-                    _.canvasMenuShowStatus = false;
-                    _.mouseRightClickStatus = false;
-                    _.hiddenRightClickMenuFn();
-                });
-                liItem.addEventListener('mousemove', function () {
-                    var lists = document.getElementsByClassName("right-menu-button");
-                    for (var i = 0; i < lists.length; i++) {
-                        var element = lists[i];
-                        element.style.backgroundColor = "#fff";
-                        element.style.color = "#333";
-                    }
-                    liItem.style.backgroundColor = '#0AC496';
-                    liItem.style.color = '#fff';
-                    liItem.style.fontWeight = "bold";
-                });
-                ulBox_1.appendChild(liItem);
-            });
-            menuBox.appendChild(ulBox_1);
-        }
-        if (menuBox) {
-            menuBox.id = "menuBox";
-            // 显示菜单，设置右键菜单位置
-            // 获取菜单组件的宽高
-            var menuWidth = menuBox.offsetWidth;
-            var menuHeight = menuBox.offsetHeight;
-            // 当前鼠标位置
-            var pointX = options.pointer.x;
-            var pointY = options.pointer.y;
-            // 计算菜单出现的位置
-            // 如果鼠标靠近画布右侧，菜单就出现在鼠标指针左侧
-            if (_.canvasDataSource.width - pointX <= menuWidth) {
-                pointX -= menuWidth;
-            }
-            // 如果鼠标靠近画布底部，菜单就出现在鼠标指针上方
-            if (_.canvasDataSource.height - pointY <= menuHeight) {
-                pointY -= menuHeight;
-            }
-            // 将菜单展示出来
-            menuBox.style = "\n            visibility: visible;\n            left: ".concat(pointX, "px;\n            top: ").concat(pointY, "px;\n            z-index: 10000000;\n            padding:16px 12px;\n            border-radius:4px;\n            background-color:#fff;\n            position: absolute;\n            box-shadow: h-shadow v-shadow blur spread color inset;\n            ");
-            if (canvasContainer) {
-                canvasContainer.appendChild(menuBox);
-                _.isRightClick = true;
-                _.canvasDragStatus = false; // 进行右键操作时，先禁用画布拖拽操作功能
-            }
-            else {
-                console.error("请在canvas元素外层包一个DIV容器，且id='canvasContainer'");
-            }
-        }
+        new create_1.CreateRightClickMenuFn(options);
     };
     CanvasHooks.prototype.hiddenRightClickMenuFn = function () {
-        var _ = this;
-        var canvasContainer = _.getDomFn("canvasContainer");
-        var menuBox = _.getDomFn("menuBox");
-        if (canvasContainer && menuBox) {
-            canvasContainer === null || canvasContainer === void 0 ? void 0 : canvasContainer.removeChild(menuBox);
-        }
+        new update_1.HiddenRightClickMenuFn();
     };
     // 在画布上动态创建对象
     CanvasHooks.prototype.createElementFn = function (domVal, id, index) {
-        var _ = this;
-        var element = _.getDomFn(id);
-        if (element) {
-            return;
-        }
-        else {
-            if (domVal) {
-                var dom = document.createElement(domVal);
-                dom.id = id;
-                if (typeof index == "undefined") {
-                    index = 0;
-                }
-                if (index >= 0) {
-                    dom['data-index'] = index;
-                }
-                return dom;
-            }
-            return;
-        }
+        new create_1.CreateElementFn(domVal, id, index);
     };
     // 执行返回上一步操作
     CanvasHooks.prototype.previousStepFn = function () {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var list = _.canvasCreateElementsDataSource;
-        var len = list.length;
-        if (len) {
-            var targetElement_1 = list[len - 1];
-            if (targetElement_1) {
-                _.canvasDataSource.remove(targetElement_1);
-                _.canvasCreateElementsDataSource.splice(len - 1, 1);
-                var index = _.canvasCreateTargetElementsDataSource.findIndex(function (citem) { return citem.id == targetElement_1.id; });
-                if (index >= 0) {
-                    _.canvasCreateTargetElementsDataSource.splice(index, 1);
-                }
-            }
-            _.canvasDataSource.requestRenderAll();
-        }
+        new changed_1.PreviousStepFn();
     };
     // 移除画布上指定对象
     CanvasHooks.prototype.removeElementFn = function (id) {
-        if (!id) {
-            return;
-        }
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var list = _.canvasCreateElementsDataSource;
-        var targetElement = list.find(function (obj) {
-            return obj.id === id;
-        });
-        if (targetElement) {
-            _.canvasDataSource.remove(targetElement);
-        }
-        _.canvasDataSource.requestRenderAll();
+        new update_1.RemoveElementFn(id);
     };
     // 清空画布上所有对象
     CanvasHooks.prototype.removeAllElementFn = function () {
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var list = _.canvasCreateElementsDataSource;
-        _.createSelectionRectDataSource = [];
-        _.canvasCreateElementsDataSource = [];
-        _.createSelectionRectDataSource = [];
-        _.dragElementDataSource = [];
-        _.canvasSelectionElementsDataSource = [];
-        _.canvasCreateTargetElementsDataSource = [];
-        _.defaultCreateDataList = [];
-        list.map(function (item) {
-            if (item) {
-                _.canvasDataSource.remove(item);
-            }
-        });
-        _.canvasDataSource.requestRenderAll();
+        new update_1.RemoveAllElementFn();
     };
     // 对于画布出现缩放的情况，加载进入的数据会产生偏移处理
     // 问题未解决，备注
     CanvasHooks.prototype.resetElementSizeFn = function () {
-        var _a;
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var _b = _.canvasConfig.actions, actions = _b === void 0 ? "" : _b;
-        var backgroundImage = ((_a = _.canvasDataSource) === null || _a === void 0 ? void 0 : _a.backgroundImage) || "";
-        var zoomValue = (actions === null || actions === void 0 ? void 0 : actions.zoom) || 1;
-        console.log("resetElementSizeFn-zoomValue=", zoomValue);
-        var scaleX = (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.scaleX) || 1;
-        var scaleY = (backgroundImage === null || backgroundImage === void 0 ? void 0 : backgroundImage.scaleY) || 1;
-        if (zoomValue != 1) {
-            // _.canvasDataSource.zoom = zoomValue
-            scaleX = scaleX * zoomValue;
-            scaleY = scaleY * zoomValue;
-        }
-        if (backgroundImage) {
-            // backgroundImage.set({
-            //     scaleX:scaleX,
-            //     scaleY:scaleY,
-            // })
-        }
-        // 默认加载完对象后，如果自动放大画布，则画布上元素的坐标需要做与画布同级别的缩放处理
-        _.canvasDataSource.forEachObject(function (obj) {
-            if (obj.elementType === 'icon') {
-                // 重新计算位置
-                // obj.set({
-                //     left: obj.left * zoomValue,
-                //     top: obj.top * zoomValue,
-                // })
-                // obj.setCoords(); // 更新对象的坐标
-            }
-        });
-        _.canvasDataSource.requestRenderAll();
+        new changed_1.ResetElementSizeFn();
     };
     CanvasHooks.prototype.setCanvasBaseConfigFn = function (zoom) {
-        var _a;
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        if (!zoom) {
-            return;
-        }
-        var x = 0;
-        var y = 0;
-        if ((_a = _.mouseWheelPointerDataSource) === null || _a === void 0 ? void 0 : _a.e) {
-            var _b = _.mouseWheelPointerDataSource.e, _c = _b.offsetX, offsetX = _c === void 0 ? 0 : _c, _d = _b.offsetY, offsetY = _d === void 0 ? 0 : _d;
-            x = offsetX;
-            y = offsetY;
-        }
-        _.canvasDataSource.zoomToPoint({
-            x: x,
-            y: y
-        }, zoom // 传入修改后的缩放级别
-        );
-        _.canvasDataSource.requestRenderAll();
+        new index_1.SetCanvasBaseConfigFn(zoom);
     };
     CanvasHooks.prototype.getCanvasActionDataFn = function () {
-        var _a, _b, _c, _d, _e;
-        var _ = this;
-        if (!_.canvasDataSource) {
-            return;
-        }
-        var zoom = _.canvasDataSource.getZoom();
-        console.log("getCanvasActionDataFn--zoom=", zoom);
-        var x = 0;
-        var y = 0;
-        var left = 0;
-        var top = 0;
-        if ((_a = _.mouseWheelPointerDataSource) === null || _a === void 0 ? void 0 : _a.e) {
-            var _f = _.mouseWheelPointerDataSource.e, _g = _f.offsetX, offsetX = _g === void 0 ? 0 : _g, _h = _f.offsetY, offsetY = _h === void 0 ? 0 : _h;
-            x = offsetX;
-            y = offsetY;
-            left = ((_c = (_b = _.mouseWheelPointerDataSource) === null || _b === void 0 ? void 0 : _b.absolutePointer) === null || _c === void 0 ? void 0 : _c.x) || 0;
-            top = ((_e = (_d = _.mouseWheelPointerDataSource) === null || _d === void 0 ? void 0 : _d.absolutePointer) === null || _e === void 0 ? void 0 : _e.y) || 0;
-        }
-        return {
-            zoom: zoom,
-            x: x,
-            y: y,
-            left: left,
-            top: top,
-        };
+        new query_1.QueryCanvasActionDataFn();
     };
     return CanvasHooks;
 }());