Finish shared transform pipeline cleanup across runtime, inspector, and editor preview - PR_26139_013-final-transform-pipeline-cleanup

Author: DavidQ

src/engine/collision/objectVector.js

@@ -8,10 +8,9 @@ import { isColliding } from './aabb.js';
 import { arePolygonsColliding, getPolygonBounds, isPointInPolygon } from './polygon.js';
 import { areMasksColliding, createRasterMask } from './raster.js';
 import {
+  createObjectVectorTransformPipeline,
   normalizeObjectVectorOrigin,
   normalizeObjectVectorTransform,
-  transformObjectVectorInstancePoint,
-  transformObjectVectorShapePoint,
   transformRuntimeOrientedPoints,
 } from '../rendering/OrientationTransform.js';
 
@@ -190,10 +189,6 @@ function shapeLocalPolygons(shape) {
   return [];
 }
 
-function transformInstancePoint(point, instance) {
-  return transformObjectVectorInstancePoint(point, instance, { rotationUnit: 'degrees' });
-}
-
 export function transformCollisionPoints(points, {
   x = 0,
   y = 0,
@@ -276,17 +271,23 @@ export function getObjectVectorCollisionOutlinePoints(object, options = {}) {
     const tool = shapeTool(candidate);
     return tool === 'polygon' || tool === 'polyline';
   }) || visibleEffectiveShapes(object, options).find((candidate) => shapeTool(candidate) === 'line');
-  const transform = shapeTransform(shape);
-  return shapeLocalOutlinePoints(shape).map((point) => transformObjectVectorShapePoint(point, transform, origin));
+  return createObjectVectorTransformPipeline({
+    objectOrigin: origin,
+    shapeTransform: shapeTransform(shape)
+  }).localPointsToShape(shapeLocalOutlinePoints(shape));
 }
 
 export function createObjectVectorCollisionGeometry(object, instance = {}, options = {}) {
   const origin = getObjectVectorOrigin(object);
   const polygons = visibleEffectiveShapes(object, options)
     .flatMap((shape) => {
-      const transform = shapeTransform(shape);
+      const pipeline = createObjectVectorTransformPipeline({
+        instance,
+        objectOrigin: origin,
+        shapeTransform: shapeTransform(shape)
+      });
       return shapeLocalPolygons(shape)
-        .map((polygon) => polygon.map((point) => transformInstancePoint(transformObjectVectorShapePoint(point, transform, origin), instance)))
+        .map((polygon) => pipeline.localPointsToWorld(polygon))
         .filter((polygon) => polygon.length >= 3);
     });
   const bounds = boundsFromPolygons(polygons);
@@ -298,7 +299,7 @@ export function createObjectVectorCollisionGeometry(object, instance = {}, optio
     mask: maskFromPolygons(polygons, bounds, maskCellSize),
     object,
     origin,
-    originWorld: object ? transformInstancePoint(origin, instance) : { x: 0, y: 0 },
+    originWorld: object ? createObjectVectorTransformPipeline({ instance, objectOrigin: origin }).originWorld() : { x: 0, y: 0 },
     polygons,
     shapeRotations: [...new Set(visibleEffectiveShapes(object, options).map((shape) => shapeTransform(shape).rotation))],
     transformedPoints: polygons.flat(),

src/engine/rendering/ObjectVectorRuntimeAssetService.js

@@ -1,7 +1,10 @@
 import {
   applyObjectVectorCanvasTransform,
+  combineObjectVectorBounds,
   normalizeObjectVectorOrigin,
   normalizeObjectVectorTransform,
+  objectVectorBoundsCornerPoints,
+  transformedObjectVectorShapeBounds,
   objectVectorSvgTransformAttribute
 } from "./OrientationTransform.js";
 import { createWorldScreenTransform } from "./WorldScreenTransform.js";
@@ -376,26 +379,12 @@ function objectBounds(object, frame) {
   if (!visibleShapes.length) {
     return { height: 80, width: 120, x: -60, y: -40 };
   }
-  const bounds = visibleShapes.map((shape) => {
-    const baseBounds = shapeBounds(shape);
-    const transform = shapeTransform(shape);
-    return {
-      height: Math.max(1, baseBounds.height * transform.scaleY),
-      width: Math.max(1, baseBounds.width * transform.scaleX),
-      x: baseBounds.x + transform.x,
-      y: baseBounds.y + transform.y
-    };
-  });
-  const minX = Math.min(...bounds.map((entry) => entry.x));
-  const minY = Math.min(...bounds.map((entry) => entry.y));
-  const maxX = Math.max(...bounds.map((entry) => entry.x + entry.width));
-  const maxY = Math.max(...bounds.map((entry) => entry.y + entry.height));
-  return {
-    height: Number((maxY - minY).toFixed(3)),
-    width: Number((maxX - minX).toFixed(3)),
-    x: Number(minX.toFixed(3)),
-    y: Number(minY.toFixed(3))
-  };
+  const transformOrigin = objectTransformOrigin(object);
+  return combineObjectVectorBounds(visibleShapes.map((shape) => transformedObjectVectorShapeBounds(
+    objectVectorBoundsCornerPoints(shapeBounds(shape)),
+    shapeTransform(shape),
+    transformOrigin
+  )));
 }
 
 function effectiveShapeForFrame(shape, frame, shapeIndex) {
@@ -844,13 +833,11 @@ export class ObjectVectorRuntimeAssetService {
 
   drawObjectToCanvas(context, object, frame, options = {}) {
     try {
-      const renderTransform = createWorldScreenTransform({
+      const worldScreenTransform = createWorldScreenTransform({
         worldScale: options.worldScale
-      }).objectRenderOptions(options);
+      });
       context.save();
-      context.translate(renderTransform.x, renderTransform.y);
-      context.rotate(renderTransform.rotation);
-      context.scale(renderTransform.scale, renderTransform.scale);
+      worldScreenTransform.applyObjectRenderTransform(context, options);
       let renderedShapes = 0;
       const transformOrigin = objectTransformOrigin(object);
       sortedShapes(object).forEach((shape, shapeIndex) => {

src/engine/rendering/OrientationTransform.js

@@ -1,5 +1,6 @@
 const DEGREES_PER_RADIAN = 180 / Math.PI;
 const RADIANS_PER_DEGREE = Math.PI / 180;
+const DEFAULT_OBJECT_VECTOR_BOUNDS = Object.freeze({ height: 80, width: 120, x: -60, y: -40 });
 
 function isRecord(value) {
   return Boolean(value) && typeof value === "object" && !Array.isArray(value);
@@ -89,6 +90,10 @@ export function transformObjectVectorShapePoint(point, transform = {}, origin =
   };
 }
 
+export function transformObjectVectorShapePoints(points, transform = {}, origin = {}) {
+  return (Array.isArray(points) ? points : []).map((point) => transformObjectVectorShapePoint(point, transform, origin));
+}
+
 export function inverseTransformObjectVectorShapePoint(point, transform = {}, origin = {}) {
   const resolvedTransform = normalizeObjectVectorTransform(transform);
   const resolvedOrigin = normalizeObjectVectorOrigin(origin);
@@ -115,6 +120,10 @@ export function transformObjectVectorInstancePoint(point, instance = {}, options
   });
 }
 
+export function transformObjectVectorInstancePoints(points, instance = {}, options = {}) {
+  return (Array.isArray(points) ? points : []).map((point) => transformObjectVectorInstancePoint(point, instance, options));
+}
+
 export function transformRuntimeOrientedPoint(point, {
   rotation = 0,
   rotationUnit = "radians",
@@ -137,6 +146,100 @@ export function transformRuntimeOrientedPoints(points, options = {}) {
   return (Array.isArray(points) ? points : []).map((point) => transformRuntimeOrientedPoint(point, options));
 }
 
+export function objectVectorBoundsCornerPoints(bounds = {}) {
+  const x = numberValue(bounds.x);
+  const y = numberValue(bounds.y);
+  const width = numberValue(bounds.width, 1);
+  const height = numberValue(bounds.height, 1);
+  return [
+    { x, y },
+    { x: x + width, y },
+    { x: x + width, y: y + height },
+    { x, y: y + height }
+  ];
+}
+
+export function boundsFromObjectVectorPoints(points, fallback = DEFAULT_OBJECT_VECTOR_BOUNDS) {
+  const normalizedPoints = (Array.isArray(points) ? points : [])
+    .map((point) => ({ x: Number(point?.x), y: Number(point?.y) }))
+    .filter((point) => Number.isFinite(point.x) && Number.isFinite(point.y));
+  if (!normalizedPoints.length) {
+    return { ...fallback };
+  }
+  const xValues = normalizedPoints.map((point) => point.x);
+  const yValues = normalizedPoints.map((point) => point.y);
+  const minX = Math.min(...xValues);
+  const minY = Math.min(...yValues);
+  const maxX = Math.max(...xValues);
+  const maxY = Math.max(...yValues);
+  const width = Math.max(1, maxX - minX);
+  const height = Math.max(1, maxY - minY);
+  return {
+    height: Number(height.toFixed(3)),
+    originX: Number((minX + width / 2).toFixed(3)),
+    originY: Number((minY + height / 2).toFixed(3)),
+    width: Number(width.toFixed(3)),
+    x: Number(minX.toFixed(3)),
+    y: Number(minY.toFixed(3))
+  };
+}
+
+export function transformedObjectVectorShapeBounds(points, transform = {}, origin = {}) {
+  return boundsFromObjectVectorPoints(transformObjectVectorShapePoints(points, transform, origin));
+}
+
+export function combineObjectVectorBounds(boundsList, fallback = DEFAULT_OBJECT_VECTOR_BOUNDS) {
+  const points = (Array.isArray(boundsList) ? boundsList : []).flatMap((bounds) => objectVectorBoundsCornerPoints(bounds));
+  return boundsFromObjectVectorPoints(points, fallback);
+}
+
+export function createObjectVectorTransformPipeline({
+  instance = {},
+  objectOrigin = {},
+  screenTransform = null,
+  shapeTransform = {}
+} = {}) {
+  const origin = normalizeObjectVectorOrigin(objectOrigin);
+  const transform = normalizeObjectVectorTransform(shapeTransform);
+  const localPointToShape = (point) => transformObjectVectorShapePoint(point, transform, origin);
+  const localPointsToShape = (points) => transformObjectVectorShapePoints(points, transform, origin);
+  const shapePointToWorld = (point) => transformObjectVectorInstancePoint(point, instance);
+  const shapePointsToWorld = (points) => transformObjectVectorInstancePoints(points, instance);
+  const worldPointToViewport = (point) => (
+    typeof screenTransform?.worldPointToViewportPoint === "function"
+      ? screenTransform.worldPointToViewportPoint(point)
+      : point
+  );
+  const localPointToWorld = (point) => shapePointToWorld(localPointToShape(point));
+  const localPointsToWorld = (points) => shapePointsToWorld(localPointsToShape(points));
+  const localPointToViewport = (point) => worldPointToViewport(localPointToWorld(point));
+  const localPointsToViewport = (points) => localPointsToWorld(points).map((point) => worldPointToViewport(point));
+  const originWorld = () => shapePointToWorld(origin);
+  const originViewport = () => worldPointToViewport(originWorld());
+
+  return Object.freeze({
+    localPointToShape,
+    localPointToViewport,
+    localPointToWorld,
+    localPointsToShape,
+    localPointsToViewport,
+    localPointsToWorld,
+    origin,
+    originViewport,
+    originWorld,
+    shapeBounds(points) {
+      return transformedObjectVectorShapeBounds(points, transform, origin);
+    },
+    shapeTransform: transform,
+    viewportBounds(points) {
+      return boundsFromObjectVectorPoints(localPointsToViewport(points));
+    },
+    worldBounds(points) {
+      return boundsFromObjectVectorPoints(localPointsToWorld(points));
+    }
+  });
+}
+
 export function objectVectorSvgTransformAttribute(transform = {}, origin = {}) {
   const resolvedTransform = normalizeObjectVectorTransform(transform);
   const resolvedOrigin = normalizeObjectVectorOrigin(origin);

src/engine/rendering/WorldScreenTransform.js

@@ -55,6 +55,16 @@ export function createWorldScreenTransform({
       }
       context.scale(resolvedWorldScale, resolvedWorldScale);
     },
+    applyViewportTransform(context) {
+      this.applyUserZoom(context);
+      this.applyWorldToScreen(context);
+    },
+    applyObjectRenderTransform(context, options = {}) {
+      const renderOptions = this.objectRenderOptions(options);
+      context.translate(renderOptions.x, renderOptions.y);
+      context.rotate(renderOptions.rotation);
+      context.scale(renderOptions.scale, renderOptions.scale);
+    },
     clientPointToScreenPoint(event, rect) {
       const rectWidth = positiveScale(rect?.width);
       const rectHeight = positiveScale(rect?.height);
@@ -64,18 +74,38 @@ export function createWorldScreenTransform({
       };
     },
     objectRenderOptions(options = {}) {
+      const screenPoint = this.worldPointToScreenPoint({ x: options.x, y: options.y });
       return {
         rotation: rotationRadians(options.rotation || 0, options.rotationUnit || "radians"),
         scale: (Number.isFinite(options.scale) ? options.scale : 1) * resolvedWorldScale,
-        x: (options.x || 0) * resolvedWorldScale,
-        y: (options.y || 0) * resolvedWorldScale
+        x: screenPoint.x,
+        y: screenPoint.y
+      };
+    },
+    screenPointToWorldPoint(point) {
+      return {
+        x: finiteNumber(point?.x) / resolvedWorldScale,
+        y: finiteNumber(point?.y) / resolvedWorldScale
       };
     },
     screenPointToWorldWithUserZoom(point) {
       return {
         x: ((finiteNumber(point?.x) - center.x) / resolvedUserZoom + center.x) / resolvedWorldScale,
         y: ((finiteNumber(point?.y) - center.y) / resolvedUserZoom + center.y) / resolvedWorldScale
       };
+    },
+    worldPointToScreenPoint(point) {
+      return {
+        x: finiteNumber(point?.x) * resolvedWorldScale,
+        y: finiteNumber(point?.y) * resolvedWorldScale
+      };
+    },
+    worldPointToViewportPoint(point) {
+      const screenPoint = this.worldPointToScreenPoint(point);
+      return {
+        x: (screenPoint.x - center.x) * resolvedUserZoom + center.x,
+        y: (screenPoint.y - center.y) * resolvedUserZoom + center.y
+      };
     }
   });
 }

src/engine/rendering/index.js

@@ -12,17 +12,24 @@ export { renderByLayers } from './LayeredRenderSystem.js';
 export { transformPoints, drawVectorShape } from './VectorDrawing.js';
 export {
   applyObjectVectorCanvasTransform,
+  boundsFromObjectVectorPoints,
+  combineObjectVectorBounds,
+  createObjectVectorTransformPipeline,
   headingPointFromRotation,
   inverseTransformObjectVectorShapePoint,
   normalizeObjectVectorOrigin,
   normalizeObjectVectorTransform,
   normalizeRotationDegrees,
+  objectVectorBoundsCornerPoints,
   objectVectorSvgTransformAttribute,
   rotatePointAround,
   rotationDegrees,
   rotationRadians,
+  transformedObjectVectorShapeBounds,
   transformObjectVectorInstancePoint,
+  transformObjectVectorInstancePoints,
   transformObjectVectorShapePoint,
+  transformObjectVectorShapePoints,
   transformRuntimeOrientedPoint,
   transformRuntimeOrientedPoints
 } from './OrientationTransform.js';