clickgo 3.11.34 → 3.12.0

package/dist/lib/dom.js

@@ -32,7 +32,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createElement = exports.exitFullscreen = exports.fullscreen = exports.siblingsData = exports.siblings = exports.index = exports.findParentByTag = exports.findParentByClass = exports.findParentByData = exports.bindResize = exports.bindMove = exports.is = exports.bindDrag = exports.setDragData = exports.bindLong = exports.allowEvent = exports.bindGesture = exports.bindDown = exports.bindDblClick = exports.bindClick = exports.getWatchInfo = exports.clearWatchProperty = exports.isWatchProperty = exports.watchProperty = exports.clearWatchStyle = exports.isWatchStyle = exports.watchStyle = exports.clearWatch = exports.isWatch = exports.unwatch = exports.watch = exports.getWatchCount = exports.clearWatchSize = exports.isWatchSize = exports.unwatchSize = exports.watchSize = exports.getWatchSizeCount = exports.getStyleCount = exports.removeStyle = exports.pushStyle = exports.removeFromStyleList = exports.createToStyleList = exports.hasTouchButMouse = exports.setGlobalCursor = exports.inPage = void 0;
+exports.createElement = exports.exitFullscreen = exports.fullscreen = exports.siblingsData = exports.siblings = exports.index = exports.findParentByTag = exports.findParentByClass = exports.findParentByData = exports.bindResize = exports.bindMove = exports.is = exports.bindDrag = exports.setDragData = exports.bindLong = exports.allowEvent = exports.bindGesture = exports.bindDown = exports.bindDblClick = exports.bindClick = exports.getWatchInfo = exports.clearWatchProperty = exports.isWatchProperty = exports.watchProperty = exports.clearWatchStyle = exports.isWatchStyle = exports.watchStyle = exports.clearWatch = exports.isWatch = exports.unwatch = exports.watch = exports.getWatchCount = exports.clearWatchSize = exports.isWatchSize = exports.unwatchSize = exports.watchSize = exports.getWatchSizeCount = exports.clearWatchPosition = exports.isWatchPosition = exports.unwatchPosition = exports.watchPosition = exports.getStyleCount = exports.removeStyle = exports.pushStyle = exports.removeFromStyleList = exports.createToStyleList = exports.hasTouchButMouse = exports.setGlobalCursor = exports.inPage = void 0;
 const clickgo = __importStar(require("../clickgo"));
 const form = __importStar(require("./form"));
 const core = __importStar(require("./core"));
@@ -162,6 +162,102 @@ function getStyleCount(taskId, type) {
     return document.querySelectorAll(`#cg-style-task${taskId} > .cg-style-${type} > style`).length;
 }
 exports.getStyleCount = getStyleCount;
