Merge pull request #126 from gridaco/staging

March release #2

docs/css-blend-mode.md

@@ -0,0 +1,16 @@
+# CSS - Blend mode
+
+## Supported types
+
+```
+normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+```
+
+## Warning Lack of browser support on SVG element.
+
+Applying `mix-blend-mode` to SVG element is limited in some browsers (safari & mobile browsers) See - https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#browser_compatibility
+
+### References
+
+- [`mix-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode)
+- [`background-blend-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode)

docs/css-multiple-background.md

@@ -0,0 +1,60 @@
+---
+title: "CSS How to handle multiple background fills"
+version: 0.1.0
+revision: 1
+---
+
+# How to handle multiple background fills
+
+## Definition of `"multiple background fills"`
+
+- one or none active solid fill
+- one or more gradient fill above solid fill
+- one or more image fill
+
+## Possible combinations
+
+single solid fill
+
+```css
+._1 {
+  background: #fff;
+}
+._2 {
+  background-color: #fff;
+}
+```
+
+single solid fill with single gradient fill
+
+```css
+._1 {
+  background-color: #fff;
+  background-image: linear-gradient(to bottom, #fff, #fff);
+}
+
+._2 {
+  background: #fff;
+  background-image: linear-gradient(to bottom, #fff, #fff);
+}
+```
+
+no solid fill with single gradient fill
+
+```css
+._1 {
+  background: linear-gradient(to bottom, #fff, #fff);
+}
+
+._2 {
+  background-image: linear-gradient(to bottom, #fff, #fff);
+}
+```
+
+no solid fill with multiple gradient fill
+
+```css
+._1 {
+  background: linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, #fff, #fff);
+}
+```

docs/css-text-gradient.md

@@ -0,0 +1,26 @@
+---
+title: "CSS Gradient on text layer"
+version: 0.1.0
+revision: 1
+---
+
+# CSS - Gradient on Text Layer
+
+Applying a gradient to a text fill is quite different from simply giving a color to a text.
+Yet hooray CSS, it is much more simple than other platforms (flutter, android, ...)
+
+**How to**
+
+```css
+h1 {
+  font-size: 72px;
+  background: -webkit-linear-gradient(#eee, #333);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+```
+
+### References
+
+- https://cssgradient.io/blog/css-gradient-text/
+- https://github.com/gridaco/designto-code/issues/84

docs/css-text-vertical-align.md

@@ -0,0 +1,11 @@
+---
+title: "CSS Vertically align text content"
+version: 0.1.0
+revision: 1
+---
+
+# Vertical align of text content
+
+### References
+
+- https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css

docs/figma-rotation.md

@@ -12,6 +12,37 @@ revision: 1
 
 > Figma rotation from [figma plugin docs](https://www.figma.com/plugin-docs/api/properties/nodes-rotation/#docsNav)
 
+## [Note] The rotation value needs to be inverted on the client side.
+
+to rotate something to the clockwise direction,
+
+- figma: -n
+- client: +n (css)
+
+the transform origin
+
+- figma: not specified (always top left)
+- client: top left
+
+**so the conversion from figma to css will be like below**
+
+```
+# figma
+{
+  x: 100,
+  y: 100,
+  rotation: 10,
+}
+
+# css
+.rotate-n {
+  top: 100;
+  left: 100;
+  transform: rotate(-10deg);
+  transform-origin: top left;
+}
+```
+
 ## Transform?
 
 While figma and other major design tools has both transform value, and explicit rotation value (which can be calculated from transform value), The intuitive way to represent a rotation value is by using a `Rotation` token. Overall all figma node properties, the only two property that has impact to final transform (based on css) is `scale` and `rotation`.

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>
   );
 }