grid updated

Author: lee-at-zoo-corp

public/app.js

@@ -4255,6 +4255,7 @@ ${entry.message}` : entry.message
     const radialBasePositions = orderedObjectIds.map(
       (object_id) => translationFromTransforms(state.transformByObjectId[object_id] ?? [])
     );
+    const gridAnchorPosition = radialBasePositions[0] ?? { x: 0, y: 0, z: 0 };
     const radialCenter = state.explodeMode === "radial" ? radialBasePositions.reduce(
       (center, position) => ({
         x: center.x + position.x / orderedObjectIds.length,
@@ -4300,8 +4301,8 @@ ${entry.message}` : entry.message
           if (index < rowStartIndex + rowCount) {
             const column = index - rowStartIndex;
             return {
-              x: (column - (rowCount - 1) / 2) * spacing,
-              y: (row - (rows - 1) / 2) * spacing,
+              x: gridAnchorPosition.x + column * spacing,
+              y: gridAnchorPosition.y + row * spacing,
               z: 0
             };
           }

src/main.test.ts

@@ -3073,7 +3073,7 @@ describe('createApp', () => {
     })
   })
 
-  it('lays out grid explode in a centered near-square grid', async () => {
+  it('lays out grid explode from the first item in a near-square grid', async () => {
     const { storage } = createStorage()
     const execution = deferred()
     const fileHandle: FakeFileHandle = {
@@ -3230,32 +3230,14 @@ describe('createApp', () => {
       }>
     }
     expect(gridBatch.requests.map(request => ({ cmd: request.cmd }))).toEqual([
-      {
-        cmd: {
-          type: 'set_object_transform',
-          object_id: 'solid-object-1',
-          transforms: [
-            {
-              translate: {
-                property: { x: -76, y: -39.5, z: 0 },
-                set: false,
-                origin: { type: 'local' },
-              },
-              rotate_rpy: null,
-              rotate_angle_axis: null,
-              scale: null,
-            },
-          ],
-        },
-      },
       {
         cmd: {
           type: 'set_object_transform',
           object_id: 'solid-object-2',
           transforms: [
             {
               translate: {
-                property: { x: -4, y: -42.5, z: -1 },
+                property: { x: 72, y: -3, z: -1 },
                 set: false,
                 origin: { type: 'local' },
               },
@@ -3273,7 +3255,7 @@ describe('createApp', () => {
           transforms: [
             {
               translate: {
-                property: { x: 78, y: -38.5, z: -2 },
+                property: { x: 154, y: 1, z: -2 },
                 set: false,
                 origin: { type: 'local' },
               },
@@ -3291,7 +3273,7 @@ describe('createApp', () => {
           transforms: [
             {
               translate: {
-                property: { x: -37.5, y: 43.5, z: 0 },
+                property: { x: 1, y: 83, z: 0 },
                 set: false,
                 origin: { type: 'local' },
               },
@@ -3309,7 +3291,7 @@ describe('createApp', () => {
           transforms: [
             {
               translate: {
-                property: { x: 35.5, y: 38.5, z: 3 },
+                property: { x: 74, y: 78, z: 3 },
                 set: false,
                 origin: { type: 'local' },
               },

src/main.ts

@@ -2095,6 +2095,7 @@ export function createApp(root: HTMLElement, partialDeps: Partial<AppDeps> = {})
     const radialBasePositions = orderedObjectIds.map(object_id =>
       translationFromTransforms(state.transformByObjectId[object_id] ?? []),
     )
+    const gridAnchorPosition = radialBasePositions[0] ?? { x: 0, y: 0, z: 0 }
     const radialCenter =
       state.explodeMode === 'radial'
         ? radialBasePositions.reduce(
@@ -2145,8 +2146,8 @@ export function createApp(root: HTMLElement, partialDeps: Partial<AppDeps> = {})
           if (index < rowStartIndex + rowCount) {
             const column = index - rowStartIndex
             return {
-              x: (column - (rowCount - 1) / 2) * spacing,
-              y: (row - (rows - 1) / 2) * spacing,
+              x: gridAnchorPosition.x + column * spacing,
+              y: gridAnchorPosition.y + row * spacing,
               z: 0,
             }
           }