Merge pull request #37 from seijihariki/img2img

Add tool for img2img

Former-commit-id: 4e6f088cd99e9274b7e0ca9413ba7e8c3503540e
This commit is contained in:
tim h 2022-11-23 17:36:02 -06:00 committed by GitHub
commit 42adf68610
21 changed files with 1437 additions and 676 deletions

View file

@ -0,0 +1,16 @@
name: Prettier Autoformatting
on:
pull_request:
branches: [main]
types: [opened, synchronize, closed]
jobs:
prettier:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Prettify
uses: creyD/prettier_action@v4.2
with:
prettier_options: --write **/*.{js,html,css,md}

8
css/colors.css Normal file
View file

@ -0,0 +1,8 @@
:root {
--c-primary: #2c3333;
--c-hover: hsl(180, 7%, 30%);
--c-active: hsl(180, 7%, 25%);
--c-secondary: #395b64;
--c-accent: #a5c9ca;
--c-text: #e7f6f2;
}

View file

@ -14,44 +14,6 @@ body {
background-color: #ccc; background-color: #ccc;
} }
#historyContainer > .info {
padding: 0;
}
#history.history {
height: 200px;
overflow: scroll;
}
#history.history > .history-item {
cursor: pointer;
padding: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
#history.history > .history-item {
background-color: #0000;
}
#history.history > .history-item:hover {
background-color: #fff5;
}
#history.history > .history-item.current {
background-color: #66f5;
}
#history.history > .history-item.current:hover {
background-color: #66f5;
}
#history.history > .history-item.future {
background-color: #4445;
}
#history.history > .history-item.future:hover {
background-color: #ddd5;
}
.mainHSplit { .mainHSplit {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -68,40 +30,6 @@ body {
grid-row-gap: 5px; grid-row-gap: 5px;
} }
.uiContainer {
position: fixed;
width: 250px;
height: auto;
z-index: 999;
}
.uiTitleBar {
z-index: 999;
cursor: move;
background-color: rgba(104, 104, 104, 0.75);
z-index: 999;
user-select: none;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: auto;
font-size: 1.5em;
color: black;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid;
border-bottom: none;
border-color: black;
}
.draggable {
cursor: move;
}
.toolbar { .toolbar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -158,7 +86,7 @@ button.tool:hover {
transition: max-height 0.2s ease-out; transition: max-height 0.2s ease-out;
} }
.info { .menu-container {
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;

32
css/ui/generic.css Normal file
View file

@ -0,0 +1,32 @@
/* UI Floating Windows */
.floating-window {
position: fixed;
width: 250px;
height: auto;
z-index: 999;
}
.floating-window-title {
cursor: move;
background-color: rgba(104, 104, 104, 0.75);
user-select: none;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: auto;
font-size: 1.5em;
color: black;
text-align: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid;
border-bottom: none;
border-color: black;
}
.draggable {
cursor: move;
}

38
css/ui/history.css Normal file
View file

@ -0,0 +1,38 @@
#historyContainer > .info {
padding: 0;
}
#history.history {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
#history.history > .history-item {
cursor: pointer;
padding: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
#history.history > .history-item {
background-color: #0000;
}
#history.history > .history-item:hover {
background-color: #fff5;
}
#history.history > .history-item.current {
background-color: #66f5;
}
#history.history > .history-item.current:hover {
background-color: #66f5;
}
#history.history > .history-item.future {
background-color: #4445;
}
#history.history > .history-item.future:hover {
background-color: #ddd5;
}

62
css/ui/toolbar.css Normal file
View file

@ -0,0 +1,62 @@
#ui-toolbar {
align-content: center;
width: 60px;
border-radius: 5px;
color: var(--c-text);
background-color: var(--c-primary);
}
#ui-toolbar .handle {
display: flex;
align-items: center;
justify-content: center;
height: 10px;
}
#ui-toolbar .handle > .line {
width: 80%;
border-top: 2px #777 dotted;
}
#ui-toolbar .tool .tool-icon {
filter: invert(60%);
}
#ui-toolbar .tool.using .tool-icon {
filter: invert(80%);
}
#ui-toolbar .tool:hover .tool-icon {
filter: invert(90%);
}
/* The separator */
#ui-toolbar .separator {
width: 80%;
margin: auto;
align-self: center;
border-top: 1px var(--c-hover) solid;
}
/* Styles for the tool buttons */
#ui-toolbar .tool {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
margin: 5px;
border-radius: 5px;
cursor: pointer;
}
#ui-toolbar .tool.using {
background-color: var(--c-active);
}
#ui-toolbar .tool:hover {
background-color: var(--c-hover);
}

View file

