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( "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