uiik 1.0.2 → 1.0.4

package/index.esm.js

@@ -1,10 +1,10 @@
 /**
- * uiik v1.0.2
+ * uiik v1.0.4
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
  */
-import { isArrayLike, isString, map, isElement, toArray, each, assign, reject, includes, isArray, isEmpty, call, isNumber, isFunction, isDefined, isUndefined, closest, some, compact, split, test, flatMap } from '@holyhigh/func.js';
+import { isArrayLike, isString, map, isElement, toArray, each, assign, find, reject, includes, isArray, isEmpty, call, isNumber, isFunction, isDefined, isUndefined, closest, some, compact, split, test, flatMap } from '@holyhigh/func.js';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -133,10 +133,6 @@ class Uii {
 _Uii_listeners = new WeakMap();
 
 /* eslint-disable max-len */
-/**
- * 工具包
- * @author holyhigh2
- */
 /**
  * 获取child相对于parent的offset信息。含border宽度
  * @returns
@@ -159,11 +155,35 @@ function getOffset(child, parent) {
  */
 const EDGE_THRESHOLD = 5;
 const DRAGGING_RULE = "body * { pointer-events: none; }";
+let lockSheet;
 function lockPage() {
-    document.styleSheets[0].insertRule(DRAGGING_RULE, 0);
+    lockSheet = getFirstSS();
+    lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.insertRule(DRAGGING_RULE, 0);
 }
 function unlockPage() {
-    document.styleSheets[0].deleteRule(0);
+    lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.deleteRule(0);
+}
+function getFirstSS() {
+    if (document.styleSheets.length < 1) {
+        document.head.appendChild(document.createElement('style'));
+    }
+    const sheet = find(document.styleSheets, ss => !ss.href);
+    if (!sheet) {
+        document.head.appendChild(document.createElement('style'));
+    }
+    return sheet || find(document.styleSheets, ss => !ss.href);
+}
+let cursor = { html: '', body: '' };
+function saveCursor() {
+    cursor.body = document.body.style.cursor;
+    cursor.html = document.documentElement.style.cursor;
+}
+function setCursor(cursor) {
+    document.body.style.cursor = document.documentElement.style.cursor = cursor;
+}
+function restoreCursor() {
+    document.body.style.cursor = cursor.body;
+    document.documentElement.style.cursor = cursor.html;
 }
 
 var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
@@ -336,7 +356,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
             sticked = 'end';
         }
         let dragging = false;
-        let bodyCursor = document.body.style.cursor;
+        saveCursor();
         let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
         let ds1, anotherSize;
         const dragListener = (ev) => {
@@ -362,7 +382,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
                         }
                     }
                     lockPage();
-                    document.body.style.cursor = (handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '';
+                    setCursor((handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '');
                     call(onStart, originSize, originSize1);
                 }
                 else {
@@ -470,7 +490,7 @@ _Splittable_instances = new WeakSet(), _Splittable_checkDirection = function _Sp
                     (_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
                 }
                 unlockPage();
-                document.body.style.cursor = bodyCursor;
+                restoreCursor();
                 call(onEnd, originSize, originSize1);
             }
         };
@@ -607,7 +627,7 @@ function bindHandle$1(handle, dir, panel, opts) {
         let currentW = originW;
         let currentH = originH;
         let dragging = false;
-        let bodyCursor = document.body.style.cursor;
+        saveCursor();
         const dragListener = (ev) => {
             var _a;
             const offsetx = ev.clientX - originPosX;
@@ -636,7 +656,7 @@ function bindHandle$1(handle, dir, panel, opts) {
                         style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
                     }
                     lockPage();
-                    document.body.style.cursor = handle.dataset.cursor || '';
+                    setCursor(handle.dataset.cursor || '');
                     call(onStart, originW, originH);
                 }
                 else {
@@ -725,7 +745,7 @@ function bindHandle$1(handle, dir, panel, opts) {
             }
             handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
             unlockPage();
-            document.body.style.cursor = bodyCursor;
+            restoreCursor();
             call(onEnd, currentW, currentH);
         };
         document.addEventListener('mousemove', dragListener, false);
@@ -1010,7 +1030,7 @@ function bindEvent(registerEvent, el, opts, handleMap) {
         let toTop = false;
         let toRight = false;
         let toBottom = false;
-        let bodyCursor = document.body.style.cursor;
+        saveCursor();
         const dragListener = (ev) => {
             var _a;
             const newX = ev.clientX - rect.x + container.scrollLeft;
@@ -1050,7 +1070,7 @@ function bindEvent(registerEvent, el, opts, handleMap) {
                     call(onStart, dragDom, ev);
                     lockPage();
                     if (isDefined(opts.cursor)) {
-                        document.body.style.cursor = opts.cursor.active || 'move';
+                        setCursor(opts.cursor.active || 'move');
                     }
                     //notify
                     const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
@@ -1262,7 +1282,7 @@ function bindEvent(registerEvent, el, opts, handleMap) {
             dragDom.dispatchEvent(customEv);
             if (dragging) {
                 unlockPage();
-                document.body.style.cursor = bodyCursor;
+                restoreCursor();
                 if (ghost) {
                     (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(copyNode);
                     if (moveToGhost !== false) {
@@ -1318,7 +1338,7 @@ class Droppable extends Uii {
                 });
             }
             if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
-                document.body.style.cursor = __classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver;
+                setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
             }
             call(opts.onEnter, el, e);
         });
@@ -1332,7 +1352,7 @@ class Droppable extends Uii {
                 });
             }
             if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
-                document.body.style.cursor = __classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '';
+                setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
             }
             call(opts.onLeave, el, e);
         });
