fix: 组态增加背景解析

packages/extend-components/EC_ConfigurationView/src/HistoryModel.js

@@ -841,7 +841,72 @@ const ConfigurationView = (props) => {
       },
     );
 
+    // 自定义矩形
+    go.Shape.defineFigureGenerator('RoundedRectanglePlus', (shape, w, h) => {
+      // this figure takes one parameter, the size of the corner
+      let p1 = Infinity; // default corner size
+      if (shape !== null) {
+        const param1 = shape.parameter1;
+        if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
+      }
+      p1 = Math.min(p1, w / 2);
+      p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
+      const geo = new go.Geometry();
+      // a single figure consisting of straight lines and quarter-circle arcs
+      geo.add(
+        new go.PathFigure(0, p1)
+          .add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
+          .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
+          .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
+          .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
+          .add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()),
+      );
+      // don't intersect with two top corners when used in an "Auto" Panel
+      geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
+      geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
+      return geo;
+    });
+
     /** *********************************节点模板************************************* */
+    // 背景模板定义
+    myDiagram.nodeTemplateMap.add(
+      'bgCase',
+      goJS(
+        go.Node,
+        'Spot',
+        { locationSpot: go.Spot.Center, zOrder: 0 },
+        // new go.Binding('zOrder', 'zOrder').makeTwoWay(),
+        new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
+        new go.Binding('visible', 'visible').makeTwoWay(),
+        new go.Binding('angle').makeTwoWay(),
+        {
+          // 设置其可选择
+          selectable: false,
+          layerName: 'Background',
+        },
+        // the main object is a Panel that surrounds a TextBlock with a Shape ~图形：Panel包围着TextBlock
+        goJS(
+          go.Panel,
+          'Auto',
+          {
+            name: 'PANEL',
+          },
+          new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
+          goJS(
+            go.Picture,
+            { width: 56, height: 56, scale: 1, source: '', background: '#2e3343' },
+            new go.Binding('source', 'imgSrc', function (v) {
+              return `/PandaCore/GCK/SketchPad/PreviewResource?name=${v}&_site=${globalConfig?.userInfo?.LocalSite || ''}`;
+            }).makeTwoWay(),
+            new go.Binding('scale', 'scale').makeTwoWay(),
+            new go.Binding('width', 'width').makeTwoWay(),
+            new go.Binding('height', 'height').makeTwoWay(),
+            new go.Binding('background', 'background').makeTwoWay(),
+          ),
+        ),
+      ),
+    );
+
     // svg节点定义
     myDiagram.nodeTemplateMap.add(
       'svgCase',
@@ -956,7 +1021,7 @@ const ConfigurationView = (props) => {
       ),
     );
 
