fix: Rect and Cuboid tool did not correctly position the geometry on creation.

Author: phtaylor

src/Tools/CreateTools/Change/CreateCuboidChange.ts

@@ -47,10 +47,8 @@ class CreateCuboidChange extends CreateGeomChange {
       this.cuboid.sizeXParam.value = updateData.baseSize[0]
       this.cuboid.sizeYParam.value = updateData.baseSize[1]
     }
-    if (updateData.tr) {
-      const xfo = this.geomItem.localXfoParam.value
-      xfo.tr.fromJSON(updateData.tr)
-      this.geomItem.localXfoParam.value = xfo
+    if (updateData.xfo) {
+      this.geomItem.globalXfoParam.value = updateData.xfo
     }
     if (updateData.height) {
       this.cuboid.sizeZParam.value = updateData.height

src/Tools/CreateTools/Change/CreateRectChange.ts

@@ -30,8 +30,11 @@ class CreateRectChange extends CreateGeomChange {
     this.rect = new Rect(0, 0)
     const material = new LinesMaterial('circle')
     material.baseColorParam.value = this.color
-    this.geomItem = new CustomGeom('Rect', this.rect, material)
+    this.geomItem = new CustomGeom('Rect', this.rect, material, this.xfo)
     this.geomItem.pickableParam.value = false // At the conclusion of creation, we set selectable to true.
+    if (this.parentItem) {
+      this.parentItem.addChild(this.geomItem)
+    }
   }
 
   /**
@@ -40,18 +43,28 @@ class CreateRectChange extends CreateGeomChange {
    * @param updateData - The updateData param.
    */
   update(updateData: Record<any, any>): void {
-    if (updateData.baseSize) {
-      this.rect.sizeXParam.value = updateData.baseSize[0]
-      this.rect.sizeYParam.value = updateData.baseSize[1]
+    if (updateData.size) {
+      this.rect.sizeXParam.value = updateData.size[0]
+      this.rect.sizeYParam.value = updateData.size[1]
     }
-    if (updateData.tr) {
-      const xfo = this.geomItem.localXfoParam.value
-      xfo.tr.fromJSON(updateData.tr)
-      this.geomItem.localXfoParam.value = xfo
+    if (updateData.xfo) {
+      this.geomItem.globalXfoParam.value = updateData.xfo
     }
 
     this.emit('updated', updateData)
   }
+
+  /**
+   * Serializes change as a JSON object.
+   *
+   * @return - The return value.
+   */
+  toJSON(): Record<any, any> {
+    const j: Record<any, any> = super.toJSON()
+    j.size = [this.rect.sizeXParam.value, this.rect.sizeYParam.value]
+    j.xfo = this.geomItem.globalXfoParam.value.toJSON()
+    return j
+  }
 }
 
 UndoRedoManager.registerChange('CreateRectChange', CreateRectChange)

src/Tools/CreateTools/CreateCuboidTool.ts

@@ -55,10 +55,12 @@ class CreateCuboidTool extends CreateGeomTool {
     if (this.stage == 1) {
       const delta = this.invXfo.transformVec3(pt)
 
-      // const delta = pt.subtract(this.xfo.tr)
+      const xfo = this.xfo.clone()
+      xfo.tr.addInPlace(xfo.ori.rotateVec3(delta.scale(0.5)))
+
       this.change.update({
         baseSize: [Math.abs(delta.x), Math.abs(delta.y)],
-        tr: this.xfo.tr.add(delta.scale(0.5)),
+        xfo,
       })
     } else {
       const vec = this.invXfo.transformVec3(pt)

src/Tools/CreateTools/CreateRectTool.ts

@@ -54,11 +54,12 @@ class CreateRectTool extends CreateGeomTool {
       const delta = this.invXfo.transformVec3(pt)
 
       this.size = Math.min(Math.abs(delta.x), Math.abs(delta.y))
+      const xfo = this.xfo.clone()
+      xfo.tr.addInPlace(xfo.ori.rotateVec3(delta.scale(0.5)))
 
-      // const delta = pt.subtract(this.xfo.tr)
       this.change.update({
-        baseSize: [Math.abs(delta.x), Math.abs(delta.y)],
-        tr: this.xfo.tr.add(this.xfo.ori.rotateVec3(delta.scale(0.5))),
+        size: [Math.abs(delta.x), Math.abs(delta.y)],
+        xfo,
       })
     }
   }

testing-e2e/create-tool.html

@@ -81,7 +81,7 @@
       const $canvas = document.getElementById('renderer')
 
       const scene = new Scene()
-      scene.setupGrid(100, 100)
+      scene.setupGrid(10, 10)
 
       const renderer = new GLRenderer($canvas, {
         enableFrustumCulling: false,