diff --git a/features/paint-align/data.json b/features/paint-align/data.json index dcfcfeff..130a056c 100644 --- a/features/paint-align/data.json +++ b/features/paint-align/data.json @@ -9,5 +9,9 @@ "dynamic": true, "scripts": [{ "file": "script.js", "runOn": "/projects/*" }], "styles": [{ "file": "style.css", "runOn": "/projects/*" }], - "resources": [{ "name": "paint-align", "path": "/align.svg" }] + "resources": [{ "name": "paint-align", "path": "/align.svg" }], + "components": [{ + "type": "info", + "content": "Holding the shift key while clicking the align items button will center all selected items on the item in the furthest-back layer." + }] } diff --git a/features/paint-align/script.js b/features/paint-align/script.js index b911eae7..6a11c52d 100644 --- a/features/paint-align/script.js +++ b/features/paint-align/script.js @@ -1,45 +1,52 @@ export default async function ({ feature }) { - ScratchTools.waitForElements("div[class^='mode-tools_mod-labeled-icon-height_']", function(row) { - if (row.querySelector(".ste-align-items")) return; - - let span = document.createElement("span") - span.className = "button_button_u6SE2 labeled-icon-button_mod-edit-field_1bXYC ste-align-items" - span.role = "button" - - let img = document.createElement("img") - img.src = feature.self.getResource("paint-align") - img.className = "labeled-icon-button_edit-field-icon_3j-Pf" - img.alt = feature.msg("align") - img.title = feature.msg("align") - img.draggable = false - span.appendChild(img) - - let label = document.createElement("span") - label.textContent = feature.msg("align") - label.className = "labeled-icon-button_edit-field-title_1ZoEV" - span.appendChild(label) - - span.addEventListener("click", function() { + ScratchTools.waitForElements( + "div[class^='mode-tools_mod-labeled-icon-height_']", + function (row) { + if (row.querySelector(".ste-align-items")) return; + + let span = document.createElement("span"); + span.className = + "button_button_u6SE2 labeled-icon-button_mod-edit-field_1bXYC ste-align-items"; + span.role = "button"; + + let img = document.createElement("img"); + img.src = feature.self.getResource("paint-align"); + img.className = "labeled-icon-button_edit-field-icon_3j-Pf"; + img.alt = feature.msg("align"); + img.title = feature.msg("align"); + img.draggable = false; + span.appendChild(img); + + let label = document.createElement("span"); + label.textContent = feature.msg("align"); + label.className = "labeled-icon-button_edit-field-title_1ZoEV"; + span.appendChild(label); + + span.addEventListener("click", function (e) { if (span.className.includes("disabled")) return; - centerObjects() - }) + centerObjects(e.shiftKey); + }); - row.appendChild(span) - }) + row.appendChild(span); + } + ); - feature.redux.subscribe(function() { + feature.redux.subscribe(function () { if (document.querySelector(".ste-align-items")) { - let span = document.querySelector(".ste-align-items") - - if (feature.traps.paint().format === "BITMAP" || feature.traps.paint().selectedItems?.length < 2) { - span.classList.add("button_mod-disabled_1rf31") - } else { - span.classList.remove("button_mod-disabled_1rf31") - } + let span = document.querySelector(".ste-align-items"); + + if ( + feature.traps.paint().format === "BITMAP" || + feature.traps.paint().selectedItems?.length < 2 + ) { + span.classList.add("button_mod-disabled_1rf31"); + } else { + span.classList.remove("button_mod-disabled_1rf31"); + } } - }) + }); - function centerObjects() { + function centerObjects(stay) { let items = feature.traps.paint().selectedItems; let allX = []; @@ -51,7 +58,12 @@ export default async function ({ feature }) { allY.push(getMidPoint(items[i].segments).y); } - let trueMidpoint = { x: average(allX), y: average(allY) }; + let trueMidpoint = stay + ? { + x: getMidPoint(items[0].segments).x, + y: getMidPoint(items[0].segments).y, + } + : { x: average(allX), y: average(allY) }; for (var i in items) { let selfMidpoint = getMidPoint(items[i].segments); @@ -62,6 +74,11 @@ export default async function ({ feature }) { items[i].segments[seg]._point._x += adjustX; items[i].segments[seg]._point._y += adjustY; } + + for (var comp in (items[i].fillColor?._components || [])) { + items[i].fillColor._components[comp].x += adjustX; + items[i].fillColor._components[comp].y += adjustY; + } } feature.traps.getPaper().tool.onUpdateImage();