@next-bricks/data-view 0.13.7 → 0.14.1

package/dist/types.json

@@ -1348,159 +1348,6 @@
     "events": [],
     "methods": []
   },
-  "data-view.grid-background": {
-    "properties": [
-      {
-        "name": "color",
-        "annotation": {
-          "type": "indexedAccess",
-          "objectType": {
-            "type": "reference",
-            "typeName": {
-              "type": "qualifiedName",
-              "left": {
-                "type": "identifier",
-                "name": "React"
-              },
-              "right": {
-                "type": "identifier",
-                "name": "CSSProperties"
-              }
-            }
-          },
-          "indexType": {
-            "type": "jsLiteral",
-            "value": "color"
-          }
-        }
-      },
-      {
-        "name": "maskStyle",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "qualifiedName",
-            "left": {
-              "type": "identifier",
-              "name": "React"
-            },
-            "right": {
-              "type": "identifier",
-              "name": "CSSProperties"
-            }
-          }
-        }
-      },
-      {
-        "name": "particleColor",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "identifier",
-            "name": "ParticleColor"
-          }
-        }
-      }
-    ],
-    "events": [],
-    "methods": [],
-    "types": [
-      {
-        "type": "interface",
-        "name": "ParticleColor",
-        "body": [
-          {
-            "type": "propertySignature",
-            "key": {
-              "type": "identifier",
-              "name": "startColor"
-            },
-            "annotation": {
-              "type": "indexedAccess",
-              "objectType": {
-                "type": "reference",
-                "typeName": {
-                  "type": "qualifiedName",
-                  "left": {
-                    "type": "identifier",
-                    "name": "React"
-                  },
-                  "right": {
-                    "type": "identifier",
-                    "name": "CSSProperties"
-                  }
-                }
-              },
-              "indexType": {
-                "type": "jsLiteral",
-                "value": "color"
-              }
-            },
-            "computed": false
-          },
-          {
-            "type": "propertySignature",
-            "key": {
-              "type": "identifier",
-              "name": "endColor"
-            },
-            "annotation": {
-              "type": "indexedAccess",
-              "objectType": {
-                "type": "reference",
-                "typeName": {
-                  "type": "qualifiedName",
-                  "left": {
-                    "type": "identifier",
-                    "name": "React"
-                  },
-                  "right": {
-                    "type": "identifier",
-                    "name": "CSSProperties"
-                  }
-                }
-              },
-              "indexType": {
-                "type": "jsLiteral",
-                "value": "color"
-              }
-            },
-            "computed": false
-          }
-        ]
-      }
-    ]
-  },
-  "data-view.gear-background": {
-    "properties": [
-      {
-        "name": "color",
-        "annotation": {
-          "type": "indexedAccess",
-          "objectType": {
-            "type": "reference",
-            "typeName": {
-              "type": "qualifiedName",
-              "left": {
-                "type": "identifier",
-                "name": "React"
-              },
-              "right": {
-                "type": "identifier",
-                "name": "CSSProperties"
-              }
-            }
-          },
-          "indexType": {
-            "type": "jsLiteral",
-            "value": "color"
-          }
-        }
-      }
-    ],
-    "events": [],
-    "methods": []
-  },
   "data-view.title-text": {
     "properties": [
       {
@@ -1692,52 +1539,6 @@
       }
     ]
   },
