cleaning

Author: softmarshmallow

editor-packages/editor-canvas/canvas/canvas.tsx

@@ -320,6 +320,7 @@ export function Canvas({
                 ).map((h) => ({
                   id: h.id,
                   xywh: [h.absoluteX, h.absoluteY, h.width, h.height],
+                  rotation: h.rotation,
                 }))
               : []
           }

editor-packages/editor-canvas/canvas/hud-surface.tsx

@@ -22,6 +22,7 @@ export interface DisplayNodeMeta {
   absoluteY: number;
   width: number;
   height: number;
+  rotation: number;
 }
 
 export function HudSurface({
@@ -41,7 +42,7 @@ export function HudSurface({
 }: {
   offset: XY;
   zoom: number;
-  highlights: { id: string; xywh: XYWH }[];
+  highlights: { id: string; xywh: XYWH; rotation: number }[];
   labelDisplayNodes: DisplayNodeMeta[];
   selectedNodes: DisplayNodeMeta[];
   hide: boolean;
@@ -102,6 +103,7 @@ export function HudSurface({
                   key={h.id}
                   type="xywhr"
                   xywh={h.xywh}
+                  rotation={h.rotation}
                   zoom={zoom}
                   width={2}
                 />
@@ -121,6 +123,7 @@ export function HudSurface({
                     key={s.id}
                     type="xywhr"
                     xywh={xywh}
+                    rotation={s.rotation}
                     zoom={zoom}
                     width={1}
                   />

editor-packages/editor-canvas/overlay/hover-outline-hightlight.tsx

@@ -2,46 +2,27 @@ import React from "react";
 import { color_layer_highlight } from "../theme";
 import { get_boinding_box } from "./math";
 import { OulineSide } from "./outline-side";
+import { OverlayContainer } from "./overlay-container";
 import type { OutlineProps } from "./types";
 
 export function HoverOutlineHighlight({ width = 1, ...props }: OutlineProps) {
-  const { xywh, zoom } = props;
+  const { xywh, zoom, rotation } = props;
   const bbox = get_boinding_box({ xywh, scale: zoom });
   const wh: [number, number] = [xywh[2], xywh[3]];
+  const vprops = {
+    wh: wh,
+    zoom: props.zoom,
+    width: width,
+    box: bbox,
+    color: color_layer_highlight,
+  };
+
   return (
-    <>
-      <OulineSide
-        orientation="l"
-        wh={wh}
-        zoom={props.zoom}
-        width={width}
-        box={bbox}
-        color={color_layer_highlight}
-      />
-      <OulineSide
-        orientation="t"
-        wh={wh}
-        zoom={props.zoom}
-        width={width}
-        box={bbox}
-        color={color_layer_highlight}
-      />
-      <OulineSide
-        orientation="b"
-        wh={wh}
-        zoom={props.zoom}
-        width={width}
-        box={bbox}
-        color={color_layer_highlight}
-      />
-      <OulineSide
-        orientation="r"
-        wh={wh}
-        zoom={props.zoom}
-        width={width}
-        box={bbox}
-        color={color_layer_highlight}
-      />
-    </>
+    <OverlayContainer xywh={bbox} rotation={rotation}>
+      <OulineSide orientation="l" {...vprops} />
+      <OulineSide orientation="t" {...vprops} />
+      <OulineSide orientation="b" {...vprops} />
+      <OulineSide orientation="r" {...vprops} />
+    </OverlayContainer>
   );
 }

editor-packages/editor-canvas/overlay/math.ts

@@ -6,6 +6,8 @@ export function get_boinding_box({
   scale: number;
 }): [number, number, number, number] {
   const [x, y, w, h] = xywh;
+
+  // return the bounding box in [number, number, number, number] form with givven x, y, w, h, rotation and scale.
   const [x1, y1, x2, y2] = [
     x * scale,
     y * scale,

editor-packages/editor-canvas/overlay/overlay-container.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+/**
+ * @default - TODO: rotation not supported
+ * @returns
+ */
+export function OverlayContainer({
+  xywh,
+  rotation = 0,
+  children,
+}: {
+  xywh: [number, number, number, number];
+  rotation: number;
+  children: React.ReactNode;
+}) {
+  // const [x, y, w, h] = xywh;
+  return (
+    <div
+      id="overlay-container"
+      style={{
+        pointerEvents: "none",
+        willChange: "transform, opacity",
+        // transformOrigin: `${x}px ${y}px`,
+        // transform: `rotate(${-rotation}deg)`,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

editor-packages/editor-canvas/overlay/readonly-select-hightlight.tsx

@@ -3,25 +3,30 @@ import type { OutlineProps } from "./types";
 import { color_layer_readonly_highlight } from "../theme";
 import { get_boinding_box } from "./math";
 import { OulineSide } from "./outline-side";
+import { OverlayContainer } from "./overlay-container";
 
 export function ReadonlySelectHightlight({
   width = 1,
   ...props
 }: OutlineProps) {
-  const { xywh, zoom } = props;
+  const { xywh, zoom, rotation } = props;
   const bbox = get_boinding_box({ xywh, scale: zoom });
   const wh: [number, number] = [xywh[2], xywh[3]];
 
   const handle_outline_width = width;
   const handle_size = 3;
   const dot_size = 4;
 
+  const sideprops = {
+    wh: wh,
+    zoom: props.zoom,
+    width: width,
+    box: bbox,
+    color: color_layer_readonly_highlight,
+  };
+
   return (
-    <div
-      style={{
-        pointerEvents: "none",
-      }}
-    >
+    <OverlayContainer xywh={bbox} rotation={rotation}>
       <>
         <ReadonlyHandle
           box={bbox}
@@ -83,40 +88,12 @@ export function ReadonlySelectHightlight({
         />
       </>
       <>
-        <OulineSide
-          orientation="l"
-          wh={wh}
-          zoom={props.zoom}
-          width={width}
-          box={bbox}
-          color={color_layer_readonly_highlight}
-        />
-        <OulineSide
-          orientation="t"
-          wh={wh}
-          zoom={props.zoom}
-          width={width}
-          box={bbox}
-          color={color_layer_readonly_highlight}
-        />
-        <OulineSide
-          orientation="b"
-          wh={wh}
-          zoom={props.zoom}
-          width={width}
-          box={bbox}
-          color={color_layer_readonly_highlight}
-        />
-        <OulineSide
-          orientation="r"
-          wh={wh}
-          zoom={props.zoom}
-          width={width}
-          box={bbox}
-          color={color_layer_readonly_highlight}
-        />
+        <OulineSide orientation="l" {...sideprops} />
+        <OulineSide orientation="t" {...sideprops} />
+        <OulineSide orientation="b" {...sideprops} />
+        <OulineSide orientation="r" {...sideprops} />
       </>
-    </div>
+    </OverlayContainer>
   );
 }
 

packages/builder-web-core/widgets-native/html-svg/index.ts

@@ -202,10 +202,12 @@ export class SvgElement extends StylableJsxWidget {
 
   // @override
   get finalStyle() {
+    const super_finalStyle = super.finalStyle;
     return {
-      ...super.finalStyle,
+      ...super_finalStyle,
       // TODO: this is a hot fix of svg & path's constraint handling
       // width & height for the svg must be preserved. (it wont' follow the constraints anyway.)
+      // it can also be 100%
       width: css.length(this.width),
       height: css.length(this.height),
     };

packages/designto-web/tokens-to-web-widget/compose-wrapped-with-rotation.ts

@@ -18,6 +18,7 @@ export function compose_wrapped_with_rotation(
     // rotation data needs to be inverted
     transform: css.rotation(-widget.rotation),
     // this is where the figma's rotation data is originated from.
+    // see docs/figma-rotation.md
     "transform-origin": "top left",
   });
   return child;