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

Optimize background drawing by leveraging CSS

Browse source 
We now use CSS to background tile the grid

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
This commit is contained in:
Victor Seiji Hariki 2023-01-18 20:55:04 -03:00
parent 874e39de4b
commit 643f79fb84
7 changed files with 50 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
css/ui/layers.css
View file

@ -149,6 +149,7 @@
cursor: pointer;
transition-duration: 300ms;
transition-property: background-color;
border: 2px solid #293d3d30;
}

9
index.html
View file

@ -13,7 +13,7 @@
<link href="css/ui/generic.css?v=30837f8" rel="stylesheet" />
<link href="css/ui/history.css?v=0b03861" rel="stylesheet" />
<link href="css/ui/layers.css?v=ae472cd" rel="stylesheet" />
<link href="css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
<link href="css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
<!-- Tool Specific CSS -->
@ -348,7 +348,7 @@
<script src="js/global.js?v=3a1cde6" type="text/javascript"></script>
<!-- Base Libs -->
<script src="js/lib/util.js?v=49a78a6" type="text/javascript"></script>
<script src="js/lib/util.js?v=e82dd04" type="text/javascript"></script>
<script src="js/lib/events.js?v=2ab7933" type="text/javascript"></script>
<script src="js/lib/input.js?v=aa14afc" type="text/javascript"></script>
<script src="js/lib/layers.js?v=a1f8aea" type="text/javascript"></script>
@ -358,15 +358,16 @@
<script src="js/lib/ui.js?v=fe9b702" type="text/javascript"></script>
<script
src="js/initalize/layers.populate.js?v=cb046ad"
src="js/initalize/layers.populate.js?v=8bc8815"
type="text/javascript"></script>
<!-- Configuration -->
<script src="js/config.js?v=e0345e0" type="text/javascript"></script>
<script src="js/theme.js?v=435cc1b" type="text/javascript"></script>
<!-- Content -->
<script src="js/prompt.js?v=7a1c68c" type="text/javascript"></script>
<script src="js/index.js?v=dc296e8" type="text/javascript"></script>
<script src="js/index.js?v=6944460" type="text/javascript"></script>
<script
src="js/ui/floating/history.js?v=fc92d14"

26
js/index.js
View file

@ -822,6 +822,32 @@ function isCanvasBlank(x, y, w, h, canvas) {
}
function drawBackground() {
{
// Existing Canvas BG
const canvas = document.createElement("canvas");
canvas.width = config.gridSize * 2;
canvas.height = config.gridSize * 2;
const ctx = canvas.getContext("2d");
ctx.fillStyle = theme.grid.dark;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = theme.grid.light;
ctx.fillRect(0, 0, config.gridSize, config.gridSize);
ctx.fillRect(
config.gridSize,
config.gridSize,
config.gridSize,
config.gridSize
);
canvas.toBlob((blob) => {
const url = window.URL.createObjectURL(blob);
console.debug(url);
bgLayer.canvas.style.backgroundImage = `url(${url})`;
});
}
return;
// Checkerboard
let darkTileColor = "#333";
let lightTileColor = "#555";

14
js/initalize/layers.populate.js
View file

@ -93,7 +93,11 @@ const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
let size = null;
if ((size = askSize(e))) {
imageCollection.expand(size, 0, 0, 0);
drawBackground();
bgLayer.canvas.style.backgroundPosition = `${-snap(
imageCollection.origin.x,
0,
config.gridSize * 2
)}px ${-snap(imageCollection.origin.y, 0, config.gridSize * 2)}px`;
const newLeft = -imageCollection.inputOffset.x - imageCollection.origin.x;
leftButton.style.left = newLeft - 64 + "px";
topButton.style.left = newLeft + "px";
@ -111,7 +115,6 @@ const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
let size = null;
if ((size = askSize(e))) {
imageCollection.expand(0, 0, size, 0);
drawBackground();
rightButton.style.left =
parseInt(rightButton.style.left, 10) + size + "px";
topButton.style.width = imageCollection.size.w + "px";
@ -127,7 +130,11 @@ const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
let size = null;
if ((size = askSize(e))) {
imageCollection.expand(0, size, 0, 0);
drawBackground();
bgLayer.canvas.style.backgroundPosition = `${-snap(
imageCollection.origin.x,
0,
config.gridSize * 2
)}px ${-snap(imageCollection.origin.y, 0, config.gridSize * 2)}px`;
const newTop = -imageCollection.inputOffset.y - imageCollection.origin.y;
topButton.style.top = newTop - 64 + "px";
leftButton.style.top = newTop + "px";
@ -145,7 +152,6 @@ const uiCtx = uiCanvas.getContext("2d", {desynchronized: true});
let size = null;
if ((size = askSize(e))) {
imageCollection.expand(0, 0, 0, size);
drawBackground();
bottomButton.style.top =
parseInt(bottomButton.style.top, 10) + size + "px";
leftButton.style.height = imageCollection.size.h + "px";

2
js/lib/util.js
View file

@ -302,7 +302,7 @@ function makeWriteOnce(obj, name = "write-once object", exceptions = []) {
* @param {number} [gridSize=64] Size of the grid
* @returns an offset, in which [i + offset = (a location snapped to the grid)]
*/
function snap(i, offset = 0, gridSize = 64) {
function snap(i, offset = 0, gridSize = config.gridSize) {
let diff = i - offset;
if (diff < 0) {
diff += gridSize * Math.ceil(Math.abs(diff / gridSize));

6
js/theme.js Normal file
View file

@ -0,0 +1,6 @@
const theme = {
grid: {
dark: "#333",
light: "#555",
},
};

2
pages/configuration.html
View file

@ -13,7 +13,7 @@
<link href="../css/ui/generic.css?v=30837f8" rel="stylesheet" />
<link href="../css/ui/history.css?v=0b03861" rel="stylesheet" />
<link href="../css/ui/layers.css?v=ae472cd" rel="stylesheet" />
<link href="../css/ui/layers.css?v=1d66c2b" rel="stylesheet" />
<link href="../css/ui/toolbar.css?v=109c78f" rel="stylesheet" />
<!-- Tool Specific CSS -->