-  "data-view.top-title-bar": {
-    "properties": [
-      {
-        "name": "text",
-        "annotation": {
-          "type": "keyword",
-          "value": "string"
-        }
-      },
-      {
-        "name": "type",
-        "annotation": {
-          "type": "reference",
-          "typeName": {
-            "type": "identifier",
-            "name": "TitleBarType"
-          }
-        }
-      }
-    ],
-    "events": [],
-    "methods": [],
-    "types": [
-      {
-        "type": "typeAlias",
-        "name": "TitleBarType",
-        "annotation": {
-          "type": "union",
-          "types": [
-            {
-              "type": "jsLiteral",
-              "value": "normal"
-            },
-            {
-              "type": "jsLiteral",
-              "value": "sample"
-            },
-            {
-              "type": "jsLiteral",
-              "value": "square"
-            }
-          ]
-        }
-      }
-    ]
-  },
   "data-view.lights-component-title": {
     "properties": [
       {
@@ -1843,6 +1644,205 @@
     "events": [],
     "methods": []
   },
+  "data-view.top-title-bar": {
+    "properties": [
+      {
+        "name": "text",
+        "annotation": {
+          "type": "keyword",
+          "value": "string"
+        }
+      },
+      {
+        "name": "type",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "TitleBarType"
+          }
+        }
+      }
+    ],
+    "events": [],
+    "methods": [],
+    "types": [
+      {
+        "type": "typeAlias",
+        "name": "TitleBarType",
+        "annotation": {
+          "type": "union",
+          "types": [
+            {
+              "type": "jsLiteral",
+              "value": "normal"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "sample"
+            },
+            {
+              "type": "jsLiteral",
+              "value": "square"
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "data-view.gear-background": {
+    "properties": [
+      {
+        "name": "color",
+        "annotation": {
+          "type": "indexedAccess",
+          "objectType": {
+            "type": "reference",
+            "typeName": {
+              "type": "qualifiedName",
+              "left": {
+                "type": "identifier",
+                "name": "React"
+              },
+              "right": {
+                "type": "identifier",
+                "name": "CSSProperties"
+              }
+            }
+          },
+          "indexType": {
+            "type": "jsLiteral",
+            "value": "color"
+          }
+        }
+      }
+    ],
+    "events": [],
+    "methods": []
+  },
+  "data-view.grid-background": {
+    "properties": [
+      {
+        "name": "color",
+        "annotation": {
+          "type": "indexedAccess",
+          "objectType": {
+            "type": "reference",
+            "typeName": {
+              "type": "qualifiedName",
+              "left": {
+                "type": "identifier",
+                "name": "React"
+              },
+              "right": {
+                "type": "identifier",
+                "name": "CSSProperties"
+              }
+            }
+          },
+          "indexType": {
+            "type": "jsLiteral",
+            "value": "color"
+          }
+        }
+      },
+      {
+        "name": "maskStyle",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "qualifiedName",
+            "left": {
+              "type": "identifier",
+              "name": "React"
+            },
+            "right": {
+              "type": "identifier",
+              "name": "CSSProperties"
+            }
+          }
+        }
+      },
+      {
+        "name": "particleColor",
+        "annotation": {
+          "type": "reference",
+          "typeName": {
+            "type": "identifier",
+            "name": "ParticleColor"
+          }
+        }
+      }
+    ],
+    "events": [],
+    "methods": [],
+    "types": [
+      {
+        "type": "interface",
+        "name": "ParticleColor",
+        "body": [
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "startColor"
+            },
+            "annotation": {
+              "type": "indexedAccess",
+              "objectType": {
+                "type": "reference",
+                "typeName": {
+                  "type": "qualifiedName",
+                  "left": {
+                    "type": "identifier",
+                    "name": "React"
+                  },
+                  "right": {
+                    "type": "identifier",
+                    "name": "CSSProperties"
+                  }
+                }
+              },
+              "indexType": {
+                "type": "jsLiteral",
+                "value": "color"
+              }
+            },
+            "computed": false
+          },
+          {
+            "type": "propertySignature",
+            "key": {
+              "type": "identifier",
+              "name": "endColor"
+            },
+            "annotation": {
+              "type": "indexedAccess",
+              "objectType": {
+                "type": "reference",
+                "typeName": {
+                  "type": "qualifiedName",
+                  "left": {
+                    "type": "identifier",
+                    "name": "React"
+                  },
+                  "right": {
+                    "type": "identifier",
+                    "name": "CSSProperties"
+                  }
+                }
+              },
+              "indexType": {
+                "type": "jsLiteral",
+                "value": "color"
+              }
+            },
+            "computed": false
+          }
+        ]
+      }
+    ]
+  },
   "data-view.loading-panel": {
     "properties": [
       {
@@ -2726,6 +2726,13 @@
           "type": "keyword",
           "value": "boolean"
         }
+      },
+      {
+        "name": "useDistanceConfig",
+        "annotation": {
+          "type": "keyword",
+          "value": "boolean"
+        }
       }
     ],
     "events": [

package/dist-types/app-wall/index.d.ts

@@ -5,6 +5,7 @@ export interface AppWallProps {
     dataSource: AppData[];
     relations: Relation[];
     useDblclick?: boolean;
+    useDistanceConfig?: boolean;
     onSystemCardButtonClick?: (data: AppData) => void;
     leftBtnOnClick?: (data: AppData) => void;
     rightBtnOnClick?: (data: AppData) => void;
@@ -38,6 +39,12 @@ declare class AppWall extends ReactNextElement implements AppWallProps {
      * @description 是否使用双击事件，开启之后卡片不会触发内部dblclick事件展示梯台
      */
     accessor useDblclick: boolean;
+    /**
+     * @default
+     * @required
+     * @description 是否使用内置的distanceConfig配置
+     */
+    accessor useDistanceConfig: boolean;
     handleLeftClick: (data: AppData) => void;
     handleRightClick: (data: AppData) => void;
     handleCardDbClick: (data: AppData) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/data-view",
-  "version": "0.13.7",
+  "version": "0.14.1",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/data-view",
   "repository": {
     "type": "git",
@@ -34,10 +34,10 @@
     "postpublish": "mv package.json.bak package.json"
   },
   "devDependencies": {
-    "@next-core/build-next-bricks": "^1.13.3",
+    "@next-core/build-next-bricks": "^1.13.4",
     "@next-core/test-next": "^1.0.8",
     "@types/d3-hierarchy": "^3.1.2",
     "@types/three": "^0.150.1"
   },
-  "gitHead": "9cb4021702de2ec207da11da7d208ce09adce114"
+  "gitHead": "d033c1ffcaa9c5533165394bbdedae90017eac86"
 }

package/dist/chunks/5114.e362fe95.js

@@ -1,2 +0,0 @@
-"use strict";(self.webpackChunk_next_bricks_data_view=self.webpackChunk_next_bricks_data_view||[]).push([[5114,3518],{2685:(e,t,r)=>{r.d(t,{j:()=>R});var a=r(7896),n=r(8657),o=r.n(n),i=r(6995),l=r(5095),c=r(4827),s=r(2839),p=r(3028),d=(r(4012),r(37),r(7984),(e,t,r)=>{var a=(new i.Pa4).subVectors(t,e),n=a.length(),o=document.createElement("data-view.app-wall-relation-line");o.style.height="".concat(n,"px"),o.classList.add("relation-line"),o.lightColor=r;var c=new l.cp(o),s=(new i.Pa4).lerpVectors(e,t,.5);c.position.copy(s);var p=(new i._fP).setFromUnitVectors(new i.Pa4(0,1,0).normalize(),a.clone().normalize());return c.setRotationFromQuaternion(p),c}),u=(e,t)=>{var r=new i.Pa4(e[0],e[1],e[2]),a=new i.Pa4(t[0],t[1],t[2]);return{centerVector:(new i.Pa4).lerpVectors(r,a,.5),subVector:(new i.Pa4).subVectors(r,a)}},h=e=>{var{BW:t,TW:r,d:a,TH:n,BH:o,isLeft:c}=e,s=Math.sqrt(Math.pow(r/2-t/2,2)+Math.pow(a,2)),p=document.createElement("div");p.style.cssText="\n                   width: ".concat(s,"px;\n                   height:").concat(n,"px;\n                   position: relative;\n                   clip-path: polygon(0 0, ").concat(s,"px ").concat(n/2-o/2,"px, ").concat(s,"px ").concat(n/2-o/2+o,"px, 0 ").concat(n,"px);\n                    ");var d=document.createElement("div");d.className="trapezoidalLeftOrRightAnimation",p.appendChild(d);var h=c?[-t/2,0,0]:[t/2,0,0],g=c?[-r/2,0,a]:[r/2,0,a],b=new l.cp(p),{centerVector:m,subVector:v}=u(h,g);b.position.copy(m);var x=(new i._fP).setFromUnitVectors(new i.Pa4(1,0,0).normalize(),v.clone().normalize());return b.setRotationFromQuaternion(x),b},g=e=>{var{BW:t,TW:r,d:a,TH:n,BH:o,isTop:c}=e,s=Math.sqrt(Math.pow(n/2-o/2,2)+Math.pow(a,2)),p=document.createElement("div");p.style.cssText="\n                   width: ".concat(r,"px;\n                   height:").concat(s,"px;\n                   position: relative;\n                   clip-path: polygon(0 0, ").concat(r,"px 0, ").concat(r/2-t/2+t,"px ").concat(s,"px, ").concat(r/2-t/2,"px ").concat(s,"px);\n                   ");var d=document.createElement("div");d.className="trapezoidalTopOrBottomAnimation",p.appendChild(d);var h=new l.cp(p),g=c?[0,-o/2,0]:[0,o/2,0],b=c?[0,-n/2,a]:[0,n/2,a],{centerVector:m,subVector:v}=u(g,b);h.position.copy(m);var x=(new i._fP).setFromUnitVectors(new i.Pa4(0,-1,0).normalize(),v.clone().normalize());return h.setRotationFromQuaternion(x),h},b=e=>{var{objectData:t,leftBtnName:r,clusters:a,columns:n,leftOnClick:o,rightBtnName:i,rightOnClick:c,appName:s}=e,p=600,d=document.createElement("div"),u=new l.cp(d);u.position.set(...t.point);var b=t.width,m=t.height,v=1500,x=1200,w=document.createElement("div");w.style.cssText="\n                   width: ".concat(b,"px;\n                   height: ").concat(m,"px;\n                   box-shadow: inset 0px 1px 2px 0px rgba(255,255,255,0.45);\n                   border: 1px solid rgba(118,255,255,0.58);\n                   padding: 16px;\n                   ");var f=new l.cp(w);f.position.z=0,u.add(f);var y=document.createElement("div");y.style.cssText="\n                   width: ".concat(v,"px;\n                   height:").concat(x,"px;\n                   background: linear-gradient(rgb(13, 54, 179,0.6) 0%, rgb(74, 108, 156,0.6) 100%);\n                   box-sizing: border-box;\n                   padding: 16px;\n                   ");var k=document.createElement("data-view.cabinet-thumbnail");k.clusters=null!=a?a:[],k.columns=null!=n?n:4,k.appName=s,y.className="visibilityAnimate",y.appendChild(k);var z=new l.cp(y);z.position.set(0,0,p);var T=h({BW:b,TW:v,BH:m,TH:x,d:p,isLeft:!0}),C=h({BW:b,TW:v,BH:m,TH:x,d:p,isLeft:!1}),P=g({BW:b,TW:v,BH:m,TH:x,d:p,isTop:!0}),E=g({BW:b,TW:v,BH:m,TH:x,d:p,isTop:!1});if(u.add(T,C,E,P),r){var S=document.createElement("div");S.style.cssText="\n                 color: #6BE0FA;\n                 font-size: 28px;\n                 font-weight: 500;\n                 width: ".concat(750,"px;\n                 line-height: 16px;\n                 "),S.className="visibilityAnimate";var M=document.createElement("span");M.style.cursor="pointer",M.innerText=r,S.appendChild(M);var F=new l.cp(S);F.position.set(-365,-600,14),F.rotateX(Math.PI/2),z.add(F),M.onpointerdown=o}if(i){var B=document.createElement("div");B.style.cssText="\n                 color: #FFFFFF;\n                 font-size: 30px;\n                 font-weight: 500;\n                 width: ".concat(750,"px;\n                 text-shadow: 0px 1px 4px #3366FF;\n                 text-align: right;\n                 "),B.className="visibilityAnimate";var R=document.createElement("span");R.style.cursor="pointer",R.innerText=i,B.appendChild(R);var A=new l.cp(B);A.position.set(365,-600,14),A.rotateX(Math.PI/2),z.add(A),R.onpointerdown=c}return u.add(z),u},m=(e,t,r)=>{if(null==e||!e.length)return[];var a=e.map((e=>(0,p.Z)((0,p.Z)({},e),{},{x:0,y:0})));if(a.length===t*r)a=a.map(((e,r)=>(0,p.Z)((0,p.Z)({},e),{},{x:r%t+1,y:parseInt("".concat(r/t))+1})));else{for(var n=t*(r-1),o=a.length-n,i=0;i<n;i++){var l=a[i];l.x=i%t+1,l.y=parseInt("".concat(i/t))+1}for(var c=0;c<o/2;c++){var s=a[c+n],d=a[a.length-1-c];s.x=c+1,s.y=r,s!==d&&(d.x=t-c,d.y=r)}}return a},v=(e,t,r,a)=>{var n=new i.Tme;return n.position.x=e.x*t.outerWidth-(r/2+.5)*t.outerWidth,n.position.y=-e.y*t.outerHeight+(a/2+.5)*t.outerHeight,n},x=(e,t,r,a,n,o)=>{var l=new i.Tme,c=new i.Pa4,s=((e,t,r,a,n)=>{var o={x:0,y:0,z:0},i=parseInt("".concat(r*t.outerWidth*180))/(n*Math.PI),l=r/2+.5;return o.x=i*Math.sin(Math.PI/(180/((e.x-l)*(n/r)))),o.y=-e.y*t.outerHeight+(a/2+.5)*t.outerHeight,o.z=i-Math.sqrt(i*i-o.x*o.x),o})(e,t,r,a,n);return l.position.x=s.x,l.position.y=s.y,l.position.z=s.z,c.x=0,c.y=l.position.y,c.z=o,l.lookAt(c),l},w=(e,t,r,a)=>{var n=t.height+2*t.margin,o=(t.width+2*t.margin)/e.aspect,i=.5*Math.max(o,n)/Math.tan(e.fov*Math.PI/360)+t.z,l=0;if(r.forEach((function(e){a>=Math.min.apply(null,e.numRange)&&a<Math.max.apply(null,e.numRange)&&(l=e.distance)})),l>0)return Math.max(l,i);var c=200*Math.ceil((a-160)/40)+3200;return Math.max(c,i)},f=(e,t)=>{var r=[],a=e.userData;return Array.isArray(t)&&t.length&&t.forEach((function(e){a.key!==e.source&&a.key!==e.target||r.push(e)})),r},y=e=>{var t=e.composedPath().find((e=>null==e?void 0:e.shadowRoot));if("DATA-VIEW.APP-WALL-CARD-ITEM"===(null==t?void 0:t.tagName))return t;var r=document.elementFromPoint(e.clientX,e.clientY),a=null==r?void 0:r.shadowRoot.elementFromPoint(e.clientX,e.clientY);return"DATA-VIEW.APP-WALL-CARD-ITEM"===(null==a?void 0:a.tagName)?a:null},k=r(8978),z=r(2779),T=r.n(z),C={width:120,height:160,outerWidth:140,outerHeight:180,lgWidth:180,lgHeight:240},P=[{numRange:[0,40],distance:3e3},{numRange:[40,60],distance:2200},{numRange:[60,80],distance:2700},{numRange:[80,120],distance:3200},{numRange:[120,160],distance:3400},{numRange:[160,300],distance:3600}],E=45,S=100,M=300,F=e=>{var t=Math.ceil(Math.sqrt(e*C.outerHeight/(.4*C.outerWidth))),r=Math.ceil(e/t),a=parseInt("".concat(t*C.outerWidth*180))/(S*Math.PI);return{maxX:t,maxY:r,radius:a,bounds:{width:2*a*Math.sin(Math.PI*(S/2)/180)+C.outerWidth,height:r*C.outerHeight,margin:100,z:a-a*Math.cos(Math.PI*(S/2)/180)}}},B=(0,k.wrapBrick)("data-view.app-wall-system-card");function R(e){var{relations:t,onSystemCardButtonClick:r,useDblclick:p,handleCardDbClick:u,rightBtnOnClick:h,leftBtnOnClick:g}=e,[k,z]=(0,n.useState)(null),R=(0,n.useRef)(),A=(0,n.useRef)(),I=(0,n.useRef)(),_=(0,n.useRef)(),W=(0,n.useRef)(),X=(0,n.useRef)(),D=(0,n.useRef)(),L=(0,n.useRef)(),N=(0,n.useRef)(),H=(0,n.useRef)(),O=(0,n.useRef)({table:[],curve:[]}),V=(0,n.useRef)([]),Z=(0,n.useRef)([]),j=(0,n.useRef)({maxX:0,maxY:0,radius:0,bounds:{width:0,height:0,margin:100,z:0}}),Y=(0,n.useRef)({element:null,mouseoverTimer:null,mouseoutTimer:null,clickTimer:null,dblClickTimer:null,isShowGraph3D:!1,isShowAppInfo:!1,isShowRelations:!1,enable:!0}),G=(0,n.useCallback)((()=>{X.current.render(D.current,L.current)}),[]),U=e=>{var t;if(null===(t=Y.current)||void 0===t||!t.element)return null==e?void 0:e();var{__objectCSS:r,__curve:a,__userData:n}=Y.current.element;new s.kX(r.rotation).to({x:a.rotation.x,y:a.rotation.y,z:a.rotation.z},300).start(),new s.kX(r.scale).to({x:1,y:1,z:1},300).start(),new s.kX(r.position).to({x:a.position.x,y:a.position.y,z:a.position.z},300).onUpdate(G).onStart((()=>{var e;r.element.classList.remove("status-".concat(n.status||"normal","-card")),null===(e=V.current)||void 0===e||e.forEach((e=>{e.element.style.opacity="1"})),Z.current.forEach((e=>{D.current.remove(e)})),Z.current=[],G()})).onComplete((()=>{var t;Y.current.isShowRelations=!1,null==e||e(null===(t=Y.current)||void 0===t?void 0:t.element)})).start()},q=(e,t)=>{Y.current.enable=!1;for(var r=0;r<V.current.length;r++){var a=V.current[r],n=e[r];new s.kX(a.position).to({x:n.position.x,y:n.position.y,z:n.position.z},i.M8C.randFloat(t,2*t)).easing(s.oY.Exponential.InOut).start(),new s.kX(a.rotation).to({x:n.rotation.x,y:n.rotation.y,z:n.rotation.z},i.M8C.randFloat(t,2*t)).easing(s.oY.Exponential.InOut).start()}new s.kX({}).to({},2*t).onUpdate(G).start().onComplete((()=>{Y.current.enable=!0}))},Q=e=>{N.current.reset();var t=Y.current.element.__objectCSS,r=Y.current.element.__curve;Y.current.enable=!1,Y.current.isShowAppInfo=!0;var a,n={x:r.position.x>0?2*-C.width:2*C.width,y:0,z:(L.current.position.z-500)/1.5},o={x:0,y:0,z:L.current.position.z-500},i={x:0,y:r.rotation.y>0?90*-Math.PI/180:90*Math.PI/180,z:0},l={x:0,y:r.rotation.y>0?180*-Math.PI/180:180*Math.PI/180,z:0},c=new s.kX(t.position),p=new s.kX(t.rotation),d=new s.kX(t.position),u=new s.kX(t.rotation);e?(c.to(n,500).easing().onComplete((()=>{W.current.hidden=!0,Y.current.element.style.opacity="1"})),p.to(i,500).easing(),d.to({x:r.position.x,y:r.position.y,z:r.position.z},700).easing(),u.to({x:r.rotation.x,y:r.rotation.y,z:r.rotation.z},700).easing().onComplete((()=>{var e;null===(e=V.current)||void 0===e||e.forEach((e=>{e.element.style.opacity="1"}))}))):(null===(a=V.current)||void 0===a||a.forEach((e=>{t!=e&&(e.element.style.opacity="0.2")})),c.to(n,700).easing().onStart((()=>{_.current.hidden=!1,W.current.hidden=!0})),p.to(i,700).easing(),d.to(o,500).easing().onStart((function(){Y.current.element.style.opacity="0",W.current.style.transition="transition: all .3s ease",W.current.hidden=!1})),u.to(l,500).easing()),c.chain(d).start(),p.chain(u).start(),new s.kX({}).to({},1400).onUpdate((()=>{if(G(),Math.abs(t.rotation.y)>=Math.PI/2){var e=Y.current.element.getBoundingClientRect(),r=1.35,a=e.width*r,n=e.height*r;W.current.style.width="".concat(a,"px"),W.current.style.height="".concat(n,"px"),W.current.style.top="".concat(e.top-(r-1)*n/2,"px"),W.current.style.left="".concat(e.left-(r-1)*a/2,"px")}})).start().onComplete((function(){Y.current.enable=!0,Y.current.isShowAppInfo=!e,_.current.hidden=e}))};return(0,n.useEffect)((()=>{var e;(()=>{var e=window.innerWidth,t=window.innerHeight,r=e/t,a=new l.lX;a.setSize(e,t),A.current.replaceChildren(a.domElement);var n=new i.cPb(E,r,.1,1e4),o=new c.$(n,a.domElement);o.rotateSpeed=.5,o.minDistance=500,o.maxDistance=1e4;var s=new i.xsS;D.current=s,L.current=n,N.current=o,X.current=a})();var t=()=>{e=requestAnimationFrame(t),s.ZP.update(),N.current.update()};t();var r=()=>{L.current.aspect=window.innerWidth/window.innerHeight,L.current.updateProjectionMatrix(),X.current.setSize(window.innerWidth,window.innerHeight),G()};return N.current.addEventListener("change",G),window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),N.current.removeEventListener("change",G),N.current.dispose(),s.ZP.removeAll(),L.current.clear(),D.current.clear(),cancelAnimationFrame(e)}}),[]),(0,n.useEffect)((()=>{var t,r=(null===(t=e.dataSource)||void 0===t?void 0:t.length)||0;r>0&&((e=>{j.current=F(e)})(r),L.current.position.z=w(L.current,j.current.bounds,P,r),L.current.updateProjectionMatrix(),N.current.position0.copy(L.current.position),m(e.dataSource,j.current.maxX,j.current.maxY).forEach(((e,t)=>{var r,a,n=document.createElement("data-view.app-wall-card-item");n.status=e.status,n.cardTitle=null===(r=e.cardItemProps)||void 0===r?void 0:r.cardTitle,n.description=null===(a=e.cardItemProps)||void 0===a?void 0:a.description;var o="status-".concat((null==e?void 0:e.status)||"normal");n.className="card-item-container  ".concat(o),n.style.width="".concat(C.width,"px"),n.style.height="".concat(C.height,"px"),n.classList.add("card-item-wrap");var i=new l.cp(n);i.position.set(4e3*Math.random()-2e3,4e3*Math.random()-2e3,4e3*Math.random()-2e3),D.current.add(i),V.current.push(i);var c=v(e,C,j.current.maxX,j.current.maxY);O.current.table.push(c);var s=x(e,C,j.current.maxX,j.current.maxY,S,j.current.radius);O.current.curve.push(s),i.userData=e,n.__objectCSS=i,n.__userData=e,n.__curve=s})),q(O.current.curve,1500));return()=>{N.current.reset(),s.ZP.removeAll(),V.current.map((e=>{D.current.remove(e)})),V.current=[],O.current={table:[],curve:[]},Y.current={element:null,mouseoverTimer:null,mouseoutTimer:null,clickTimer:null,dblClickTimer:null,enable:!0,isShowAppInfo:!1,isShowGraph3D:!1,isShowRelations:!1}}}),[e.dataSource]),(0,n.useEffect)((()=>{var e=R.current,r=e=>{if(clearTimeout(Y.current.mouseoverTimer),Y.current.isShowAppInfo||Y.current.isShowGraph3D||!Y.current.enable)return!1;var r=y(e);Y.current.mouseoverTimer=window.setTimeout((()=>{U((()=>{r&&!Y.current.isShowAppInfo&&(e=>{var{__objectCSS:r,__userData:a}=e,n=r.rotation.y,o={x:r.position.x+50*Math.sin(n),y:r.position.y+15,z:r.position.z+100*Math.cos(n)},i=1.25;Y.current.isShowRelations=!0,new s.kX(r.rotation).to({x:0,y:0,z:0},300).onStart((()=>{r.element.classList.add("status-".concat(a.status||"normal","-card"))})).start(),new s.kX(r.scale).to({x:i,y:i,z:i},300).start(),new s.kX(r.position).to(o,300).onUpdate(G).onComplete((function(){var a,n,o,i,l,c;l=f(a=r,t),c=a.userData,null==l||l.forEach((e=>{e.source===c.key?(i=V.current.find((t=>t.userData.key===e.target)),o=i&&d(a.position,i.position,"blue")):(i=V.current.find((t=>t.userData.key===e.source)),o=i&&d(i.position,a.position,"purple")),o&&(Z.current.push(o),D.current.add(o))})),null===(n=V.current)||void 0===n||n.forEach((e=>{a!=e&&l.every((t=>t.source!=e.userData.key&&t.target!=e.userData.key))&&(e.element.style.opacity="0.2")})),G(),Y.current.element=e})).start()})(r),clearTimeout(Y.current.mouseoverTimer)}))}),500)},a=e=>{if(clearTimeout(Y.current.clickTimer),clearTimeout(Y.current.mouseoverTimer),Y.current.isShowAppInfo||Y.current.isShowGraph3D||!Y.current.enable)return!1;var t=y(e);Y.current.clickTimer=window.setTimeout((function(){clearTimeout(Y.current.mouseoverTimer),U((()=>{t&&(clearTimeout(Y.current.clickTimer),clearTimeout(Y.current.mouseoverTimer),e.stopPropagation(),Y.current.element=t,z(t.__userData),Q(!1))}))}),300)},n=e=>{if(clearTimeout(Y.current.clickTimer),clearTimeout(Y.current.mouseoverTimer),clearTimeout(Y.current.dblClickTimer),Y.current.isShowAppInfo||Y.current.isShowGraph3D||!Y.current.enable)return!1;var t=y(e),{__userData:r,__objectCSS:a}=t;Y.current.isShowGraph3D=!0,Y.current.dblClickTimer=window.setTimeout((function(){U((()=>{var e;if(p||(null===(e=r.trapezoidalProps)||void 0===e||null===(e=e.clusters)||void 0===e?void 0:e.length)<1)u(r),Y.current.isShowGraph3D=!1;else if(t){clearTimeout(Y.current.mouseoverTimer),clearTimeout(Y.current.clickTimer),A.current.classList.add("mask-container"),N.current.reset();var n={x:a.position.x,y:860+C.height*(j.current.maxY-r.y)},o=new s.kX(L.current.position),i=new s.kX({opacity:0,scale:0,borderLeftWidth:0,borderRightWidth:0,borderTopWidth:0,borderBottomWidth:0}),l=new s.kX({z:0}),c=new s.kX(L.current.position),d=new s.kX(N.current.target),m=new s.kX({blur:12,spread:0});q(O.current.table,600),o.to({x:0,y:-3600,z:1600},1e3).chain(m,i,l),i.to({opacity:1},700).onStart((()=>{var e,t,n,o,i,l=b({objectData:{width:C.width,height:C.height,point:[a.position.x,a.position.y,a.position.z]},clusters:null===(e=r.trapezoidalProps)||void 0===e?void 0:e.clusters,columns:null===(t=r.trapezoidalProps)||void 0===t?void 0:t.columns,appName:null===(n=r.trapezoidalProps)||void 0===n?void 0:n.appName,leftBtnName:null===(o=r.trapezoidalProps)||void 0===o?void 0:o.leftBtnName,rightBtnName:null===(i=r.trapezoidalProps)||void 0===i?void 0:i.rightBtnName,rightOnClick:()=>h(r),leftOnClick:()=>g(r)});H.current=l,D.current.add(l)})),l.to({z:M},1e3).delay(230).chain(c,d),c.to({x:n.x,y:-3600+n.y},1e3),d.to({x:n.x,y:n.y},1e3).onComplete((function(){I.current.style.visibility="visible"})),o.start()}}))}),300)};return e.addEventListener("dblclick",n),e.addEventListener("click",a),e.addEventListener("mouseover",r),()=>{e.removeEventListener("mouseover",r),e.removeEventListener("click",a),e.removeEventListener("dblclick",n)}}),[]),o().createElement("div",{className:"appwall-container",ref:R},o().createElement("div",{className:"appwall",ref:A}),o().createElement("div",{className:"mask",ref:_,onClick:()=>{Y.current.enable&&Q(!0)},hidden:!0},o().createElement(B,(0,a.Z)({},null==k?void 0:k.systemCardProps,{onClick:e=>e.stopPropagation(),handleClick:()=>r(k),ref:W,className:T()({infoWrapper:"normal"===(null==k?void 0:k.status),warningWrapper:"warning"===(null==k?void 0:k.status)})}))),o().createElement("div",{className:"closeBtn",ref:I,onClick:()=>{(()=>{s.ZP.removeAll();var e=new s.kX({z:0}),t=new s.kX({opacity:1}),r=new s.kX(L.current.position),a=new s.kX(N.current.target),n=new s.kX({blur:1500,spread:100});e.to({z:M},1e3).chain(r,a,n),t.to({opacity:0},1e3).onStart((()=>{D.current.remove(H.current),I.current.style.visibility="hidden"})).delay(300),r.to(N.current.position0,1e3).onComplete((function(){N.current.reset(),A.current.classList.remove("mask-container"),q(O.current.curve,600),Y.current.isShowGraph3D=!1})),a.to({x:0,y:0,z:0},1e3),n.to({blur:0,spread:0},1e3),e.start(),t.start()})()}}))}},2284:(e,t,r)=>{r.d(t,{Z:()=>l});var a=r(9601),n=r.n(a),o=r(2609),i=r.n(o)()(n());i.push([e.id,':host{display:block;width:100%;height:100%}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.mask-container{position:absolute;top:0;left:0;width:100%;height:100%;background:#0c1216;z-index:1000}.appwall{position:relative}.appwall.loading .card-item{pointer-events:none!important}.mask{position:absolute;width:100%;height:100%;top:0;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center}.mask[hidden]{display:none}.infoWrapper{position:absolute;background:var(--color-fill-bg-base-4);box-shadow:0 0 12px 2px rgba(80,255,255,0.45),inset 0 0 22px 0 #20242A;border:2px solid #50FFFF;overflow:hidden}.warningWrapper{position:absolute;background:linear-gradient(180deg,#CC0066 0%,rgba(204,0,102,0.2) 100%),#0F1117FF;box-shadow:0 0 12px 2px rgba(204,0,102,0.4),inset 0 4px 10px 0 rgba(255,255,255,0.65);overflow:hidden}.relation-line{pointer-events:none!important}.closeBtn{visibility:hidden;position:fixed;top:50px;right:50px;width:46px;height:46px;text-align:center;border:1px solid;color:rgb(138 189 255/84%);font-size:20px;line-height:46px;cursor:pointer;background:rgba(138,189,255,0.13);border-image:linear-gradient(135deg,rgba(255,255,255,0.5),rgba(255,255,255,0),rgba(255,255,255,0.33)) 1 1;display:flex;justify-content:center;align-items:center;z-index:1000}.closeBtn:before,\n.closeBtn:after{content:"";width:2px;height:20px;background:linear-gradient(180deg,#3467FF 0%,#98CBFF 100%);position:absolute}.closeBtn:before{transform:rotateZ(45deg)}.closeBtn:after{transform:rotateZ(-45deg)}.closeBtn:hover:after,\n.closeBtn:hover:before{background:var(--color-normal-text)}.visibilityAnimate{visibility:hidden;animation:visibility 0.5s both 1s}.trapezoidalLeftOrRightAnimation,\n.trapezoidalTopOrBottomAnimation{background:linear-gradient(180deg,rgba(51,102,255,0.4) 0%,#99CCFF 100%);opacity:0.2;position:absolute}.trapezoidalTopOrBottomAnimation{bottom:0;width:100%;left:0;animation:animateTop 1s both}.trapezoidalLeftOrRightAnimation{top:0;right:0;height:100%;animation:animateLeft 1s both}@keyframes animateTop{0%{height:0}100%{height:100%}}@keyframes animateLeft{0%{width:0}100%{width:100%}}@keyframes visibility{0%{visibility:hidden}100%{visibility:visible}}.card-item-container{transition:opacity 0.5s}.status-normal-card{box-shadow:0 0 100px rgba(80,255,255,0.58);border:1px solid rgba(80,255,255,0.58);background:-webkit-gradient(liner,left top,left bottom,from(#002c8d),to(#00123e));background:linear-gradient(to bottom,rgba(80,255,255,1) 0%,rgba(80,255,255,0) 100%)}.status-warning-card{box-shadow:0 0 100px #CC0066;background:-webkit-gradient(liner,left top,left bottom,from(#CC0066),to(rgba(204,0,102,0.2)));background:linear-gradient(to bottom,#CC0066 0%,rgba(204,0,102,0.2) 100%)}',""]);const l=i.toString()},9214:(e,t,r)=>{r.d(t,{Z:()=>l});var a=r(9601),n=r.n(a),o=r(2609),i=r.n(o)()(n());i.push([e.id,":host{display:inline-block;width:100%;height:100%}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.card-item-container{position:relative;width:100%;height:100%}.card-item{position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;border-radius:var(--no-border-radius);border-color:transparent;transition:border-color 0.5s}.status-normal:hover{box-shadow:0 0 100px rgba(80,255,255,0.58);border:1px solid rgba(80,255,255,0.58);background:-webkit-gradient(liner,left top,left bottom,from(#002c8d),to(#00123e));background:linear-gradient(to bottom,rgba(80,255,255,1) 0%,rgba(80,255,255,0) 100%)}.status-warning:hover{box-shadow:0 0 100px #CC0066;background:-webkit-gradient(liner,left top,left bottom,from(#CC0066),to(rgba(204,0,102,0.2)));background:linear-gradient(to bottom,#CC0066 0%,rgba(204,0,102,0.2) 100%)}.card-item-container.status-normal .card-item{background:var(--color-fill-bg-base-4);box-shadow:inset 0px 1px 2px 0px rgba(255,255,255,0.45)}.card-item-container.status-normal:hover .card-item{border:2px solid rgba(80,255,255,0.58)}.card-item-container.status-warning .card-item{background:linear-gradient(180deg,#CC0066 0%,rgba(204,0,102,0.2) 100%);box-shadow:inset 0px 2px 6px 0px rgba(255,255,255,0.65)}.card-item-container.status-warning:hover .card-item{border:none}.card-item-text-container{width:100%;padding:0 12px}.card-item-title,\n.card-item-description{font-size:20px;font-weight:var(--font-weight-500);color:var(--color-normal-text)}.card-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-item-description{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}",""]);const l=i.toString()},8384:(e,t,r)=>{r.d(t,{Z:()=>l});var a=r(9601),n=r.n(a),o=r(2609),i=r.n(o)()(n());i.push([e.id,":host{display:inline-block;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:100%}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.relation-line{position:relative;width:6px;height:100%;background:var(--color-text-divider-line-1);overflow:hidden}.relation-line::after{content:'';position:absolute;width:100%;height:20%;left:0px;top:0px;animation:lightMove 1000ms ease-in-out infinite,lightOpacity 1000ms ease-in-out infinite}.relation-line.light-color-blue::after{background:linear-gradient(rgba(80,255,255,0) 0%,rgba(80,255,255,1) 90%,#DFFFFF 100%)}.relation-line.light-color-purple::after{background:linear-gradient(rgba(102,0,255,0) 0%,rgba(102,0,255,1) 90%,#B07BFF 100%)}@keyframes lightMove{0%{top:0;transform:translateY(-100%)}100%{top:100%;transform:translateY(0)}}@keyframes lightOpacity{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}",""]);const l=i.toString()},9948:(e,t,r)=>{r.d(t,{Z:()=>l});var a=r(9601),n=r.n(a),o=r(2609),i=r.n(o)()(n());i.push([e.id,":host{display:inline-block}:host([hidden]){display:none}*,\n*::before,\n*::after{box-sizing:border-box}.wrapper{position:relative;width:100%;height:100%;padding:30px 24px 35px;left:0;display:flex;flex-direction:column;border-radius:var(--no-border-radius)}.cardName{font-size:var(--title-font-size-strong);line-height:22px;text-align:center;font-weight:var(--font-weight-500);color:var(--color-normal-text);text-shadow:0 1px 4px rgba(51,102,255,0.5);margin-bottom:35px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.descriptions{flex:1;margin-bottom:20px;font-size:var(--auxiliary-font-size-small);overflow:auto;font-weight:var(--font-weight-400)}.descriptionsItem .itemKey{color:var(--color-secondary-text)}.descriptionsItem .itemValue{color:var(--color-strong-text)}.descriptionsItem{display:flex;gap:10px;margin-bottom:12px}.descriptionsItem>div{flex:1;text-align:left;word-break:break-all}.buttonContent{position:absolute;bottom:16px;right:24px;font-size:var(--auxiliary-font-size);color:#99CCFF;cursor:pointer;font-weight:var(--font-weight-500)}.buttonName{margin-left:5px}",""]);const l=i.toString()},1043:(e,t,r)=>{r.d(t,{Z:()=>l});var a=r(9601),n=r.n(a),o=r(2609),i=r.n(o)()(n());i.push([e.id,":host{--palette-rgba-white-1:rgba(255,255,255,10%);--palette-rgba-white-2:rgba(255,255,255,20%);--palette-rgba-white-3:rgba(255,255,255,30%);--palette-rgba-white-4:rgba(255,255,255,40%);--palette-rgba-white-5:rgba(255,255,255,50%);--palette-rgba-white-6:rgba(255,255,255,60%);--palette-rgba-white-7:rgba(255,255,255,70%);--palette-rgba-white-8:rgba(255,255,255,80%);--palette-rgba-white-9:rgba(255,255,255,90%);--palette-rgba-white-10:rgba(255,255,255,100%);--palette-rgba-gray-1:rgba(0,0,0,10%);--palette-rgba-gray-2:rgba(0,0,0,20%);--palette-rgba-gray-3:rgba(0,0,0,30%);--palette-rgba-gray-4:rgba(0,0,0,40%);--palette-rgba-gray-5:rgba(0,0,0,50%);--palette-rgba-gray-6:rgba(0,0,0,60%);--palette-rgba-gray-7:rgba(0,0,0,70%);--palette-rgba-gray-8:rgba(0,0,0,80%);--palette-rgba-gray-9:rgba(0,0,0,90%);--palette-rgba-gray-10:rgba(0,0,0,100%);--palette-rgba-blue-gray-2:rgba(101,106,134,20%);--palette-rgba-blue-gray-3:rgba(101,106,134,30%);--palette-rgba-blue-gray-8:rgba(101,106,134,80%);--palette-tech-blue-4-channel:67,127,255;--palette-tech-blue-4:rgb(var(--palette-tech-blue-4-channel));--palette-tech-blue-6-channel:51,102,255;--palette-tech-blue-6:rgb(var(--palette-tech-blue-6-channel));--palette-tech-blue-8-channel:40,69,159;--palette-tech-blue-8:rgb(var(--palette-tech-blue-8-channel));--palette-sea-green-4-channel:131,245,225;--palette-sea-green-4:rgb(var(--palette-sea-green-4-channel));--palette-green-6-channel:81,235,73;--palette-green-6:rgb(var(--palette-green-6-channel));--palette-green-2:rgba(var(--palette-green-6-channel),20%);--palette-lotus-pink-7-channel:204,0,102;--palette-lotus-pink-7:rgb(var(--palette-lotus-pink-7-channel));--palette-red-6-channel:242,39,39;--palette-red-6:rgb(var(--palette-red-6-channel));--palette-red-2:rgba(var(--palette-red-6-channel),20%);--color-fill-global-bg:#0f1014;--color-fill-bg-container-1:var(--palette-rgba-white-1);--color-fill-bg-container-2:var(--palette-rgba-blue-gray-2);--color-fill-bg-container-3:var(--palette-rgba-blue-gray-8);--color-fill-bg-base-1:var(--palette-rgba-blue-gray-2);--color-fill-bg-base-2:rgba(15,16,20,0%);--color-fill-bg-base-3:rgba(0,0,0,20%);--color-fill-bg-base-4:rgba(40,46,58,100%);--color-fill-bg-base-5:rgba(19,25,47,80%);--color-fill-bg-base-6:var(--palette-rgba-blue-gray-3);--color-brand:var(--palette-tech-blue-6);--color-brand-hover:var(--palette-tech-blue-4);--color-brand-active:var(--palette-tech-blue-8);--color-contrast-1:var(--palette-sea-green-4);--color-error:var(--palette-red-6);--color-error-bg:var(--palette-red-2);--color-success:var(--palette-green-6);--color-success-bg:var(--palette-green-2);--color-header-text-big:var(--palette-rgba-white-10);--color-header-text:var(--palette-rgba-white-10);--color-normal-text:var(--palette-rgba-white-10);--color-strong-text:var(--palette-rgba-white-9);--color-auxiliary-text:var(--palette-rgba-white-8);--color-secondary-text:var(--palette-rgba-white-6);--color-disabled-text:var(--palette-rgba-white-4);--color-border-divider-line:var(--palette-rgba-white-1);--color-text-divider-line-1:var(--palette-rgba-white-2);--color-text-divider-line-2:var(--palette-rgba-white-2);--small-border-radius:2px;--medius-border-radius:5px;--larger-border-radius:12px;--container-border-radius:9999px;--no-border-radius:0px;--mask-bg:var(--palette-rgba-gray-7);--title-font-size-larger:30px;--title-font-size-strong:22px;--title-font-size:18px;--normal-font-size:14px;--auxiliary-font-size:16px;--auxiliary-font-size-small:12px;--overview-data-font-size:34px;--statistics-data-font-size:28px;--normal-data-font-size-larger:20px;--normal-data-font-size:16px;--chart-legend-font-size:12px;--chart-tooltips-font-size-1:12px;--chart-tooltips-font-size-2:12px;--chart-axis-x-font-size:12px;--chart-axis-x-font-size-larger:14px;--chart-axis-y-font-size:12px;--chart-axis-y-font-size-larger:14px;--font-weight-600:600;--font-weight-500:500;--font-weight-400:400;--text-shadow:0px 1px 4px #2863ee;--border-width-base:1px;--border-width-double-base:2px;--border-width-tribble-base:3px;--punctate-width-base:1px;--paragraph-width-base:1px;--button-text-color:#40d0db}",""]);const l=i.toString()}}]);
-//# sourceMappingURL=5114.e362fe95.js.map