Binding highlight rotation support + image support

packages/element/src/shape.ts

@@ -119,20 +119,21 @@ export class ShapeCache {
       embedsValidationStatus: EmbedsValidationStatus;
     },
   ) => {
-    const shape = generateElementShape(
-      element,
-      ShapeCache.rg,
-      renderConfig || {
-        isExporting: false,
-        canvasBackgroundColor: COLOR_PALETTE.white,
-        embedsValidationStatus: null,
-      },
-    ) as Drawable;
+    let shape =
+      (ShapeCache.get(element) as Drawable | null) ||
+      (ShapeCache.rg.rectangle(0, 0, element.width, element.height, {
+        roughness: 0,
+        strokeWidth: 2,
+      }) as Drawable);
+
+    // Clone the shape from the cache
+    shape = {
+      ...shape,
+    };
 
     shape.options.fill = "transparent";
     shape.options.stroke =
       appState.theme === THEME.DARK ? "#035da1" : "#6abdfc";
-    shape.options.strokeWidth = shape.options.strokeWidth * 1.1;
 
     return shape;
   };

packages/excalidraw/renderer/interactiveScene.ts

@@ -254,12 +254,22 @@ const renderBindingHighlight = (
   appState: InteractiveCanvasAppState,
   suggestedBinding: NonNullable<InteractiveCanvasAppState["suggestedBinding"]>,
 ) => {
+  const cx =
+    (suggestedBinding.x + suggestedBinding.width / 2 + appState.scrollX) *
+    window.devicePixelRatio;
+  const cy =
+    (suggestedBinding.y + suggestedBinding.height / 2 + appState.scrollY) *
+    window.devicePixelRatio;
   context.save();
 
+  context.translate(cx, cy);
+  context.rotate(suggestedBinding.angle);
+  context.translate(-cx, -cy);
   context.translate(
     appState.scrollX + suggestedBinding.x,
     appState.scrollY + suggestedBinding.y,
   );
+  context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
 
   const drawable = ShapeCache.generateBindableElementHighlight(
     suggestedBinding,