@ -1,86 +1,159 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-US"> <html lang="en-US">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>openOutpaint 🐠</title> <title>openOutpaint 🐠</title>
<!-- CSS Variables -->
<link href="css/colors.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" /> <link href="css/index.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="css/ui/generic.css" rel="stylesheet" />
<link href="css/ui/history.css" rel="stylesheet" />
<link href="css/ui/toolbar.css" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head> </head>
<body> <body>
<!-- Main Toolbar --> <!-- Main Toolbar -->
<div id="infoContainer" class="uiContainer"> <div
<div id="infoTitleBar" class="draggable uiTitleBar">openOutpaint 🐠</div> id="infoContainer"
<div id="info" class="info" style="min-width:200px;"> class="floating-window"
style="left: 10px; top: 10px">
<div id="infoTitleBar" class="draggable floating-window-title">
openOutpaint 🐠
</div>
<div id="info" class="menu-container" style="min-width: 200px">
<label for="host">Host</label> <label for="host">Host</label>
<input id="host" value="http://127.0.0.1:7860"><br /> <input id="host" value="http://127.0.0.1:7860" /><br />
<!-- Prompts section --> <!-- Prompts section -->
<button type="button" class="collapsible">Prompts</button> <button type="button" class="collapsible">Prompts</button>
<div class="content"> <div class="content">
<label for="prompt">Prompt:</label> <br> <label for="prompt">Prompt:</label> <br />
<textarea id="prompt">oceanographic study, underwater wildlife, award winning</textarea><br /> <textarea id="prompt">
<label for="negPrompt">Negative prompt:</label> <br> oceanographic study, underwater wildlife, award winning</textarea
<textarea ><br />
id="negPrompt">people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea><br /> <label for="negPrompt">Negative prompt:</label> <br />
<hr> <textarea id="negPrompt">
people, person, humans, human, divers, diver, glitch, error, text, watermark, bad quality, blurry</textarea
><br />
<hr />
</div> </div>
<!-- SD section --> <!-- SD section -->
<button type="button" class="collapsible">Stable Diffusion settings</button> <button type="button" class="collapsible">
Stable Diffusion settings
</button>
<div class="content"> <div class="content">
<label for="models">Model:</label> <label for="models">Model:</label>
<select id="models" onchange="changeModel()"></select><br> <select id="models" onchange="changeModel()"></select
><br />
<label for="samplerSelect">Sampler:</label> <label for="samplerSelect">Sampler:</label>
<select id="samplerSelect" onchange="changeSampler()"></select><br /> <select id="samplerSelect" onchange="changeSampler()"></select
<label for="seed">Seed (-1 for random):</label> <br> ><br />
<input type="number" id="seed" onchange="changeSeed()" min="1" max="9999999999" value="-1" <label for="seed">Seed (-1 for random):</label> <br />
<input
type="number"
id="seed"
onchange="changeSeed()"
min="1"
max="9999999999"
value="-1"
step="1" /><br /> step="1" /><br />
<label for="steps">Steps: <input type="number" id="stepsTxt"></label><br /> <label for="steps">Steps: <input type="number" id="stepsTxt" /></label
><br />
<input type="range" id="steps" name="steps" min="1" max="50" /><br /> <input type="range" id="steps" name="steps" min="1" max="50" /><br />
<label for="cfgScale">CFG scale: <input type="number" id="cfgScaleTxt"></label> <label for="cfgScale"
>CFG scale: <input type="number" id="cfgScaleTxt"
/></label>
<br /> <br />
<input type="range" id="cfgScale" name="cfgScale" min="-1" max="25" step="0.5" /><br /> <input
<label for="batchSize">Batch size: <input type="number" id="batchSizeText"></label><br /> type="range"
<input type="range" id="batchSize" name="batchSize" min="1" max="8" step="1" /><br /> id="cfgScale"
<label for="batchCount">Batch count: <input type="number" id="batchCountText"></label><br /> name="cfgScale"
<input type="range" id="batchCount" name="batchCount" min="1" max="8" step="1" /><br /> min="-1"
<hr> max="25"
step="0.5" /><br />
<label for="batchSize"
>Batch size: <input type="number" id="batchSizeText" /></label
><br />
<input
type="range"
id="batchSize"
name="batchSize"
min="1"
max="8"
step="1" /><br />
<label for="batchCount"
>Batch count: <input type="number" id="batchCountText" /></label
><br />
<input
type="range"
id="batchCount"
name="batchCount"
min="1"
max="8"
step="1" /><br />
<hr />
</div> </div>
<!-- Unsectioned --> <!-- Unsectioned -->
<label for="scaleFactor">Scale factor: <input type="number" id="scaleFactorTxt"></label><br /> <label for="scaleFactor"
<input type="range" id="scaleFactor" name="scaleFactor" min="1" max="16" /><br /> >Scale factor: <input type="number" id="scaleFactorTxt" /></label
><br />
<input
type="range"
id="scaleFactor"
name="scaleFactor"
min="1"
max="16" /><br />
<label for="cbxSnap">Snap to grid?</label> <label for="cbxSnap">Snap to grid?</label>
<input type="checkbox" id="cbxSnap" onchange="changeSnapMode()" checked="checked"><br /> <input
<label for="cbxEnableErasing">Right-click erase?</label> type="checkbox"
<input type="checkbox" id="cbxEnableErasing" onchange="changeEnableErasing()"><br /> id="cbxSnap"
<label for="cbxPaint">Mask mode?</label> onchange="changeSnapMode()"
<input type="checkbox" id="cbxPaint" onchange="changePaintMode()"><br /> checked="checked" /><br />
<label for="cbxHRFix">Auto txt2img HRfix?</label> <label for="cbxHRFix">Auto txt2img HRfix?</label>
<input type="checkbox" id="cbxHRFix" onchange="changeHiResFix()"><br /> <input
type="checkbox"
id="cbxHRFix"
onchange="changeHiResFix()" /><br />
<label for="overMaskPx">Overmask px (0 to disable):</label> <label for="overMaskPx">Overmask px (0 to disable):</label>
<input type="number" id="overMaskPx" onchange="changeOverMaskPx()" min="0" max="128" value="16" <input
type="number"
id="overMaskPx"
onchange="changeOverMaskPx()"
min="0"
max="128"
value="16"
step="1" /><br /> step="1" /><br />
<label for="maskBlur">Mask blur:</label> <label for="maskBlur">Mask blur:</label>
<span id="maskBlurText"></span><br /> <span id="maskBlurText"></span><br />
<input type="number" id="maskBlur" name="maskBlur" min="0" max="256" value="0" step="1" <input
type="number"
id="maskBlur"
name="maskBlur"
min="0"
max="256"
value="0"
step="1"
onchange="changeMaskBlur()" /><br /> onchange="changeMaskBlur()" /><br />
<!-- Save/load image section --> <!-- Save/load image section -->
<button type="button" class="collapsible">Save/Load/New image</button> <button type="button" class="collapsible">Save/Load/New image</button>
<div class="content"> <div class="content">
<label for="preloadImage">Load image:</label> <label for="preloadImage">Load image:</label>
<input type="file" id="preloadImage" onchange="preloadImage()" accept="image/*" / <input type="file" id="preloadImage" onchange="preloadImage()"
style="width: 200px;"><br /> accept="image/*" / style="width: 200px;"><br />
<button onclick="downloadCanvas()">Save canvas</button><br /> <button onclick="downloadCanvas()">Save canvas</button><br />
<label for="upscalers">Choose upscaler</label> <label for="upscalers">Choose upscaler</label>
<select id="upscalers"></select> <select id="upscalers"></select>
<button onclick="upscaleAndDownload()">Upscale (might take a sec)</button><br /> <button onclick="upscaleAndDownload()">
Upscale (might take a sec)</button
><br />
<button onclick="newImage()">Clear canvas</button> <button onclick="newImage()">Clear canvas</button>
</div> </div>
<!-- Degub info --> <!-- Debug info -->
<button type="button" class="collapsible">Debug info</button> <button type="button" class="collapsible">Debug info</button>
<div id="coords" class="content"> <div id="coords" class="content">
<label for="mouseX">mouseX:</label> <label for="mouseX">mouseX:</label>
@ -102,61 +175,123 @@
<span id="snapY"></span><br /> <span id="snapY"></span><br />
<label for="heldButton">Mouse button:</label> <label for="heldButton">Mouse button:</label>
<span id="heldButton"></span><br /> <span id="heldButton"></span><br />
<span id="version">Alpha release v0.0.6.9</span> <!-- 𝓃𝒾𝒸𝑒 --> <span id="version">Alpha release v0.0.6.6</span>
<br /> <br />
<hr> <hr />
</div>
<div style="display: flex; align-items: center">
<div
style="
flex: 1;
border-top: 1px black solid;
margin-right: 10px;
"></div>
Context Menu
<div
style="
flex: 1;
border-top: 1px black solid;
margin-left: 10px;
"></div>
</div>
<div id="tool-context" class="context-menu"></div>
</div> </div>
</div> </div>
</div> <!-- History -->
<div id="ui-history" class="floating-window" style="right: 10px; top: 10px">
<!-- History Toolbar --> <div class="draggable floating-window-title">History</div>
<div id="historyContainer" class="uiContainer" style="right: 0;"> <div class="menu-container" style="min-width: 200px">
<div id="historyTitleBar" class="draggable uiTitleBar">History</div>
<div class="info" style="min-width:200px;">
<div id="history" class="history"></div> <div id="history" class="history"></div>
<div class="toolbar" style="padding: 10px;"> <div class="toolbar" style="padding: 10px">
<button type="button" onclick="commands.undo()" class="tool">undo</button> <button type="button" onclick="commands.undo()" class="tool">
<button type="button" onclick="commands.redo()" class="tool">redo</button> undo
</button>
<button type="button" onclick="commands.redo()" class="tool">
redo
</button>
</div>
</div> </div>
</div> </div>
<!-- Toolbar -->
<div
id="ui-toolbar"
class="floating-window"
style="right: 10px; top: 350px">
<div class="draggable handle">
<span class="line"></span>
</div> </div>
<div id="mainHSplit" class="mainHSplit"> <div class="toolbar-section"></div>
</div>
<!-- Canvases -->
<div
id="mainHSplit"
class="mainHSplit"
onmouseover="document.activeElement.blur()">
<div id="uiWrapper" class="uiWrapper"> <div id="uiWrapper" class="uiWrapper">
<div id="canvasHolder" class="canvasHolder" oncontextmenu="return false;"> <div
<canvas id="backgroundCanvas" class="mainCanvases backgroundCanvas" width="2560" height="1440" id="canvasHolder"
style="z-index: 0;"> class="canvasHolder"
oncontextmenu="return false;">
<canvas
id="backgroundCanvas"
class="mainCanvases backgroundCanvas"
width="2560"
height="1440"
style="z-index: 0">
<!-- gray grid bg canvas --> <!-- gray grid bg canvas -->
<p>lol ur browser sucks</p> <p>lol ur browser sucks</p>
</canvas> </canvas>
<canvas id="canvas" class="mainCanvases canvas" width="2560" height="1440" style="z-index: 1;"> <canvas
id="canvas"
class="mainCanvases canvas"
width="2560"
height="1440"
style="z-index: 1">
<!-- normal canvas on which images are drawn --> <!-- normal canvas on which images are drawn -->
<p>lol ur browser sucks</p> <p>lol ur browser sucks</p>
</canvas> </canvas>
<canvas id="tempCanvas" class="mainCanvases tempCanvas" width="2560" height="1440" style="z-index: 2;"> <canvas
id="tempCanvas"
class="mainCanvases tempCanvas"
width="2560"
height="1440"
style="z-index: 2">
<!-- temporary canvas on which images being selected/rejected or imported arbitrary images are superimposed --> <!-- temporary canvas on which images being selected/rejected or imported arbitrary images are superimposed -->
<p>lol ur browser sucks</p> <p>lol ur browser sucks</p>
</canvas> </canvas>
<canvas id="targetCanvas" class="mainCanvases targetCanvas" width="2560" height="1440" <canvas
style="z-index: 3;"> id="targetCanvas"
class="mainCanvases targetCanvas"
width="2560"
height="1440"
style="z-index: 3">
<!-- canvas on which "targeting" squares are drawn --> <!-- canvas on which "targeting" squares are drawn -->
<p>lol ur browser sucks</p> <p>lol ur browser sucks</p>
</canvas> </canvas>
<canvas id="maskPaintCanvas" class="mainCanvases maskPaintCanvas" width="2560" height="1440" <canvas
style="z-index: 4;"> id="maskPaintCanvas"
class="mainCanvases maskPaintCanvas"
width="2560"
height="1440"
style="z-index: 4">
<!-- canvas on which masking brush is "painted" --> <!-- canvas on which masking brush is "painted" -->
<p>lol ur browser sucks</p> <p>lol ur browser sucks</p>
</canvas> </canvas>
<canvas id="overlayCanvas" class="mainCanvases overlayCanvas" width="2560" height="1440" <canvas
style="z-index: 5;"> id="overlayCanvas"
class="mainCanvases overlayCanvas"
width="2560"
height="1440"
style="z-index: 5">
<!-- canvas on which "cursor" reticle or arc is drawn --> <!-- canvas on which "cursor" reticle or arc is drawn -->
<p>lol ur browser sucks</p> <p>lol ur browser sucks</p>
</canvas> </canvas>
<div id="tempDiv" style="position: relative; z-index: 6;"> <div id="tempDiv" style="position: relative; z-index: 6">
<!-- where popup buttons go --> <!-- where popup buttons go -->
</div> </div>
</div> </div>
</div> </div>
<div id="masks" class="masks"> <div id="masks" class="masks">
@ -164,25 +299,39 @@
<!-- <canvas id="maskCanvasMonitor" class="maskCanvasMonitor" width="512" height="512"> <!-- <canvas id="maskCanvasMonitor" class="maskCanvasMonitor" width="512" height="512">
<p>lol ur browser sucks</p> <p>lol ur browser sucks</p>
</canvas><br /> --> </canvas><br /> -->
<canvas id="overMaskCanvasMonitor" class="overMaskCanvasMonitor" width="512" height="512"> <canvas
<p>lol ur browser sucks</p> id="overMaskCanvasMonitor"
</canvas><br /> class="overMaskCanvasMonitor"
<canvas id="initImgCanvasMonitor" class="initImgCanvasMonitor" width="512" height="512"> width="512"
<p>lol ur browser sucks</p> height="512">
</canvas><br /> <p>lol ur browser sucks</p> </canvas
><br />
<canvas
id="initImgCanvasMonitor"
class="initImgCanvasMonitor"
width="512"
height="512">
<p>lol ur browser sucks</p> </canvas
><br />
</div> </div>
</div> </div>
</div> </div>
<!-- Base Libs -->
<script src="js/util.js" type="text/javascript"></script> <script src="js/util.js" type="text/javascript"></script>
<script src="js/input.js" type="text/javascript"></script> <script src="js/input.js" type="text/javascript"></script>
<script src="js/commands.js" type="text/javascript"></script> <script src="js/commands.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script> <script src="js/ui/history.js" type="text/javascript"></script>
<script src="js/settingsbar.js" type="text/javascript"></script> <script src="js/settingsbar.js" type="text/javascript"></script>
<!-- Content -->
<script src="js/index.js" type="text/javascript"></script>
<script src="js/shortcuts.js" type="text/javascript"></script> <script src="js/shortcuts.js" type="text/javascript"></script>
<script src="js/ui/history.js" type="text/javascript"></script> <!-- Load Tools -->
</body> <script src="js/ui/tool/dream.js" type="text/javascript"></script>
<script src="js/ui/tool/maskbrush.js" type="text/javascript"></script>
<script src="js/ui/toolbar.js" type="text/javascript"></script>
</body>
</html> </html>