+const watchPositionObjects = {};
+let watchPositionIndex = 0;
+function watchPosition(el, cb, immediate = false) {
+    if (isWatchPosition(el)) {
+        return false;
+    }
+    if (immediate) {
+        try {
+            const r = cb({
+                'position': false,
+                'size': false
+            });
+            if (r instanceof Promise) {
+                r.catch(function (e) {
+                    console.log('dom.watchPosition', e);
+                });
+            }
+        }
+        catch (e) {
+            console.log('dom.watchPosition', e);
+        }
+    }
+    const formWrap = findParentByData(el, 'form-id');
+    if (!formWrap) {
+        return false;
+    }
+    const formId = formWrap.dataset.formId;
+    const panelWrap = findParentByData(el, 'panel-id');
+    const panelId = panelWrap ? panelWrap.dataset.panelId : 'default';
+    if (!watchPositionObjects[formId]) {
+        watchPositionObjects[formId] = {};
+    }
+    if (!watchPositionObjects[formId][panelId]) {
+        watchPositionObjects[formId][panelId] = {};
+    }
+    watchPositionObjects[formId][panelId][watchPositionIndex] = {
+        'el': el,
+        'rect': el.getBoundingClientRect(),
+        'handler': cb
+    };
+    el.dataset.cgPoindex = watchPositionIndex.toString();
+    ++watchPositionIndex;
+    return true;
+}
+exports.watchPosition = watchPosition;
+function unwatchPosition(el) {
+    const index = el.dataset.cgPoindex;
+    if (index === undefined) {
+        return;
+    }
+    const formWrap = findParentByData(el, 'form-id');
+    if (!formWrap) {
+        return;
+    }
+    const formId = formWrap.dataset.formId;
+    const panelWrap = findParentByData(el, 'panel-id');
+    const panelId = panelWrap ? panelWrap.dataset.panelId : 'default';
+    const item = watchPositionObjects[formId][panelId][index];
+    el.removeAttribute('data-cg-poindex');
+    delete watchPositionObjects[formId][panelId][index];
+    if (Object.keys(watchPositionObjects[formId][panelId]).length) {
+        return;
+    }
+    delete watchPositionObjects[formId][panelId];
+    if (Object.keys(watchPositionObjects[formId]).length) {
+        return;
+    }
+    delete watchPositionObjects[formId];
+}
+exports.unwatchPosition = unwatchPosition;
+function isWatchPosition(el) {
+    return el.dataset.cgPoindex ? true : false;
+}
+exports.isWatchPosition = isWatchPosition;
+function clearWatchPosition(formId, panelId) {
+    if (!watchPositionObjects[formId]) {
+        return;
+    }
+    for (const panel in watchPositionObjects[formId]) {
+        if (panelId) {
+            if (panel !== panelId.toString()) {
+                continue;
+            }
+        }
+        for (const index in watchPositionObjects[formId][panel]) {
+            const item = watchPositionObjects[formId][panel][index];
+            item.el.removeAttribute('data-cg-poindex');
+        }
+        delete watchPositionObjects[formId][panel];
+    }
+    if (Object.keys(watchPositionObjects[formId]).length) {
+        return;
+    }
+    delete watchPositionObjects[formId];
+}
+exports.clearWatchPosition = clearWatchPosition;
 const watchSizeList = {};
 function getWatchSizeCount(taskId) {
     if (!taskId) {
@@ -582,7 +678,7 @@ function clearWatchProperty(formId, panelId) {
 }
 exports.clearWatchProperty = clearWatchProperty;
 function getWatchInfo() {
-    var _a;
+    var _a, _b;
     const rtn = {
         'formId': 0,
         'default': {},
@@ -612,15 +708,20 @@ function getWatchInfo() {
                 'property': {
                     'count': 0,
                     'list': []
+                },
+                'position': {
+                    'count': 0
                 }
             };
         }
         ++ritem[cname][type].count;
-        for (const name in item.names) {
-            if (ritem[cname][type].list.includes(name)) {
-                continue;
+        if (item.names && type !== 'position') {
+            for (const name in item.names) {
+                if (ritem[cname][type].list.includes(name)) {
+                    continue;
+                }
+                ritem[cname][type].list.push(name);
             }
-            ritem[cname][type].list.push(name);
         }
     };
     if (watchStyleList[formId]) {
@@ -651,6 +752,20 @@ function getWatchInfo() {
             }
         }
     }
+    if (watchPositionObjects[formId]) {
+        if (watchPositionObjects[formId].default) {
+            for (const index in watchPositionObjects[formId].default) {
+                handler(watchPositionObjects[formId].default[index], 'position');
+            }
+        }
+        for (const id of panelIds) {
+            if ((_b = watchPositionObjects[formId]) === null || _b === void 0 ? void 0 : _b[id]) {
+                for (const index in watchPositionObjects[formId][id]) {
+                    handler(watchPositionObjects[formId][id][index], 'position', id.toString());
+                }
+            }
+        }
+    }
     return rtn;
 }
 exports.getWatchInfo = getWatchInfo;
@@ -731,6 +846,48 @@ const watchTimerHandler = function () {
                     }
                 }
             }
+            if (watchPositionObjects[formId]) {
+                const handler = (item, panelId, index) => {
+                    if (!document.body.contains(item.el)) {
+                        delete watchPositionObjects[formId][panelId][index];
+                        if (!Object.keys(watchPositionObjects[formId][panelId]).length) {
+                            delete watchPositionObjects[formId][panelId];
+                        }
+                        if (!Object.keys(watchPositionObjects[formId]).length) {
+                            delete watchPositionObjects[formId];
+                        }
+                        return;
+                    }
+                    const rect = item.el.getBoundingClientRect();
+                    let position = false;
+                    let size = false;
+                    if (item.rect.left !== rect.left || item.rect.top !== rect.top) {
+                        position = true;
+                    }
+                    if (item.rect.width !== rect.width || item.rect.height !== rect.height) {
+                        size = true;
+                    }
+                    if (position || size) {
+                        item.handler({
+                            'position': position,
+                            'size': size
+                        });
+                    }
+                    watchPositionObjects[formId][panelId][index].rect = rect;
+                };
+                if (watchPositionObjects[formId].default) {
+                    for (const index in watchPositionObjects[formId].default) {
+                        handler(watchPositionObjects[formId].default[index], 'default', index);
+                    }
+                }
+                for (const id of panelIds) {
+                    if (watchPositionObjects[formId][id]) {
+                        for (const index in watchPositionObjects[formId][id]) {
+                            handler(watchPositionObjects[formId][id][index], id.toString(), index);
+                        }
+                    }
+                }
+            }
         }
     }
     watchTimer = requestAnimationFrame(watchTimerHandler);

