Skip to content

Commit

Permalink
Merge pull request #12 from Intosoft/feat/web
Browse files Browse the repository at this point in the history 
fix: current eyeframe paths
  • Loading branch information
@sakul-budhathoki
sakul-budhathoki authored Mar 3, 2024
2 parents 0119f07 + d55f6cb commit 4c7d358
Show file tree
Hide file tree
Showing 5 changed files with 160 additions and 41 deletions.
31 changes: 14 additions & 17 deletions src/eyeframes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,20 @@ import {
import { getPositionForEyes } from "./utils";
import { Config, EyeFrameShape } from "./config";

import {
generateOutlineCirclePath,
generateOutlineRoundedSquarePath,
generateOutlineSquarePath,
} from "./path/square";

interface CircleEyeFrameParams {
x: number;
y: number;
length: number;
cellSize: number;
}

export const circleEyeFramePath = ({
x,
y,
length,
cellSize,
}: CircleEyeFrameParams) => {
export const circleEyeFramePath = ({ x, y, length }: CircleEyeFrameParams) => {
const radius = length / 2;

return `M${x + radius},${y + length}h0A${radius},${radius},0,0,1,${x},${
Expand All @@ -40,15 +41,14 @@ export const circleEyeFrame = ({
const positions = getPositionForEyes({
matrixLength,
cellSize,
addition: cellSize / 2,
});

const length = cellSize * 6;
const length = cellSize * 7;

path += circleEyeFramePath({
path += generateOutlineCirclePath({
...positions.eyeFrame[position],
cellSize: cellSize,
length,
cellSize,
});

return path;
Expand Down Expand Up @@ -84,8 +84,7 @@ export const squareEyeFrame = ({
const positions = getPositionForEyes({ matrixLength, cellSize });

let path = "";
//top-left
path += squareEyeFramePath({
path += generateOutlineSquarePath({
...positions.eyeFrame[position],
length,
cellSize,
Expand Down Expand Up @@ -144,10 +143,10 @@ export const roundedEyeFrame = ({
const length = cellSize * 7;
const positions = getPositionForEyes({ matrixLength, cellSize });

return roundedEyeFramePath({
return generateOutlineRoundedSquarePath({
...positions.eyeFrame[position],
length,
cellSize,
length,
});
};
const eyeFrameFunction: {
Expand Down Expand Up @@ -179,10 +178,8 @@ const generateEyeFrameSVG = ({
return path;
}
return `<path
fill="none"
d="${path}"
stroke-width="${size / matrixLength}"
stroke="${isGradientColor(color) ? "url(#eyeFrame)" : color}"
fill="${isGradientColor(color) ? "url(#eyeFrame)" : color}"
/>`;
};
Expand Down
27 changes: 26 additions & 1 deletion src/path/circle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const generateCirclePath = ({

const cx = x + cellSize / 2;
const cy = y + cellSize / 2;
// Draw the circle

path += `M${cx},${cy} `;
path += `m-${diameter / 2},0 `;
path += `a${diameter / 2},${diameter / 2} 0 1,0 ${diameter},0 `;
Expand All @@ -28,6 +28,31 @@ export const generateCirclePath = ({
return path;
};

export const generateCircleOutlinePath = ({
x,
y,
cellSize,
diameter: _diameter,
}: {
cellSize: number;
x: number;
y: number;
diameter?: number;
}) => {
let path = "";
const diameter = _diameter || cellSize;

const cx = x + cellSize / 2;
const cy = y + cellSize / 2;

path += `M${cx + diameter / 2},${cy} `;
path += `a${diameter / 2},${diameter / 2} 0 1,0 -${diameter},0 `;
path += `a${diameter / 2},${diameter / 2} 0 1,0 ${diameter},0 `;
path += `M${cx + diameter / 2},${cy}`;

return path;
};

export const generateRoundedPath = ({
i,
j,
Expand Down
34 changes: 19 additions & 15 deletions src/path/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,16 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
const logoPathPositions = getLogoPathPositions(matrix.length);
let path = "";

matrix.forEach((row, i) => {
row.forEach((column, j) => {
for (let pos of logoPathPositions) {
if (pos[0] === i && pos[1] === j) {
matrix[i][j] = 0;
}
}
});
});

matrix.forEach((row, i) => {
row.forEach((column, j) => {
if (column) {
Expand All @@ -38,12 +48,6 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
const isYLast = i == matrix.length - 1;
const isYFirst = i == 0;

for (let pos of logoPathPositions) {
if (pos[0] === i && pos[1] === j) {
return;
}
}

for (let pos of eyeFramePositions) {
if (pos[0] === i && pos[1] === j) {
if (config.shapes.eyeFrame === "circle-item") {
Expand Down Expand Up @@ -128,15 +132,15 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
i,
j,
cellSize,
diameter: cellSize - 2,
diameter: cellSize - cellSize * 0.1,
});
} else if (config.shapes.body === "rounded-horizontal") {
if (!neighbors.left && !neighbors.right) {
path += generateCirclePath({
i,
j,
cellSize,
diameter: cellSize - 1,
diameter: cellSize - cellSize * 0.1,
});
return;
}
Expand All @@ -146,7 +150,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
i,
j,
cellSize,
height: cellSize - 1,
height: cellSize - cellSize * 0.1,
width: cellSize,
});
return;
Expand All @@ -158,7 +162,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
j,
cellSize,
roundedSide: "left",
height: cellSize - 1,
height: cellSize - cellSize * 0.1,
});
return;
}
Expand All @@ -169,7 +173,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
j,
cellSize,
roundedSide: "right",
height: cellSize - 1,
height: cellSize - cellSize * 0.1,
});
return;
}
Expand All @@ -179,7 +183,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
i,
j,
cellSize,
diameter: cellSize - 1,
diameter: cellSize - cellSize * 0.1,
});
return;
}
Expand All @@ -189,7 +193,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
i,
j,
cellSize,
width: cellSize - 1,
width: cellSize - cellSize * 0.1,
});
return;
}
Expand All @@ -200,7 +204,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
j,
cellSize,
roundedSide: "top",
width: cellSize - 1,
width: cellSize - cellSize * 0.1,
});
return;
}
Expand All @@ -211,7 +215,7 @@ export const generatePath = ({ size, matrix, config }: GeneratePathProps) => {
j,
cellSize,
roundedSide: "bottom",
width: cellSize - 1,
width: cellSize - cellSize * 0.1,
});
return;
}
Expand Down
95 changes: 95 additions & 0 deletions src/path/square.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,3 +95,98 @@ export const generateStarPath = ({

return path;
};

export const generateOutlineSquarePath = ({
x,
y,
length,
cellSize,
}: {
x: number;
y: number;
cellSize: number;
length: number;
}) => {
let path = "";

path += `M${x + length},${y + length}`;
path += `H${x}V${y}`;
path += `H${x + length}Z`;

path += `M${x + cellSize},${y + length - cellSize}`;
path += `H${x + length - cellSize}V${y + cellSize}`;
path += `H${x + cellSize}Z`;

return path;
};

export const generateOutlineRoundedSquarePath = ({
x,
y,
length,
cellSize,
}: {
x: number;
y: number;
cellSize: number;
length: number;
}) => {
const dynamic1 = length * 0.267;
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`;

path += `M${x + dynamic1},${y + cellSize}`;
path += `a${dynamic3},${dynamic3},0,0,0,-${dynamic3},${dynamic3}`;
path += `V${y + dynamic2}`;
path += `a${dynamic3},${dynamic3},0,0,0,${dynamic3},${dynamic3}`;
path += `H${x + dynamic2}`;
path += `a${dynamic3},${dynamic3},0,0,0,${dynamic3}-${dynamic3}`;
path += `V${y + dynamic1}`;
path += `a${dynamic3},${dynamic3},0,0,0,-${dynamic3}-${dynamic3}`;
path += `Z`;

return path;
};

export const generateOutlineCirclePath = ({
x,
y,
length,
cellSize,
}: {
x: number;
y: number;
cellSize: number;
length: number;
}) => {
let path = "";

const radius = length / 2;
path += `M${x + radius},${y + length}`;
path += `A${radius},${radius},0,1,1,${length + x},${
radius + y
},${radius},${radius},0,0,1,${radius + x},${length + y}`;
path += `Z`;
path += `m${0},${-(length - cellSize)}`;
path += `A${radius - cellSize},${radius - cellSize},0,1,0,${
length - cellSize + x
},${radius + y},${radius - cellSize},${radius - cellSize},0,0,0,${
radius + x
},${cellSize + y}`;
path += `Z`;

return path;
};
14 changes: 6 additions & 8 deletions src/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,11 @@ export const getPositions = ({ matrixLength, offset, count }: GetPositions) => {
interface GetEyesPositionProps {
matrixLength: number;
cellSize: number;
addition?: number;
}

export const getPositionForEyes = ({
matrixLength,
cellSize,
addition = 0,
}: GetEyesPositionProps) => {
return {
eyeball: {
Expand All @@ -122,16 +120,16 @@ export const getPositionForEyes = ({
},
eyeFrame: {
topLeft: {
x: 0 + addition,
y: 0 + addition,
x: 0,
y: 0,
},
topRight: {
x: (matrixLength - 7) * cellSize + addition,
y: 0 + addition,
x: (matrixLength - 7) * cellSize,
y: 0,
},
bottomLeft: {
x: 0 + addition,
y: (matrixLength - 7) * cellSize + addition,
x: 0,
y: (matrixLength - 7) * cellSize,
},
},
};
Expand Down

0 comments on commit 4c7d358

Please sign in to comment.