View file

@ -39,6 +39,12 @@ const commands = {
Object.assign(copy, options); Object.assign(copy, options);
const state = {}; const state = {};
const entry = {
id: guid(),
title,
state,
};
// Attempt to run command // Attempt to run command
try { try {
run(title, copy, state); run(title, copy, state);
@ -53,6 +59,7 @@ const commands = {
console.debug(`Undoing ${name}, currently ${commands.current}`); console.debug(`Undoing ${name}, currently ${commands.current}`);
undo(title, state); undo(title, state);
_commands_events.emit({ _commands_events.emit({
id: entry.id,
name, name,
action: "undo", action: "undo",
state, state,
@ -63,6 +70,7 @@ const commands = {
console.debug(`Redoing ${name}, currently ${commands.current}`); console.debug(`Redoing ${name}, currently ${commands.current}`);
redo(title, copy, state); redo(title, copy, state);
_commands_events.emit({ _commands_events.emit({
id: entry.id,
name, name,
action: "redo", action: "redo",
state, state,
@ -71,21 +79,29 @@ const commands = {
}; };
// Add to history // Add to history
if (commands.history.length > commands.current + 1) if (commands.history.length > commands.current + 1) {
commands.history.splice(commands.current + 1); commands.history.forEach((entry, index) => {
if (index >= commands.current + 1)
const entry = { _commands_events.emit({
id: guid(), id: entry.id,
title, name,
undo: undoWrapper, action: "deleted",
redo: redoWrapper,
state, state,
}; current: commands.current,
});
});
commands.history.splice(commands.current + 1);
}
commands.history.push(entry); commands.history.push(entry);
commands.current++; commands.current++;
entry.undo = undoWrapper;
entry.redo = redoWrapper;
_commands_events.emit({ _commands_events.emit({
id: entry.id,
name, name,
action: "run", action: "run",
state, state,
@ -156,3 +172,53 @@ commands.createCommand(
state.context.drawImage(state.original, state.box.x, state.box.y); state.context.drawImage(state.original, state.box.x, state.box.y);
} }
); );
commands.createCommand(
"eraseImage",
(title, options, state) => {
if (
!options ||
options.x === undefined ||
options.y === undefined ||
options.w === undefined ||
options.h === undefined
)
throw "Command eraseImage requires options in the format: {x, y, w, h, ctx?}";
// Check if we have state
if (!state.context) {
const context = options.ctx || imgCtx;
state.context = context;
// Saving what was in the canvas before the command
const imgData = context.getImageData(
options.x,
options.y,
options.w,
options.h
);
state.box = {
x: options.x,
y: options.y,
w: options.w,
h: options.h,
};
// Create Image
const cutout = document.createElement("canvas");
cutout.width = state.box.w;
cutout.height = state.box.h;
cutout.getContext("2d").putImageData(imgData, 0, 0);
state.original = new Image();
state.original.src = cutout.toDataURL();
}
// Apply command
state.context.clearRect(state.box.x, state.box.y, state.box.w, state.box.h);
},
(title, state) => {
// Clear destination area
state.context.clearRect(state.box.x, state.box.y, state.box.w, state.box.h);
// Undo
state.context.drawImage(state.original, state.box.x, state.box.y);
}
);

View file

@ -55,12 +55,31 @@ function sliderChangeHandlerFactory(
textBoxId, textBoxId,
dataKey, dataKey,
defaultV, defaultV,
save = true,
setter = (k, v) => (stableDiffusionData[k] = v), setter = (k, v) => (stableDiffusionData[k] = v),
getter = (k) => stableDiffusionData[k] getter = (k) => stableDiffusionData[k]
) { ) {
const sliderEl = document.getElementById(sliderId); return sliderChangeHandlerFactoryEl(
const textBoxEl = document.getElementById(textBoxId); document.getElementById(sliderId),
const savedValue = localStorage.getItem(dataKey); document.getElementById(textBoxId),
dataKey,
defaultV,
save,
setter,
getter
);
}
function sliderChangeHandlerFactoryEl(
sliderEl,
textBoxEl,
dataKey,
defaultV,
save = true,
setter = (k, v) => (stableDiffusionData[k] = v),
getter = (k) => stableDiffusionData[k]
) {
const savedValue = save && localStorage.getItem(dataKey);
if (savedValue) setter(dataKey, savedValue || defaultV); if (savedValue) setter(dataKey, savedValue || defaultV);
@ -70,12 +89,12 @@ function sliderChangeHandlerFactory(
if (value) setter(dataKey, value); if (value) setter(dataKey, value);
if (!eventSource || eventSource.id === textBoxId) if (!eventSource || eventSource === textBoxEl)
sliderEl.value = getter(dataKey); sliderEl.value = getter(dataKey);
setter(dataKey, Number(sliderEl.value)); setter(dataKey, Number(sliderEl.value));
textBoxEl.value = getter(dataKey); textBoxEl.value = getter(dataKey);
localStorage.setItem(dataKey, getter(dataKey)); if (save) localStorage.setItem(dataKey, getter(dataKey));
} }
textBoxEl.onchange = changeHandler; textBoxEl.onchange = changeHandler;
@ -104,11 +123,9 @@ var heldButton = 0;
var snapX = 0; var snapX = 0;
var snapY = 0; var snapY = 0;
var drawThis = {}; var drawThis = {};
var clicked = false;
const basePixelCount = 64; //64 px - ALWAYS 64 PX const basePixelCount = 64; //64 px - ALWAYS 64 PX
var scaleFactor = 8; //x64 px var scaleFactor = 8; //x64 px
var snapToGrid = true; var snapToGrid = true;
var paintMode = false;
var backupMaskPaintCanvas; //??? var backupMaskPaintCanvas; //???
var backupMaskPaintCtx; //...? look i am bad at this var backupMaskPaintCtx; //...? look i am bad at this
var backupMaskChunk = null; var backupMaskChunk = null;
@ -123,9 +140,8 @@ var arbitraryImageData;
var arbitraryImageBitmap; var arbitraryImageBitmap;
var arbitraryImageBase64; // seriously js cmon work with me here var arbitraryImageBase64; // seriously js cmon work with me here
var placingArbitraryImage = false; // for when the user has loaded an existing image from their computer var placingArbitraryImage = false; // for when the user has loaded an existing image from their computer
var enableErasing = false; // accidental right-click erase if the user isn't trying to erase is a bad thing
var marchOffset = 0; var marchOffset = 0;
var marching = false; var stopMarching = null;
var inProgress = false; var inProgress = false;
var marchCoords = {}; var marchCoords = {};
@ -160,7 +176,6 @@ function startup() {
getModels(); getModels();
drawBackground(); drawBackground();
changeScaleFactor(); changeScaleFactor();
changePaintMode();
changeSampler(); changeSampler();
changeSteps(); changeSteps();
changeCfgScale(); changeCfgScale();
@ -171,7 +186,6 @@ function startup() {
changeSeed(); changeSeed();
changeOverMaskPx(); changeOverMaskPx();
changeHiResFix(); changeHiResFix();
changeEnableErasing();
document.getElementById("overlayCanvas").onmousemove = mouseMove; document.getElementById("overlayCanvas").onmousemove = mouseMove;
document.getElementById("overlayCanvas").onmousedown = mouseDown; document.getElementById("overlayCanvas").onmousedown = mouseDown;
document.getElementById("overlayCanvas").onmouseup = mouseUp; document.getElementById("overlayCanvas").onmouseup = mouseUp;
@ -197,28 +211,50 @@ function writeArbitraryImage(img, x, y) {
document.getElementById("preloadImage").files = null; document.getElementById("preloadImage").files = null;
} }
function dream(x, y, prompt) { function dream(
x,
y,
prompt,
extra = {
method: endpoint,
stopMarching: () => {},
bb: {x, y, w: prompt.width, h: prompt.height},
}
) {
tmpImgXYWH.x = x; tmpImgXYWH.x = x;
tmpImgXYWH.y = y; tmpImgXYWH.y = y;
tmpImgXYWH.w = prompt.width; tmpImgXYWH.w = prompt.width;
tmpImgXYWH.h = prompt.height; tmpImgXYWH.h = prompt.height;
console.log( console.log(
"dreaming to " + host + url + endpoint + ":\r\n" + JSON.stringify(prompt) "dreaming to " +
host +
url +
(extra.method || endpoint) +
":\r\n" +
JSON.stringify(prompt)
); );
postData(prompt).then((data) => { console.info(`dreaming "${prompt.prompt}"`);
console.debug(prompt);
// Start checking for progress
const progressCheck = checkProgress(extra.bb);
postData(prompt, extra)
.then((data) => {
returnedImages = data.images; returnedImages = data.images;
totalImagesReturned = data.images.length; totalImagesReturned = data.images.length;
blockNewImages = true; blockNewImages = true;
//console.log(data); // JSON data parsed by `data.json()` call //console.log(data); // JSON data parsed by `data.json()` call
imageAcceptReject(x, y, data); imageAcceptReject(x, y, data, extra);
}); })
checkProgress(); .finally(() => clearInterval(progressCheck));
} }
async function postData(promptData) { async function postData(promptData, extra = null) {
this.host = document.getElementById("host").value; this.host = document.getElementById("host").value;
// Default options are marked with * // Default options are marked with *
const response = await fetch(this.host + this.url + this.endpoint, { const response = await fetch(
this.host + this.url + extra.method || endpoint,
{
method: "POST", // *GET, POST, PUT, DELETE, etc. method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, *cors, same-origin mode: "cors", // no-cors, *cors, same-origin
cache: "default", // *default, no-cache, reload, force-cache, only-if-cached cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
@ -230,11 +266,12 @@ async function postData(promptData) {
redirect: "follow", // manual, *follow, error redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(promptData), // body data type must match "Content-Type" header body: JSON.stringify(promptData), // body data type must match "Content-Type" header
}); }
);
return response.json(); // parses JSON response into native JavaScript objects return response.json(); // parses JSON response into native JavaScript objects
} }
function imageAcceptReject(x, y, data) { function imageAcceptReject(x, y, data, extra = null) {
inProgress = false; inProgress = false;
document.getElementById("progressDiv").remove(); document.getElementById("progressDiv").remove();
const img = new Image(); const img = new Image();
@ -261,7 +298,8 @@ function imageAcceptReject(x, y, data) {
function accept(evt) { function accept(evt) {
// write image to imgcanvas // write image to imgcanvas
marching = false; stopMarching && stopMarching();
stopMarching = null;
clearBackupMask(); clearBackupMask();
placeImage(); placeImage();
removeChoiceButtons(); removeChoiceButtons();
@ -271,7 +309,8 @@ function accept(evt) {
function reject(evt) { function reject(evt) {
// remove image entirely // remove image entirely
marching = false; stopMarching && stopMarching();
stopMarching = null;
restoreBackupMask(); restoreBackupMask();
clearBackupMask(); clearBackupMask();
clearTargetMask(); clearTargetMask();
@ -375,59 +414,40 @@ function sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms)); return new Promise((resolve) => setTimeout(resolve, ms));
} }
function snap(i, scaled = true) { function march(bb) {
// very cheap test proof of concept but it works surprisingly well let offset = 0;
var scaleOffset = 0;
if (scaled) { const interval = setInterval(() => {
if (scaleFactor % 2 != 0) { drawMarchingAnts(bb, offset++);
// odd number, snaps to center of cell, oops offset %= 16;
scaleOffset = basePixelCount / 2; }, 20);
}
} return () => clearInterval(interval);
var snapOffset = (i % basePixelCount) - scaleOffset;
if (snapOffset == 0) {
return snapOffset;
}
return -snapOffset;
} }
function march() { function drawMarchingAnts(bb, offset) {
if (marching) {
marchOffset++;
if (marchOffset > 16) {
marchOffset = 0;
}
drawMarchingAnts();
setTimeout(march, 20);
}
}
function drawMarchingAnts() {
clearTargetMask(); clearTargetMask();
tgtCtx.strokeStyle = "#FFFFFFFF"; //"#55000077"; tgtCtx.strokeStyle = "#FFFFFFFF"; //"#55000077";
tgtCtx.setLineDash([4, 2]); tgtCtx.setLineDash([4, 2]);
tgtCtx.lineDashOffset = -marchOffset; tgtCtx.lineDashOffset = -offset;
tgtCtx.strokeRect(marchCoords.x, marchCoords.y, marchCoords.w, marchCoords.h); tgtCtx.strokeRect(bb.x, bb.y, bb.w, bb.h);
} }
function checkProgress() { function checkProgress(bb) {
document.getElementById("progressDiv") && document.getElementById("progressDiv") &&
document.getElementById("progressDiv").remove(); document.getElementById("progressDiv").remove();
endpoint = "progress?skip_current_image=false"; // Skip image to stop using a ton of networking resources
endpoint = "progress?skip_current_image=true";
var div = document.createElement("div"); var div = document.createElement("div");
div.id = "progressDiv"; div.id = "progressDiv";
div.style.position = "absolute"; div.style.position = "absolute";
div.style.width = "200px"; div.style.width = "200px";
div.style.height = "70px"; div.style.height = "70px";
div.style.left = parseInt(marchCoords.x + marchCoords.w - 100) + "px"; div.style.left = parseInt(bb.x + bb.w - 100) + "px";
div.style.top = parseInt(marchCoords.y + marchCoords.h) + "px"; div.style.top = parseInt(bb.y + bb.h) + "px";
div.innerHTML = '<span class="strokeText" id="estRemaining"></span>'; div.innerHTML = '<span class="strokeText" id="estRemaining"></span>';
document.getElementById("tempDiv").appendChild(div); document.getElementById("tempDiv").appendChild(div);
updateProgress(); return setInterval(() => {
}
function updateProgress() {
if (inProgress) {
fetch(host + url + endpoint) fetch(host + url + endpoint)
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
@ -439,8 +459,7 @@ function updateProgress() {
document.getElementById("estRemaining").innerText = estimate; document.getElementById("estRemaining").innerText = estimate;
}); });
setTimeout(updateProgress, 500); }, 1500);
}
} }
function mouseMove(evt) { function mouseMove(evt) {
@ -467,67 +486,9 @@ function mouseMove(evt) {
finalX = snapOffsetX + canvasX; finalX = snapOffsetX + canvasX;
finalY = snapOffsetY + canvasY; finalY = snapOffsetY + canvasY;
ovCtx.drawImage(arbitraryImage, finalX, finalY); ovCtx.drawImage(arbitraryImage, finalX, finalY);
} else if (!paintMode) {
// draw targeting square reticle thingy cursor
ovCtx.strokeStyle = "#FFFFFF";
snapOffsetX = 0;
snapOffsetY = 0;
if (snapToGrid) {
snapOffsetX = snap(canvasX);
snapOffsetY = snap(canvasY);
}
finalX = snapOffsetX + canvasX;
finalY = snapOffsetY + canvasY;
ovCtx.strokeRect(
parseInt(finalX - (basePixelCount * scaleFactor) / 2),
parseInt(finalY - (basePixelCount * scaleFactor) / 2),
basePixelCount * scaleFactor,
basePixelCount * scaleFactor
); //origin is middle of the frame
} }
} }
/**
* Mask implementation
*/
mouse.listen.canvas.onmousemove.on((evn) => {
if (paintMode && evn.target.id === "overlayCanvas") {
// draw big translucent red blob cursor
ovCtx.beginPath();
ovCtx.arc(evn.x, evn.y, 4 * scaleFactor, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
ovCtx.fillStyle = "#FF6A6A50";
ovCtx.fill();
}
});
mouse.listen.canvas.left.onpaint.on((evn) => {
if (paintMode && evn.initialTarget.id === "overlayCanvas") {
maskPaintCtx.globalCompositeOperation = "source-over";
maskPaintCtx.strokeStyle = "#FF6A6A";
maskPaintCtx.lineWidth = 8 * scaleFactor;
maskPaintCtx.beginPath();
maskPaintCtx.moveTo(evn.px, evn.py);
maskPaintCtx.lineTo(evn.x, evn.y);
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
maskPaintCtx.stroke();
}
});
mouse.listen.canvas.right.onpaint.on((evn) => {
if (paintMode && evn.initialTarget.id === "overlayCanvas") {
maskPaintCtx.globalCompositeOperation = "destination-out";
maskPaintCtx.strokeStyle = "#FFFFFFFF";
maskPaintCtx.lineWidth = 8 * scaleFactor;
maskPaintCtx.beginPath();
maskPaintCtx.moveTo(evn.px, evn.py);
maskPaintCtx.lineTo(evn.x, evn.y);
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
maskPaintCtx.stroke();
}
});
function mouseDown(evt) { function mouseDown(evt) {
const rect = ovCanvas.getBoundingClientRect(); const rect = ovCanvas.getBoundingClientRect();
var oddOffset = 0; var oddOffset = 0;
@ -543,39 +504,6 @@ function mouseDown(evt) {
nextBox.w = arbitraryImageData.width; nextBox.w = arbitraryImageData.width;
nextBox.h = arbitraryImageData.height; nextBox.h = arbitraryImageData.height;
dropTargets.push(nextBox); dropTargets.push(nextBox);
} else if (!paintMode) {
//const rect = ovCanvas.getBoundingClientRect()
var nextBox = {};
nextBox.x =
evt.clientX -
(basePixelCount * scaleFactor) / 2 -
rect.left +
oddOffset; //origin is middle of the frame
nextBox.y =
evt.clientY - (basePixelCount * scaleFactor) / 2 - rect.top + oddOffset; //TODO make a way to set the origin to numpad dirs?
nextBox.w = basePixelCount * scaleFactor;
nextBox.h = basePixelCount * scaleFactor;
drawTargets.push(nextBox);
}
} else if (evt.button == 2) {
if (enableErasing && !paintMode) {
// right click, also gotta make sure mask blob isn't being used as it's visually inconsistent with behavior of erased region
ctx = imgCanvas.getContext("2d");
if (snapToGrid) {
ctx.clearRect(
canvasX + snap(canvasX) - (basePixelCount * scaleFactor) / 2,
canvasY + snap(canvasY) - (basePixelCount * scaleFactor) / 2,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor
);
} else {
ctx.clearRect(
canvasX - (basePixelCount * scaleFactor) / 2,
canvasY - (basePixelCount * scaleFactor) / 2,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor
);
}
} }
} }
} }
@ -601,186 +529,8 @@ function mouseUp(evt) {
drawThis.h = target.h; drawThis.h = target.h;
drawIt = drawThis; // i still think this is really stupid and redundant and unnecessary and redundant drawIt = drawThis; // i still think this is really stupid and redundant and unnecessary and redundant
drop(drawIt); drop(drawIt);
} else if (paintMode) {
clicked = false;
return;
} else {
if (!blockNewImages) {
//TODO seriously, refactor this
blockNewImages = true;
marching = inProgress = true;
var drawIt = {}; //why am i doing this????
var target = drawTargets[drawTargets.length - 1]; //get the last one... why am i storing all of them?
var oddOffset = 0;
if (scaleFactor % 2 != 0) {
oddOffset = basePixelCount / 2;
}
snapOffsetX = 0;
snapOffsetY = 0;
if (snapToGrid) {
snapOffsetX = snap(target.x);
snapOffsetY = snap(target.y);
}
finalX = snapOffsetX + target.x - oddOffset;
finalY = snapOffsetY + target.y - oddOffset;
drawThis.x = marchCoords.x = finalX;
drawThis.y = marchCoords.y = finalY;
drawThis.w = marchCoords.w = target.w;
drawThis.h = marchCoords.h = target.h;
march(finalX, finalY, target.w, target.h);
drawIt = drawThis; //TODO this is WRONG but also explicitly only draws the last image ... i think
//check if there's image data already there
// console.log(downX + ":" + downY + " :: " + this.isCanvasBlank(downX, downY));
if (!isCanvasBlank(drawIt.x, drawIt.y, drawIt.w, drawIt.h, imgCanvas)) {
// image exists, set up for img2img
var mainCanvasCtx = document
.getElementById("canvas")
.getContext("2d");
const imgChunk = mainCanvasCtx.getImageData(
drawIt.x,
drawIt.y,
drawIt.w,
drawIt.h
); // imagedata object of the image being outpainted
const imgChunkData = imgChunk.data; // imagedata.data object, a big inconvenient uint8clampedarray
// these are the 3 mask monitors on the bottom of the page
var initImgCanvas = document.getElementById("initImgCanvasMonitor");
var overMaskCanvas = document.getElementById("overMaskCanvasMonitor");
overMaskCanvas.width = initImgCanvas.width = target.w; //maskCanvas.width = target.w;
overMaskCanvas.height = initImgCanvas.height = target.h; //maskCanvas.height = target.h;
var initImgCanvasCtx = initImgCanvas.getContext("2d");
var overMaskCanvasCtx = overMaskCanvas.getContext("2d");
// get blank pixels to use as mask
const initImgData = mainCanvasCtx.createImageData(drawIt.w, drawIt.h);
let overMaskImgData = overMaskCanvasCtx.createImageData(
drawIt.w,
drawIt.h
);
// cover entire masks in black before adding masked areas
for (let i = 0; i < imgChunkData.length; i += 4) {
// l->r, top->bottom, R G B A pixel values in a big ol array
// make a simple mask
if (imgChunkData[i + 3] == 0) {
// rgba pixel values, 4th one is alpha, if it's 0 there's "nothing there" in the image display canvas and its time to outpaint
overMaskImgData.data[i] = 255; // white mask gets painted over
overMaskImgData.data[i + 1] = 255;
overMaskImgData.data[i + 2] = 255;
overMaskImgData.data[i + 3] = 255;
initImgData.data[i] = 0; // null area on initial image becomes opaque black pixels
initImgData.data[i + 1] = 0;
initImgData.data[i + 2] = 0;
initImgData.data[i + 3] = 255;
} else {
// leave these pixels alone
overMaskImgData.data[i] = 0; // black mask gets ignored for in/outpainting
overMaskImgData.data[i + 1] = 0;
overMaskImgData.data[i + 2] = 0;
overMaskImgData.data[i + 3] = 255; // but it still needs an opaque alpha channel
initImgData.data[i] = imgChunkData[i]; // put the original picture back in the painted area
initImgData.data[i + 1] = imgChunkData[i + 1];
initImgData.data[i + 2] = imgChunkData[i + 2];
initImgData.data[i + 3] = imgChunkData[i + 3]; //it's still RGBA so we can handily do this in nice chunks'o'4
} }
} }
if (overMaskPx > 0) {
// https://stackoverflow.com/a/30204783 ???? !!!!!!!!
overMaskCanvasCtx.fillStyle = "black";
overMaskCanvasCtx.fillRect(0, 0, drawIt.w, drawIt.h); // fill with black instead of null to start
for (i = 0; i < overMaskImgData.data.length; i += 4) {
if (overMaskImgData.data[i] == 255) {
// white pixel?
// just blotch all over the thing
var rando = Math.floor(Math.random() * overMaskPx);
overMaskCanvasCtx.beginPath();
overMaskCanvasCtx.arc(
(i / 4) % overMaskCanvas.width,
Math.floor(i / 4 / overMaskCanvas.width),
scaleFactor + rando, // was 4 * sf + rando, too big
0,
2 * Math.PI,
true
);
overMaskCanvasCtx.fillStyle = "#FFFFFFFF";
overMaskCanvasCtx.fill();
}
}
overMaskImgData = overMaskCanvasCtx.getImageData(
0,
0,
overMaskCanvas.width,
overMaskCanvas.height
);
overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0);
}
// also check for painted masks in region, add them as white pixels to mask canvas
const maskChunk = maskPaintCtx.getImageData(
drawIt.x,
drawIt.y,
drawIt.w,
drawIt.h
);
const maskChunkData = maskChunk.data;
for (let i = 0; i < maskChunkData.length; i += 4) {
if (maskChunkData[i + 3] != 0) {
overMaskImgData.data[i] = 255;
overMaskImgData.data[i + 1] = 255;
overMaskImgData.data[i + 2] = 255;
overMaskImgData.data[i + 3] = 255;
}
}
// backup any painted masks ingested then them, replacable if user doesn't like resultant image
var clearArea = maskPaintCtx.createImageData(drawIt.w, drawIt.h);
backupMaskChunk = maskChunk;
backupMaskX = drawIt.x;
backupMaskY = drawIt.y;
var clearD = clearArea.data;
for (let i = 0; i < clearD.length; i++) {
clearD[i] = 0; // just null it all out
}
maskPaintCtx.putImageData(clearArea, drawIt.x, drawIt.y);
// mask monitors
overMaskCanvasCtx.putImageData(overMaskImgData, 0, 0); // :pray:
var overMaskBase64 = overMaskCanvas.toDataURL();
initImgCanvasCtx.putImageData(initImgData, 0, 0);
var initImgBase64 = initImgCanvas.toDataURL();
// anyway all that to say NOW let's run img2img
endpoint = "img2img";
stableDiffusionData.mask = overMaskBase64;
stableDiffusionData.init_images = [initImgBase64];
// slightly more involved than txt2img
} else {
// time to run txt2img
endpoint = "txt2img";
// easy enough
}
stableDiffusionData.prompt = document.getElementById("prompt").value;
stableDiffusionData.negative_prompt =
document.getElementById("negPrompt").value;
stableDiffusionData.width = drawIt.w;
stableDiffusionData.height = drawIt.h;
stableDiffusionData.firstphase_height = drawIt.h / 2;
stableDiffusionData.firstphase_width = drawIt.w / 2;
dream(drawIt.x, drawIt.y, stableDiffusionData);
}
}
}
}
function changePaintMode() {
paintMode = document.getElementById("cbxPaint").checked;
clearTargetMask();
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
}
function changeEnableErasing() {
// yeah because this is for the image layer
enableErasing = document.getElementById("cbxEnableErasing").checked;
localStorage.setItem("enable_erase", enableErasing);
} }
function changeSampler() { function changeSampler() {
@ -816,6 +566,7 @@ const changeScaleFactor = sliderChangeHandlerFactory(
"scaleFactorTxt", "scaleFactorTxt",
"scaleFactor", "scaleFactor",
8, 8,
true,
(k, v) => (scaleFactor = v), (k, v) => (scaleFactor = v),
(k) => scaleFactor (k) => scaleFactor
); );
@ -1247,6 +998,5 @@ function loadSettings() {
document.getElementById("maskBlur").value = Number(_mask_blur); document.getElementById("maskBlur").value = Number(_mask_blur);
document.getElementById("seed").value = Number(_seed); document.getElementById("seed").value = Number(_seed);
document.getElementById("cbxHRFix").checked = Boolean(_enable_hr); document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
document.getElementById("cbxEnableErasing").checked = Boolean(_enable_erase);
document.getElementById("overMaskPx").value = Number(_overmask_px); document.getElementById("overMaskPx").value = Number(_overmask_px);
} }

View file

@ -31,9 +31,9 @@ function _context_coords() {
} }
function _mouse_observers() { function _mouse_observers() {
return { return {
// Simple click handlers // Simple click handler
onclick: new Observer(), onclick: new Observer(),
// Double click handlers (will still trigger simple click handler as well) // Double click handler (will still trigger simple click handler as well)
ondclick: new Observer(), ondclick: new Observer(),
// Drag handler // Drag handler
ondragstart: new Observer(), ondragstart: new Observer(),
@ -48,6 +48,7 @@ function _mouse_observers() {
function _context_observers() { function _context_observers() {
return { return {
onwheel: new Observer(),
onmousemove: new Observer(), onmousemove: new Observer(),
left: _mouse_observers(), left: _mouse_observers(),
middle: _mouse_observers(), middle: _mouse_observers(),
@ -270,36 +271,27 @@ window.onmousemove = (evn) => {
}); });
}); });
}; };
/** MOUSE DEBUG */
/*
mouse.listen.window.right.onclick.on(() =>
console.debug('mouse.listen.window.right.onclick')
);
mouse.listen.window.right.ondclick.on(() => window.addEventListener(
console.debug('mouse.listen.window.right.ondclick') "wheel",
(evn) => {
evn.preventDefault();
["window", "canvas", "world"].forEach((ctx) => {
mouse.listen[ctx].onwheel.emit({
target: evn.target,
delta: evn.deltaY,
deltaX: evn.deltaX,
deltaY: evn.deltaY,
deltaZ: evn.deltaZ,
mode: evn.deltaMode,
x: mouse[ctx].pos.x,
y: mouse[ctx].pos.y,
timestamp: new Date(),
});
});
},
{passive: false}
); );
mouse.listen.window.right.ondragstart.on(() =>
console.debug('mouse.listen.window.right.ondragstart')
);
mouse.listen.window.right.ondrag.on(() =>
console.debug('mouse.listen.window.right.ondrag')
);
mouse.listen.window.right.ondragend.on(() =>
console.debug('mouse.listen.window.right.ondragend')
);
mouse.listen.window.right.onpaintstart.on(() =>
console.debug('mouse.listen.window.right.onpaintstart')
);
mouse.listen.window.right.onpaint.on(() =>
console.debug('mouse.listen.window.right.onpaint')
);
mouse.listen.window.right.onpaintend.on(() =>
console.debug('mouse.listen.window.right.onpaintend')
);
*/
/** /**
* Keyboard input processing * Keyboard input processing
*/ */
@ -370,7 +362,18 @@ window.onkeydown = (evn) => {
}, inputConfig.keyboardHoldTiming), }, inputConfig.keyboardHoldTiming),
}; };
// Process shortcuts // Process shortcuts if input target is not a text field
switch (evn.target.tagName.toLowerCase()) {
case "input":
case "textarea":
case "select":
case "button":
return; // If in an input field, do not process shortcuts
default:
// Do nothing
break;
}
const callbacks = keyboard.shortcuts[evn.code]; const callbacks = keyboard.shortcuts[evn.code];
if (callbacks) if (callbacks)

View file

@ -1,40 +1,4 @@
//dragElement(document.getElementById("infoContainer")); function makeDraggable(element) {
//dragElement(document.getElementById("historyContainer"));
function dragElement(elmnt) {
var p3 = 0,
p4 = 0;
var draggableElements = elmnt.getElementsByClassName("draggable");
for (var i = 0; i < draggableElements.length; i++) {
draggableElements[i].onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e.preventDefault();
p3 = e.clientX;
p4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e.preventDefault();
elmnt.style.bottom = null;
elmnt.style.right = null;
elmnt.style.top = elmnt.offsetTop - (p4 - e.clientY) + "px";
elmnt.style.left = elmnt.offsetLeft - (p3 - e.clientX) + "px";
p3 = e.clientX;
p4 = e.clientY;
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
function makeDraggable(id) {
const element = document.getElementById(id);
const startbb = element.getBoundingClientRect(); const startbb = element.getBoundingClientRect();
let dragging = false; let dragging = false;
let offset = {x: 0, y: 0}; let offset = {x: 0, y: 0};
@ -66,7 +30,9 @@ function makeDraggable(id) {
}); });
} }
makeDraggable("infoContainer"); document.querySelectorAll(".floating-window").forEach((w) => {
makeDraggable(w);
});
var coll = document.getElementsByClassName("collapsible"); var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) { for (var i = 0; i < coll.length; i++) {

View file

@ -6,3 +6,14 @@ keyboard.onShortcut({ctrl: true, key: "KeyZ"}, () => {
keyboard.onShortcut({ctrl: true, key: "KeyY"}, () => { keyboard.onShortcut({ctrl: true, key: "KeyY"}, () => {
commands.redo(); commands.redo();
}); });
// Tool shortcuts
keyboard.onShortcut({key: "KeyD"}, () => {
tools.dream.enable();
});
keyboard.onShortcut({key: "KeyM"}, () => {
tools.maskbrush.enable();
});
keyboard.onShortcut({key: "KeyI"}, () => {
tools.img2img.enable();
});

View file

@ -1,6 +1,4 @@
(() => { (() => {
makeDraggable("historyContainer");
const historyView = document.getElementById("history"); const historyView = document.getElementById("history");
const makeHistoryEntry = (index, id, title) => { const makeHistoryEntry = (index, id, title) => {
@ -27,18 +25,26 @@
}; };
_commands_events.on((message) => { _commands_events.on((message) => {
if (message.action === "run") {
Array.from(historyView.children).forEach((child) => {
if (
!commands.history.find((entry) => `hist-${entry.id}` === child.id)
) {
console.log("Removing " + child.id);
historyView.removeChild(child);
}
});
}
commands.history.forEach((entry, index) => { commands.history.forEach((entry, index) => {
console.log("Inserting " + entry.id);
if (!document.getElementById(`hist-${entry.id}`)) { if (!document.getElementById(`hist-${entry.id}`)) {
console.log("Inserting " + entry.id);
historyView.appendChild( historyView.appendChild(
makeHistoryEntry(index, `hist-${entry.id}`, entry.title) makeHistoryEntry(index, `hist-${entry.id}`, entry.title)
); );
} }
}); });
while (historyView.children.length > commands.history.length)
historyView.removeChild(historyView.lastElementChild);
Array.from(historyView.children).forEach((child, index) => { Array.from(historyView.children).forEach((child, index) => {
if (index === commands.current) { if (index === commands.current) {
child.classList.remove(["past"]); child.classList.remove(["past"]);

178
js/ui/tool/dream.js Normal file
View file

@ -0,0 +1,178 @@
const dream_generate_callback = (evn, state) => {
if (evn.target.id === "overlayCanvas" && !blockNewImages) {
const bb = getBoundingBox(
evn.x,
evn.y,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor,
state.snapToGrid && basePixelCount
);
// Build request to the API
const request = {};
Object.assign(request, stableDiffusionData);
// Load prompt (maybe we should add some events so we don't have to do this)
request.prompt = document.getElementById("prompt").value;
request.negative_prompt = document.getElementById("negPrompt").value;
// Don't allow another image until is finished
blockNewImages = true;
// Setup marching ants
stopMarching = march(bb);
// Setup some basic information for SD
request.width = bb.w;
request.height = bb.h;
request.firstphase_width = bb.w / 2;
request.firstphase_height = bb.h / 2;
// Use txt2img if canvas is blank
if (isCanvasBlank(bb.x, bb.y, bb.w, bb.h, imgCanvas)) {
// Dream
dream(bb.x, bb.y, request, {method: "txt2img", stopMarching, bb});
} else {
// Use img2img if not
// Temporary canvas for init image and mask generation
const auxCanvas = document.createElement("canvas");
auxCanvas.width = request.width;
auxCanvas.height = request.height;
const auxCtx = auxCanvas.getContext("2d");
auxCtx.fillStyle = "#000F";
// Get init image
auxCtx.fillRect(0, 0, bb.w, bb.h);
auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
request.init_images = [auxCanvas.toDataURL()];
// Get mask image
auxCtx.fillRect(0, 0, bb.w, bb.h);
auxCtx.globalCompositeOperation = "destination-in";
auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
auxCtx.globalCompositeOperation = "destination-out";
auxCtx.drawImage(
maskPaintCanvas,
bb.x,
bb.y,
bb.w,
bb.h,
0,
0,
bb.w,
bb.h
);
auxCtx.globalCompositeOperation = "destination-atop";
auxCtx.fillStyle = "#FFFF";
auxCtx.fillRect(0, 0, bb.w, bb.h);
request.mask = auxCanvas.toDataURL();
// Dream
dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb});
}
}
};
const dream_erase_callback = (evn, state) => {
const bb = getBoundingBox(
evn.x,
evn.y,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor,
state.snapToGrid && basePixelCount
);
commands.runCommand("eraseImage", "Erase Area", bb);
};
/**
* Image to Image
*/
const dream_img2img_callback = (evn, state) => {
if (evn.target.id === "overlayCanvas" && !blockNewImages) {
const bb = getBoundingBox(
evn.x,
evn.y,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor,
state.snapToGrid && basePixelCount
);
// Do nothing if no image exists
if (isCanvasBlank(bb.x, bb.y, bb.w, bb.h, imgCanvas)) return;
// Build request to the API
const request = {};
Object.assign(request, stableDiffusionData);
request.denoising_strength = state.denoisingStrength;
request.inpainting_fill = 1; // For img2img use original
// Load prompt (maybe we should add some events so we don't have to do this)
request.prompt = document.getElementById("prompt").value;
request.negative_prompt = document.getElementById("negPrompt").value;
// Don't allow another image until is finished
blockNewImages = true;
// Setup marching ants
stopMarching = march(bb);
// Setup some basic information for SD
request.width = bb.w;
request.height = bb.h;
request.firstphase_width = bb.w / 2;
request.firstphase_height = bb.h / 2;
// Use img2img
// Temporary canvas for init image and mask generation
const auxCanvas = document.createElement("canvas");
auxCanvas.width = request.width;
auxCanvas.height = request.height;
const auxCtx = auxCanvas.getContext("2d");
auxCtx.fillStyle = "#000F";
// Get init image
auxCtx.fillRect(0, 0, bb.w, bb.h);
auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
request.init_images = [auxCanvas.toDataURL()];
// Get mask image
auxCtx.fillRect(0, 0, bb.w, bb.h);
auxCtx.globalCompositeOperation = "destination-out";
auxCtx.drawImage(maskPaintCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
// Border Mask
if (state.useBorderMask) {
auxCtx.fillStyle = "#000F";
auxCtx.fillRect(0, 0, state.borderMaskSize, bb.h);
auxCtx.fillRect(0, 0, bb.w, state.borderMaskSize);
auxCtx.fillRect(
bb.w - state.borderMaskSize,
0,
state.borderMaskSize,
bb.h
);
auxCtx.fillRect(
0,
bb.h - state.borderMaskSize,
bb.w,
state.borderMaskSize
);
}
auxCtx.globalCompositeOperation = "destination-atop";
auxCtx.fillStyle = "#FFFF";
auxCtx.fillRect(0, 0, bb.w, bb.h);
request.mask = auxCanvas.toDataURL();
request.inpainting_mask_invert = true;
// Dream
dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb});
}
};

27
js/ui/tool/maskbrush.js Normal file
View file

@ -0,0 +1,27 @@
const mask_brush_draw_callback = (evn, state) => {
if (evn.initialTarget.id === "overlayCanvas") {
maskPaintCtx.globalCompositeOperation = "source-over";
maskPaintCtx.strokeStyle = "#FF6A6A";
maskPaintCtx.lineWidth = state.brushSize;
maskPaintCtx.beginPath();
maskPaintCtx.moveTo(evn.px, evn.py);
maskPaintCtx.lineTo(evn.x, evn.y);
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
maskPaintCtx.stroke();
}
};
const mask_brush_erase_callback = (evn, state) => {
if (evn.initialTarget.id === "overlayCanvas") {
maskPaintCtx.globalCompositeOperation = "destination-out";
maskPaintCtx.strokeStyle = "#FFFFFFFF";
maskPaintCtx.lineWidth = state.brushSize;
maskPaintCtx.beginPath();
maskPaintCtx.moveTo(evn.px, evn.py);
maskPaintCtx.lineTo(evn.x, evn.y);
maskPaintCtx.lineJoin = maskPaintCtx.lineCap = "round";
maskPaintCtx.stroke();
}
};

456
js/ui/toolbar.js Normal file
View file

@ -0,0 +1,456 @@
/**
* Toolbar
*/
const toolbar = {
_toolbar: document.getElementById("ui-toolbar"),
tools: [],
_makeToolbarEntry: (tool) => {
const toolTitle = document.createElement("img");
toolTitle.classList.add("tool-icon");
toolTitle.src = tool.icon;
const toolEl = document.createElement("div");
toolEl.id = `tool-${tool.id}`;
toolEl.classList.add("tool");
toolEl.title = tool.name;
if (tool.options.shortcut) toolEl.title += ` (${tool.options.shortcut})`;
toolEl.onclick = () => tool.enable();
toolEl.appendChild(toolTitle);
return toolEl;
},
registerTool(
icon,
toolname,
enable,
disable,
options = {
/**
* Runs on tool creation. It receives the tool state.
*
* Can be used to setup callback functions, for example.
*/
init: null,
/**
* Function to populate the state menu.
*
* It receives a div element (that is the menu) and the current tool state.
*/
populateContextMenu: null,
/**
* Help description of the tool; for now used for nothing
*/
description: "",
/**
* Shortcut; Text describing this tool's shortcut access
*/
shortcut: "",
}
) {
// Set some defaults
if (!options.init)
options.init = (state) => console.debug(`Initialized tool '${toolname}'`);
if (!options.populateContextMenu)
options.populateContextMenu = (menu, state) => {
const span = document.createElement("span");
span.textContent = "Tool has no context menu";
menu.appendChild(span);
return;
};
// Create tool
const id = guid();
const contextMenuEl = document.getElementById("tool-context");
const tool = {
id,
icon,
name: toolname,
enabled: false,
_element: null,
state: {},
options,
enable: (opt = null) => {
this.tools.filter((t) => t.enabled).forEach((t) => t.disable());
while (contextMenuEl.lastChild) {
contextMenuEl.removeChild(contextMenuEl.lastChild);
}
options.populateContextMenu(contextMenuEl, tool.state);
tool._element && tool._element.classList.add("using");
tool.enabled = true;
enable(tool.state, opt);
},
disable: (opt = null) => {
tool._element && tool._element.classList.remove("using");
disable(tool.state, opt);
tool.enabled = false;
},
};
// Initalize
options.init && options.init(tool.state);
this.tools.push(tool);
// Add tool to toolbar
tool._element = this._makeToolbarEntry(tool);
this._toolbar.appendChild(tool._element);
return tool;
},
addSeparator() {
const separator = document.createElement("div");
separator.classList.add("separator");
this._toolbar.appendChild(separator);
},
};
/**
* Premade inputs for populating the context menus
*/
const _toolbar_input = {
checkbox: (state, dataKey, text) => {
if (state[dataKey] === undefined) state[dataKey] = false;
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = state[dataKey];
checkbox.onchange = () => (state[dataKey] = checkbox.checked);
const label = document.createElement("label");
label.appendChild(checkbox);
label.appendChild(new Text(text));
return {checkbox, label};
},
slider: (state, dataKey, text, min = 0, max = 1, step = 0.1) => {
const slider = document.createElement("input");
slider.type = "range";
slider.max = max;
slider.step = step;
slider.min = min;
slider.value = state[dataKey];
const textEl = document.createElement("input");
textEl.type = "number";
textEl.value = state[dataKey];
console.log(state[dataKey]);
sliderChangeHandlerFactoryEl(
slider,
textEl,
dataKey,
state[dataKey],
false,
(k, v) => (state[dataKey] = v),
(k) => state[dataKey]
);
const label = document.createElement("label");
label.appendChild(new Text(text));
label.appendChild(textEl);
label.appendChild(slider);
return {
slider,
text: textEl,
label,
setValue(v) {
slider.value = v;
textEl.value = slider.value;
return parseInt(slider.value);
},
};
},
};
/**
* Dream and img2img tools
*/
const _reticle_draw = (evn, snapToGrid = true) => {
if (evn.target.id === "overlayCanvas") {
const bb = getBoundingBox(
evn.x,
evn.y,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor,
snapToGrid && basePixelCount
);
// draw targeting square reticle thingy cursor
ovCtx.strokeStyle = "#FFF";
ovCtx.strokeRect(bb.x, bb.y, bb.w, bb.h); //origin is middle of the frame
}
};
const tools = {};
/**
* Dream tool
*/
tools.dream = toolbar.registerTool(
"res/icons/image-plus.svg",
"Dream",
(state, opt) => {
// Draw new cursor immediately
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
state.mousemovecb({...mouse.canvas.pos, target: {id: "overlayCanvas"}});
// Start Listeners
mouse.listen.canvas.onmousemove.on(state.mousemovecb);
mouse.listen.canvas.left.onclick.on(state.dreamcb);
mouse.listen.canvas.right.onclick.on(state.erasecb);
},
(state, opt) => {
// Clear Listeners
mouse.listen.canvas.onmousemove.clear(state.mousemovecb);
mouse.listen.canvas.left.onclick.clear(state.dreamcb);
mouse.listen.canvas.right.onclick.clear(state.erasecb);
},
{
init: (state) => {
state.snapToGrid = true;
state.mousemovecb = (evn) => _reticle_draw(evn, state.snapToGrid);
state.dreamcb = (evn) => {
dream_generate_callback(evn, state);
};
state.erasecb = (evn) => dream_erase_callback(evn, state);
},
populateContextMenu: (menu, state) => {
if (!state.ctxmenu) {
state.ctxmenu = {};
state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
state,
"snapToGrid",
"Snap To Grid"
).label;
}
menu.appendChild(state.ctxmenu.snapToGridLabel);
},
shortcut: "D",
}
);
tools.img2img = toolbar.registerTool(
"res/icons/image.svg",
"Img2Img",
(state, opt) => {
// Draw new cursor immediately
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
state.mousemovecb({...mouse.canvas.pos, target: {id: "overlayCanvas"}});
// Start Listeners
mouse.listen.canvas.onmousemove.on(state.mousemovecb);
mouse.listen.canvas.left.onclick.on(state.dreamcb);
mouse.listen.canvas.right.onclick.on(state.erasecb);
},
(state, opt) => {
// Clear Listeners
mouse.listen.canvas.onmousemove.clear(state.mousemovecb);
mouse.listen.canvas.left.onclick.clear(state.dreamcb);
mouse.listen.canvas.right.onclick.clear(state.erasecb);
},
{
init: (state) => {
state.snapToGrid = true;
state.denoisingStrength = 0.7;
state.useBorderMask = true;
state.borderMaskSize = 64;
state.mousemovecb = (evn) => {
_reticle_draw(evn, state.snapToGrid);
const bb = getBoundingBox(
evn.x,
evn.y,
basePixelCount * scaleFactor,
basePixelCount * scaleFactor,
state.snapToGrid && basePixelCount
);
// For displaying border mask
const auxCanvas = document.createElement("canvas");
auxCanvas.width = bb.w;
auxCanvas.height = bb.h;
const auxCtx = auxCanvas.getContext("2d");
if (state.useBorderMask) {
auxCtx.fillStyle = "#FF6A6A50";
auxCtx.fillRect(0, 0, state.borderMaskSize, bb.h);
auxCtx.fillRect(0, 0, bb.w, state.borderMaskSize);
auxCtx.fillRect(
bb.w - state.borderMaskSize,
0,
state.borderMaskSize,
bb.h
);
auxCtx.fillRect(
0,
bb.h - state.borderMaskSize,
bb.w,
state.borderMaskSize
);
}
const tmp = ovCtx.globalAlpha;
ovCtx.globalAlpha = 0.4;
ovCtx.drawImage(auxCanvas, bb.x, bb.y);
ovCtx.globalAlpha = tmp;
};
state.dreamcb = (evn) => {
dream_img2img_callback(evn, state);
};
state.erasecb = (evn) => dream_erase_callback(evn, state);
},
populateContextMenu: (menu, state) => {
if (!state.ctxmenu) {
state.ctxmenu = {};
// Snap To Grid Checkbox
state.ctxmenu.snapToGridLabel = _toolbar_input.checkbox(
state,
"snapToGrid",
"Snap To Grid"
).label;
// Denoising Strength Slider
state.ctxmenu.denoisingStrengthLabel = _toolbar_input.slider(
state,
"denoisingStrength",
"Denoising Strength",
0,
1,
0.05
).label;
// Use Border Mask Checkbox
state.ctxmenu.useBorderMaskLabel = _toolbar_input.checkbox(
state,
"useBorderMask",
"Use Border Mask"
).label;
// Border Mask Size Slider
state.ctxmenu.borderMaskSize = _toolbar_input.slider(
state,
"borderMaskSize",
"Border Mask Size",
0,
128,
1
).label;
}
menu.appendChild(state.ctxmenu.snapToGridLabel);
menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.denoisingStrengthLabel);
menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.useBorderMaskLabel);
menu.appendChild(document.createElement("br"));
menu.appendChild(state.ctxmenu.borderMaskSize);
},
shortcut: "I",
}
);
/**
* Mask Editing tools
*/
toolbar.addSeparator();
/**
* Mask Brush tool
*/
tools.maskbrush = toolbar.registerTool(
"res/icons/paintbrush.svg",
"Mask Brush",
(state, opt) => {
// Draw new cursor immediately
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
state.movecb({...mouse.canvas.pos, target: {id: "overlayCanvas"}});
// Start Listeners
mouse.listen.canvas.onmousemove.on(state.movecb);
mouse.listen.canvas.onwheel.on(state.wheelcb);
mouse.listen.canvas.left.onpaint.on(state.drawcb);
mouse.listen.canvas.right.onpaint.on(state.erasecb);
},
(state, opt) => {
// Clear Listeners
mouse.listen.canvas.onmousemove.clear(state.movecb);
mouse.listen.canvas.onwheel.on(state.wheelcb);
mouse.listen.canvas.left.onpaint.clear(state.drawcb);
mouse.listen.canvas.right.onpaint.clear(state.erasecb);
},
{
init: (state) => {
state.config = {
brushScrollSpeed: 1 / 4,
minBrushSize: 10,
maxBrushSize: 500,
};
state.brushSize = 64;
state.setBrushSize = (size) => {
state.brushSize = size;
state.ctxmenu.brushSizeRange.value = size;
state.ctxmenu.brushSizeText.value = size;
};
state.movecb = (evn) => {
if (evn.target.id === "overlayCanvas") {
// draw big translucent red blob cursor
ovCtx.beginPath();
ovCtx.arc(evn.x, evn.y, state.brushSize / 2, 0, 2 * Math.PI, true); // for some reason 4x on an arc is === to 8x on a line???
ovCtx.fillStyle = "#FF6A6A50";
ovCtx.fill();
}
};
state.wheelcb = (evn) => {
if (evn.target.id === "overlayCanvas") {
state.brushSize = state.setBrushSize(
state.brushSize -
Math.floor(state.config.brushScrollSpeed * evn.delta)
);
ovCtx.clearRect(0, 0, ovCanvas.width, ovCanvas.height);
state.movecb(evn);
}
};
state.drawcb = (evn) => mask_brush_draw_callback(evn, state);
state.erasecb = (evn) => mask_brush_erase_callback(evn, state);
},
populateContextMenu: (menu, state) => {
if (!state.ctxmenu) {
state.ctxmenu = {};
const brushSizeSlider = _toolbar_input.slider(
state,
"brushSize",
"Brush Size",
state.config.minBrushSize,
state.config.maxBrushSize,
1
);
state.ctxmenu.brushSizeLabel = brushSizeSlider.label;
state.setBrushSize = brushSizeSlider.setValue;
}
menu.appendChild(state.ctxmenu.brushSizeLabel);
},
shortcut: "M",
}
);
toolbar.tools[0].enable();

View file

@ -41,3 +41,41 @@ const guid = (size = 3) => {
id += s4(); id += s4();
return id; return id;
}; };
/**
* Bounding box Calculation
*/
function snap(i, scaled = true, gridSize = 64) {
// very cheap test proof of concept but it works surprisingly well
var scaleOffset = 0;
if (scaled) {
if (scaleFactor % 2 != 0) {
// odd number, snaps to center of cell, oops
scaleOffset = gridSize / 2;
}
}
var snapOffset = (i % gridSize) - scaleOffset;
if (snapOffset == 0) {
return snapOffset;
}
return -snapOffset;
}
function getBoundingBox(cx, cy, w, h, gridSnap = null) {
const offset = {x: 0, y: 0};
const box = {x: 0, y: 0};
if (gridSnap) {
offset.x = snap(cx, true, gridSnap);
offset.y = snap(cy, true, gridSnap);
}
box.x = offset.x + cx;
box.y = offset.y + cy;
return {
x: Math.floor(box.x - w / 2),
y: Math.floor(box.y - h / 2),
w,
h,
};
}

7
res/icons/LICENSE Normal file
View file

@ -0,0 +1,7 @@
ISC License
Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

8
res/icons/image-plus.svg Normal file
View file

@ -0,0 +1,8 @@
<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="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"></path>
<line x1="16" y1="5" x2="22" y2="5"></line>
<line x1="19" y1="2" x2="19" y2="8"></line>
<circle cx="9" cy="9" r="2"></circle>
<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
</svg>

After

Width:  |  Height:  |  Size: 460 B

6
res/icons/image.svg Normal file
View file

@ -0,0 +1,6 @@
<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">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="9" cy="9" r="2"></circle>
<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
</svg>

After

Width:  |  Height:  |  Size: 356 B

6
res/icons/paintbrush.svg Normal file
View file

@ -0,0 +1,6 @@
<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="M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z"></path>
<path d="M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7"></path>
<path d="M14.5 17.5 4.5 15"></path>
</svg>

After

Width:  |  Height:  |  Size: 421 B