package/dist/lib/dom.ts

@@ -193,6 +193,153 @@ export function getStyleCount(taskId: number, type: 'theme' | 'control' | 'form'
     return document.querySelectorAll(`#cg-style-task${taskId} > .cg-style-${type} > style`).length;
 }
 
+// ---------------------
+// --- watchPosition ---
+// ---------------------
+
+/**
+ * --- 监听中的标签对象，对应 formId -> 数组列表 ---
+ */
+const watchPositionObjects: Record<
+    /** --- formId --- */
+    string,
+    Record<
+        /** --- panelId 或 default --- */
+        string,
+        Record<
+            /** --- index 值 --- */
+            string,
+            types.IWatchPositionItem
+        >
+    >
+> = {};
+
+/** --- 监视元素的 data-cg-poindex --- */
+let watchPositionIndex: number = 0;
+
+/**
+ * --- 添加监视 Element 对象位置，元素移除后自动停止监视，已经监视中的不会再次监视，请短时间使用（虽然本方法也可以监听 element 的大小改变，但这是监听位置改变的副产品，如果仅仅监听大小改变请使用效率更高的 watch size） ---
+ * @param el 要监视的大小
+ * @param cb 回调函数
+ * @param immediate 立刻先执行一次回调
+ */
+export function watchPosition(
+    el: HTMLElement,
+    cb: (state: {
+        'position': boolean;
+        'size': boolean;
+    }) => void | Promise<void>,
+    immediate: boolean = false
+): boolean {
+    if (isWatchPosition(el)) {
+        return false;
+    }
+    if (immediate) {
+        try {
+            const r = cb({
+                'position': false,
+                'size': false
+            });
+            if (r instanceof Promise) {
+                r.catch(function(e) {
+                    console.log('dom.watchPosition', e);
+                });
+            }
+        }
+        catch (e) {
+            console.log('dom.watchPosition', e);
+        }
+    }
+    const formWrap = findParentByData(el, 'form-id');
+    if (!formWrap) {
+        return false;
+    }
+    const formId = formWrap.dataset.formId!;
+    // --- 获取监视标签的所属 panel ---
+    const panelWrap = findParentByData(el, 'panel-id');
+    const panelId = panelWrap ? panelWrap.dataset.panelId! : 'default';
+    // --- 创建 object ---
+    if (!watchPositionObjects[formId]) {
+        watchPositionObjects[formId] = {};
+    }
+    if (!watchPositionObjects[formId][panelId]) {
+        watchPositionObjects[formId][panelId] = {};
+    }
+    watchPositionObjects[formId][panelId][watchPositionIndex] = {
+        'el': el,
+        'rect': el.getBoundingClientRect(),
+        'handler': cb
+    };
+    el.dataset.cgPoindex = watchPositionIndex.toString();
+    ++watchPositionIndex;
+    return true;
+}
+
+/**
+ * --- 移除监视 Element 对象位置 ---
+ * @param el 要移除监视
+ */
+export function unwatchPosition(el: HTMLElement): void {
+    const index = el.dataset.cgPoindex;
+    if (index === undefined) {
+        return;
+    }
+    const formWrap = findParentByData(el, 'form-id');
+    if (!formWrap) {
+        return;
+    }
+    const formId = formWrap.dataset.formId!;
+    // --- 获取监视标签的所属 panel ---
+    const panelWrap = findParentByData(el, 'panel-id');
+    const panelId = panelWrap ? panelWrap.dataset.panelId! : 'default';
+    const item = watchPositionObjects[formId][panelId][index];
+    el.removeAttribute('data-cg-poindex');
+    delete watchPositionObjects[formId][panelId][index];
+    if (Object.keys(watchPositionObjects[formId][panelId]).length) {
+        return;
+    }
+    delete watchPositionObjects[formId][panelId];
+    if (Object.keys(watchPositionObjects[formId]).length) {
+        return;
+    }
+    delete watchPositionObjects[formId];
+}
+
+/**
+ * --- 检测一个标签是否正在被 watchSize ---
+ * @param el 要检测的标签
+ */
+export function isWatchPosition(el: HTMLElement): boolean {
+    return el.dataset.cgPoindex ? true : false;
+}
+
+/**
+ * --- 清除某个窗体的所有 watch position 监视，虽然窗体结束后相关监视永远不会再被执行，但是会形成冗余，App 模式下无效 ---
+ * @param formId 窗体 id
+ * @param panelId 若指定则只清除当前窗体的某个 panel 的 watch
+ */
+export function clearWatchPosition(formId: number | string, panelId?: number): void {
+    if (!watchPositionObjects[formId]) {
+        return;
+    }
+    for (const panel in watchPositionObjects[formId]) {
+        if (panelId) {
+            if (panel !== panelId.toString()) {
+                continue;
+            }
+        }
+        for (const index in watchPositionObjects[formId][panel]) {
+            const item = watchPositionObjects[formId][panel][index];
+            item.el.removeAttribute('data-cg-poindex');
+        }
+        delete watchPositionObjects[formId][panel];
+    }
+    if (Object.keys(watchPositionObjects[formId]).length) {
+        return;
+    }
+    delete watchPositionObjects[formId];
+}
+
 // -----------------
 // --- watchSize ---
 // -----------------
