@meta2d/core 1.0.84 → 1.0.86

package/src/core.d.ts

@@ -101,6 +101,8 @@ export declare class Meta2d {
         ruleColor?: string;
     }): void;
     open(data?: Meta2dData, render?: boolean): void;
+    dirtyData(active?: boolean): any[];
+    clearDirtyData(): void;
     cacheData(id: string): void;
     loadCacheData(id: string): void;
     loadLineAnimateDraws(): void;

package/src/core.js

@@ -1,6 +1,6 @@
 import { commonAnchors, commonPens, cube, reset, updateFormData } from './diagrams';
 import { Canvas } from './canvas';
-import { calcInView, calcTextDrawRect, calcTextLines, calcTextRect, facePen, formatAttrs, getAllChildren, getFromAnchor, getParent, getToAnchor, getWords, LockState, PenType, renderPenRaw, setElemPosition, connectLine, nearestAnchor, setChildValue, isAncestor, isShowChild, CanvasLayer, validationPlugin, setLifeCycleFunc, getAllFollowers, isInteraction, calcWorldAnchors, isDomShapes, } from './pen';
+import { calcInView, calcTextDrawRect, calcTextLines, calcTextRect, facePen, formatAttrs, getAllChildren, getFromAnchor, getParent, getToAnchor, getWords, LockState, PenType, renderPenRaw, setElemPosition, connectLine, nearestAnchor, setChildValue, isAncestor, isShowChild, CanvasLayer, validationPlugin, setLifeCycleFunc, getAllFollowers, isInteraction, calcWorldAnchors, isDomShapes, defaultFormat, findOutliersByZScore, } from './pen';
 import { rotatePoint } from './point';
 import { clearStore, EditType, globalStore, register, registerAnchors, registerCanvasDraw, useStore, } from './store';
 import { formatPadding, loadCss, s8, valueInArray, valueInRange, } from './utils';
