From e4bd0050300d2597f5037e75ea3697d970e7baf7 Mon Sep 17 00:00:00 2001
From: JeremyGamer13 <69337718+JeremyGamer13@users.noreply.github.com>
Date: Tue, 21 Nov 2023 02:29:53 -0700
Subject: [PATCH] add more shapes & make shape icons easier to add
---
src/components/mode-tools/mode-tools.css | 7 ++
src/components/mode-tools/mode-tools.jsx | 60 ++++++----
src/helper/selectable-shapes.js | 136 ++++++++++++++---------
3 files changed, 126 insertions(+), 77 deletions(-)
diff --git a/src/components/mode-tools/mode-tools.css b/src/components/mode-tools/mode-tools.css
index 32293c7813..b628bde303 100644
--- a/src/components/mode-tools/mode-tools.css
+++ b/src/components/mode-tools/mode-tools.css
@@ -31,3 +31,10 @@
height: 2.85rem; /* for the second row so the dashed borders are equal in size */
align-items: center;
}
+
+.dropdown-max-item-list {
+ display: flex;
+ align-items: center;
+ width: 340px;
+ flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/src/components/mode-tools/mode-tools.jsx b/src/components/mode-tools/mode-tools.jsx
index 179d8b70c7..aa7998086a 100644
--- a/src/components/mode-tools/mode-tools.jsx
+++ b/src/components/mode-tools/mode-tools.jsx
@@ -272,31 +272,45 @@ const ModeToolsComponent = props => {
const selectedShapeObject = selectableShapes
.filter(shape => shape.id === currentlySelectedShape)[0];
const generateShapeSVG = (shapeObject) => {
- return ``
+ const strokeColor = "#575e75";
+ const icon = shapeObject.icon;
+ // extract viewbox
+ const viewBoxStart = icon.substring(icon.indexOf('viewBox="') + 9);
+ const viewBoxString = viewBoxStart
+ .substring(0, viewBoxStart.indexOf('"'));
+ // extract fill color
+ const fillColorStart = icon.substring(icon.indexOf('fill="') + 6);
+ const fillColorString = fillColorStart
+ .substring(0, fillColorStart.indexOf('"'));
+ // extract stroke width
+ const strokeWidthStart = icon.substring(icon.indexOf('stroke-width="') + 14);
+ const strokeWidthString = strokeWidthStart
+ .substring(0, strokeWidthStart.indexOf('"'));
+ // extract viewbox to array
+ const viewBox = viewBoxString
+ .replace(/ /gmi, ',')
+ .split(',')
+ .map(value => value.trim())
+ .map(num => Number(num));
+ const newViewBox = [
+ viewBox[0] - 1.5,
+ viewBox[1] - 1.5,
+ viewBox[2] + (1.5 * 2),
+ viewBox[3] + (1.5 * 2)
+ ].join(',');
+ const newIcon = icon
+ .replace(`viewBox="${viewBoxString}"`, `viewBox="${newViewBox}"`)
+ .replace('stroke="none"', `stroke="${strokeColor}"`)
+ .replace(`fill="${fillColorString}"`, 'fill="none"')
+ .replace(`stroke-width="${strokeWidthString}"`, `stroke-width="${shapeObject.strokeWidth}"`);
+ return `${newIcon}`
};
const selectableShapesList = (
-
+
{selectableShapes.map(shape => {
return (`
},
{
id: "frown",
name: "Frown",
path: selectablePaths.frown,
size: 37,
- icon: {
- x: -218.60707,
- y: -158.60707,
- width: 42.78585,
- height: 42.78585,
- viewBox: "-1,-1,44.78585,44.78585",
- strokeWidth: 3
- }
+ strokeWidth: 3,
+ icon: ``
+ },
+ {
+ id: "codeblock",
+ name: "Code Block",
+ path: selectablePaths.codeblock,
+ size: 50,
+ strokeWidth: 9,
+ icon: '',
+ },
+ {
+ id: "heart",
+ name: "Heart",
+ path: selectablePaths.heart,
+ size: 50,
+ strokeWidth: 9,
+ icon: '',
+ },
+ {
+ id: "cloud",
+ name: "Cloud",
+ path: selectablePaths.cloud,
+ size: 100,
+ strokeWidth: 11,
+ icon: '',
},
{
id: "speechBubble",
name: "Speech Bubble",
path: selectablePaths.speechBubble,
size: 50,
- icon: {
- x: -204.14153,
- y: -154.38241,
- width: 71.71694,
- height: 51.23518,
- viewBox: "-2,2,75.71694,55.23518",
- strokeWidth: 7
- }
+ strokeWidth: 5,
+ icon: ``
},
{
id: "thinkingBubble",
name: "Thinking Bubble",
path: selectablePaths.thinkingBubble,
size: 65,
- icon: {
- x: -173.625,
- y: -129.875,
- width: 132.75,
- height: 100.25,
- viewBox: "0,0,132.75,100.25",
- strokeWidth: 8
- }
+ strokeWidth: 10,
+ icon: ``
+ },
+ {
+ id: "check",
+ name: "Checkmark",
+ path: selectablePaths.check,
+ size: 50,
+ strokeWidth: 11,
+ icon: '',
+ },
+ {
+ id: "cross",
+ name: "X",
+ path: selectablePaths.cross,
+ size: 85,
+ strokeWidth: 16,
+ icon: '',
},
{
id: "sussy",
name: "Sussy",
path: selectablePaths.sussy,
size: 100,
- icon: {
- x: 0,
- y: 0,
- width: 20,
- height: 20,
- viewBox: "-36 -55 161 192",
- strokeWidth: 14
- }
+ strokeWidth: 14,
+ icon: `
+`
},
{
id: "dragon",
name: "Dragon",
path: selectablePaths.dragon,
size: 100,
- icon: {
- x: -82.87288,
- y: -3,
- width: 302.64767,
- height: 345.05044,
- viewBox: "0,0,330.64767,360.05044",
- strokeWidth: 26
- }
+ strokeWidth: 26,
+ icon: ``
},
];