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>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./style.css">
<script defer type="module" src="./js/index.js"></script>
</head>
<body>
<div id="mydeate-main" class="main-div"></div>
</body>
</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>
</html>

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;
fgCanvas;
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;
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;
}

6
js/elements.js
View File

@ -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);
}

12
js/pointer.js
View File

@ -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);

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(
// 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),
);
}
};

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