diff --git a/index.html b/index.html index 60d4e36..e4bbb64 100644 --- a/index.html +++ b/index.html @@ -5,17 +5,11 @@ Mydeate +
- - - \ No newline at end of file + \ No newline at end of file diff --git a/js/base.js b/js/base.js new file mode 100644 index 0000000..06cf345 --- /dev/null +++ b/js/base.js @@ -0,0 +1,5 @@ +export class Base { + setMain(main) { + this.main = main; + } +} \ No newline at end of file diff --git a/js/canvases.js b/js/canvases.js index 22ab689..c474018 100644 --- a/js/canvases.js +++ b/js/canvases.js @@ -1,4 +1,6 @@ -export class Canvases { +import { Base } from "./base.js"; + +export class Canvases extends Base { bgCanvas; fgCanvas; bgCtx; diff --git a/js/element.js b/js/element.js index e09c1f1..36b5190 100644 --- a/js/element.js +++ b/js/element.js @@ -1,4 +1,6 @@ -export class Element { +import { Base } from "./base.js"; + +export class Element extends Base { elements = undefined; id = undefined; summary = () => ""; @@ -6,11 +8,15 @@ export class Element { el = undefined; classes = []; - setMain(main) { - this.main = main; - } - - constructor(elements, { id, summary, detail, classes, width, height, x, y }) { + constructor(elements, { + id, // "" + summary, // () => "div innerHTML" + detail, // () => "div innerHTML" + classes, // [""] + size, // { x, y } + position, // { x, y } + }) { + super(); this.elements = elements; this.id = id; this.summary = summary; @@ -23,11 +29,12 @@ export class Element { for (const className of (classes ?? [])) { this.el.classList.add(className); } - if (width !== undefined && height !== undefined) { - this.setSize(width, height); + + if (size) { + this.setSize(size); } - if (x !== undefined && y !== undefined) { - this.setPosition({ x, y }); + if (position) { + this.setPosition(position); } if (summary) { this.summaryEl = document.createElement("div"); @@ -55,9 +62,9 @@ export class Element { return this; } - setSize(width, height) { - this.el.style.width = `${width}px`; - this.el.style.height = `${height}px`; + setSize({ x, y }) { + this.el.style.width = `${x}px`; + this.el.style.height = `${y}px`; return this; } diff --git a/js/elements.js b/js/elements.js index c88c205..ce941c5 100644 --- a/js/elements.js +++ b/js/elements.js @@ -1,11 +1,13 @@ +import { Base } from "./base.js"; import { Element } from "./element.js"; -export class Elements { +export class Elements extends Base { elements = new Map(); // id -> Element classes = []; div = undefined; constructor({ classes } = {}) { + super(); this.classes = classes; this.div = document.createElement("div"); this.div.classList.add("elements"); @@ -15,7 +17,7 @@ export class Elements { } } setMain(main) { - this.main = main; + super.setMain(main); this.main.div.appendChild(this.div); } diff --git a/js/pointer.js b/js/pointer.js index c14444e..5d893e0 100644 --- a/js/pointer.js +++ b/js/pointer.js @@ -1,8 +1,6 @@ -export class Pointer { - setMain(main) { - this.main = main; - } +import { Base } from "./base.js"; +export class Pointer extends Base { // Let's set up pointer tracking. We can use the main div as the pointer target. // Note that we may later add pointer handlers on layered elements position = { x: undefined, y: undefined }; @@ -25,7 +23,8 @@ export class Pointer { ...element, id: `${this.id}-placeholder`, classes: [...Array.from(element.el.classList.values()), "moving", "placeholder"], - width, height, x, y, + position: { x, y }, + size: { x: width, y: height }, }); this.drag.element.el.classList.add("moving"); this.main.div.classList.add("dragging"); @@ -70,7 +69,7 @@ export class Pointer { y: y - this.drag.start.y, }; const { x: ox, y: oy, width, height } = this.drag.element.el.getBoundingClientRect(); - this.drag.element.setPosition({ x: ox + d.x, y: oy + d.y }).setSize(width, height); + this.drag.element.setPosition({ x: ox + d.x, y: oy + d.y }).setSize({ x: width, y: height }); this.drag.element.el.classList.remove("moving"); this.main.elements.remove(this.drag.placeholder.id); this.drag.start = {}; @@ -101,6 +100,7 @@ export class Pointer { for (let i = 1; i < this.history.length; i++) { fgCtx.beginPath(); const opacity = i / this.history.length; + fgCtx.lineWidth = "0.2"; fgCtx.strokeStyle = `rgba(128, 0, 0, ${opacity})`; fgCtx.moveTo(this.history[i - 1].x, this.history[i - 1].y); fgCtx.lineTo(this.history[i].x, this.history[i].y); diff --git a/js/util.js b/js/util.js index 720908a..265bebf 100644 --- a/js/util.js +++ b/js/util.js @@ -1,14 +1,17 @@ -function minLinearDist(A, B) { +export const add = (v1, v2) => ({ x: v1.x + v2.x, y: v1.y + v2.y }); +export const sub = (v1, v2) => ({ x: v1.x - v2.x, y: v1.y - v2.y }); + +export const minLinearDist = (A, B) => { return Math.min( // vertical distances (4) between all edges - (A.y) - (B.y), - (A.y + A.height) - (B.y + B.height), - (A.y) - (B.y + B.height), - (A.y + A.height) - (B.y), + (A.positon.y) - (B.positon.y), + (A.positon.y + A.size.y) - (B.position.y + B.size.y), + (A.position.y) - (B.position.y + B.size.y), + (A.position.y + A.size.y) - (B.position.y), // horizontal distances (4) between all edges - (A.x) - (B.x), - (A.x + A.width) - (B.x + B.width), - (A.x) - (B.x + B.width), - (A.x + A.width) - (B.x), + (A.positon.x) - (B.positon.x), + (A.positon.x + A.size.x) - (B.position.x + B.size.x), + (A.position.x) - (B.position.x + B.size.x), + (A.position.x + A.size.x) - (B.position.x), ); -} \ No newline at end of file +}; \ No newline at end of file diff --git a/style.css b/style.css index f986c1f..e710aab 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,10 @@ +body { + /* Here we prevent mobile touch-drag from attempting to scroll or select things. */ + /* This is sacrificing potential usability/accessibility features but it's for the sake of art. */ + overflow: hidden; + user-select: none; + -webkit-user-select: none; +} .fullscreen { position: absolute; top: 0;