Merge pull request #199 from zero01101/seijihariki/issue193

adds stamp mirror option (button and '=' shortcut)

css/icons.css

@@ -46,6 +46,12 @@
 	mask-image: url("../res/icons/file-plus.svg");
 }
 
+.ui.inline-icon.icon-flip-horizontal::after,
+.ui.icon > .icon-flip-horizontal {
+	-webkit-mask-image: url("../res/icons/flip-horizontal.svg");
+	mask-image: url("../res/icons/flip-horizontal.svg");
+}
+
 .ui.icon > .icon-file-x {
 	-webkit-mask-image: url("../res/icons/file-x.svg");
 	mask-image: url("../res/icons/file-x.svg");

js/lib/toolbar.js

@@ -173,7 +173,16 @@ const _toolbar_input = {
 		label.appendChild(checkbox);
 		label.appendChild(new Text(text));
 
-		return {checkbox, label};
+		return {
+			checkbox,
+			label,
+			setValue(v) {
+				checkbox.checked = v;
+				state[dataKey] = checkbox.checked;
+				cb && cb();
+				return checkbox.checked;
+			},
+		};
 	},
 
 	slider: (state, dataKey, text, options = {}) => {

js/ui/tool/stamp.js

@@ -57,6 +57,7 @@ const stampTool = () =>
 			mouse.listen.world.btn.left.ondragend.on(state.dragendcb);
 
 			mouse.listen.world.onwheel.on(state.onwheelcb);
+			keyboard.onShortcut({key: "Equal"}, state.togglemirror);
 
 			// For calls from other tools to paste image
 			if (opt && opt.image) {
@@ -90,6 +91,7 @@ const stampTool = () =>
 			mouse.listen.world.btn.left.ondragend.clear(state.dragendcb);
 
 			mouse.listen.world.onwheel.clear(state.onwheelcb);
+			keyboard.deleteShortcut(state.togglemirror, "Delete");
 
 			ovLayer.clear();
 		},
@@ -110,11 +112,18 @@ const stampTool = () =>
 				// Current Scale
 				state.scale = 1;
 
+				state.togglemirror = () => {
+					state.mirrorSetValue(!state.mirrorStamp);
+					state.redraw();
+				};
+
 				state.selectResource = (resource, nolock = true, deselect = true) => {
 					rotation = 0;
 					state.setScale(1);
 					if (nolock && state.ctxmenu.uploadButton.disabled) return;
 
+					state.mirrorSetValue(false);
+
 					console.debug(
 						`[stamp] Selecting Resource '${resource && resource.name}'[${
 							resource && resource.id
@@ -394,8 +403,11 @@ const stampTool = () =>
 					if (state.selected) {
 						ovCtx.save();
 						ovCtx.translate(px, py);
-						ovCtx.scale(state.scale, state.scale);
-						ovCtx.rotate(rotation);
+						ovCtx.scale(
+							state.scale * (state.mirrorStamp ? -1 : 1),
+							state.scale
+						);
+						ovCtx.rotate(rotation * (state.mirrorStamp ? -1 : 1));
 
 						ovCtx.drawImage(state.selected.image, 0, 0);
 						ovCtx.restore();
@@ -488,7 +500,19 @@ const stampTool = () =>
 							"icon-grid"
 						).checkbox
 					);
-					state.ctxmenu.snapToGridLabel = array;
+
+					// Mirror Stamp Checkbox
+					const {checkbox: mirrorCheckbox, setValue: mirrorSetValue} =
+						_toolbar_input.checkbox(
+							state,
+							"mirrorStamp",
+							"Mirror Stamp",
+							"icon-flip-horizontal"
+						);
+					array.appendChild(mirrorCheckbox);
+					state.mirrorSetValue = mirrorSetValue;
+
+					state.ctxmenu.buttonArray = array;
 
 					// Scale Slider
 					const scaleSlider = _toolbar_input.slider(state, "scale", "Scale", {
@@ -624,7 +648,7 @@ const stampTool = () =>
 				}
 			},
 			populateContextMenu: (menu, state) => {
-				menu.appendChild(state.ctxmenu.snapToGridLabel);
+				menu.appendChild(state.ctxmenu.buttonArray);
 				menu.appendChild(state.ctxmenu.scaleSlider);
 				menu.appendChild(state.ctxmenu.resourceManager);
 			},

res/icons/flip-horizontal.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3"></path>
+  <path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"></path>
+  <path d="M12 20v2"></path>
+  <path d="M12 14v2"></path>
+  <path d="M12 8v2"></path>
+  <path d="M12 2v2"></path>
+
+</svg>