Merge pull request #13 from Intosoft/feat/web

feat: new eyeball paths
Intosoft · Mar 3, 2024 · 35b39cc · 35b39cc
2 parents 4c7d358 + 30ca151
commit 35b39cc
Show file tree

Hide file tree

Showing 4 changed files with 267 additions and 1 deletion.
diff --git a/src/config.ts b/src/config.ts
@@ -4,7 +4,15 @@ export type EyeFrameShape =
   | "circle"
   | "rounded"
   | "circle-item";
-export type EyeballShape = "body" | "square" | "circle" | "circle-item";
+export type EyeballShape =
+  | "body"
+  | "square"
+  | "circle"
+  | "circle-item"
+  | "rounded"
+  | "rounded-bottom-right"
+  | "rounded-diagonal";
+
 export type BodyShape =
   | "square"
   | "square-small"

diff --git a/src/eyeball.ts b/src/eyeball.ts
@@ -1,3 +1,7 @@
+import {
+  generateRoundedCornerEyeballPath,
+  generateRoundedEyeballPath,
+} from "./path/square";
 import { Config, EyeballShape } from "./config";
 import {
   GenerateEyeballSVGParams,
@@ -79,11 +83,113 @@ export const squareEyeball = ({
   });
 };
 
+export const roundedEyeball = ({
+  matrixLength,
+  size,
+  position,
+}: StyledEyePathGeneratorParams) => {
+  const cellSize = size / matrixLength;
+
+  const length = cellSize * 3 + cellSize / 1.5;
+  const positions = {
+    topLeft: {
+      x: 1.7 * cellSize,
+      y: 1.7 * cellSize,
+    },
+    topRight: {
+      x: (matrixLength - 5.3) * cellSize,
+      y: 1.7 * cellSize,
+    },
+    bottomLeft: {
+      x: 1.7 * cellSize,
+      y: (matrixLength - 5.3) * cellSize,
+    },
+  };
+
+  return generateRoundedEyeballPath({
+    ...positions[position],
+    length,
+    cellSize,
+  });
+};
+
+export const roundedBottomRightEyeball = ({
+  matrixLength,
+  size,
+  position,
+}: StyledEyePathGeneratorParams) => {
+  const cellSize = size / matrixLength;
+
+  const length = cellSize * 3 + cellSize / 1.5;
+  const positions = {
+    topLeft: {
+      x: 1.7 * cellSize,
+      y: 1.7 * cellSize,
+    },
+    topRight: {
+      x: (matrixLength - 5.3) * cellSize,
+      y: 1.7 * cellSize,
+    },
+    bottomLeft: {
+      x: 1.7 * cellSize,
+      y: (matrixLength - 5.3) * cellSize,
+    },
+  };
+
+  const roundedCorners = {
+    topLeft: ["top-left", "top-right", "bottom-left"],
+    topRight: ["top-left", "top-right", "bottom-right"],
+    bottomLeft: ["top-left", "bottom-right", "bottom-left"],
+  };
+
+  return generateRoundedCornerEyeballPath({
+    ...positions[position],
+    length,
+    cellSize,
+    //@ts-ignore
+    roundedCorners: roundedCorners[position],
+  });
+};
+
+export const roundedDiagonalEyeball = ({
+  matrixLength,
+  size,
+  position,
+}: StyledEyePathGeneratorParams) => {
+  const cellSize = size / matrixLength;
+
+  const length = cellSize * 3 + cellSize / 1.5;
+  const positions = {
+    topLeft: {
+      x: 1.7 * cellSize,
+      y: 1.7 * cellSize,
+    },
+    topRight: {
+      x: (matrixLength - 5.3) * cellSize,
+      y: 1.7 * cellSize,
+    },
+    bottomLeft: {
+      x: 1.7 * cellSize,
+      y: (matrixLength - 5.3) * cellSize,
+    },
+  };
+
+  return generateRoundedCornerEyeballPath({
+    ...positions[position],
+    length,
+    cellSize,
+    roundedCorners: ["top-left", "bottom-right"],
+  });
+};
+
 const eyeballFunction: {
   [key in Exclude<EyeballShape, "circle-item"> as string]: Function;
 } = {
   square: squareEyeball,
   circle: circleEyeball,
+  rounded: roundedEyeball,
+  "rounded-bottom-right": roundedBottomRightEyeball,
+  "rounded-diagonal": roundedDiagonalEyeball,
 };
 
 const generateEyeballSVG = ({

diff --git a/src/path/square.ts b/src/path/square.ts
@@ -190,3 +190,152 @@ export const generateOutlineCirclePath = ({
 
   return path;
 };
+
+export const generateRoundedEyeballPath = ({
+  x,
+  y,
+  length,
+  cellSize,
+}: {
+  x: number;
+  y: number;
+  cellSize: number;
+  length: number;
+}) => {
+  const dynamic1 = length * 0.2;
+  const dynamic2 = length - dynamic1;
+  const dynamic3 = dynamic1 - cellSize;
+  let path = "";
+
+  path += `M${x + dynamic2},${y + length}`;
+  path += `H${x + dynamic1}`;
+  path += `A${dynamic1},${dynamic1},0,0,1,${x},${y + dynamic2}`;
+  path += `V${y + dynamic1}`;
+  path += `A${dynamic1},${dynamic1},0,0,1,${x + dynamic1},${y}`;
+  path += `H${x + dynamic2}`;
+  path += `A${dynamic1},${dynamic1},0,0,1,${x + length},${y + dynamic1}`;
+  path += `V${y + dynamic2}`;
+  path += `A${dynamic1},${dynamic1},0,0,1,${x + dynamic2},${y + length}`;
+  path += `Z`;
+
+  return path;
+};
+
+export const generateRoundedCornerEyeballPath = ({
+  x,
+  y,
+  length,
+  cellSize,
+  roundedCorners,
+}: {
+  x: number;
+  y: number;
+  cellSize: number;
+  length: number;
+  roundedCorners: ("top-left" | "top-right" | "bottom-left" | "bottom-right")[];
+}) => {
+  let path = "";
+
+  const dynamic1 = length * 0.2;
+  const dynamic2 = length - dynamic1;
+
+  path += `M${x},${y + length}`;
+  if (roundedCorners.includes("bottom-left")) {
+    path += `H${x + dynamic1}`;
+    path += `A${dynamic1},${dynamic1},0,0,1,${x},${y + dynamic2}`;
+  } else {
+    path += `H${x}`;
+    path += `A${0},${0},0,0,1,${x},${y}`;
+  }
+  if (roundedCorners.includes("top-left")) {
+    path += `V${y + dynamic1}`;
+    path += `A${dynamic1},${dynamic1},0,0,1,${x + dynamic1},${y}`;
+  } else {
+    path += `V${y}`;
+    path += `A${0},${0},0,0,1,${x + dynamic1},${y}`;
+  }
+
+  if (roundedCorners.includes("top-right")) {
+    path += `H${x + dynamic2}`;
+    path += `A${dynamic1},${dynamic1},0,0,1,${x + length},${y + dynamic1}`;
+  } else {
+    path += `H${x}`;
+    path += `A${0},${0},0,0,1,${x + length},${y}`;
+  }
+
+  if (roundedCorners.includes("bottom-right")) {
+    path += `V${y + length - dynamic1}`;
+    path += `A${dynamic1},${dynamic1},0,0,1,${x + dynamic2},${y + length}`;
+  } else {
+    path += `V${y + length}`;
+    path += `H${x + dynamic2}`;
+  }
+
+  path += `Z`;
+
+  return path;
+};
+
+export const generateStyle1EyeballPath = ({
+  x,
+  y,
+  length,
+  cellSize,
+  roundedCorners,
+}: {
+  x: number;
+  y: number;
+  cellSize: number;
+  length: number;
+  roundedCorners: ("top-left" | "top-right" | "bottom-left" | "bottom-right")[];
+}) => {
+  const cornerRadius = cellSize / 2;
+  let path = "";
+
+  path += `M${x},${y + cornerRadius}`;
+
+  if (roundedCorners.includes("top-left")) {
+    path += `A${cornerRadius},${cornerRadius},0,0,1,${x + cornerRadius},${y}`;
+    path += `H${x + length - cornerRadius}`;
+  } else {
+    path += `H${x + length}`;
+  }
+
+  if (!roundedCorners.includes("top-right")) {
+    path += `V${y}`;
+  }
+
+  if (roundedCorners.includes("top-right")) {
+    path += `A${cornerRadius},${cornerRadius},0,0,1,${x + length},${
+      y + cornerRadius
+    }`;
+  }
+
+  path += `V${y + length - cornerRadius}`;
+
+  if (!roundedCorners.includes("bottom-right")) {
+    path += `H${x + length}`;
+  }
+
+  if (roundedCorners.includes("bottom-right")) {
+    path += `A${cornerRadius},${cornerRadius},0,0,1,${
+      x + length - cornerRadius
+    },${y + length}`;
+  }
+
+  path += `H${x + cornerRadius}`;
+
+  if (!roundedCorners.includes("bottom-left")) {
+    path += `V${y + length}`;
+  }
+
+  if (roundedCorners.includes("bottom-left")) {
+    path += `A${cornerRadius},${cornerRadius},0,0,1,${x},${
+      y + length - cornerRadius
+    }`;
+  }
+
+  path += `Z`;
+
+  return path;
+};
diff --git a/web/src/pages/Home/config.ts b/web/src/pages/Home/config.ts
@@ -33,6 +33,9 @@ export const config: {
     ["circle", circleEyeball],
     ["circle-item", circleItemEyeball],
     ["square", squareEyeball],
+    ["rounded", squareEyeball],
+    ["rounded-bottom-right", squareEyeball],
+    ["rounded-diagonal", squareEyeball],
   ],
   eyeFrame: [
     ["rounded", roundedEyeFrame],