lentil/mydeate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Went ahead with Base class

Browse Source 
It just makes sense
This commit is contained in:
Lentil Hoffman 2026-07-01 15:38:36 -05:00
parent 7a9fb5ac0c
commit 26db9f5d0f
Signed by: lentil
GPG Key ID: 0F5B99F3F4D0C087
8 changed files with 60 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -5,17 +5,11 @@
<title>Mydeate</title> <title>Mydeate</title>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<script defer type="module" src="./js/index.js"></script>
</head> </head>
<body> <body>
<div id="mydeate-main" class="main-div"></div> <div id="mydeate-main" class="main-div"></div>
</body> </body>
</html> </html>
<!-- <script src="./js/util.js"></script>
<script src="./js/element.js"></script>
<script src="./js/elements.js"></script>
<script src="./js/pointer.js"></script>
<script src="./js/canvas.js"></script>
<script src="./js/main.js"></script> -->
<script defer type="module" src="./js/index.js"></script>

5
js/base.js Normal file
View File

@ -0,0 +1,5 @@
export class Base {
setMain(main) {
this.main = main;
}
}

4
js/canvases.js
View File

@ -1,4 +1,6 @@
export class Canvases { import { Base } from "./base.js";
export class Canvases extends Base {
bgCanvas; bgCanvas;
fgCanvas; fgCanvas;
bgCtx; bgCtx;

33
js/element.js
View File

@ -1,4 +1,6 @@
export class Element { import { Base } from "./base.js";
export class Element extends Base {
elements = undefined; elements = undefined;
id = undefined; id = undefined;
summary = () => ""; summary = () => "";
@ -6,11 +8,15 @@ export class Element {
el = undefined; el = undefined;
classes = []; classes = [];
setMain(main) { constructor(elements, {
this.main = main; id, // ""
} summary, // () => "div innerHTML"
detail, // () => "div innerHTML"
constructor(elements, { id, summary, detail, classes, width, height, x, y }) { classes, // [""]
size, // { x, y }
position, // { x, y }
}) {
super();
this.elements = elements; this.elements = elements;
this.id = id; this.id = id;
this.summary = summary; this.summary = summary;
@ -23,11 +29,12 @@ export class Element {
for (const className of (classes ?? [])) { for (const className of (classes ?? [])) {
this.el.classList.add(className); this.el.classList.add(className);
} }
if (width !== undefined && height !== undefined) {
this.setSize(width, height); if (size) {
this.setSize(size);
} }
if (x !== undefined && y !== undefined) { if (position) {
this.setPosition({ x, y }); this.setPosition(position);
} }
if (summary) { if (summary) {
this.summaryEl = document.createElement("div"); this.summaryEl = document.createElement("div");
@ -55,9 +62,9 @@ export class Element {
return this; return this;
} }
setSize(width, height) { setSize({ x, y }) {
this.el.style.width = `${width}px`; this.el.style.width = `${x}px`;
this.el.style.height = `${height}px`; this.el.style.height = `${y}px`;
return this; return this;
} }

6
js/elements.js
View File

@ -1,11 +1,13 @@
import { Base } from "./base.js";
import { Element } from "./element.js"; import { Element } from "./element.js";
export class Elements { export class Elements extends Base {
elements = new Map(); // id -> Element elements = new Map(); // id -> Element
classes = []; classes = [];
div = undefined; div = undefined;
constructor({ classes } = {}) { constructor({ classes } = {}) {
super();
this.classes = classes; this.classes = classes;
this.div = document.createElement("div"); this.div = document.createElement("div");
this.div.classList.add("elements"); this.div.classList.add("elements");
@ -15,7 +17,7 @@ export class Elements {
} }
} }
setMain(main) { setMain(main) {
this.main = main; super.setMain(main);
this.main.div.appendChild(this.div); this.main.div.appendChild(this.div);
} }

12
js/pointer.js
View File

@ -1,8 +1,6 @@
export class Pointer { import { Base } from "./base.js";
setMain(main) {
this.main = main;
}
export class Pointer extends Base {
// Let's set up pointer tracking. We can use the main div as the pointer target. // 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 // Note that we may later add pointer handlers on layered elements
position = { x: undefined, y: undefined }; position = { x: undefined, y: undefined };
@ -25,7 +23,8 @@ export class Pointer {
...element, ...element,
id: `${this.id}-placeholder`, id: `${this.id}-placeholder`,
classes: [...Array.from(element.el.classList.values()), "moving", "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.drag.element.el.classList.add("moving");
this.main.div.classList.add("dragging"); this.main.div.classList.add("dragging");
@ -70,7 +69,7 @@ export class Pointer {
y: y - this.drag.start.y, y: y - this.drag.start.y,
}; };
const { x: ox, y: oy, width, height } = this.drag.element.el.getBoundingClientRect(); 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.drag.element.el.classList.remove("moving");
this.main.elements.remove(this.drag.placeholder.id); this.main.elements.remove(this.drag.placeholder.id);
this.drag.start = {}; this.drag.start = {};
@ -101,6 +100,7 @@ export class Pointer {
for (let i = 1; i < this.history.length; i++) { for (let i = 1; i < this.history.length; i++) {
fgCtx.beginPath(); fgCtx.beginPath();
const opacity = i / this.history.length; const opacity = i / this.history.length;
fgCtx.lineWidth = "0.2";
fgCtx.strokeStyle = `rgba(128, 0, 0, ${opacity})`; fgCtx.strokeStyle = `rgba(128, 0, 0, ${opacity})`;
fgCtx.moveTo(this.history[i - 1].x, this.history[i - 1].y); fgCtx.moveTo(this.history[i - 1].x, this.history[i - 1].y);
fgCtx.lineTo(this.history[i].x, this.history[i].y); fgCtx.lineTo(this.history[i].x, this.history[i].y);

23
js/util.js
View File

@ -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( return Math.min(
// vertical distances (4) between all edges // vertical distances (4) between all edges
(A.y) - (B.y), (A.positon.y) - (B.positon.y),
(A.y + A.height) - (B.y + B.height), (A.positon.y + A.size.y) - (B.position.y + B.size.y),
(A.y) - (B.y + B.height), (A.position.y) - (B.position.y + B.size.y),
(A.y + A.height) - (B.y), (A.position.y + A.size.y) - (B.position.y),
// horizontal distances (4) between all edges // horizontal distances (4) between all edges
(A.x) - (B.x), (A.positon.x) - (B.positon.x),
(A.x + A.width) - (B.x + B.width), (A.positon.x + A.size.x) - (B.position.x + B.size.x),
(A.x) - (B.x + B.width), (A.position.x) - (B.position.x + B.size.x),
(A.x + A.width) - (B.x), (A.position.x + A.size.x) - (B.position.x),
); );
} };

7
style.css
View File

@ -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 { .fullscreen {
position: absolute; position: absolute;
top: 0; top: 0;