-    // 设备简称
+    // 设备名称定义
     myDiagram.nodeTemplateMap.add(
       'deviceCase',
       goJS(
@@ -971,11 +1036,12 @@ const ConfigurationView = (props) => {
         roleVisibleBinding(), // 绑定角色可见
         goJS(
           go.Shape,
-          'Rectangle',
-          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
+          'RoundedRectanglePlus',
+          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
           new go.Binding('fill', 'fillColor').makeTwoWay(),
           new go.Binding('stroke').makeTwoWay(),
           new go.Binding('strokeWidth').makeTwoWay(),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
         ),
         goJS(
@@ -1032,11 +1098,12 @@ const ConfigurationView = (props) => {
         roleVisibleBinding(), // 绑定角色可见
         goJS(
           go.Shape,
-          'Rectangle',
-          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
+          'RoundedRectanglePlus',
+          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
           new go.Binding('fill', 'fillColor').makeTwoWay(),
           new go.Binding('stroke').makeTwoWay(),
           new go.Binding('strokeWidth').makeTwoWay(),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
         ),
         goJS(
@@ -1086,6 +1153,11 @@ const ConfigurationView = (props) => {
         new go.Binding('zOrder', 'zOrder').makeTwoWay(),
         new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
         new go.Binding('angle').makeTwoWay(),
+        {
+          // 设置其可选择
+          selectable: false,
+          layerName: 'Background',
+        },
         roleVisibleBinding(), // 绑定角色可见
         goJS(
           go.Shape,
@@ -1145,11 +1217,12 @@ const ConfigurationView = (props) => {
         roleVisibleBinding(), // 绑定角色可见
         goJS(
           go.Shape,
-          'Rectangle',
-          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
+          'RoundedRectanglePlus',
+          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 0 },
           new go.Binding('fill', 'fillColor'),
           new go.Binding('stroke'),
           new go.Binding('strokeWidth'),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
         ),
         goJS(
@@ -1293,32 +1366,6 @@ const ConfigurationView = (props) => {
       ),
     );
 
-    // 进度条设置
-    go.Shape.defineFigureGenerator('RoundedRectanglePlus', (shape, w, h) => {
-      // this figure takes one parameter, the size of the corner
-      let p1 = Infinity; // default corner size
-      if (shape !== null) {
-        const param1 = shape.parameter1;
-        if (!isNaN(param1) && param1 >= 0) p1 = param1; // can't be negative or NaN
-      }
-      p1 = Math.min(p1, w / 2);
-      p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
-      const geo = new go.Geometry();
-      // a single figure consisting of straight lines and quarter-circle arcs
-      geo.add(
-        new go.PathFigure(0, p1)
-          .add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
-          .add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
-          .add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
-          .add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
-          .add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()),
-      );
-      // don't intersect with two top corners when used in an "Auto" Panel
-      geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
-      geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
-      return geo;
-    });
-
     // 定义进度条
     myDiagram.nodeTemplateMap.add(
       'speedCase',
@@ -1343,10 +1390,12 @@ const ConfigurationView = (props) => {
             stroke: '#FFFFFF',
             desiredSize: new go.Size(NaN, 26),
             fill: 'transparent',
+            parameter1: 5,
           },
           new go.Binding('width').makeTwoWay(),
           new go.Binding('height').makeTwoWay(),
           new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('stroke', 'stroke').makeTwoWay(),
         ),
         goJS(
@@ -1360,10 +1409,12 @@ const ConfigurationView = (props) => {
             strokeWidth: 2,
             stroke: 'transparent',
             desiredSize: new go.Size(NaN, 26),
+            parameter1: 5,
           },
           new go.Binding('width').makeTwoWay(),
           new go.Binding('height').makeTwoWay(),
           new go.Binding('fill', 'waterColor').makeTwoWay(),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('strokeWidth', 'strokeWidth').makeTwoWay(),
         ),
         goJS(
@@ -1378,9 +1429,11 @@ const ConfigurationView = (props) => {
             strokeWidth: 2,
             minSize: new go.Size(NaN, 5),
             desiredSize: new go.Size(NaN, 20),
+            parameter1: 5,
           },
           new go.Binding('width', 'lineWidth').makeTwoWay(),
           new go.Binding('height', 'height').makeTwoWay(),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('fill', 'fillColor').makeTwoWay(),
           new go.Binding('strokeWidth', 'strokeWidth'),
         ),
@@ -1489,11 +1542,12 @@ const ConfigurationView = (props) => {
         roleVisibleBinding(), // 绑定角色可见
         goJS(
           go.Shape,
-          'RoundedRectangle',
-          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000' },
+          'RoundedRectanglePlus',
+          { name: 'SHAPE', strokeWidth: 10, stroke: '#000000', parameter1: 5 },
           new go.Binding('fill', 'fillColor'),
           new go.Binding('stroke'),
           new go.Binding('strokeWidth'),
+          new go.Binding('parameter1', 'radius').makeTwoWay(),
           new go.Binding('desiredSize', 'size', go.Size.parse).makeTwoWay(go.Size.stringify),
         ),
         goJS(
@@ -1596,6 +1650,7 @@ const ConfigurationView = (props) => {
         resegmentable: true,
         relinkableFrom: true,
         relinkableTo: true,
+        zOrder: 1,
       },
       new go.Binding('fromSpot', 'fromPort', (d) => {
         return spotConverter(d);
@@ -1644,6 +1699,7 @@ const ConfigurationView = (props) => {
           relinkableTo: true,
           relinkableFrom: true,
           relinkableTo: true,
+          zOrder: 1,
         },
         new go.Binding('fromSpot', 'fromPort', function (d) {
           return spotConverter(d);