@@ -1500,7 +1520,7 @@ function bindHandle(handle, el, opts) {
             startDeg = 360 + startDeg;
         const offsetDeg = startDeg - deg;
         let dragging = false;
-        let bodyCursor = document.body.style.cursor;
+        saveCursor();
         const dragListener = (ev) => {
             var _a;
             const offsetx = ev.clientX - centerX;
@@ -1513,7 +1533,7 @@ function bindHandle(handle, el, opts) {
                     call(onStart, deg);
                     lockPage();
                     if (isDefined(opts.cursor)) {
-                        document.body.style.cursor = ((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair';
+                        setCursor(((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair');
                     }
                 }
                 else {
@@ -1535,7 +1555,7 @@ function bindHandle(handle, el, opts) {
             window.removeEventListener('blur', dragEndListener, false);
             if (dragging) {
                 unlockPage();
-                document.body.style.cursor = bodyCursor;
+                restoreCursor();
                 el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
                 call(onEnd, deg);
             }
@@ -1928,7 +1948,7 @@ function newSelectable(container, opts) {
     return new Selectable(container, opts);
 }
 
-var version = "1.0.2";
+var version = "1.0.4";
 var repository = {
 	type: "git",
 	url: "https://github.com/holyhigh2/uiik"

package/index.js

@@ -1,5 +1,5 @@
 /**
- * uiik v1.0.2
+ * uiik v1.0.4
  * A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.
  * https://github.com/holyhigh2/uiik
  * c) 2021-2023 @holyhigh2 may be freely distributed under the MIT license
@@ -137,10 +137,6 @@
     _Uii_listeners = new WeakMap();
 
     /* eslint-disable max-len */
-    /**
-     * 工具包
-     * @author holyhigh2
-     */
     /**
      * 获取child相对于parent的offset信息。含border宽度
      * @returns
@@ -163,11 +159,35 @@
      */
     const EDGE_THRESHOLD = 5;
     const DRAGGING_RULE = "body * { pointer-events: none; }";
+    let lockSheet;
     function lockPage() {
-        document.styleSheets[0].insertRule(DRAGGING_RULE, 0);
+        lockSheet = getFirstSS();
+        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.insertRule(DRAGGING_RULE, 0);
     }
     function unlockPage() {
-        document.styleSheets[0].deleteRule(0);
+        lockSheet === null || lockSheet === void 0 ? void 0 : lockSheet.deleteRule(0);
+    }
+    function getFirstSS() {
+        if (document.styleSheets.length < 1) {
+            document.head.appendChild(document.createElement('style'));
+        }
+        const sheet = func_js.find(document.styleSheets, ss => !ss.href);
+        if (!sheet) {
+            document.head.appendChild(document.createElement('style'));
+        }
+        return sheet || func_js.find(document.styleSheets, ss => !ss.href);
+    }
+    let cursor = { html: '', body: '' };
+    function saveCursor() {
+        cursor.body = document.body.style.cursor;
+        cursor.html = document.documentElement.style.cursor;
+    }
+    function setCursor(cursor) {
+        document.body.style.cursor = document.documentElement.style.cursor = cursor;
+    }
+    function restoreCursor() {
+        document.body.style.cursor = cursor.body;
+        document.documentElement.style.cursor = cursor.html;
     }
 
     var _Splittable_instances, _Splittable_checkDirection, _Splittable_bindHandle;
@@ -340,7 +360,7 @@
                 sticked = 'end';
             }
             let dragging = false;
-            let bodyCursor = document.body.style.cursor;
+            saveCursor();
             let startPos = dir === 'v' ? dom1.offsetTop : dom1.offsetLeft;
             let ds1, anotherSize;
             const dragListener = (ev) => {
@@ -366,7 +386,7 @@
                             }
                         }
                         lockPage();
-                        document.body.style.cursor = (handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '';
+                        setCursor((handle === null || handle === void 0 ? void 0 : handle.dataset.cursor) || '');
                         func_js.call(onStart, originSize, originSize1);
                     }
                     else {
@@ -474,7 +494,7 @@
                         (_a = ghostNode.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(ghostNode);
                     }
                     unlockPage();
-                    document.body.style.cursor = bodyCursor;
+                    restoreCursor();
                     func_js.call(onEnd, originSize, originSize1);
                 }
             };
@@ -611,7 +631,7 @@
             let currentW = originW;
             let currentH = originH;
             let dragging = false;
-            let bodyCursor = document.body.style.cursor;
+            saveCursor();
             const dragListener = (ev) => {
                 var _a;
                 const offsetx = ev.clientX - originPosX;
@@ -640,7 +660,7 @@
                             style = ghostNode === null || ghostNode === void 0 ? void 0 : ghostNode.style;
                         }
                         lockPage();
-                        document.body.style.cursor = handle.dataset.cursor || '';
+                        setCursor(handle.dataset.cursor || '');
                         func_js.call(onStart, originW, originH);
                     }
                     else {
@@ -729,7 +749,7 @@
                 }
                 handle.classList.remove(CLASS_RESIZABLE_HANDLE_ACTIVE);
                 unlockPage();
-                document.body.style.cursor = bodyCursor;
+                restoreCursor();
                 func_js.call(onEnd, currentW, currentH);
             };
             document.addEventListener('mousemove', dragListener, false);
@@ -1014,7 +1034,7 @@
             let toTop = false;
             let toRight = false;
             let toBottom = false;
-            let bodyCursor = document.body.style.cursor;
+            saveCursor();
             const dragListener = (ev) => {
                 var _a;
                 const newX = ev.clientX - rect.x + container.scrollLeft;
@@ -1054,7 +1074,7 @@
                         func_js.call(onStart, dragDom, ev);
                         lockPage();
                         if (func_js.isDefined(opts.cursor)) {
-                            document.body.style.cursor = opts.cursor.active || 'move';
+                            setCursor(opts.cursor.active || 'move');
                         }
                         //notify
                         const customEv = new Event("uii-dragactive", { "bubbles": true, "cancelable": false });
@@ -1266,7 +1286,7 @@
                 dragDom.dispatchEvent(customEv);
                 if (dragging) {
                     unlockPage();
-                    document.body.style.cursor = bodyCursor;
+                    restoreCursor();
                     if (ghost) {
                         (_a = dragDom.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(copyNode);
                         if (moveToGhost !== false) {
@@ -1322,7 +1342,7 @@
                     });
                 }
                 if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
-                    document.body.style.cursor = __classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver;
+                    setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver);
                 }
                 func_js.call(opts.onEnter, el, e);
             });
@@ -1336,7 +1356,7 @@
                     });
                 }
                 if (__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorOver) {
-                    document.body.style.cursor = __classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '';
+                    setCursor(__classPrivateFieldGet(this, _Droppable_active, "f").dataset.cursorActive || '');
                 }
                 func_js.call(opts.onLeave, el, e);
             });
