chore(): add helpers

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;
+}

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);
 

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];
+};

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