From 7eb6cc3330c0ecf9214e9a2d3f31481fa8d670a3 Mon Sep 17 00:00:00 2001 From: Masaabu Date: Tue, 3 Sep 2024 13:36:38 +0900 Subject: [PATCH 1/3] outline-shape-options --- features/features.json | 5 ++ features/outline-shape-options/data.json | 25 ++++++ .../resources/cap-butt.svg | 4 + .../resources/cap-round.svg | 4 + .../resources/cap-square.svg | 4 + .../resources/join-arcs.svg | 4 + .../resources/join-bevel.svg | 4 + .../resources/join-miter-clip.svg | 4 + .../resources/join-miter.svg | 4 + .../resources/join-round.svg | 4 + features/outline-shape-options/script.js | 80 +++++++++++++++++++ features/outline-shape-options/style.css | 3 + 12 files changed, 145 insertions(+) create mode 100644 features/outline-shape-options/data.json create mode 100644 features/outline-shape-options/resources/cap-butt.svg create mode 100644 features/outline-shape-options/resources/cap-round.svg create mode 100644 features/outline-shape-options/resources/cap-square.svg create mode 100644 features/outline-shape-options/resources/join-arcs.svg create mode 100644 features/outline-shape-options/resources/join-bevel.svg create mode 100644 features/outline-shape-options/resources/join-miter-clip.svg create mode 100644 features/outline-shape-options/resources/join-miter.svg create mode 100644 features/outline-shape-options/resources/join-round.svg create mode 100644 features/outline-shape-options/script.js create mode 100644 features/outline-shape-options/style.css diff --git a/features/features.json b/features/features.json index 9588ccbe..caa770ce 100644 --- 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 new file mode 100644 index 00000000..250698ba --- /dev/null +++ b/features/outline-shape-options/data.json @@ -0,0 +1,25 @@ +{ + "title": "Outline Shape Options", + "description": "Change the shape of the corners of the object's outline in the Paint Editor..", + "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 new file mode 100644 index 00000000..65b4c0e8 --- /dev/null +++ b/features/outline-shape-options/resources/cap-butt.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/resources/cap-round.svg b/features/outline-shape-options/resources/cap-round.svg new file mode 100644 index 00000000..1b0cf28d --- /dev/null +++ b/features/outline-shape-options/resources/cap-round.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/resources/cap-square.svg b/features/outline-shape-options/resources/cap-square.svg new file mode 100644 index 00000000..c5d67c40 --- /dev/null +++ b/features/outline-shape-options/resources/cap-square.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/resources/join-arcs.svg b/features/outline-shape-options/resources/join-arcs.svg new file mode 100644 index 00000000..65452e9d --- /dev/null +++ b/features/outline-shape-options/resources/join-arcs.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/resources/join-bevel.svg b/features/outline-shape-options/resources/join-bevel.svg new file mode 100644 index 00000000..e6886775 --- /dev/null +++ b/features/outline-shape-options/resources/join-bevel.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/resources/join-miter-clip.svg b/features/outline-shape-options/resources/join-miter-clip.svg new file mode 100644 index 00000000..6004671c --- /dev/null +++ b/features/outline-shape-options/resources/join-miter-clip.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/resources/join-miter.svg b/features/outline-shape-options/resources/join-miter.svg new file mode 100644 index 00000000..710ba8f2 --- /dev/null +++ b/features/outline-shape-options/resources/join-miter.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/resources/join-round.svg b/features/outline-shape-options/resources/join-round.svg new file mode 100644 index 00000000..707fb425 --- /dev/null +++ b/features/outline-shape-options/resources/join-round.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/features/outline-shape-options/script.js b/features/outline-shape-options/script.js new file mode 100644 index 00000000..13995099 --- /dev/null +++ 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 Date: Tue, 3 Sep 2024 13:39:23 +0900 Subject: [PATCH 2/3] outline-shape-options --- features/outline-shape-options/data.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/outline-shape-options/data.json b/features/outline-shape-options/data.json index 250698ba..b467132a 100644 --- a/features/outline-shape-options/data.json +++ b/features/outline-shape-options/data.json @@ -1,6 +1,6 @@ { "title": "Outline Shape Options", - "description": "Change the shape of the corners of the object's outline in the Paint Editor..", + "description": "Change the shape of the corners of the object's outline in the Paint Editor.", "credits": [ { "username": "Masaabu-YT", From 75f7a36a600e6e6fe5698f48937c89e3fc237e7c Mon Sep 17 00:00:00 2001 From: rgantzos <86856959+rgantzos@users.noreply.github.com> Date: Tue, 3 Sep 2024 19:15:26 -0700 Subject: [PATCH 3/3] A few small changes --- features/outline-shape-options/data.json | 4 +- features/outline-shape-options/script.js | 84 ++++++++++++------------ 2 files changed, 44 insertions(+), 44 deletions(-) diff --git a/features/outline-shape-options/data.json b/features/outline-shape-options/data.json index b467132a..a7606f33 100644 --- a/features/outline-shape-options/data.json +++ b/features/outline-shape-options/data.json @@ -1,6 +1,6 @@ { - "title": "Outline Shape Options", - "description": "Change the shape of the corners of the object's outline in the Paint Editor.", + "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", diff --git a/features/outline-shape-options/script.js b/features/outline-shape-options/script.js index 13995099..f6bcae54 100644 --- a/features/outline-shape-options/script.js +++ b/features/outline-shape-options/script.js @@ -1,18 +1,8 @@ export default async function ({ feature, console }) { const icons = { - Cap: [ - "butt", - "round", - "square" - ], - Join: [ - "miter", - "round", - "bevel", - "arcs", - "miter-clip" - ] - } + Cap: ["butt", "round", "square"], + Join: ["miter", "round", "bevel", "arcs", "miter-clip"], + }; function createSection(type) { const selectedItems = feature.traps.getPaper().project.selectedItems; @@ -21,19 +11,19 @@ export default async function ({ feature, console }) { function changeItems(pos, value) { for (var i in selectedItems) { - if (selectedItems[i][pos]!==undefined) { + if (selectedItems[i][pos] !== undefined) { selectedItems[i][pos] = value; } } } const row = document.createElement("div"); - row.classList.add('color-picker_row-header_173LQ') + 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}`; + 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') + labelReadout.classList.add("color-picker_label-readout_9vjb2"); if (selectedItems.length === 1) { strokeValue = `${selectedItems[0][`stroke${type}`]}`; labelReadout.textContent = strokeValue; @@ -41,40 +31,50 @@ export default async function ({ feature, console }) { 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 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.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"); + 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