dcim-topology2d 2.1.0 → 2.2.2

package/core/src/middles/nodes/rectangle.js

@@ -1,23 +1,62 @@
 export function rectangle(ctx, node) {
-    var wr = node.borderRadius;
-    var hr = node.borderRadius;
-    if (node.borderRadius < 1) {
-        wr = node.rect.width * node.borderRadius;
-        hr = node.rect.height * node.borderRadius;
+
+    var topLeftR = node.borderRadiusTopLeft;
+    var topRightR = node.borderRadiusTopRight;
+    var bottomLeftR = node.borderRadiusBottomLeft;
+    var bottomRightR = node.borderRadiusBottomRight;
+
+
+    var w = node.rect.width > node.rect.height ? node.rect.height : node.rect.width;
+
+
+    if (node.borderRadiusTopLeft < 1) {
+
+        topLeftR = w * node.borderRadiusTopLeft;
+
     }
-    var r = wr < hr ? wr : hr;
-    if (node.rect.width < 2 * r) {
-        r = node.rect.width / 2;
+    if (node.borderRadiusTopRight < 1) {
+
+        topRightR = w * node.borderRadiusTopRight;
+
     }
-    if (node.rect.height < 2 * r) {
-        r = node.rect.height / 2;
+    if (node.borderRadiusBottomLeft < 1) {
+
+        bottomLeftR = w * node.borderRadiusBottomLeft;
+
     }
+    if (node.borderRadiusBottomRight < 1) {
+
+        bottomRightR = w * node.borderRadiusBottomRight;
+
+    }
+
+    var tlr = topLeftR;
+    if (w < 2 * tlr) {
+        tlr = w / 2
+    }
+
+    var trr = topRightR;
+    if (w < 2 * trr) {
+        trr = w / 2
+    }
+
+    var blr = bottomLeftR;
+    if (w < 2 * blr) {
+        blr = w / 2
+    }
+
+    var brr = bottomRightR;
+    if (w < 2 * brr) {
+        brr = w / 2
+    }
+
     ctx.beginPath();
-    ctx.moveTo(node.rect.x + r, node.rect.y);
-    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, r);
-    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, r);
-    ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, r);
-    ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, r);
+
+    ctx.moveTo(node.rect.x + tlr, node.rect.y);
+    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y, node.rect.x + node.rect.width, node.rect.y + node.rect.height, trr);
+    ctx.arcTo(node.rect.x + node.rect.width, node.rect.y + node.rect.height, node.rect.x, node.rect.y + node.rect.height, brr);
+    ctx.arcTo(node.rect.x, node.rect.y + node.rect.height, node.rect.x, node.rect.y, blr);
+    ctx.arcTo(node.rect.x, node.rect.y, node.rect.x + node.rect.width, node.rect.y, tlr);
     ctx.closePath();
     (node.fillStyle || node.bkType) && ctx.fill();
     ctx.stroke();

package/core/src/middles/nodes/switchs.d.ts

@@ -0,0 +1,2 @@
+import { Node } from 'dcim-topology2d/core/src/models';
+export declare function switchs(ctx: CanvasRenderingContext2D, node: Node): void;

package/core/src/middles/nodes/switchs.js

@@ -0,0 +1,46 @@
+export function switchs(ctx, node) {
+
+    let x = node.rect.x;
+    let y = node.rect.y;
+    let width = node.rect.width;
+    let height = node.rect.height;
+    // 绘制圆角
+    var wr = node.borderRadius;
+    var hr = node.borderRadius;
+    if (node.borderRadius < 1) {
+        wr = node.rect.width * node.borderRadius;
+        hr = node.rect.height * node.borderRadius;
+    }
+    var r = wr < hr ? wr : hr;
+    if (node.rect.width < 2 * r) {
+        r = node.rect.width / 2;
+    }
+    if (node.rect.height < 2 * r) {
+        r = node.rect.height / 2;
+    }
+    //绘制椭圆
+    ctx.fillStyle = node.fillStyle;
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + r);
+    ctx.lineTo(x + width, y + height - r);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
+    ctx.lineTo(x + r, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - r);
+    ctx.lineTo(x, y + r);
+    ctx.quadraticCurveTo(x, y, x + r, y);
+    ctx.lineTo(x + width - r, y);
+    ctx.closePath();
+    node.fillStyle && ctx.fill();
+    ctx.stroke();
+
+    //绘制左侧 小圆 默认在右侧 isOpen:true
+    ctx.beginPath();
+    let cx = node.isOpen ? x + width - height * 0.5 : x + height * 0.5;
+    ctx.ellipse(cx, y + height * 0.5, height / 2 * 0.8, height / 2 * 0.8, 0, 0, Math.PI * 2);
+    ctx.fillStyle = '#ffffff';
+    ctx.closePath();
+    ctx.fill();
+    ctx.stroke();
+}

