From ab73047e86500733be9e3cd5ca0cc0fc89237dd5 Mon Sep 17 00:00:00 2001 From: Jonas de Luna Skulberg <113468143+jonasdeluna@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:56:06 +0200 Subject: [PATCH] Implement z layer (#61) * Initial z layering commit * Z-layer working with exception of line, bug needs to be fixed * Working movable line * Working draggable line and z index sorting based on last add. --- src/Components/Circle.ts | 12 +++++++----- src/Components/Grid.ts | 4 ++++ src/Components/Line.ts | 12 ++++++++---- src/Components/Point.ts | 8 ++++++-- src/Components/SVGLoader.ts | 10 ++++------ src/Components/Shape.ts | 15 +++++++-------- src/Components/interfaces.ts | 12 ++++++++++++ src/Graphica.ts | 11 ++++++----- 8 files changed, 54 insertions(+), 30 deletions(-) diff --git a/src/Components/Circle.ts b/src/Components/Circle.ts index 82210aa..38761be 100644 --- a/src/Components/Circle.ts +++ b/src/Components/Circle.ts @@ -12,18 +12,19 @@ import { import { Collider, Component } from "./interfaces"; export type CircleOptions = { - color?: number; - segments?: number; + color: number; + segments: number; }; export const defaultShapeOptions: CircleOptions = { color: 0xfaa307, - segments: 64, + segments: 128, }; class Circle extends Component implements Collider { radius: number; _strokeMesh: Mesh; + segments: number; constructor(x = 0, y = 0, radius = 30, options?: CircleOptions) { super(); @@ -37,7 +38,8 @@ class Circle extends Component implements Collider { transparent: true, opacity: 0.5, }); - const strokeGeometry = new RingGeometry(radius - 1, radius, 50); + this.segments = segments; + const strokeGeometry = new RingGeometry(radius - 1, radius, this.segments); const strokeMaterial = new MeshBasicMaterial({ color: "#080007" }); // set mesh of the point instance const circleMesh = new Mesh(geometry, material); @@ -81,7 +83,7 @@ class Circle extends Component implements Collider { this._strokeMesh.geometry = new RingGeometry( this.radius - 4 / camera.zoom, this.radius, - 50 + this.segments ); } } diff --git a/src/Components/Grid.ts b/src/Components/Grid.ts index 10fe511..0d9ccba 100644 --- a/src/Components/Grid.ts +++ b/src/Components/Grid.ts @@ -290,6 +290,10 @@ class Grid extends Component { window.innerHeight ); } + + public setZIndex(): void { + this.position.setZ(1); + } } export default Grid; diff --git a/src/Components/Line.ts b/src/Components/Line.ts index ac71f0e..1ddc701 100644 --- a/src/Components/Line.ts +++ b/src/Components/Line.ts @@ -119,10 +119,10 @@ class Line extends Component implements Collider { (this.geometry as LineGeometry).setPositions([ startPosition.x, startPosition.y, - 1.1, + this.position.z, endPosition.x, endPosition.y, - 1.1, + this.position.z, ]); if (arrowhead) { @@ -160,10 +160,10 @@ class Line extends Component implements Collider { (this.geometry as LineGeometry).setPositions([ startPosition.x, startPosition.y, - 1.1, + this.position.z, endPosition.x, endPosition.y, - 1.1, + this.position.z, ]); } @@ -180,6 +180,10 @@ class Line extends Component implements Collider { this.end = end; } + public setZIndex(z: number): void { + this.position.setZ(z - 3); + } + update(camera: OrthographicCamera) { this.updateGeometry(this.start, this.end, this.arrowhead, camera); } diff --git a/src/Components/Point.ts b/src/Components/Point.ts index b60fecd..c9af55a 100644 --- a/src/Components/Point.ts +++ b/src/Components/Point.ts @@ -45,12 +45,12 @@ class Point extends Component implements Collider, DragListener { // set mesh of the point instance const circleMesh = new Mesh(geometry, material); const strokeMesh = new Mesh(strokeGeometry, strokeMaterial); - strokeMesh.position.set(0, 0, -0.1); + strokeMesh.position.set(0, 0, this.position.z - 0.01); this.geometry = circleMesh.geometry; this.material = circleMesh.material; this.add(strokeMesh); // set position of the mesh - this.position.set(x, y, 2); + this.position.set(x, y, this.position.z); this.dragListeners = dragListeners ?? []; if (label) { @@ -115,5 +115,9 @@ class Point extends Component implements Collider, DragListener { update(camera: THREE.OrthographicCamera) { this.scale.set(1 / camera.zoom, 1 / camera.zoom, 1); } + + public setPosition(x: number, y: number) { + this.position.set(x, y, this.position.z); + } } export default Point; diff --git a/src/Components/SVGLoader.ts b/src/Components/SVGLoader.ts index 1c167a2..6678a33 100644 --- a/src/Components/SVGLoader.ts +++ b/src/Components/SVGLoader.ts @@ -35,10 +35,10 @@ class SVG extends Component { ? path.userData?.style.stroke : 0x000000; - const strokeWidth = - path.userData?.style.strokeWidth !== undefined - ? path.userData?.style.strokeWidth - : 1; + // const strokeWidth = + // path.userData?.style.strokeWidth !== undefined + // ? path.userData?.style.strokeWidth + // : 1; const shapes = SVGLoader.createShapes(path); @@ -66,8 +66,6 @@ class SVG extends Component { resolution: new Vector2(window.innerWidth, window.innerHeight), }); const line = new Line2(strokeGeometry, material); - console.log(shape.getPoints()); - console.log(strokeWidth); group.add(line); } } diff --git a/src/Components/Shape.ts b/src/Components/Shape.ts index 8c7c28d..a41fa91 100644 --- a/src/Components/Shape.ts +++ b/src/Components/Shape.ts @@ -62,7 +62,6 @@ class Polygon extends Component implements Collider, DragListener { mesh.scale.set(1, 1, 1); this.geometry = mesh.geometry; this.material = mesh.material; - this.position.setZ(1.5); const group = new Group(); const lines = []; @@ -76,13 +75,13 @@ class Polygon extends Component implements Collider, DragListener { lines.push([lastVertex, firstVertex]); lines.forEach((l) => { - group.add( - new Line(l[0], l[1], { - color: 0x080007, - opacity: opacity, - draggable: undefined, - }) - ); + const a = new Line(l[0], l[1], { + color: 0x080007, + opacity: opacity, + draggable: undefined, + }); + a.position.setZ(this.position.z + 0.01); + group.add(a); }); this.add(group); this.object = group; diff --git a/src/Components/interfaces.ts b/src/Components/interfaces.ts index 50cddc2..5187f6e 100644 --- a/src/Components/interfaces.ts +++ b/src/Components/interfaces.ts @@ -3,6 +3,18 @@ import { OrthographicCamera, Mesh, Object3D } from "three"; export class Component extends Mesh { draggable: Draggable; is_dragged: boolean; + getX(): number { + return this.position.x; + } + getY(): number { + return this.position.y; + } + setZIndex(z: number): void { + this.position.setZ(z); + } + getZIndex(): number { + return this.position.z; + } update?(camera: OrthographicCamera): void; onWindowResize?(): void; dragUpdate?(): void; diff --git a/src/Graphica.ts b/src/Graphica.ts index 9abe74d..cb6aad0 100644 --- a/src/Graphica.ts +++ b/src/Graphica.ts @@ -81,7 +81,6 @@ class Graphica { this.renderer.setSize(window.innerWidth, window.innerHeight); // TODO: The size should be adaptive this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setClearAlpha(0); - this.guiRoot = document.createElement("div"); this.guiRoot.className = "gui"; root.appendChild(this.guiRoot); @@ -104,7 +103,7 @@ class Graphica { ); // this.camera.position.setX(toVector2(defaultPosition).x); // this.camera.position.setY(toVector2(defaultPosition).y); - this.camera.position.setZ(5); + this.camera.position.setZ(1000); this.camera.zoom = defaultZoom; this.camera.updateProjectionMatrix(); @@ -214,12 +213,14 @@ class Graphica { } add(component: Component) { - this.scene.add(component); - // Add draggable functionality to draggable components + this.components.push(component); if (component.draggable !== undefined) { this.draggables.push(component); } - this.components.push(component); + component.setZIndex(2 + this.components.length); + + this.scene.add(component); + // Add draggable functionality to draggable components this.scene.traverse((child: Object3D) => { if (!(child instanceof Component)) {