xctc-utils 1.6.56 → 1.6.59

package/dist/canvas/index.js

@@ -28,6 +28,7 @@ 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 index_2 = require("../event/index");
 // 初始化画布创建时需要的参数-默认值
 var defaultConfig = __assign({}, config_1.configDefaultValue.canvasDefaultValue);
 var CanvasHooks = /** @class */ (function () {
@@ -163,6 +164,10 @@ var CanvasHooks = /** @class */ (function () {
         function callBack(data) {
             var _a;
             var cb = ((_a = _.canvasConfig) === null || _a === void 0 ? void 0 : _a.cb) || "";
+            // 获取DOM元素
+            var targetElement = (0, utils_1.getDomFn)("canvasContainer");
+            // 添加事件监听器
+            document.addEventListener('mousemove', (0, index_2.checkMouseInElement)(targetElement));
             if (cb instanceof Function) {
                 cb(data);
             }
@@ -231,6 +236,15 @@ var CanvasHooks = /** @class */ (function () {
         _.canvasDataSource.on('zoom:changed', function (options) {
             _.registerCanvasZoomChangeEventFn(options);
         });
+        _.canvasDataSource.on('contextmenu', function (options) {
+            var _a;
+            // 阻止默认行为（即阻止显示浏览器的上下文菜单）
+            (_a = options === null || options === void 0 ? void 0 : options.e) === null || _a === void 0 ? void 0 : _a.preventDefault();
+        });
+        // 附加的选项，如果你需要阻止整个页面的默认右键菜单
+        document.body.addEventListener('contextmenu', function (event) {
+            event === null || event === void 0 ? void 0 : event.preventDefault();
+        });
     };
     // 注册画布发生缩放监听事件
     CanvasHooks.prototype.registerCanvasZoomChangeEventFn = function () {

package/dist/event/index.d.ts

@@ -0,0 +1 @@
+export declare function checkMouseInElement(element: any): (event: any) => boolean;

package/dist/event/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkMouseInElement = void 0;
+var win = window || {};
+function checkMouseInElement(element) {
+    return function (event) {
+        // 获取鼠标相对于文档的位置
+        var mouseX = event === null || event === void 0 ? void 0 : event.clientX;
+        var mouseY = event === null || event === void 0 ? void 0 : event.clientY;
+        // 获取目标元素的位置和尺寸
+        var rect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+        // 判断鼠标是否在元素内
+        var isInElement = (mouseX >= (rect === null || rect === void 0 ? void 0 : rect.left) &&
+            mouseX <= (rect === null || rect === void 0 ? void 0 : rect.right) &&
+            mouseY >= (rect === null || rect === void 0 ? void 0 : rect.top) &&
+            mouseY <= (rect === null || rect === void 0 ? void 0 : rect.bottom));
+        if (isInElement) {
+            console.log('鼠标在元素内部');
+        }
+        else {
+            console.log('鼠标不在元素内部');
+        }
+        win['mouseIsInElement'] = isInElement;
+        return isInElement;
+    };
+}
+exports.checkMouseInElement = checkMouseInElement;

package/dist/event/mouse-down.js

@@ -16,6 +16,7 @@ function RegisterMouseDownEventFn(options) {
     _.mouseWheelStatus = false;
     _.mouseClickType = (options === null || options === void 0 ? void 0 : options.button) || 1; // 鼠标点击类型 1 左键 2中间滚轮 3右键
     console.log("mouseClickType==", _.mouseClickType);
+    console.log("mouseRightClickStatus==", _.mouseRightClickStatus);
     if (_.mouseRightClickStatus) {
         // 如果当前处于右键状态，则不再继续执行任何操作
         // 如果菜单属于显示状态，则关闭菜单
@@ -55,6 +56,7 @@ function RegisterMouseDownEventFn(options) {
             _.hiddenRightClickMenuFn();
             return;
         }
+        console.log("canvasDragStatus==", _.canvasDragStatus);
         // 点击画布上的对象执行操作
         if (activeTarget) {
             // 画布上的数据对象被点击
@@ -75,12 +77,15 @@ function RegisterMouseDownEventFn(options) {
                 }, 0);
             }
         }
+        // console.log("mouseClickType==", _.mouseClickType );
         // 画布可拖拽状态
         if (_.canvasDragStatus) {
             // 如果当前点击了底层画布，则允许底层画布可以拖拽
             console.log("允许底层画布可以拖拽");
+            console.log("activeTarget==", activeTarget);
             if (!activeTarget) {
                 // 如果没有获取到具体的目标对象，则默认是点击了画布底图，即开启画布的拖拽
+                console.log("如果没有获取到具体的目标对象，则默认是点击了画布底图，即开启画布的拖拽");
                 _.dragLastPosDataSource.open = true;
                 _.dragLastPosDataSource.lastPosX = event.clientX;
                 _.dragLastPosDataSource.lastPosY = event.clientY;
@@ -88,7 +93,7 @@ function RegisterMouseDownEventFn(options) {
             }
         }
         else {
-            console.log("3333");
+            console.log("画布不可拖拽状态");
             _.dragLastPosDataSource.open = false;
             return;
         }

package/dist/event/mouse-move.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RegisterMouseMoveEventFn = void 0;
 var is_1 = require("../is");
+var win = window || {};
 function RegisterMouseMoveEventFn(options) {
     if (!(0, is_1.isObject)(options)) {
         return;
@@ -11,9 +12,10 @@ function RegisterMouseMoveEventFn(options) {
     var pointer = _.canvasDataSource.getPointer(options.e);
     var inRange = pointer.x >= 0 && pointer.x <= _.canvasDataSource.width &&
         pointer.y >= 0 && pointer.y <= _.canvasDataSource.height;
-    _.mouseCanvasInRangeStatus = inRange;
+    _.mouseCanvasInRangeStatus = win['mouseIsInElement'];
     // 鼠标不在画布内，终止行为
-    if (!inRange) {
+    if (!_.mouseCanvasInRangeStatus) {
+        console.log("鼠标不在画布内，终止行为");
         return;
     }
     var activeTarget = options.target || options.activeTarget;

package/dist/event/mouse-up.js

@@ -15,7 +15,7 @@ function RegisterMouseUpEventFn(options) {
     var _a = _.callBackEventConfig || {}, activeTargetElementBackFn = _a.activeTargetElementBackFn, activeTargetSelectionRectBackFn = _a.activeTargetSelectionRectBackFn;
     _.mouseWheelPointerDataSource = options;
     console.log("activeTarget==", activeTarget);
-    console.log("_.canvasDataSource==", _.canvasDataSource.backgroundImage);
+    console.log("_.canvasDataSource==", _.canvasDataSource);
     setTimeout(function () {
         _.mouseWheelStatus = false;
     }, 0);

package/dist/handle/create.d.ts

@@ -1,5 +1,5 @@
 export declare const xx: {};
-export declare function CreateDragElementFn(data: any): void;
+export declare function CreateDragElementFn(): void;
 export declare function InitElement2CanvasFn(list: any[]): void;
 export declare function CreateCanvasSvgElementFn(fabric: any, item: any, index?: number): void;
 export declare function CreateCanvasImageElementFn(fabric: any, item: any, index?: number): void;

package/dist/handle/create.js

@@ -15,11 +15,8 @@ exports.CreateElementFn = exports.CreateRightClickMenuFn = exports.CreateAllSele
 var utils_1 = require("../utils");
 var is_1 = require("../is");
 exports.xx = {};
-function CreateDragElementFn(data) {
+function CreateDragElementFn() {
     var _a, _b, _c, _d, _e;
-    if (!(0, is_1.isObject)(data)) {
-        return;
-    }
     var _ = this;
     if (!_.canvasDataSource) {
         return;
@@ -160,12 +157,17 @@ function CreateAllSelectionRectFn(fabric) {
     if (!_.canvasDataSource) {
         return;
     }
+    var container = (0, utils_1.getDomFn)("canvasContainer");
+    console.log("xxx---", _.canvasDataSource.getWidth());
+    var containerWidth = container.offsetWidth;
+    var containerHeight = container.offsetWidth;
     _.createSelectionRectDataSource = new fabric.Rect({
         left: 0,
         top: 0,
         width: _.canvasDataSource.getWidth(),
         height: _.canvasDataSource.getHeight(),
-        fill: 'rgba(0,0,255,0.1)',
+        // fill: 'rgba(0,0,255,0.1)',
+        fill: "red",
         stroke: 'blue',
         // fill:"transparent",
         strokeWidth: 1,
@@ -176,11 +178,13 @@ function CreateAllSelectionRectFn(fabric) {
         hoverCursor: 'move',
         renderType: "frameSelection", // 代表框选
     });
+    _.canvasDataSource.setDimensions({ width: containerWidth, height: containerHeight }, true);
     _.canvasDataSource.add(_.createSelectionRectDataSource);
     _.canvasDataSource.requestRenderAll();
 }
 exports.CreateAllSelectionRectFn = CreateAllSelectionRectFn;
 function CreateRightClickMenuFn(options) {
+    console.log("options111==", options);
     if (!(0, is_1.isObject)(options)) {
         return;
     }
@@ -211,6 +215,7 @@ function CreateRightClickMenuFn(options) {
             liItem.addEventListener("click", function (event) {
                 // 点击右键菜单回调函数
                 console.log("rightButtonMenuClickBackFn==", rightButtonMenuClickBackFn);
+                event.preventDefault();
                 if (rightButtonMenuClickBackFn instanceof Function) {
                     rightButtonMenuClickBackFn(event.target['data-index']);
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xctc-utils",
-  "version": "1.6.56",
+  "version": "1.6.59",
   "description": "localStorage存储\r ```\r sessionStorage存储\r ```\r crypto-js加密、解密\r ```\r 微信授权登录、微信分享\r ```\r 设备环境获取\r ```\r 是否是微信浏览器\r ```\r 时间戳转时间，字符串转时间戳",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",