Merge pull request #959 from Masaabu/outline-shape-options

rgantzos · web-flow · commit 5d3beef7da00 · 2024-09-03T19:21:58.000-07:00
Add feature "outline-shape-options"
diff --git a/features/features.json b/features/features.json
@@ -1,4 +1,9 @@
 [
+  {
+    "version": 2,
+    "id": "outline-shape-options",
+    "versionAdded": "v4.0.0"
+  },
   {
     "version": 2,
     "id": "more-paint-functions",
diff --git a/features/outline-shape-options/data.json b/features/outline-shape-options/data.json
@@ -0,0 +1,25 @@
+{
+  "title": "Customizable Shape Outlines",
+  "description": "Adds more options in the outline dropdown to allow you to customize the shape of the outline, such as making corners round.",
+  "credits": [
+    {
+      "username": "Masaabu-YT",
+      "url": "https://scratch.mit.edu/users/Masaabu-YT/"
+    }
+  ],
+  "type": ["Editor"],
+  "tags": ["New", "Featured"],
+  "dynamic": true,
+  "scripts": [{ "file": "script.js", "runOn": "/projects/*" }],
+  "styles": [{ "file": "style.css", "runOn": "/projects/*" }],
+  "resources": [
+    { "name": "Join-miter", "path": "/resources/join-miter.svg" },
+    { "name": "Join-round", "path": "/resources/join-round.svg" },
+    { "name": "Join-bevel", "path": "/resources/join-bevel.svg" },
+    { "name": "Join-arcs", "path": "/resources/join-arcs.svg" },
+    { "name": "Join-miter-clip", "path": "/resources/join-miter-clip.svg" },
+    { "name": "Cap-butt", "path": "/resources/cap-butt.svg" },
+    { "name": "Cap-round", "path": "/resources/cap-round.svg" },
+    { "name": "Cap-square", "path": "/resources/cap-square.svg" }
+  ]
+}
diff --git a/features/outline-shape-options/resources/cap-butt.svg b/features/outline-shape-options/resources/cap-butt.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M5 10h10" stroke="#855CD6" stroke-width="7" stroke-linecap="butt" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/resources/cap-round.svg b/features/outline-shape-options/resources/cap-round.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M5 10h10" stroke="#855CD6" stroke-width="7" stroke-linecap="round" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/resources/cap-square.svg b/features/outline-shape-options/resources/cap-square.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M5 10h10" stroke="#855CD6" stroke-width="7" stroke-linecap="square" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/resources/join-arcs.svg b/features/outline-shape-options/resources/join-arcs.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M10 20v-10h10" stroke="#855CD6" stroke-width="10" stroke-linejoin="arcs" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/resources/join-bevel.svg b/features/outline-shape-options/resources/join-bevel.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M10 20v-10h10" stroke="#855CD6" stroke-width="10" stroke-linejoin="bevel" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/resources/join-miter-clip.svg b/features/outline-shape-options/resources/join-miter-clip.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M10 20v-10h10" stroke="#855CD6" stroke-width="10" stroke-linejoin="miter-clip" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/resources/join-miter.svg b/features/outline-shape-options/resources/join-miter.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M10 20v-10h10" stroke="#855CD6" stroke-width="10" stroke-linejoin="miter" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/resources/join-round.svg b/features/outline-shape-options/resources/join-round.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20">
+  <rect stroke="#000" stroke-width="1" stroke-opacity="0.15" fill="none" x="0.5" y="0.5" width="19" height="19" rx="4"/>
+	<path d="M10 20v-10h10" stroke="#855CD6" stroke-width="10" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/features/outline-shape-options/script.js b/features/outline-shape-options/script.js
@@ -0,0 +1,80 @@
+export default async function ({ feature, console }) {
+  const icons = {
+    Cap: ["butt", "round", "square"],
+    Join: ["miter", "round", "bevel", "arcs", "miter-clip"],
+  };
+
+  function createSection(type) {
+    const selectedItems = feature.traps.getPaper().project.selectedItems;
+    const result = document.createElement("div");
+    let strokeValue = undefined;
+
+    function changeItems(pos, value) {
+      for (var i in selectedItems) {
+        if (selectedItems[i][pos] !== undefined) {
+          selectedItems[i][pos] = value;
+        }
+      }
+    }
+
+    const row = document.createElement("div");
+    row.classList.add("color-picker_row-header_173LQ");
+    const labelName = document.createElement("span");
+    labelName.classList.add("color-picker_label-name_17igY");
+    labelName.textContent = `Line ${type}`;
+    const labelReadout = document.createElement("span");
+    labelReadout.classList.add("color-picker_label-readout_9vjb2");
+    if (selectedItems.length === 1) {
+      strokeValue = `${selectedItems[0][`stroke${type}`]}`;
+      labelReadout.textContent = strokeValue;
+    }
+    row.appendChild(labelName);
+    row.appendChild(labelReadout);
+
+    const content = document.createElement("div");
+    content.classList.add("color-picker_gradient-picker-row_mnu4O");
+    icons[type].forEach((iconName) => {
+      const icon = document.createElement("img");
+      icon.classList.add(`ste-outline-shape-options-${iconName}`);
+      icon.src = feature.self.getResource(`${type}-${iconName}`);
+      if (iconName !== strokeValue)
+        icon.classList.add("ste-outline-shape-options-passive");
+      icon.addEventListener("click", () => {
+        changeItems(`stroke${type}`, `${iconName}`);
+        labelReadout.textContent = iconName;
+        const elements = content.getElementsByTagName("*");
+        for (let i = 0; i < elements.length; i++) {
+          if (
+            elements[i].classList.contains(
+              `ste-outline-shape-options-${iconName}`
+            )
+          )
+            elements[i].classList.remove("ste-outline-shape-options-passive");
+          else elements[i].classList.add("ste-outline-shape-options-passive");
+        }
+      });
+      content.appendChild(icon);
+    });
+
+    result.appendChild(row);
+    result.appendChild(content);
+    feature.self.hideOnDisable(result)
+    return result;
+  }
+
+  ScratchTools.waitForElements(
+    "div[class*='color-picker_swatch-row_']",
+    function (element) {
+      if (feature.traps.paint().modals.fillColor) return;
+      if (feature.traps.getPaper().project.selectedItems.length < 1) return;
+      const dividerLine = document.createElement("div");
+      dividerLine.classList.add("color-picker_divider_3a3qR");
+      const sectionCap = createSection("Cap");
+      const sectionJoin = createSection("Join");
+
+      element.insertAdjacentElement("afterend", sectionJoin);
+      element.insertAdjacentElement("afterend", sectionCap);
+      element.insertAdjacentElement("afterend", dividerLine);
+    }
+  );
+}
diff --git a/features/outline-shape-options/style.css b/features/outline-shape-options/style.css
@@ -0,0 +1,3 @@
+.ste-outline-shape-options-passive {
+  filter: saturate(0%);
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,9 @@`
`1`	`1`	`[`
	`2`	`+ {`
	`3`	`+ "version": 2,`
	`4`	`+ "id": "outline-shape-options",`
	`5`	`+ "versionAdded": "v4.0.0"`
	`6`	`+ },`
`2`	`7`	`{`
`3`	`8`	`"version": 2,`
`4`	`9`	`"id": "more-paint-functions",`