feat: complete TASK-WP4-04 color and dynamic stickers

apps/web/src/editor-elements.ts

@@ -1,5 +1,8 @@
 import { isCanvasState, type CanvasState } from "@dada/shared-contracts";
 
+import { DYNAMIC_RENDER_MODELS } from "./dynamic-render-models.js";
+import type { DynamicTemplateId } from "./dynamic-provider.js";
+
 type CanvasElement = CanvasState["elements"][number];
 
 export interface CanvasPoint {
@@ -45,6 +48,22 @@ function textLineUnits(line: string) {
 }
 
 export function elementHalfExtents(state: CanvasState, element: CanvasElement): CanvasPoint {
+  if (element.type === "color_card") {
+    const vertical = element.style_id === "style_01" || element.style_id === "style_02";
+    return {
+      x: Math.max(hitHalfExtent, (vertical ? 62 : 175) / state.pixel_width) * element.scale.x,
+      y: Math.max(hitHalfExtent, (vertical ? 155 : 50) / state.pixel_height) * element.scale.y,
+    };
+  }
+  if (element.type === "dynamic_sticker") {
+    const model = DYNAMIC_RENDER_MODELS[element.template_or_asset_id as DynamicTemplateId];
+    const halfWidth = model?.halfSize.width ?? 170;
+    const halfHeight = model?.halfSize.height ?? 62;
+    return {
+      x: Math.max(hitHalfExtent, halfWidth / state.pixel_width) * element.scale.x,
+      y: Math.max(hitHalfExtent, halfHeight / state.pixel_height) * element.scale.y,
+    };
+  }
   if (element.type !== "text_template") {
     return { x: hitHalfExtent * element.scale.x, y: hitHalfExtent * element.scale.y };
   }