package/core/src/models/line.js

@@ -417,19 +417,19 @@ var Line = /** @class */ (function (_super) {
         }
         Store.set(this.generateStoreKey('pts-') + this.id, null);
     };
-    Line.prototype.scale = function (scale, center) {
-        this.from.x = center.x - (center.x - this.from.x) * scale;
-        this.from.y = center.y - (center.y - this.from.y) * scale;
-        this.to.x = center.x - (center.x - this.to.x) * scale;
-        this.to.y = center.y - (center.y - this.to.y) * scale;
+    Line.prototype.scale = function (scale, center, w, h) {
+        this.from.x = center.x - (center.x - this.from.x) * w;
+        this.from.y = center.y - (center.y - this.from.y) * h;
+        this.to.x = center.x - (center.x - this.to.x) * w;
+        this.to.y = center.y - (center.y - this.to.y) * h;
         if (this.text && this.font && this.font.fontSize) {
             this.font.fontSize *= scale;
             this.textRect = null;
         }
         for (var _i = 0, _a = this.controlPoints; _i < _a.length; _i++) {
             var pt = _a[_i];
-            pt.x = center.x - (center.x - pt.x) * scale;
-            pt.y = center.y - (center.y - pt.y) * scale;
+            pt.x = center.x - (center.x - pt.x) * w;
+            pt.y = center.y - (center.y - pt.y) * h;
         }
         Store.set(this.generateStoreKey('pts-') + this.id, null);
     };

package/core/src/models/node.js

@@ -1,8 +1,8 @@
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
-                ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-                function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
@@ -35,6 +35,7 @@ var Node = /** @class */ (function (_super) {
         _this.rotatedAnchors = [];
         _this.animateDuration = 0;
         _this.animateFrames = [];
+        _this.attribute = json.attribute || 'default';
         _this.type = PenType.Node;
         _this.TID = json.TID;
         _this.selectDropdown = json.selectDropdown || false;
@@ -95,6 +96,7 @@ var Node = /** @class */ (function (_super) {
         _this.visitStrokeStyle = json.visitStrokeStyle || '';
         _this.thBottomStrokeStyle = json.thBottomStrokeStyle || '#fff';
         _this.thBottomLineWidth = json.thBottomLineWidth || 1;
+        _this.focusFillStyle = json.focusFillStyle;
         // 兼容老数据
         if (json.children && json.children[0] && json.children[0].parentRect) {
             _this.paddingLeft = json.children[0].parentRect.offsetX;
@@ -133,10 +135,10 @@ var Node = /** @class */ (function (_super) {
             _this.animateDuration = json.animateDuration;
         }
         _this.animateType = json.animateType
-                ? json.animateType
-                : json.animateDuration
-                        ? 'custom'
-                        : '';
+            ? json.animateType
+            : json.animateDuration
+                ? 'custom'
+                : '';
         _this.animateAlone = json.animateAlone;
         _this.iframe = json.iframe;
         _this.iframePageAuto = json.iframePageAuto || false;
@@ -146,17 +148,21 @@ var Node = /** @class */ (function (_super) {
         _this.play = json.play;
         _this.nextPlay = json.nextPlay;
         _this.time = json.time;
+        _this.isOpen = json.isOpen;
+        _this.isShowPercent = json.isShowPercent || false;
+        _this.maxValue = json.maxValue || 100;
+        _this.retationDecimalPlaces = json.retationDecimalPlaces;
         if (json.elementLoaded !== undefined) {
             _this.elementId = null;
             _this.elementLoaded = false;
         }
-        if(this.name == 'arbitraryGraph') {
+        if (this.name == 'arbitraryGraph') {
             this.rect.circles = json.rect.circles;
             //let {x, y} = this.centroid(json.rect.circles);
-            let minX =  Math.min.apply(Math, json.rect.circles.map((item)=>{ return item.x}));
-            let minY = Math.min.apply(Math, json.rect.circles.map((item)=>{ return item.y}));
-            this.rect.x =  minX;
-            this.rect.y =  minY;
+            let minX = Math.min.apply(Math, json.rect.circles.map((item) => { return item.x }));
+            let minY = Math.min.apply(Math, json.rect.circles.map((item) => { return item.y }));
+            this.rect.x = minX;
+            this.rect.y = minY;
             this.rect.ex = this.rect.x + this.rect.width;
             this.rect.ey = this.rect.y + this.rect.height;
             // this.rect.center.x = x;
@@ -164,8 +170,8 @@ var Node = /** @class */ (function (_super) {
             // console.log('this.rect', this.rect);
             // console.log('this---node---', this);
         }
-        if(json.name === 'formTable') _this.setFormTableData(json);
-        if(json.name === 'tablePagination') _this.setTablePagination(json);
+        if (json.name === 'formTable') _this.setFormTableData(json);
+        if (json.name === 'tablePagination') _this.setTablePagination(json);
         _this.init();
         if (!noChild) {
             _this.setChild(json.children);
@@ -174,13 +180,13 @@ var Node = /** @class */ (function (_super) {
             _this.children = null;
         }
 
-        if(json.name === 'time') {
-            _this.animateFn = function() {
-                    let date = new Date();
-                    var hour = date.getHours() < 10 ?  "0" + date.getHours() : date.getHours();
-                    var minute = date.getMinutes() < 10 ?  "0" + date.getMinutes() : date.getMinutes();
-                    var second = date.getSeconds() < 10 ?  "0" + date.getSeconds() : date.getSeconds();
-                    _this.time = {h: hour, m:minute, s:second}
+        if (json.name === 'time') {
+            _this.animateFn = function () {
+                let date = new Date();
+                var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+                var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+                var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+                _this.time = { h: hour, m: minute, s: second }
             }
         }
 
@@ -212,7 +218,7 @@ var Node = /** @class */ (function (_super) {
         this.addToDiv();
     };
     Node.prototype.setFormTableData = function (json) {
-        if(!Store.get('FORM:tableData')){
+        if (!Store.get('FORM:tableData')) {
             Store.set('FORM:tableData', {
                 data: {
                     tableNodes: {},
@@ -227,18 +233,18 @@ var Node = /** @class */ (function (_super) {
             data: tableData
         })
         const fromData = Store.get('SYNC:tableData');
-        if(fromData) {
-            if(!fromData[json.id].loading){
+        if (fromData) {
+            if (!fromData[json.id].loading) {
                 this.formData.tableBody = fromData[json.id].tableBody;
                 this.formData.total = fromData[json.id].total;
-            }else {
+            } else {
                 this.formData.tableBody = null;
                 this.formData.total = 0;
             }
         }
     };
     Node.prototype.setTablePagination = function (json) {
-        if(!Store.get('FORM:tableData')){
+        if (!Store.get('FORM:tableData')) {
             Store.set('FORM:tableData', {
                 data: {
                     tableNodes: {},
@@ -250,7 +256,7 @@ var Node = /** @class */ (function (_super) {
         const tableData = Store.get('FORM:tableData').data;
         const fromData = Store.get('SYNC:tableData');
         const tnode = fromData ? fromData[json.paginationData.bindFromTableId] : null;
-        if(tnode) json.paginationData.total = tnode.total;
+        if (tnode) json.paginationData.total = tnode.total;
         tableData.paginationNodes[json.id] = json;
         Store.set('FORM:tableData', {
             data: tableData
@@ -258,11 +264,14 @@ var Node = /** @class */ (function (_super) {
     };
     Node.prototype.addToDiv = function () {
         if (this.iframe ||
-                this.elementId ||
-                this.hasGif()) {
+            this.elementId ||
+            this.hasGif()) {
             Store.set(this.generateStoreKey('LT:addDiv'), this);
         }
     };
+    Node.prototype.createOverflow = function () {
+        Store.set(this.generateStoreKey('LT:createOverflow'), this);
+    };
     Node.prototype.hasGif = function () {
         if (this.gif) {
             return true;
@@ -335,13 +344,13 @@ var Node = /** @class */ (function (_super) {
                 this.drawBkRadialGradient(ctx);
                 break;
         }
-        if(this.name === 'tablePagination') defaultText(ctx, this);
+        if (this.name === 'tablePagination') defaultText(ctx, this);
         // Draw shape.
         drawNodeFns[this.name](ctx, this);
         // Draw text.
-        if(this.name === 'formTable') {
+        if (this.name === 'formTable') {
             tableText(ctx, this);
-        }else {
+        } else {
             if (this.name !== 'text' && this.text && !(this.image && this.floorImageIndex === true)) {
                 text(ctx, this);
             }
@@ -436,14 +445,14 @@ var Node = /** @class */ (function (_super) {
                 img: img,
                 cnt: 1,
             };
-            if(defaultImageNode) delete defaultImages[_this.id];
+            if (defaultImageNode) delete defaultImages[_this.id];
             Store.set(_this.generateStoreKey('LT:imageLoaded'), true);
             if (!_this.gif && gif) {
                 _this.gif = true;
                 Store.set(_this.generateStoreKey('LT:addDiv'), _this);
             }
         };
-        img.onerror = function(e){
+        img.onerror = function (e) {
             // 图片加载失败时预留默认图为空
             defaultImages[_this.id] = {
                 img: '',
@@ -451,7 +460,7 @@ var Node = /** @class */ (function (_super) {
             };
         };
     };
-    Node.prototype.initDrawImg = function (ctx){
+    Node.prototype.initDrawImg = function (ctx) {
         var _this = this;
         ctx.save();
         ctx.shadowColor = '';
@@ -509,7 +518,7 @@ var Node = /** @class */ (function (_super) {
                 y = rect.ey - h;
                 break;
         }
-        if(!_this.activeImgeIndex) ctx.drawImage(this.img, x, y, w, h);
+        if (!_this.activeImgeIndex) ctx.drawImage(this.img, x, y, w, h);
         ctx.restore();
     };
     Node.prototype.calcAnchors = function () {
@@ -554,21 +563,21 @@ var Node = /** @class */ (function (_super) {
         var parentW = parent.rect.width - parent.paddingLeftNum - parent.paddingRightNum;
         var parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum;
         var x = parent.rect.x +
-                parent.paddingLeftNum +
-                abs(parentW, this.rectInParent.x) +
-                abs(parentW, this.rectInParent.marginLeft);
+            parent.paddingLeftNum +
+            abs(parentW, this.rectInParent.x) +
+            abs(parentW, this.rectInParent.marginLeft);
         var y = parent.rect.y +
-                parent.paddingTopNum +
-                abs(parentH, this.rectInParent.y) +
-                abs(parentW, this.rectInParent.marginTop);
+            parent.paddingTopNum +
+            abs(parentH, this.rectInParent.y) +
+            abs(parentW, this.rectInParent.marginTop);
         var w = abs(parentW, this.rectInParent.width);
         var h = abs(parentH, this.rectInParent.height);
         if (this.rectInParent.marginLeft === undefined &&
-                this.rectInParent.marginRight) {
+            this.rectInParent.marginRight) {
             x -= abs(parentW, this.rectInParent.marginRight);
         }
         if (this.rectInParent.marginTop === undefined &&
-                this.rectInParent.marginBottom) {
+            this.rectInParent.marginBottom) {
             y -= abs(parentW, this.rectInParent.marginBottom);
         }
         this.rect = new Rect(x, y, w, h);
@@ -599,15 +608,15 @@ var Node = /** @class */ (function (_super) {
         var parentH = parent.rect.height - parent.paddingTopNum - parent.paddingBottomNum;
         this.rectInParent = {
             x: ((this.rect.x - parent.rect.x - parent.paddingLeftNum) * 100) /
-                    parentW +
-                    '%',
+                parentW +
+                '%',
             y: ((this.rect.y - parent.rect.y - parent.paddingTopNum) * 100) / parentH +
-                    '%',
+                '%',
             width: (this.rect.width * 100) / parentW + '%',
             height: (this.rect.height * 100) / parentH + '%',
             rotate: this.rectInParent
-                    ? this.rectInParent.rotate || 0
-                    : this.rotate || 0,
+                ? this.rectInParent.rotate || 0
+                : this.rotate || 0,
             rect: this.rect.clone(),
         };
     };
@@ -628,7 +637,7 @@ var Node = /** @class */ (function (_super) {
         var timeline = now - this.animateStart;
         if (timeline > this.animateDuration) {
             if (++this.animateCycleIndex >= this.animateCycle &&
-                    this.animateCycle > 0) {
+                this.animateCycle > 0) {
                 this.animateStart = 0;
                 this.animateCycleIndex = 0;
                 var item = this.animateFrames[this.animateFrames.length - 1];
@@ -668,78 +677,78 @@ var Node = /** @class */ (function (_super) {
                 var rate = (timeline - item.start) / item.duration;
                 if (item.linear) {
                     // 线条左右流动动画
-                    if([animateType.LeftFlow, animateType.RightFlow].includes(this.animateType) && item.state.lineDashOffset){
+                    if ([animateType.LeftFlow, animateType.RightFlow].includes(this.animateType) && item.state.lineDashOffset) {
                         let o = item.state.lineDashOffset;
                         switch (this.animateType) {
                             case animateType.LeftFlow:
                                 o = Math.abs(o)
                                 if (o > 100) o = 1;
-                                o++ 
-                                
+                                o++
+
                                 break;
                             case animateType.RightFlow:
-                                o = Math.abs(o)*-1
+                                o = Math.abs(o) * -1
                                 if (o < -100) o = -1;
                                 o--
                                 break;
                         }
                         item.state.lineDashOffset = o
                         this.lineDashOffset = item.state.lineDashOffset;
-                    }else if(([animateType.Show, animateType.Rotate].includes(this.animateType) || this.name === 'electricFan') && item.state.rotate !== item.initState.rotate) {
+                    } else if (([animateType.Show, animateType.Rotate].includes(this.animateType) || this.name === 'electricFan') && item.state.rotate !== item.initState.rotate) {
                         // 旋转动画，判断逻辑先这么写，日后将所有动画统一在编辑器中配置，再做优化
                         this.rotate =
-                                item.initState.rotate +
-                                (item.state.rotate - item.initState.rotate) * rate;
+                            item.initState.rotate +
+                            (item.state.rotate - item.initState.rotate) * rate;
                         rectChanged = true;
-                    }else {
+                    } else {
 
                         if (item.state.rect.x !== item.initState.rect.x) {
                             this.rect.x =
-                                    item.initState.rect.x +
-                                    (item.state.rect.x - item.initState.rect.x) * rate;
+                                item.initState.rect.x +
+                                (item.state.rect.x - item.initState.rect.x) * rate;
                             rectChanged = true;
                         }
                         if (item.state.rect.y !== item.initState.rect.y) {
                             this.rect.y =
-                                    item.initState.rect.y +
-                                    (item.state.rect.y - item.initState.rect.y) * rate;
+                                item.initState.rect.y +
+                                (item.state.rect.y - item.initState.rect.y) * rate;
                             rectChanged = true;
                         }
                         if (item.state.rect.width !== item.initState.rect.width) {
                             this.rect.width =
-                                    item.initState.rect.width +
-                                    (item.state.rect.width - item.initState.rect.width) * rate;
+                                item.initState.rect.width +
+                                (item.state.rect.width - item.initState.rect.width) * rate;
                             rectChanged = true;
                         }
                         if (item.state.rect.height !== item.initState.rect.height) {
                             this.rect.height =
-                                    item.initState.rect.height +
-                                    (item.state.rect.height - item.initState.rect.height) * rate;
+                                item.initState.rect.height +
+                                (item.state.rect.height - item.initState.rect.height) * rate;
                             rectChanged = true;
                         }
                         this.rect.ex = this.rect.x + this.rect.width;
                         this.rect.ey = this.rect.y + this.rect.height;
                         this.rect.calcCenter();
                         if (item.initState.z !== undefined &&
-                                item.state.z !== item.initState.z) {
+                            item.state.z !== item.initState.z) {
                             this.z =
-                                    item.initState.z + (item.state.z - item.initState.z) * rate;
+                                item.initState.z + (item.state.z - item.initState.z) * rate;
                             rectChanged = true;
                         }
                         if (item.state.borderRadius !== item.initState.borderRadius) {
                             this.borderRadius =
-                                    item.initState.borderRadius +
-                                    (item.state.borderRadius - item.initState.borderRadius) * rate;
+                                item.initState.borderRadius +
+                                (item.state.borderRadius - item.initState.borderRadius) * rate;
                         }
                         if (item.state.lineWidth !== item.initState.lineWidth) {
                             this.lineWidth =
-                                    item.initState.lineWidth +
-                                    (item.state.lineWidth - item.initState.lineWidth) * rate;
+                                item.initState.lineWidth +
+                                (item.state.lineWidth - item.initState.lineWidth) * rate;
                         }
                         if (item.state.globalAlpha !== item.initState.globalAlpha) {
                             this.globalAlpha =
-                                    item.initState.globalAlpha +
-                                    (item.state.globalAlpha - item.initState.globalAlpha) * rate;
+                                item.initState.globalAlpha +
+                                (item.state.globalAlpha - item.initState.globalAlpha) * rate;
                         }
                     }
                 }
@@ -770,14 +779,14 @@ var Node = /** @class */ (function (_super) {
             h = scale;
         }
         this['oldRect'] = this.rect.clone();
-        if(this.rect.circles) {
-            for(let c=0, circles= this.rect.circles; c<circles.length; c++) {
+        if (this.rect.circles) {
+            for (let c = 0, circles = this.rect.circles; c < circles.length; c++) {
                 circles[c].x = center.x - (center.x - circles[c].x) * w;
                 circles[c].y = center.y - (center.y - circles[c].y) * h;
             }
         }
         this.rect.x = center.x - (center.x - this.rect.x) * w;
-        if(this.rotate % 180) {
+        if (this.rotate % 180) {
             this.rect.x = this.rect.x + (this.rect.width * w - this.rect.width * h) / 2;
         }
         this.rect.y = center.y - (center.y - this.rect.y) * h;
@@ -786,7 +795,7 @@ var Node = /** @class */ (function (_super) {
         this.rect.ex = this.rect.x + this.rect.width;
         this.rect.ey = this.rect.y + this.rect.height;
         this.z *= scale;
-        if(!(center.type && center.type === 'bottLogo')) {
+        if (!(center.type && center.type === 'bottLogo')) {
             if (this.imageWidth) {
                 this.imageWidth *= w;
             }
@@ -890,8 +899,8 @@ var Node = /** @class */ (function (_super) {
         }
     };
     Node.prototype.translate = function (x, y) {
-        if(this.rect.circles) {
-            for(let c=0, circles= this.rect.circles; c<circles.length; c++) {
+        if (this.rect.circles) {
+            for (let c = 0, circles = this.rect.circles; c < circles.length; c++) {
                 circles[c].x += x;
                 circles[c].y += y;
             }
@@ -948,7 +957,7 @@ var Node = /** @class */ (function (_super) {
         return n;
     };
     //新增属性
-    Node.prototype.area = function(pts) {
+    Node.prototype.area = function (pts) {
         var area = 0;
         var pts = pts;
         var nPts = pts.length;
@@ -964,7 +973,7 @@ var Node = /** @class */ (function (_super) {
         area /= 2;
         return area;
     };
-    Node.prototype.centroid = function(pts) {
+    Node.prototype.centroid = function (pts) {
         var pts = pts;
         var nPts = pts.length;
         var x = 0;

package/core/src/models/pen.js

@@ -111,6 +111,13 @@ var Pen = /** @class */ (function () {
             this.defaultFillStyle = json.defaultFillStyle || '';
             this.defaultFontColor = json.defaultFontColor || '';
             this.defaultStrokeStyle = json.defaultStrokeStyle || '';
+
+            this.borderRadiusTopLeft = json.borderRadiusTopLeft || 0;
+            this.borderRadiusTopRight = json.borderRadiusTopRight || 0;
+            this.borderRadiusBottomLeft = json.borderRadiusBottomLeft || 0;
+            this.borderRadiusBottomRight = json.borderRadiusBottomRight || 0;
+
+            this.focusFillStyle = json.focusFillStyle || '';
             if (json.rectInParent) {
                 this.rectInParent = json.rectInParent;
             }
@@ -131,7 +138,7 @@ var Pen = /** @class */ (function () {
         }
     }
     Pen.prototype.render = function (ctx) {
-        if (!this.visible && !this.visibleSwitch){
+        if (!this.visible && !this.visibleSwitch) {
             return;
         }
         if (this.from && !this.to) {
@@ -150,14 +157,16 @@ var Pen = /** @class */ (function () {
         if (this.lineWidth > 1) {
             ctx.lineWidth = this.lineWidth;
         }
-        if(this.dash === 4) {
+        if (this.dash === 4) {
             ctx.strokeStyle = 'transparent';
-        }else {
+        } else {
             const staticStrokeStyle = this.strokeStyle || '#222';
             ctx.strokeStyle = !this.activeImgeIndex ? this.visitStrokeStyle || staticStrokeStyle : this.defaultStrokeStyle || staticStrokeStyle;
         }
         //ctx.strokeStyle = this.dash === 4 ? 'transparent' : this.strokeStyle || '#222';
-        this.fillStyle && (ctx.fillStyle = this.fillStyle);
+        //背景聚焦色 
+        this.focusFillStyle && !this.activeImgeIndex ? ctx.fillStyle = this.focusFillStyle : (this.fillStyle && (ctx.fillStyle = this.fillStyle));
+
         if (this.lineCap) {
             ctx.lineCap = this.lineCap;
         }
@@ -219,19 +228,19 @@ var Pen = /** @class */ (function () {
         }
         for (var _i = 0, _a = this.events; _i < _a.length; _i++) {
             var item = _a[_i];
-            if (item.type !== EventType.Click ) {
+            if (item.type !== EventType.Click) {
                 continue;
             }
             // 画布页面，单击跳转链接事件屏蔽
-            if(item.action === EventAction.Link && window.location.pathname.includes('workspace')){
+            if (item.action === EventAction.Link && window.location.pathname.includes('workspace')) {
                 continue
             }
-            if(item.action === EventAction.Link){
+            if (item.action === EventAction.Link) {
                 this[this.eventFns[item.action]](item.value, item.dcimMenuForType);
-            }else{
+            } else {
                 this[this.eventFns[item.action]] && this[this.eventFns[item.action]](item.value, item.params);
             }
-            if(item.action === 7){
+            if (item.action === 7) {
                 Store.set(this.generateStoreKey('LT:hidePen'), item.value);
             }
         }
@@ -270,10 +279,10 @@ var Pen = /** @class */ (function () {
         // window.open(url, params === undefined ? '_blank' : params);
         var port = window.location.port;
         var href = window.location.href;
-        if(!url.includes("http") && port.includes("3000") && url.includes("id")){
-            url= '/workspace?id=' + url.split('id=')[1]
+        if (!url.includes("http") && port.includes("3000") && url.includes("id")) {
+            url = '/workspace?id=' + url.split('id=')[1]
             // console.log('url:3000===',url)
-        }else if(!url.includes("http://") && href.includes("topologyDetail")){
+        } else if (!url.includes("http://") && href.includes("topologyDetail")) {
             switch (params) {
                 case '1': // 返回上一页
                     let str = href.replace(/\/topologyDetail/g, "")