@@ -177,18 +177,20 @@ export class Meta2d {
         this.setBackgroundColor(this.store.theme[theme].background);
         this.canvas.parentElement.style.background =
             this.store.theme[theme].parentBackground;
-        this.store.data.color = this.store.theme[theme].color;
         this.setOptions({
             ruleColor: this.store.theme[theme].ruleColor,
             ruleOptions: this.store.theme[theme].ruleOptions,
         });
         // 更新全局的主题css变量
-        le5leTheme.updateCssRule(this.store.id, theme);
-        this.canvas.initGlobalStyle();
-        for (let i = 0; i < this.store.data.pens.length; i++) {
-            const pen = this.store.data.pens[i];
-            // 调用pen的主题设置函数,如果单个pen有主题的自定义设置的话
-            pen.setTheme && pen.setTheme(pen, this.store.styles);
+        if (!(this.store.options.themeOnlyCanvas || this.store.data.themeOnlyCanvas)) {
+            this.store.data.color = this.store.theme[theme].color;
+            le5leTheme.updateCssRule(this.store.id, theme);
+            this.canvas.initGlobalStyle();
+            for (let i = 0; i < this.store.data.pens.length; i++) {
+                const pen = this.store.data.pens[i];
+                // 调用pen的主题设置函数,如果单个pen有主题的自定义设置的话
+                pen.setTheme && pen.setTheme(pen, this.store.styles);
+            }
         }
         this.render();
     }
@@ -696,14 +698,25 @@ export class Meta2d {
         }
         if (network.protocol === 'http') {
             if (typeof network.headers === 'object') {
-                for (let i in network.headers) {
-                    if (typeof network.headers[i] === 'string') {
-                        let keys = network.headers[i].match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
-                        if (keys) {
-                            network.headers[i] = network.headers[i].replace(`\${${keys[0]}}`, this.getDynamicParam(keys[0]));
-                        }
+                /*for (let i in network.headers) {
+                  if (typeof network.headers[i] === 'string') {
+                    let keys = network.headers[i].match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                    if (keys) {
+                      network.headers[i] = network.headers[i].replace(
+                        `\${${keys[0]}}`,
+                        this.getDynamicParam(keys[0])
+                      );
+                    }
+                  }
+                }*/
+                let headersStr = JSON.stringify(network.headers);
+                let keys = headersStr.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                if (keys?.length) {
+                    for (let i = 0; i < keys.length; i++) {
+                        headersStr = headersStr.replace(`\${${keys[i]}}`, this.getDynamicParam(keys[i]));
                     }
                 }
+                network.headers = JSON.parse(headersStr);
             }
             let params = undefined;
             let url = network.url;
@@ -948,6 +961,53 @@ export class Meta2d {
             this.canvas.scroll.init();
         }
     }
+    dirtyData(active) {
+        //获取画布脏数据
+        const pens = this.store.data.pens;
+        const width = this.store.data.width || this.store.options.width;
+        const height = this.store.data.height || this.store.options.height;
+        const dirtyPens = [];
+        for (let i = pens.length - 1; i >= 0; i--) {
+            let pen = pens[i];
+            if (pen.parentId) {
+                const parent = this.store.pens[pen.parentId];
+                if (pen.x > 10 || pen.y > 10 || pen.width > 10 || pen.height > 10) {
+                    // 子图元坐标值很大
+                    dirtyPens.push(pen);
+                }
+                else if (!parent.children || !parent.children.includes(pen.id)) {
+                    //已经解组但子图元还有父图元id
+                    dirtyPens.push(pen);
+                }
+            }
+            if (width && height) {
+                //大屏区域外
+                let rect = this.getPenRect(pen);
+                if (rect.x < -10 || rect.y < -10 || rect.x + rect.width > width || rect.y + rect.height > height) {
+                    dirtyPens.push(pen);
+                }
+            }
+            //无效连线 单个锚点连线
+        }
+        if (!width || !height) {
+            //2d 偏移量很大
+            let outpens = findOutliersByZScore(pens);
+            outpens.forEach((item) => {
+                let repeat = dirtyPens.filter((_item) => _item.id === item.id);
+                if (!repeat.length) {
+                    dirtyPens.push(item);
+                }
+            });
+        }
+        if (active) {
+            this.active(dirtyPens);
+        }
+        return dirtyPens;
+    }
+    clearDirtyData() {
+        let dirtyPens = this.dirtyData();
+        this.delete(dirtyPens, true);
+    }
     cacheData(id) {
         if (id && this.store.options.cacheLength) {
             let index = this.store.cacheDatas.findIndex((item) => item.data && item.data._id === id);
@@ -1848,27 +1908,33 @@ export class Meta2d {
         calcRightBottom(rect);
         calcCenter(rect);
         child.calculative.worldRect = rect;
-        if (rectInRect(rect, parent.calculative.worldRect, true)) {
+        if (parent.container && rectInRect(rect, parent.calculative.worldRect, true)) { //取所有图元的范围
             const childRect = calcRelativeRect(rect, parent.calculative.worldRect);
             Object.assign(child, childRect);
         }
         else {
-            let x = Math.min(rect.x, parent.calculative.worldRect.x);
-            let y = Math.min(rect.y, parent.calculative.worldRect.y);
-            let ex = Math.max(rect.ex, parent.calculative.worldRect.ex);
-            let ey = Math.max(rect.ey, parent.calculative.worldRect.ey);
-            parent.calculative.worldRect = {
-                x: x,
-                y: y,
-                width: ex - x,
-                height: ey - y,
-                ex,
-                ey,
-            };
+            if (parent.container) { //容器模式取操作过程中最大范围
+                let x = Math.min(rect.x, parent.calculative.worldRect.x);
+                let y = Math.min(rect.y, parent.calculative.worldRect.y);
+                let ex = Math.max(rect.ex, parent.calculative.worldRect.ex);
+                let ey = Math.max(rect.ey, parent.calculative.worldRect.ey);
+                parent.calculative.worldRect = {
+                    x: x,
+                    y: y,
+                    width: ex - x,
+                    height: ey - y,
+                    ex,
+                    ey,
+                };
+                calcCenter(parent.calculative.worldRect);
+            }
+            else { //取所有图元的范围
+                const pens = parent.children.map((cid) => this.store.pens[cid]);
+                parent.calculative.worldRect = getRect(pens);
+            }
             if (!parent.parentId) {
                 Object.assign(parent, parent.calculative.worldRect);
             }
-            calcCenter(parent.calculative.worldRect);
             parent.children.forEach((cid) => {
                 const cPen = this.store.pens[cid];
                 const childRect = calcRelativeRect(cPen.calculative.worldRect, parent.calculative.worldRect);
@@ -2548,7 +2614,17 @@ export class Meta2d {
         const method = sql.method || 'get';
         let _sql = sql.sql;
         if (method === 'list') {
-            _sql += ` LIMIT ${sql.pageSize || 20}` + (sql.current > 1 ? (' OFFSET ' + (sql.current - 1) * sql.pageSize) : '');
+            // _sql+= ` LIMIT ${sql.pageSize||20}`+(sql.current>1?(' OFFSET '+(sql.current-1)*sql.pageSize):'');
+            if (sql.dbType === "oracle") {
+                if (!_sql.includes('OFFSET')) {
+                    _sql += ` OFFSET ${(sql.current || 1 - 1) * (sql.pageSize || 20)} ROWS FETCH NEXT ${sql.pageSize || 20} ROWS ONLY`;
+                }
+            }
+            else {
+                if (!_sql.includes('LIMIT')) {
+                    _sql += ` LIMIT ${sql.pageSize || 20}` + (sql.current > 1 ? (' OFFSET ' + (sql.current - 1) * (sql.pageSize || 20)) : '');
+                }
+            }
         }
         const res = await fetch(`/api/iot/data/sql/${method}`, {
             method: 'POST',
@@ -2883,24 +2959,46 @@ export class Meta2d {
                 }
             }
             if (typeof req.headers === 'object') {
-                for (let i in req.headers) {
-                    if (typeof req.headers[i] === 'string') {
-                        let keys = req.headers[i].match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
-                        if (keys) {
-                            req.headers[i] = req.headers[i].replace(`\${${keys[0]}}`, this.getDynamicParam(keys[0]));
-                        }
+                /*for (let i in req.headers) {
+                  if (typeof req.headers[i] === 'string') {
+                    let keys = req.headers[i].match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                    if (keys) {
+                      req.headers[i] = req.headers[i].replace(
+                        `\${${keys[0]}}`,
+                        this.getDynamicParam(keys[0])
+                      );
+                    }
+                  }
+                }*/
+                let headersStr = JSON.stringify(req.headers);
+                let keys = headersStr.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                if (keys?.length) {
+                    for (let i = 0; i < keys.length; i++) {
+                        headersStr = headersStr.replace(`\${${keys[i]}}`, this.getDynamicParam(keys[i]));
                     }
                 }
+                req.headers = JSON.parse(headersStr);
             }
             if (typeof req.body === 'object') {
-                for (let i in req.body) {
-                    if (typeof req.body[i] === 'string') {
-                        let keys = req.body[i].match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
-                        if (keys) {
-                            req.body[i] = req.body[i].replace(`\${${keys[0]}}`, this.getDynamicParam(keys[0]));
-                        }
+                /*for (let i in req.body) {
+                  if (typeof req.body[i] === 'string') {
+                    let keys = req.body[i].match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                    if (keys) {
+                      req.body[i] = req.body[i].replace(
+                        `\${${keys[0]}}`,
+                        this.getDynamicParam(keys[0])
+                      );
+                    }
+                  }
+                }*/
+                let bodyStr = JSON.stringify(req.body);
+                let keys = bodyStr.match(/\$\{([^}]+)\}/g)?.map(m => m.slice(2, -1));
+                if (keys?.length) {
+                    for (let i = 0; i < keys.length; i++) {
+                        bodyStr = bodyStr.replace(`\${${keys[i]}}`, this.getDynamicParam(keys[i]));
                     }
                 }
+                req.body = JSON.parse(bodyStr);
             }
             // 默认每一秒请求一次
             const res = await fetch(req.url, {
@@ -4623,7 +4721,7 @@ export class Meta2d {
         });
         for (let i = 1; i < pens.length; i++) {
             const pen = pens[i];
-            this.setValue({ id: pen.id, ...attrs }, { render: false, doEvent: false });
+            this.setValue({ id: pen.id, ...defaultFormat, ...attrs }, { render: false, doEvent: false });
         }
         this.render();
         this.pushHistory({
@@ -4646,7 +4744,7 @@ export class Meta2d {
         });
         for (let i = 0; i < pens.length - 1; i++) {
             const pen = pens[i];
-            this.setValue({ id: pen.id, ...attrs }, { render: false, doEvent: false });
+            this.setValue({ id: pen.id, ...defaultFormat, ...attrs }, { render: false, doEvent: false });
         }
         this.render();
         this.pushHistory({
@@ -4688,7 +4786,7 @@ export class Meta2d {
         const attrs = JSON.parse(localStorage.getItem('meta2d-formatPainter'));
         for (let i = 0; i < pens.length; i++) {
             const pen = pens[i];
-            this.setValue({ id: pen.id, ...attrs }, { render: false, doEvent: false });
+            this.setValue({ id: pen.id, ...defaultFormat, ...attrs }, { render: false, doEvent: false });
         }
         this.render();
         this.pushHistory({