simulationjsv2 0.5.2 → 0.7.1

package/dist/graphics.js

@@ -1,22 +1,147 @@
 import { vec3, mat4, vec2, vec4 } from 'wgpu-matrix';
-import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Color, transitionValues, vector2FromVector3, matrix4, vector3FromVector2, distance2d } from './utils.js';
-import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry } from './geometry.js';
-import { VertexCache, bufferGenerator, logger, rotateMat4, vector2ToPixelRatio, vector3ToPixelRatio } from './internalUtils.js';
-export class SimulationElement {
+import { Vertex, cloneBuf, color, colorFromVector4, vector2, vector3, vertex, Color, vector2FromVector3, matrix4, vector3FromVector2, distance2d } from './utils.js';
+import { BlankGeometry, CircleGeometry, CubeGeometry, Line2dGeometry, Line3dGeometry, PlaneGeometry, PolygonGeometry, Spline2dGeometry, SquareGeometry, TraceLines2dGeometry as TraceLinesGeometry } from './geometry.js';
+import { SimSceneObjInfo, VertexCache, bufferGenerator, internalTransitionValues, logger, posTo2dScreen, rotateMat4, vector3ToPixelRatio } from './internalUtils.js';
+import { modelProjMatOffset } from './constants.js';
+export class SimulationElement3d {
+    children;
+    uniformBuffer;
+    parent;
+    centerOffset;
+    rotationOffset;
+    pos;
     color;
     wireframe;
     vertexCache;
     rotation;
-    isInstanced;
+    modelMatrix;
+    isInstance = false;
+    isInstanced = false;
+    is3d = true;
+    isEmpty = false;
     /**
      * @param pos - Expected to be adjusted to devicePixelRatio before reaching constructor
      */
-    constructor(color = new Color(), rotation) {
+    constructor(pos, rotation, color = new Color()) {
+        this.pos = pos;
+        this.centerOffset = vector3();
+        // TODO test this
+        this.rotationOffset = vector3();
         this.color = color;
         this.vertexCache = new VertexCache();
         this.wireframe = false;
-        this.rotation = rotation;
-        this.isInstanced = false;
+        this.rotation = cloneBuf(rotation);
+        this.uniformBuffer = null;
+        this.children = [];
+        this.modelMatrix = matrix4();
+        this.parent = null;
+    }
+    add(el, id) {
+        el.setParent(this);
+        const info = new SimSceneObjInfo(el, id);
+        this.children.push(info);
+    }
+    remove(el) {
+        for (let i = 0; i < this.children.length; i++) {
+            if (this.children[i].getObj() === el) {
+                this.children.splice(i, 1);
+            }
+        }
+    }
+    getChildren() {
+        return this.children.map((child) => child.getObj());
+    }
+    getChildrenInfos() {
+        return this.children;
+    }
+    hasChildren() {
+        return this.children.length > 0;
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    getParent() {
+        return this.parent;
+    }
+    setCenterOffset(offset) {
+        this.centerOffset = offset;
+    }
+    setRotationOffset(offset) {
+        this.rotationOffset = offset;
+    }
+    resetCenterOffset() {
+        this.centerOffset[0] = 0;
+        this.centerOffset[1] = 0;
+        this.centerOffset[2] = 0;
+    }
+    propagateDevice(device) {
+        this.onDeviceChange(device);
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().propagateDevice(device);
+        }
+    }
+    getModelMatrix() {
+        this.updateModelMatrix3d();
+        return this.modelMatrix;
+    }
+    getUniformBuffer(device, mat) {
+        if (!this.uniformBuffer) {
+            const uniformBufferSize = 4 * 16 + 4 * 16 + 4 * 2 + 8; // 4x4 matrix + 4x4 matrix + vec2<f32> + 8 bc 144 is cool
+            this.uniformBuffer = device.createBuffer({
+                size: uniformBufferSize,
+                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+            });
+        }
+        device.queue.writeBuffer(this.uniformBuffer, modelProjMatOffset, mat);
+        return this.uniformBuffer;
+    }
+    mirrorParentTransforms3d(mat) {
+        if (!this.parent)
+            return;
+        this.parent.mirrorParentTransforms3d(mat);
+        mat4.translate(mat, this.parent.getPos(), mat);
+        const parentRot = this.parent.getRotation();
+        mat4.rotateZ(mat, parentRot[2], mat);
+        mat4.rotateY(mat, parentRot[1], mat);
+        mat4.rotateX(mat, parentRot[0], mat);
+    }
+    updateModelMatrix3d() {
+        mat4.identity(this.modelMatrix);
+        if (this.parent) {
+            this.mirrorParentTransforms3d(this.modelMatrix);
+        }
+        mat4.translate(this.modelMatrix, this.pos, this.modelMatrix);
+        // vec3.negate(this.rotationOffset, cachedVec1);
+        // mat4.translate(this.modelMatrix, cachedVec1, this.modelMatrix);
+        mat4.rotateZ(this.modelMatrix, this.rotation[2], this.modelMatrix);
+        mat4.rotateY(this.modelMatrix, this.rotation[1], this.modelMatrix);
+        mat4.rotateX(this.modelMatrix, this.rotation[0], this.modelMatrix);
+        // mat4.translate(this.modelMatrix, this.rotationOffset, this.modelMatrix);
+        mat4.translate(this.modelMatrix, this.centerOffset, this.modelMatrix);
+    }
+    mirrorParentTransforms2d(mat) {
+        if (!this.parent) {
+            const parentPos = posTo2dScreen(this.pos);
+            mat4.translate(mat, parentPos, mat);
+            return;
+        }
+        this.parent.mirrorParentTransforms2d(mat);
+        const parentRot = this.parent.getRotation();
+        mat4.rotateZ(mat, parentRot[2], mat);
+        mat4.translate(mat, this.pos, mat);
+    }
+    updateModelMatrix2d() {
+        mat4.identity(this.modelMatrix);
+        const pos = posTo2dScreen(this.pos);
+        vec3.add(pos, this.centerOffset, pos);
+        if (this.parent) {
+            this.mirrorParentTransforms2d(this.modelMatrix);
+        }
+        else {
+            mat4.translate(this.modelMatrix, pos, this.modelMatrix);
+        }
+        mat4.rotateZ(this.modelMatrix, this.rotation[2], this.modelMatrix);
+        mat4.translate(this.modelMatrix, this.centerOffset, this.modelMatrix);
     }
     getGeometryType() {
         return this.geometry.getType();
@@ -33,13 +158,22 @@ export class SimulationElement {
     getPos() {
         return this.pos;
     }
+    getAbsolutePos() {
+        const vec = vector3();
+        this.updateModelMatrix3d();
+        mat4.getTranslation(this.modelMatrix, vec);
+        return vec;
+    }
     getRotation() {
         return this.rotation;
     }
+    getCenterOffset() {
+        return this.centerOffset;
+    }
     fill(newColor, t = 0, f) {
         const diff = newColor.diff(this.color);
         const finalColor = newColor.clone();
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.color.r += diff.r * p;
             this.color.g += diff.g * p;
             this.color.b += diff.b * p;
@@ -50,34 +184,95 @@ export class SimulationElement {
             this.vertexCache.updated();
         }, t, f);
     }
+    moveChildren(amount, t = 0, f) {
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().move(amount, t, f, true);
+        }
+    }
+    move(amount, t = 0, f, fromDevicePixelRatio = false) {
+        const tempAmount = cloneBuf(amount);
+        if (!fromDevicePixelRatio)
+            vector3ToPixelRatio(tempAmount);
+        const finalPos = cloneBuf(this.pos);
+        vec3.add(finalPos, tempAmount, finalPos);
+        this.moveChildren(amount, t, f);
+        return internalTransitionValues((p) => {
+            this.pos[0] += tempAmount[0] * p;
+            this.pos[1] += tempAmount[1] * p;
+            this.pos[2] += tempAmount[2] * p;
+        }, () => {
+            this.pos = finalPos;
+        }, t, f);
+    }
+    moveTo(pos, t = 0, f, fromDevicePixelRatio = false) {
+        const tempPos = cloneBuf(pos);
+        if (!fromDevicePixelRatio)
+            vector3ToPixelRatio(tempPos);
+        const diff = vector3();
+        vec3.sub(tempPos, this.pos, diff);
+        this.moveChildren(diff, t, f);
+        return internalTransitionValues((p) => {
+            this.pos[0] += diff[0] * p;
+            this.pos[1] += diff[1] * p;
+            this.pos[2] += diff[2] * p;
+        }, () => {
+            this.pos = tempPos;
+        }, t, f);
+    }
+    rotateChildrenTo(angle) {
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().rotateTo(angle);
+        }
+    }
+    rotateChildren(angle) {
+        for (let i = 0; i < this.children.length; i++) {
+            this.children[i].getObj().rotate(angle);
+        }
+    }
+    rotate(amount, t = 0, f) {
+        const finalRotation = cloneBuf(amount);
+        vec3.add(finalRotation, this.rotation, finalRotation);
+        const tempDiff = vector3();
+        return internalTransitionValues((p) => {
+            vec3.scale(amount, p, tempDiff);
+            this.rotation[0] += tempDiff[0];
+            this.rotation[1] += tempDiff[1];
+            this.rotation[2] += tempDiff[2];
+        }, () => {
+            this.rotation = finalRotation;
+        }, t, f);
+    }
+    rotateTo(rot, t = 0, f) {
+        const diff = vec3.sub(rot, this.rotation);
+        const tempDiff = vector3();
+        return internalTransitionValues((p) => {
+            vec3.scale(diff, p, tempDiff);
+            this.rotation[0] += tempDiff[0];
+            this.rotation[1] += tempDiff[1];
+            this.rotation[2] += tempDiff[2];
+        }, () => {
+            this.rotation = cloneBuf(rot);
+        }, t, f);
+    }
     getVertexCount() {
         if (this.vertexCache.shouldUpdate()) {
             this.geometry.recompute();
         }
-        if (this.isWireframe()) {
-            return this.geometry.getWireframeVertexCount();
+        let childrenVertices = 0;
+        for (let i = 0; i < this.children.length; i++) {
+            childrenVertices += this.children[i].getObj().getVertexCount();
         }
-        return this.geometry.getTriangleVertexCount();
-    }
-    defaultUpdateMatrix(camera) {
-        const matrix = matrix4();
-        if (typeof this.rotation === 'number') {
-            const pos = vector3FromVector2(this.pos);
-            pos[1] = camera.getScreenSize()[1] + pos[1];
-            mat4.translate(matrix, pos, matrix);
-            mat4.rotateZ(matrix, this.rotation, matrix);
+        let currentVertices = 0;
+        if (this.isWireframe()) {
+            currentVertices = this.geometry.getWireframeVertexCount();
         }
         else {
-            mat4.translate(matrix, this.pos, matrix);
-            rotateMat4(matrix, this.rotation);
+            currentVertices = this.geometry.getTriangleVertexCount();
         }
-        this.geometry.updateMatrix(matrix);
+        return currentVertices + childrenVertices;
     }
-    getBuffer(camera, vertexParamGenerator) {
-        const shouldEvalExtender = vertexParamGenerator?.shouldEvaluate?.();
-        const reEvalExtender = shouldEvalExtender === undefined ? true : shouldEvalExtender;
-        if (this.vertexCache.shouldUpdate() || camera.hasUpdated() || reEvalExtender) {
-            this.updateMatrix(camera);
+    getBuffer(vertexParamGenerator) {
+        if (this.vertexCache.shouldUpdate()) {
             this.geometry.recompute();
             if (this.isInstanced) {
                 bufferGenerator.setInstancing(true);
@@ -96,124 +291,35 @@ export class SimulationElement {
         return this.vertexCache.getCache();
     }
 }
-export class SimulationElement3d extends SimulationElement {
-    pos;
-    rotation;
-    is3d = true;
-    constructor(pos, rotation = vector3(), color) {
-        super(color, rotation);
-        this.pos = pos;
-        vector3ToPixelRatio(this.pos);
-        this.rotation = rotation;
+export class EmptyElement extends SimulationElement3d {
+    geometry = new BlankGeometry();
+    label;
+    isEmpty = true;
+    constructor(label) {
+        super(vector3(), vector3());
+        this.label = label || null;
     }
-    rotate(amount, t = 0, f) {
-        const finalRotation = cloneBuf(this.rotation);
-        vec3.add(finalRotation, amount, finalRotation);
-        return transitionValues((p) => {
-            this.rotation[0] += amount[0] * p;
-            this.rotation[1] += amount[1] * p;
-            this.rotation[2] += amount[2] * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.rotation = finalRotation;
-            this.vertexCache.updated();
-        }, t, f);
-    }
-    rotateTo(rot, t = 0, f) {
-        const diff = vector3();
-        vec3.sub(rot, this.rotation, diff);
-        return transitionValues((p) => {
-            this.rotation[0] += diff[0] * p;
-            this.rotation[1] += diff[1] * p;
-            this.rotation[2] += diff[2] * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.rotation = rot;
-            this.vertexCache.updated();
-        }, t, f);
-    }
-    move(amount, t = 0, f) {
-        const finalPos = cloneBuf(this.pos);
-        vec3.add(finalPos, amount, finalPos);
-        return transitionValues((p) => {
-            this.pos[0] += amount[0] * p;
-            this.pos[1] += amount[1] * p;
-            this.pos[2] += amount[2] * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.pos = finalPos;
-            this.vertexCache.updated();
-        }, t, f);
-    }
-    moveTo(pos, t = 0, f) {
-        const diff = vector3();
-        vec3.sub(pos, this.pos, diff);
-        return transitionValues((p) => {
-            this.pos[0] += diff[0] * p;
-            this.pos[1] += diff[1] * p;
-            this.pos[2] += diff[2] * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.pos = pos;
-            this.vertexCache.updated();
-        }, t, f);
+    getLabel() {
+        return this.label;
     }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
-export class SimulationElement2d extends SimulationElement {
-    pos;
-    rotation;
-    constructor(pos, rotation = 0, color) {
-        super(color, rotation);
-        this.pos = pos;
-        this.rotation = rotation;
+export class SimulationElement2d extends SimulationElement3d {
+    is3d = false;
+    constructor(pos, rotation = vector3(), color) {
+        super(vector3FromVector2(pos), rotation, color);
+        vector3ToPixelRatio(this.pos);
     }
-    rotate(rotation, t = 0, f) {
-        const finalRotation = this.rotation + rotation;
-        return transitionValues((p) => {
-            this.rotation += rotation * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.rotation = finalRotation;
-            this.vertexCache.updated();
-        }, t, f);
+    rotate2d(amount, t = 0, f) {
+        return super.rotate(vector3(0, 0, amount), t, f);
     }
-    rotateTo(newRotation, t = 0, f) {
-        const diff = newRotation - this.rotation;
-        return transitionValues((p) => {
-            this.rotation += diff * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.rotation = newRotation;
-            this.vertexCache.updated();
-        }, t, f);
-    }
-    move(amount, t = 0, f) {
-        const tempAmount = cloneBuf(amount);
-        vector2ToPixelRatio(tempAmount);
-        const finalPos = vector2();
-        vec3.add(tempAmount, this.pos, finalPos);
-        return transitionValues((p) => {
-            this.pos[0] += tempAmount[0] * p;
-            this.pos[1] += tempAmount[1] * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.pos = finalPos;
-            this.vertexCache.updated();
-        }, t, f);
+    rotateTo2d(rot, t = 0, f) {
+        return super.rotateTo(vector3(0, 0, rot), t, f);
     }
-    moveTo(newPos, t = 0, f) {
-        const pos = cloneBuf(newPos);
-        vector2ToPixelRatio(pos);
-        const diff = vector2();
-        vec2.sub(pos, this.pos, diff);
-        return transitionValues((p) => {
-            this.pos[0] += diff[0] * p;
-            this.pos[1] += diff[1] * p;
-            this.vertexCache.updated();
-        }, () => {
-            this.pos = pos;
-            this.vertexCache.updated();
-        }, t, f);
+    getModelMatrix() {
+        super.updateModelMatrix2d();
+        return this.modelMatrix;
     }
 }
 export class Plane extends SimulationElement3d {
@@ -229,9 +335,8 @@ export class Plane extends SimulationElement3d {
         this.points = newPoints;
         this.vertexCache.updated();
     }
-    updateMatrix(camera) {
-        this.defaultUpdateMatrix(camera);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Square extends SimulationElement2d {
     geometry;
@@ -243,14 +348,23 @@ export class Square extends SimulationElement2d {
      * @param vertexColors{Record<number, Color>} - 0 is top left vertex, numbers increase clockwise
      */
     constructor(pos, width, height, color, rotation, centerOffset, vertexColors) {
-        super(pos, rotation, color);
-        vector2ToPixelRatio(this.pos);
+        super(pos, vector3(0, 0, rotation), color);
         this.width = width * devicePixelRatio;
         this.height = height * devicePixelRatio;
         this.vertexColors = this.cloneColorMap(vertexColors || {});
         this.geometry = new SquareGeometry(this.width, this.height, centerOffset);
         this.geometry.setVertexColorMap(this.vertexColors);
     }
+    setOffset(offset) {
+        this.geometry.setOffset(offset);
+    }
+    setOffsetInplace(offset) {
+        const diff = vector3FromVector2(offset);
+        vec2.sub(diff, this.geometry.getOffset(), diff);
+        vec2.mul(diff, vector2(this.width / devicePixelRatio, -this.height / devicePixelRatio), diff);
+        this.setOffset(offset);
+        this.move(diff);
+    }
     cloneColorMap(colorMap) {
         const newColorMap = {};
         Object.entries(colorMap).forEach(([key, value]) => {
@@ -276,7 +390,7 @@ export class Square extends SimulationElement2d {
                 diffMap[+key] = clone;
             }
         });
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             Object.entries(diffMap).forEach(([key, value]) => {
                 const color = this.vertexColors[+key];
                 color.r += value.r * p;
@@ -296,7 +410,7 @@ export class Square extends SimulationElement2d {
     scaleWidth(amount, t = 0, f) {
         const finalWidth = this.width * amount;
         const diffWidth = finalWidth - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diffWidth * p;
             this.geometry.setWidth(this.width);
             this.vertexCache.updated();
@@ -309,7 +423,7 @@ export class Square extends SimulationElement2d {
     scaleHeight(amount, t = 0, f) {
         const finalHeight = this.height * amount;
         const diffHeight = finalHeight - this.height;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.height += diffHeight * p;
             this.geometry.setHeight(this.height);
             this.vertexCache.updated();
@@ -324,7 +438,7 @@ export class Square extends SimulationElement2d {
         const finalHeight = this.height * amount;
         const diffWidth = finalWidth - this.width;
         const diffHeight = finalHeight - this.height;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diffWidth * p;
             this.height += diffHeight * p;
             this.geometry.setWidth(this.width);
@@ -341,7 +455,7 @@ export class Square extends SimulationElement2d {
     setWidth(num, t = 0, f) {
         num *= devicePixelRatio;
         const diffWidth = num - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diffWidth * p;
             this.geometry.setWidth(this.width);
             this.vertexCache.updated();
@@ -354,7 +468,7 @@ export class Square extends SimulationElement2d {
     setHeight(num, t = 0, f) {
         num *= devicePixelRatio;
         const diffHeight = num - this.height;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.height += diffHeight * p;
             this.geometry.setHeight(this.height);
             this.vertexCache.updated();
@@ -364,30 +478,23 @@ export class Square extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    updateMatrix(camera) {
-        const pos = cloneBuf(this.pos);
-        pos[1] = camera.getScreenSize()[1] + pos[1];
-        const matrix = matrix4();
-        mat4.translate(matrix, vector3FromVector2(pos), matrix);
-        mat4.rotateZ(matrix, this.rotation, matrix);
-        this.geometry.updateMatrix(matrix);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Circle extends SimulationElement2d {
     geometry;
     radius;
     detail;
     constructor(pos, radius, color, detail = 50) {
-        super(pos, 0, color);
-        vector2ToPixelRatio(this.pos);
-        this.radius = radius;
+        super(pos, vector3(), color);
+        this.radius = radius * devicePixelRatio;
         this.detail = detail;
         this.geometry = new CircleGeometry(this.radius, this.detail);
     }
     setRadius(num, t = 0, f) {
         num *= devicePixelRatio;
         const diff = num - this.radius;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.radius += diff * p;
             this.geometry.setRadius(this.radius);
             this.vertexCache.updated();
@@ -400,7 +507,7 @@ export class Circle extends SimulationElement2d {
     scale(amount, t = 0, f) {
         const finalRadius = this.radius * amount;
         const diff = finalRadius - this.radius;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.radius += diff * p;
             this.geometry.setRadius(this.radius);
             this.vertexCache.updated();
@@ -410,15 +517,14 @@ export class Circle extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    updateMatrix(camera) {
-        this.defaultUpdateMatrix(camera);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Polygon extends SimulationElement2d {
     geometry;
     vertices;
     constructor(pos, points, color, rotation) {
-        super(pos, rotation, color);
+        super(pos, vector3(0, 0, rotation), color);
         this.vertices = points;
         this.geometry = new PolygonGeometry(this.vertices);
     }
@@ -429,14 +535,13 @@ export class Polygon extends SimulationElement2d {
         const vertices = newVertices.map((vert) => {
             const newVertex = vert.clone();
             newVertex.setZ(0);
-            newVertex.setIs3d(false);
             return newVertex;
         });
-        const lastVert = this.vertices.length > 0 ? this.vertices[this.vertices.length - 1] : vertex(0, 0, 0, color(), false);
+        const lastVert = this.vertices.length > 0 ? this.vertices[this.vertices.length - 1] : vertex(0, 0, 0, color());
         if (vertices.length > this.vertices.length) {
             while (vertices.length > this.vertices.length) {
                 const lastPos = lastVert.getPos();
-                this.vertices.push(new Vertex(lastPos[0], lastPos[1], 0, lastVert.getColor() || this.color, false));
+                this.vertices.push(new Vertex(lastPos[0], lastPos[1], 0, lastVert.getColor() || this.color));
             }
         }
         const initialPositions = this.vertices.map((p) => cloneBuf(p.getPos()));
@@ -467,7 +572,7 @@ export class Polygon extends SimulationElement2d {
                 })
                 : [])
         ];
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.vertices.forEach((vert, i) => {
                 const posChange = cloneBuf(posChanges[i]);
                 const colorChange = cloneBuf(colorChanges[i]);
@@ -492,9 +597,8 @@ export class Polygon extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    updateMatrix(camera) {
-        this.defaultUpdateMatrix(camera);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Line3d extends SimulationElement3d {
     geometry;
@@ -506,7 +610,7 @@ export class Line3d extends SimulationElement3d {
         this.to = to.getPos();
         vec3.scale(this.to, devicePixelRatio, this.to);
         vec3.sub(this.to, this.pos, this.to);
-        this.geometry = new Line3dGeometry(this.pos, this.to, this.thickness);
+        this.geometry = new Line3dGeometry(this.pos, this.to, this.thickness, pos.getColor() || this.getColor(), to.getColor());
     }
     setStart(pos, t = 0, f) {
         return this.moveTo(pos, t, f);
@@ -514,7 +618,7 @@ export class Line3d extends SimulationElement3d {
     setEnd(pos, t = 0, f) {
         const diff = vector3();
         vec3.sub(pos, this.to, diff);
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.to[0] += diff[0] * p;
             this.to[1] += diff[1] * p;
             this.to[2] += diff[2] * p;
@@ -526,32 +630,30 @@ export class Line3d extends SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
-    updateMatrix(camera) {
-        return this.defaultUpdateMatrix(camera);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Line2d extends SimulationElement2d {
     geometry;
     to;
     thickness;
     constructor(from, to, thickness = 1) {
-        super(vector2FromVector3(from.getPos()), 0, from.getColor() || undefined);
+        super(vector2FromVector3(from.getPos()), vector3(), from.getColor() || undefined);
         this.thickness = thickness * devicePixelRatio;
-        this.to = vector2FromVector3(to.getPos());
-        vec2.scale(this.to, devicePixelRatio, this.to);
+        this.to = to.getPos();
         vec2.sub(this.to, this.pos, this.to);
-        this.geometry = new Line2dGeometry(this.pos, this.to, this.thickness);
+        this.geometry = new Line2dGeometry(this.pos, this.to, this.thickness, from.getColor() || this.getColor(), to.getColor());
     }
     setStart(pos, t = 0, f) {
         return this.moveTo(pos, t, f);
     }
     setEnd(pos, t = 0, f) {
         const tempPos = cloneBuf(pos);
-        vector2ToPixelRatio(tempPos);
-        vec2.sub(tempPos, this.getPos(), tempPos);
+        vector3ToPixelRatio(tempPos);
+        // vec2.sub(tempPos, this.getPos(), tempPos);
         const diff = vector3();
         vec2.sub(tempPos, this.to, diff);
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.to[0] += diff[0] * p;
             this.to[1] += diff[1] * p;
             this.vertexCache.updated();
@@ -561,27 +663,26 @@ export class Line2d extends SimulationElement2d {
             this.vertexCache.updated();
         }, t, f);
     }
-    updateMatrix(camera) {
-        return this.defaultUpdateMatrix(camera);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Cube extends SimulationElement3d {
     geometry;
     width;
     height;
     depth;
-    constructor(pos, width, height, depth, color, rotation) {
+    constructor(pos, width, height, depth, color, rotation = vector3()) {
         super(pos, rotation, color);
-        this.width = width * devicePixelRatio;
-        this.height = height * devicePixelRatio;
-        this.depth = depth * devicePixelRatio;
+        this.width = width;
+        this.height = height;
+        this.depth = depth;
         this.rotation = rotation || vector3();
         this.geometry = new CubeGeometry(this.width, this.height, this.depth);
     }
     setWidth(width, t = 0, f) {
         width *= devicePixelRatio;
         const diff = width - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += diff * p;
             this.geometry.setWidth(this.width);
             this.vertexCache.updated();
@@ -594,7 +695,7 @@ export class Cube extends SimulationElement3d {
     setHeight(height, t = 0, f) {
         height *= devicePixelRatio;
         const diff = height - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.height += diff * p;
             this.geometry.setHeight(this.height);
             this.vertexCache.updated();
@@ -607,7 +708,7 @@ export class Cube extends SimulationElement3d {
     setDepth(depth, t = 0, f) {
         depth *= devicePixelRatio;
         const diff = depth - this.width;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.depth += diff * p;
             this.geometry.setDepth(this.depth);
             this.vertexCache.updated();
@@ -624,7 +725,7 @@ export class Cube extends SimulationElement3d {
         const widthDiff = finalWidth - this.width;
         const heightDiff = finalHeight - this.height;
         const depthDiff = finalDepth - this.depth;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.width += widthDiff * p;
             this.height += heightDiff * p;
             this.depth += depthDiff * p;
@@ -642,9 +743,8 @@ export class Cube extends SimulationElement3d {
             this.vertexCache.updated();
         }, t, f);
     }
-    updateMatrix(camera) {
-        this.defaultUpdateMatrix(camera);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class BezierCurve2d {
     points;
@@ -796,8 +896,7 @@ export class Spline2d extends SimulationElement2d {
     length;
     constructor(pos, points, thickness = devicePixelRatio, detail = 40) {
         const tempPos = vector2FromVector3(pos.getPos());
-        vector2ToPixelRatio(tempPos);
-        super(tempPos, 0, pos.getColor() || undefined);
+        super(tempPos, vector3(), pos.getColor() || undefined);
         this.thickness = thickness * devicePixelRatio;
         this.detail = detail;
         this.interpolateStart = 0;
@@ -818,7 +917,7 @@ export class Spline2d extends SimulationElement2d {
     }
     setInterpolateStart(start, t = 0, f) {
         const diff = start - this.interpolateStart;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.interpolateStart += diff * p;
             this.geometry.updateInterpolationStart(this.interpolateStart);
             this.vertexCache.updated();
@@ -830,7 +929,7 @@ export class Spline2d extends SimulationElement2d {
     }
     setInterpolateLimit(limit, t = 0, f) {
         const diff = limit - this.interpolateLimit;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.interpolateLimit += diff * p;
             this.geometry.updateInterpolationLimit(this.interpolateLimit);
             this.vertexCache.updated();
@@ -849,7 +948,7 @@ export class Spline2d extends SimulationElement2d {
         const clonePoint = newPoint.clone();
         const start = clonePoint.getStart()?.getPos() || vector3();
         const end = clonePoint.getEnd().getPos();
-        const pos = vector3FromVector2(this.getPos());
+        const pos = this.getPos();
         vec3.sub(start, pos, start);
         vec3.sub(end, pos, end);
         this.geometry.updatePoint(pointIndex, clonePoint);
@@ -859,7 +958,7 @@ export class Spline2d extends SimulationElement2d {
     setThickness(thickness, t = 0, f) {
         thickness *= devicePixelRatio;
         const diff = thickness - this.thickness;
-        return transitionValues((p) => {
+        return internalTransitionValues((p) => {
             this.thickness += diff * p;
             this.geometry.updateThickness(this.thickness);
             this.vertexCache.updated();
@@ -893,34 +992,26 @@ export class Spline2d extends SimulationElement2d {
         const [vec] = this.interpolateSlope(t);
         return vec;
     }
-    updateMatrix(camera) {
-        this.defaultUpdateMatrix(camera);
-    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_device) { }
 }
 export class Instance extends SimulationElement3d {
     geometry;
     obj;
     instanceMatrix;
     matrixBuffer;
-    device;
     baseMat;
-    needsRemap = false;
+    isInstance = true;
     constructor(obj, numInstances) {
-        super(vector3());
-        this.device = null;
+        super(vector3(), vector3());
         this.matrixBuffer = null;
         obj.isInstanced = true;
         this.obj = obj;
         this.instanceMatrix = [];
-        this.is3d = Boolean(obj.is3d);
+        this.is3d = obj.is3d;
         this.geometry = new BlankGeometry();
         this.baseMat = matrix4();
-        if (typeof obj.getRotation() === 'number') {
-            mat4.rotateZ(this.baseMat, obj.getRotation(), this.baseMat);
-        }
-        else {
-            rotateMat4(this.baseMat, obj.getRotation());
-        }
+        rotateMat4(this.baseMat, obj.getRotation());
         for (let i = 0; i < numInstances; i++) {
             const clone = cloneBuf(this.baseMat);
             this.instanceMatrix.push(clone);
@@ -945,35 +1036,18 @@ export class Instance extends SimulationElement3d {
             const clone = cloneBuf(this.baseMat);
             this.instanceMatrix[i] = clone;
         }
-        if (this.device) {
-            this.setMatrixBuffer();
-            this.needsRemap = true;
-        }
     }
     setInstance(instance, transformation) {
         if (instance >= this.instanceMatrix.length || instance < 0)
             return;
         this.instanceMatrix[instance] = transformation;
-        this.needsRemap = true;
     }
-    mapBuffer() {
-        if (!this.device || this.matrixBuffer === null)
+    mapBuffer(device) {
+        if (this.matrixBuffer === null)
             return;
         const buf = new Float32Array(this.instanceMatrix.map((mat) => [...mat]).flat());
-        this.device.queue.writeBuffer(this.matrixBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
+        device.queue.writeBuffer(this.matrixBuffer, 0, buf.buffer, buf.byteOffset, buf.byteLength);
         this.matrixBuffer.unmap();
-        this.needsRemap = false;
-    }
-    setMatrixBuffer() {
-        if (!this.device || this.instanceMatrix.length === 0)
-            return;
-        const minSize = 640;
-        const size = Math.max(minSize, this.instanceMatrix[0].byteLength * this.instanceMatrix.length);
-        this.matrixBuffer = this.device.createBuffer({
-            size,
-            usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-        });
-        this.needsRemap = true;
     }
     getInstances() {
         return this.instanceMatrix;
@@ -981,13 +1055,16 @@ export class Instance extends SimulationElement3d {
     getNumInstances() {
         return this.instanceMatrix.length;
     }
-    setDevice(device) {
-        this.device = device;
-        if (this.matrixBuffer === null) {
-            this.setMatrixBuffer();
+    getMatrixBuffer(device) {
+        if (!this.matrixBuffer) {
+            const minSize = 512;
+            const size = Math.max(minSize, this.instanceMatrix[0].byteLength * this.instanceMatrix.length);
+            this.matrixBuffer = device.createBuffer({
+                size,
+                usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+            });
         }
-    }
-    getMatrixBuffer() {
+        this.mapBuffer(device);
         return this.matrixBuffer;
     }
     getVertexCount() {
@@ -996,11 +1073,53 @@ export class Instance extends SimulationElement3d {
     getGeometryType() {
         return this.obj.getGeometryType();
     }
+    getBuffer() {
+        return this.obj.getBuffer();
+    }
+    onDeviceChange(device) {
+        this.obj.propagateDevice(device);
+    }
+    getModelMatrix() {
+        return this.obj.getModelMatrix();
+    }
+}
+export class TraceLines2d extends SimulationElement2d {
+    geometry;
+    constructor(color, maxLen) {
+        super(vector2(), vector3(), color);
+        this.geometry = new TraceLinesGeometry(maxLen);
+    }
+    addPoint(point, color) {
+        const vert = vertex(point[0], point[1], point?.[2] || 0, color);
+        this.geometry.addVertex(vert);
+        this.vertexCache.updated();
+    }
+    // always being wireframe means that triangleOrder
+    // in in the geometry does not need to be a duplicate
+    // of wireframeOrder
+    isWireframe() {
+        return true;
+    }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    updateMatrix(_) { }
-    getBuffer(camera) {
-        if (this.needsRemap)
-            this.mapBuffer();
-        return this.obj.getBuffer(camera);
+    onDeviceChange(_) { }
+}
+export class TraceLines3d extends SimulationElement3d {
+    geometry;
+    constructor(color, maxLen) {
+        super(vector3(), vector3(), color);
+        this.geometry = new TraceLinesGeometry(maxLen);
     }
+    addPoint(point, color) {
+        const vert = vertex(point[0], point[1], point?.[2] || 0, color);
+        this.geometry.addVertex(vert);
+        this.vertexCache.updated();
+    }
+    // always being wireframe means that triangleOrder
+    // in in the geometry does not need to be a duplicate
+    // of wireframeOrder
+    isWireframe() {
+        return true;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onDeviceChange(_) { }
 }