sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Selection mirroring

Browse source 
For now only horizontal flip (we can add vertical flip too, but it would
be redundant)

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2023-04-08 23:05:22 -03:00
parent 64bc673f45
commit 1dcb897839
2 changed files with 60 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -488,7 +488,7 @@
src="js/ui/tool/colorbrush.js?v=84ff9fa"
type="text/javascript"></script>
<script
src="js/ui/tool/select.js?v=044d8f3"
src="js/ui/tool/select.js?v=dfacef5"
type="text/javascript"></script>
<script src="js/ui/tool/stamp.js?v=4494df6" type="text/javascript"></script>
<script

64
js/ui/tool/select.js
View file

@ -33,7 +33,9 @@ const selectTransformTool = () =>
keyboard.onShortcut({ctrl: true, key: "KeyC"}, state.ctrlccb);
keyboard.onShortcut({ctrl: true, key: "KeyV"}, state.ctrlvcb);
keyboard.onShortcut({ctrl: true, key: "KeyX"}, state.ctrlxcb);
keyboard.onShortcut({key: "Equal"}, state.togglemirror);
state.ctxmenu.mirrorSelectionCheckbox.disabled = true;
state.selected = null;
// Register Layer
@ -59,6 +61,7 @@ const selectTransformTool = () =>
keyboard.deleteShortcut(state.ctrlccb, "KeyC");
keyboard.deleteShortcut(state.ctrlvcb, "KeyV");
keyboard.deleteShortcut(state.ctrlxcb, "KeyX");
keyboard.deleteShortcut(state.togglemirror, "Equal");
uil.onactive.clear(state.uilayeractivecb);
@ -134,8 +137,12 @@ const selectTransformTool = () =>
}
if (state.dragging) state.dragging = null;
else state.selected = null;
else {
state.ctxmenu.mirrorSelectionCheckbox.disabled = true;
state.selected = null;
}
state.mirrorSetValue(false);
state.rotation = 0;
state.original = null;
moving = null;
@ -173,6 +180,11 @@ const selectTransformTool = () =>
}
};
// Mirroring
state.togglemirror = () => {
state.mirrorSetValue(!state.mirrorSelection);
};
// Mouse Move Handler
state.movecb = (evn) => {
state.lastMouseMove = evn;
@ -247,6 +259,7 @@ const selectTransformTool = () =>
state.selected.scale.y === 1 &&
state.selected.position.x === state.original.sx &&
state.selected.position.y === state.original.sy &&
!state.mirrorSelection &&
state.original.layer === uil.layer
) &&
!isCanvasBlank(
@ -409,11 +422,17 @@ const selectTransformTool = () =>
const xs = lscursor.x / scaling.handle.x;
const xy = lscursor.y / scaling.handle.y;
if (!state.keepAspectRatio) state.selected.scale = {x: xs, y: xy};
else {
const scale = Math.max(xs, xy);
state.selected.scale = {x: scale, y: scale};
let xscale = 1;
let yscale = 1;
if (!state.keepAspectRatio) {
xscale = xs;
yscale = ys;
} else {
xscale = yscale = Math.max(xs, xy);
}
state.selected.scale = {x: xscale, y: yscale};
}
if (rotating) {
@ -460,6 +479,8 @@ const selectTransformTool = () =>
};
state.selected = new _tool.MarqueeSelection(canvas, bb.center);
state.ctxmenu.mirrorSelectionCheckbox.disabled = false;
state.redraw();
};
@ -511,6 +532,7 @@ const selectTransformTool = () =>
},
}
);
state.ctxmenu.mirrorSelectionCheckbox.disabled = true;
state.selected = null;
state.redraw();
}
@ -668,6 +690,37 @@ const selectTransformTool = () =>
"icon-maximize"
).checkbox;
// Mirroring
state.onMirror = () => {
if (state.selected) {
const scale = state.selected.scale;
scale.x *= -1;
state.selected.scale = scale;
state.redraw();
}
};
const {checkbox: mirrorCheckbox, setValue: _mirrorSetValue} =
_toolbar_input.checkbox(
state,
"openoutpaint/select-mirror",
"mirrorSelection",
"Mirror Selection",
"icon-flip-horizontal",
(v) => {
state.onMirror();
}
);
state.ctxmenu.mirrorSelectionCheckbox = mirrorCheckbox;
state.ctxmenu.mirrorSelectionCheckbox.disabled = true;
_mirrorSetValue(false);
state.mirrorSetValue = (v) => {
_mirrorSetValue(v);
if (v !== state.mirrorSelection) {
state.onMirror();
}
};
// Use Clipboard
const clipboardCheckbox = _toolbar_input.checkbox(
state,
@ -817,6 +870,7 @@ const selectTransformTool = () =>
array.classList.add("checkbox-array");
array.appendChild(state.ctxmenu.snapToGridLabel);
array.appendChild(state.ctxmenu.keepAspectRatioLabel);
array.appendChild(state.ctxmenu.mirrorSelectionCheckbox);
array.appendChild(state.ctxmenu.useClipboardLabel);
menu.appendChild(array);
menu.appendChild(state.ctxmenu.selectionPeekOpacitySlider);