@@ -830,8 +977,8 @@ export function getWatchInfo(): types.IGetWatchInfoResult {
     const panelIds = form.getActivePanel(formId);
     const handler = (item: {
         'el': HTMLElement;
-        'names': Record<string, any>;
-    }, type: 'style' | 'property', panelId?: string): void => {
+        'names'?: Record<string, any>;
+    }, type: 'style' | 'property' | 'position', panelId?: string): void => {
         if (panelId) {
             if (!rtn.panels[panelId]) {
                 rtn.panels[panelId] = {};
@@ -849,15 +996,20 @@ export function getWatchInfo(): types.IGetWatchInfoResult {
                 'property': {
                     'count': 0,
                     'list': []
+                },
+                'position': {
+                    'count': 0
                 }
             };
         }
         ++ritem[cname][type].count;
-        for (const name in item.names) {
-            if (ritem[cname][type].list.includes(name)) {
-                continue;
+        if (item.names && type !== 'position') {
+            for (const name in item.names) {
+                if (ritem[cname][type].list.includes(name)) {
+                    continue;
+                }
+                ritem[cname][type].list.push(name);
             }
-            ritem[cname][type].list.push(name);
         }
     };
     // --- 先执行窗体默认的 ---
@@ -892,6 +1044,22 @@ export function getWatchInfo(): types.IGetWatchInfoResult {
             }
         }
     }
+    // --- 先执行窗体默认的 ---
+    if (watchPositionObjects[formId]) {
+        if (watchPositionObjects[formId].default) {
+            for (const index in watchPositionObjects[formId].default) {
+                handler(watchPositionObjects[formId].default[index], 'position');
+            }
+        }
+        // --- 再执行活跃的 panel 的 ---
+        for (const id of panelIds) {
+            if (watchPositionObjects[formId]?.[id]) {
+                for (const index in watchPositionObjects[formId][id]) {
+                    handler(watchPositionObjects[formId][id][index], 'position', id.toString());
+                }
+            }
+        }
+    }
     return rtn;
 }
 
@@ -945,6 +1113,7 @@ const watchTimerHandler = function(): void {
                     }
                 }
             }
+            // --- property ---
             if (watchPropertyObjects[formId]) {
                 // --- property ---
                 const handler = (item: IWatchPropertyItem, panelId: string, index: string): void => {
@@ -984,6 +1153,53 @@ const watchTimerHandler = function(): void {
                     }
                 }
             }
+            // --- position ---
+            if (watchPositionObjects[formId]) {
+                // --- position ---
+                const handler = (item: types.IWatchPositionItem, panelId: string, index: string): void => {
+                    if (!document.body.contains(item.el)) {
+                        delete watchPositionObjects[formId][panelId][index];
+                        if (!Object.keys(watchPositionObjects[formId][panelId]).length) {
+                            delete watchPositionObjects[formId][panelId];
+                        }
+                        if (!Object.keys(watchPositionObjects[formId]).length) {
+                            delete watchPositionObjects[formId];
+                        }
+                        return;
+                    }
+                    // --- 执行 cb ---
+                    const rect = item.el.getBoundingClientRect();
+                    let position = false;
+                    let size = false;
+                    if (item.rect.left !== rect.left || item.rect.top !== rect.top) {
+                        position = true;
+                    }
+                    if (item.rect.width !== rect.width || item.rect.height !== rect.height) {
+                        size = true;
+                    }
+                    if (position || size) {
+                        item.handler({
+                            'position': position,
+                            'size': size
+                        });
+                    }
+                    watchPositionObjects[formId][panelId][index].rect = rect;
+                };
+                // --- 先执行窗体默认的 ---
+                if (watchPositionObjects[formId].default) {
+                    for (const index in watchPositionObjects[formId].default) {
+                        handler(watchPositionObjects[formId].default[index], 'default', index);
+                    }
+                }
+                // --- 再执行活跃的 panel 的 ---
+                for (const id of panelIds) {
+                    if (watchPositionObjects[formId][id]) {
+                        for (const index in watchPositionObjects[formId][id]) {
+                            handler(watchPositionObjects[formId][id][index], id.toString(), index);
+                        }
+                    }
+                }
+            }
         }
     }
     watchTimer = requestAnimationFrame(watchTimerHandler);