From 55929d6c8821056886edb02307fb3b1e92d9cd4b Mon Sep 17 00:00:00 2001
From: nlicroshan <nlicroshan@easyops.cn>
Date: Tue, 18 Apr 2023 16:15:49 +0800
Subject: [PATCH] chore(): add helpers

---
 .../src/app-wall/app-wall.shadow.css          | 26 ++++++++++
 bricks/data-view/src/app-wall/app-wall.tsx    |  3 +-
 bricks/data-view/src/app-wall/helpers.ts      | 49 +++++++++++++++++++
 bricks/data-view/src/app-wall/index.tsx       |  5 +-
 4 files changed, 80 insertions(+), 3 deletions(-)
 create mode 100644 bricks/data-view/src/app-wall/helpers.ts

diff --git a/bricks/data-view/src/app-wall/app-wall.shadow.css b/bricks/data-view/src/app-wall/app-wall.shadow.css
index 5902b39bc..4461158ca 100644
--- a/bricks/data-view/src/app-wall/app-wall.shadow.css
+++ b/bricks/data-view/src/app-wall/app-wall.shadow.css
@@ -154,3 +154,29 @@
   }
 
 }
+
+
+.circle {
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  border-radius: 50%;
+}
+
+.circle2 {
+  width: 10px;
+  height: 10px;
+  background-color: blue;
+  border-radius: 50%;
+}
+
+.test {
+  width: 100px;
+  height: 100px;
+  background-color: red;
+}
+
+.line {
+  width: 10px;
+  height: 1000px;
+}
diff --git a/bricks/data-view/src/app-wall/app-wall.tsx b/bricks/data-view/src/app-wall/app-wall.tsx
index a5cba2a1b..ba78ecb82 100644
--- a/bricks/data-view/src/app-wall/app-wall.tsx
+++ b/bricks/data-view/src/app-wall/app-wall.tsx
@@ -8,6 +8,7 @@ import { AnimationEventType } from "./interface.js";
 import { createCardItems, createRelationLine, type UserData, createTrapezoidalObject, eulerToXYZ } from "./utils.js";
 import type { AppWallProps } from "./index.jsx";
 import type { SystemCard, SystemCardProps } from "./system-card/index.js";
+import { createHelper } from "./helpers.js";
 
 const WrappedSystemCard = wrapBrick<SystemCard, SystemCardProps>(
   "data-view.app-wall-system-card"
@@ -509,7 +510,7 @@ export function AppWallElement(props: AppWallProps): React.ReactElement {
   useEffect(() => {
     const { css3DObjects } = createCardItems(dataSource);
     threeGroupRef.current.add(...css3DObjects);
-    sceneRef.current.add(threeGroupRef.current);
+    sceneRef.current.add(threeGroupRef.current,...createHelper());
     render();
     entranceAnimation(css3DObjects);
 
diff --git a/bricks/data-view/src/app-wall/helpers.ts b/bricks/data-view/src/app-wall/helpers.ts
new file mode 100644
index 000000000..7ec822a7a
--- /dev/null
+++ b/bricks/data-view/src/app-wall/helpers.ts
@@ -0,0 +1,49 @@
+import { CSS3DObject } from 'three/addons/renderers/CSS3DRenderer.js';
+
+export const createHelper = () => {
+  const element = document.createElement('div');
+  element.className = 'test';
+  const _e = new CSS3DObject(element);
+  _e.position.set(0, 0, 0);
+
+  const x = document.createElement('div');
+  x.className = 'line';
+  x.style.background = "red";
+  const _x = new CSS3DObject(x);
+  _x.position.set(500, 0, 0);
+  _x.rotateZ(Math.PI / 2);
+
+  const xc = document.createElement('div');
+  xc.className = 'circle';
+  xc.style.background = "red";
+  const _xc = new CSS3DObject(xc);
+  _xc.position.set(500, 0, 0);
+
+  const y = document.createElement('div');
+  y.className = 'line';
+  y.style.background = "blue";
+  const _y = new CSS3DObject(y);
+  _y.position.set(0, 500, 0);
+
+  const yc = document.createElement('div');
+  yc.className = 'circle';
+  yc.style.background = "blue";
+  const _yc = new CSS3DObject(yc);
+  _yc.position.set(0, 500, 0);
+
+
+  const z = document.createElement('div');
+  z.className = 'line';
+  z.style.background = "green";
+  const _z = new CSS3DObject(z);
+  _z.position.set(0, 0, 500);
+  _z.rotateX(Math.PI / 2);
+
+  const zc = document.createElement('div');
+  zc.className = 'circle';
+  zc.style.background = "green";
+  const _zc = new CSS3DObject(zc);
+  _zc.position.set(0, 0, 500);
+
+  return [_e, _x, _xc, _y, _yc, _z, _zc];
+};
diff --git a/bricks/data-view/src/app-wall/index.tsx b/bricks/data-view/src/app-wall/index.tsx
index 61fb06cb4..f1dac2c8f 100644
--- a/bricks/data-view/src/app-wall/index.tsx
+++ b/bricks/data-view/src/app-wall/index.tsx
@@ -5,7 +5,8 @@ import variablesStyleText from "../data-view-variables.shadow.css";
 import styleText from "./app-wall.shadow.css";
 import { AppWallElement } from "./app-wall.js";
 import type { AppData, Relation } from "./utils.js";
-import {dataSource,relations} from  "./mockData.js"
+import { dataSource, relations } from "./mockData.js";
+
 const { defineElement, property, event } = createDecorators();
 
 export interface AppWallProps {
@@ -48,7 +49,7 @@ class AppWall
   @property({
     attribute: false,
   })
-  accessor relations: Relation[]=relations as Relation[];
+  accessor relations: Relation[] = relations;
 
   /**
   * @detail AppData