@@ -1504,7 +1524,7 @@
                 startDeg = 360 + startDeg;
             const offsetDeg = startDeg - deg;
             let dragging = false;
-            let bodyCursor = document.body.style.cursor;
+            saveCursor();
             const dragListener = (ev) => {
                 var _a;
                 const offsetx = ev.clientX - centerX;
@@ -1517,7 +1537,7 @@
                         func_js.call(onStart, deg);
                         lockPage();
                         if (func_js.isDefined(opts.cursor)) {
-                            document.body.style.cursor = ((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair';
+                            setCursor(((_a = opts.cursor) === null || _a === void 0 ? void 0 : _a.active) || 'crosshair');
                         }
                     }
                     else {
@@ -1539,7 +1559,7 @@
                 window.removeEventListener('blur', dragEndListener, false);
                 if (dragging) {
                     unlockPage();
-                    document.body.style.cursor = bodyCursor;
+                    restoreCursor();
                     el.classList.toggle(CLASS_ROTATABLE_ACTIVE, false);
                     func_js.call(onEnd, deg);
                 }
@@ -1932,7 +1952,7 @@
         return new Selectable(container, opts);
     }
 
-    var version = "1.0.2";
+    var version = "1.0.4";
     var repository = {
     	type: "git",
     	url: "https://github.com/holyhigh2/uiik"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiik",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A UI interactions kit includes draggable, splittable, rotatable, selectable, etc.",
   "main": "index.js",
   "module": "index.esm.js",

package/types/utils.d.ts

@@ -17,3 +17,6 @@ export declare const EDGE_THRESHOLD = 5;
 export declare const DRAGGING_RULE = "body * { pointer-events: none; }";
 export declare function lockPage(): void;
 export declare function unlockPage(): void;
+export declare function saveCursor(): void;
+export declare function setCursor(cursor: string): void;
+export declare function restoreCursor(): void;