feat: add fixed fontSize for layer by specifying prop with "px" suffix

enijar · Jul 21, 2023 · fbb18fc · fbb18fc
1 parent 8514f9e
commit fbb18fc
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/examples/components/button.tsx b/examples/components/button.tsx
@@ -5,7 +5,7 @@ type Props = {
   textContent: string;
   selected: boolean;
   onClick: () => void;
-  fontSize: number;
+  fontSize: number | `${number}px`;
   width: number;
   height: number;
   fontFamily?: string;

diff --git a/examples/examples/typography.tsx b/examples/examples/typography.tsx
@@ -63,14 +63,31 @@ export default function Typography() {
           />
         </Layer>
         <Layer
+          position-x={-0.55}
           width={1}
           height={1}
           borderWidth={0.025}
           borderColor="#222222"
           borderRadius={0.05}
           backgroundColor="#444444"
           fontFamily={fontFamily}
-          textContent={`This is a test with some long text...`}
+          fontSize={0.1}
+          textContent={`This font will scale to 10% the size of the smallest dimension of this layer`}
+          textAlign="center"
+          verticalAlign="middle"
+          color="crimson"
+        />
+        <Layer
+          position-x={0.55}
+          width={1}
+          height={1}
+          borderWidth={0.025}
+          borderColor="#222222"
+          borderRadius={0.05}
+          backgroundColor="#444444"
+          fontFamily={fontFamily}
+          fontSize="50px"
+          textContent={`This font is fixed to 50px`}
           textAlign="center"
           verticalAlign="middle"
           color="crimson"

diff --git a/src/components/layer.tsx b/src/components/layer.tsx
@@ -58,7 +58,7 @@ function Layer(
     verticalAlign = "top",
     color = "white",
     fontFamily,
-    fontSize = 0.1,
+    fontSize = "16px",
     fontWeight = "normal",
     lineHeight = null,
     childIndex,
@@ -453,7 +453,17 @@ function Layer(
       // Typography
       if (textContent !== undefined) {
         canvasTxt.font = font;
-        canvasTxt.fontSize = fontSize * Math.min(w, h);
+        let actualFontSize = 0;
+        if (typeof fontSize === "string") {
+          let px = parseFloat(fontSize);
+          if (isNaN(px)) {
+            px = 16;
+          }
+          actualFontSize = px;
+        } else {
+          actualFontSize = fontSize * Math.min(w, h);
+        }
+        canvasTxt.fontSize = actualFontSize;
         canvasTxt.lineHeight = lineHeight * canvasTxt.fontSize;
         canvasTxt.align = textAlign;
         canvasTxt.vAlign = verticalAlign;

diff --git a/src/types.ts b/src/types.ts
@@ -69,7 +69,7 @@ export type LayerProps = GroupProps & {
   verticalAlign?: typeof vAlign;
   color?: string;
   fontFamily?: string;
-  fontSize?: number;
+  fontSize?: number | `${number}px`;
   fontWeight?: string;
   lineHeight?: number;
   childIndex?: number;