44cf9c0e70
Been working on this when I could the last few days. Not quite infinity. Middle mouse button drag, ctrl mouse wheel zoom. Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
285 lines
8 KiB
JavaScript
285 lines
8 KiB
JavaScript
/**
|
|
* Some type definitions before the actual code
|
|
*/
|
|
/**
|
|
* Represents a simple bounding box
|
|
*
|
|
* @typedef BoundingBox
|
|
* @type {Object}
|
|
* @property {number} x - Leftmost coordinate of the box
|
|
* @property {number} y - Topmost coordinate of the box
|
|
* @property {number} w - The bounding box Width
|
|
* @property {number} h - The bounding box Height
|
|
*/
|
|
|
|
/**
|
|
* A simple implementation of the Observer programming pattern
|
|
* @template [T=any] Message type
|
|
*/
|
|
class Observer {
|
|
/**
|
|
* List of handlers
|
|
* @type {Set<(msg: T) => void | Promise<void>>}
|
|
*/
|
|
_handlers = new Set();
|
|
|
|
/**
|
|
* Adds a observer to the events
|
|
*
|
|
* @param {(msg: T) => void | Promise<void>} callback The function to run when receiving a message
|
|
* @returns {(msg:T) => void | Promise<void>} The callback we received
|
|
*/
|
|
on(callback) {
|
|
this._handlers.add(callback);
|
|
return callback;
|
|
}
|
|
/**
|
|
* Removes a observer
|
|
*
|
|
* @param {(msg: T) => void | Promise<void>} callback The function used to register the callback
|
|
* @returns {boolean} Whether the handler existed
|
|
*/
|
|
clear(callback) {
|
|
return this._handlers.delete(callback);
|
|
}
|
|
/**
|
|
* Sends a message to all observers
|
|
*
|
|
* @param {T} msg The message to send to the observers
|
|
*/
|
|
async emit(msg) {
|
|
return Promise.all(
|
|
Array.from(this._handlers).map(async (handler) => {
|
|
try {
|
|
await handler(msg);
|
|
} catch (e) {
|
|
console.warn("Observer failed to run handler");
|
|
console.warn(e);
|
|
}
|
|
})
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Generates a simple UID in the format xxxx-xxxx-...-xxxx, with x being [0-9a-f]
|
|
*
|
|
* @param {number} [size] Number of quartets of characters to generate
|
|
* @returns {string} The new UID
|
|
*/
|
|
const guid = (size = 3) => {
|
|
const s4 = () => {
|
|
return Math.floor((1 + Math.random()) * 0x10000)
|
|
.toString(16)
|
|
.substring(1);
|
|
};
|
|
// returns id of format 'aaaa'-'aaaa'-'aaaa' by default
|
|
let id = "";
|
|
for (var i = 0; i < size - 1; i++) id += s4() + "-";
|
|
id += s4();
|
|
return id;
|
|
};
|
|
|
|
/**
|
|
* Assigns defaults to an option object passed to the function.
|
|
*
|
|
* @template T Object Type
|
|
*
|
|
* @param {T} options Original options object
|
|
* @param {T} defaults Default values to assign
|
|
*/
|
|
function defaultOpt(options, defaults) {
|
|
Object.keys(defaults).forEach((key) => {
|
|
if (options[key] === undefined) options[key] = defaults[key];
|
|
});
|
|
}
|
|
|
|
/** Custom error for attempt to set read-only objects */
|
|
class ProxyReadOnlySetError extends Error {}
|
|
/**
|
|
* Makes a given object read-only; throws a ProxyReadOnlySetError exception if modification is attempted
|
|
*
|
|
* @template T Object Type
|
|
*
|
|
* @param {T} obj Object to be proxied
|
|
* @param {string} name Name for logging purposes
|
|
* @param {string[]} exceptions Parameters excepted from this restriction
|
|
* @returns {T} Proxied object, intercepting write attempts
|
|
*/
|
|
function makeReadOnly(obj, name = "read-only object", exceptions = []) {
|
|
return new Proxy(obj, {
|
|
set: (obj, prop, value) => {
|
|
if (!exceptions.some((v) => v === prop))
|
|
throw new ProxyReadOnlySetError(
|
|
`Tried setting the '${prop}' property on '${name}'`
|
|
);
|
|
obj[prop] = value;
|
|
},
|
|
});
|
|
}
|
|
|
|
/** Custom error for attempt to set write-once objects a second time */
|
|
class ProxyWriteOnceSetError extends Error {}
|
|
/**
|
|
* Makes a given object write-once; Attempts to overwrite an existing prop in the object will throw a ProxyWriteOnceSetError exception
|
|
*
|
|
* @template T Object Type
|
|
* @param {T} obj Object to be proxied
|
|
* @param {string} [name] Name for logging purposes
|
|
* @param {string[]} [exceptions] Parameters excepted from this restriction
|
|
* @returns {T} Proxied object, intercepting write attempts
|
|
*/
|
|
function makeWriteOnce(obj, name = "write-once object", exceptions = []) {
|
|
return new Proxy(obj, {
|
|
set: (obj, prop, value) => {
|
|
if (obj[prop] !== undefined && !exceptions.some((v) => v === prop))
|
|
throw new ProxyWriteOnceSetError(
|
|
`Tried setting the '${prop}' property on '${name}' after it was already set`
|
|
);
|
|
obj[prop] = value;
|
|
},
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Snaps a single value to an infinite grid
|
|
*
|
|
* @param {number} i Original value to be snapped
|
|
* @param {boolean} scaled If grid will change alignment for odd scaleFactor values (default: true)
|
|
* @param {number} gridSize Size of the grid
|
|
* @returns an offset, in which [i + offset = (a location snapped to the grid)]
|
|
*/
|
|
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;
|
|
}
|
|
}
|
|
const modulus = i % gridSize;
|
|
var snapOffset = modulus - scaleOffset;
|
|
if (modulus > gridSize / 2) snapOffset = modulus - gridSize;
|
|
|
|
if (snapOffset == 0) {
|
|
return snapOffset;
|
|
}
|
|
return -snapOffset;
|
|
}
|
|
|
|
/**
|
|
* Gets a bounding box centered on a given set of coordinates. Supports grid snapping
|
|
*
|
|
* @param {number} cx - x-coordinate of the center of the box
|
|
* @param {number} cy - y-coordinate of the center of the box
|
|
* @param {number} w - the width of the box
|
|
* @param {height} h - the height of the box
|
|
* @param {number | null} gridSnap - The size of the grid to snap to
|
|
* @returns {BoundingBox} - A bounding box object centered at (cx, cy)
|
|
*/
|
|
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,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Crops a given canvas to content, returning a new canvas object with the content in it.
|
|
*
|
|
* @param {HTMLCanvasElement} sourceCanvas Canvas to get a content crop from
|
|
* @returns {HTMLCanvasElement} A new canvas with the cropped part of the image
|
|
*/
|
|
function cropCanvas(sourceCanvas) {
|
|
var w = sourceCanvas.width;
|
|
var h = sourceCanvas.height;
|
|
var pix = {x: [], y: []};
|
|
var imageData = sourceCanvas.getContext("2d").getImageData(0, 0, w, h);
|
|
var x, y, index;
|
|
|
|
for (y = 0; y < h; y++) {
|
|
for (x = 0; x < w; x++) {
|
|
// lol i need to learn what this part does
|
|
index = (y * w + x) * 4; // OHHH OK this is setting the imagedata.data uint8clampeddataarray index for the specified x/y coords
|
|
//this part i get, this is checking that 4th RGBA byte for opacity
|
|
if (imageData.data[index + 3] > 0) {
|
|
pix.x.push(x);
|
|
pix.y.push(y);
|
|
}
|
|
}
|
|
}
|
|
// ...need to learn what this part does too :badpokerface:
|
|
// is this just determining the boundaries of non-transparent pixel data?
|
|
pix.x.sort(function (a, b) {
|
|
return a - b;
|
|
});
|
|
pix.y.sort(function (a, b) {
|
|
return a - b;
|
|
});
|
|
var n = pix.x.length - 1;
|
|
w = pix.x[n] - pix.x[0] + 1;
|
|
h = pix.y[n] - pix.y[0] + 1;
|
|
// yup sure looks like it
|
|
|
|
try {
|
|
var cut = sourceCanvas
|
|
.getContext("2d")
|
|
.getImageData(pix.x[0], pix.y[0], w, h);
|
|
var cutCanvas = document.createElement("canvas");
|
|
cutCanvas.width = w;
|
|
cutCanvas.height = h;
|
|
cutCanvas.getContext("2d").putImageData(cut, 0, 0);
|
|
} catch (ex) {
|
|
// probably empty image
|
|
//TODO confirm edge cases?
|
|
cutCanvas = null;
|
|
}
|
|
return cutCanvas;
|
|
}
|
|
|
|
/**
|
|
* Downloads the content of a canvas to the disk, or opens it
|
|
*
|
|
* @param {Object} options - Optional Information
|
|
* @param {boolean} [options.cropToContent] - If we wish to crop to content first (default: true)
|
|
* @param {HTMLCanvasElement} [options.canvas] - The source canvas (default: imgCanvas)
|
|
* @param {string} [options.filename] - The filename to save as (default: '[ISO date] [Hours] [Minutes] [Seconds] openOutpaint image.png').\
|
|
* If null, opens image in new tab.
|
|
*/
|
|
function downloadCanvas(options = {}) {
|
|
defaultOpt(options, {
|
|
cropToContent: true,
|
|
canvas: imgCanvas,
|
|
filename:
|
|
new Date()
|
|
.toISOString()
|
|
.slice(0, 19)
|
|
.replace("T", " ")
|
|
.replace(":", " ") + " openOutpaint image.png",
|
|
});
|
|
|
|
var link = document.createElement("a");
|
|
link.target = "_blank";
|
|
if (options.filename) link.download = options.filename;
|
|
|
|
var croppedCanvas = options.cropToContent
|
|
? cropCanvas(options.canvas)
|
|
: options.canvas;
|
|
if (croppedCanvas != null) {
|
|
link.href = croppedCanvas.toDataURL("image/png");
|
|
link.click();
|
|
}
|
|
}
|