Lentil Hoffman
7a9fb5ac0c
This pattern is a natural fit for the js module system in the browser. This gets rid of globals. Instead, index.js creates an instance of Main, which then instantiates each of the specialized classes. We should probably do class inheritance for the setMain pattern. On the other hand it's currently only 3 lines of code, so we'd only be saving 1 LOC per class, while creating a new class, and it wouldn't really be simpler. If our classes take on more features, we can further refactor.
58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
// Time-stepped to support animations;
|
|
// Can also run tasks queued by the UI, if we want;
|
|
// Could also support arbitrary scheduled operations.
|
|
|
|
// Let's create an ontology for the UI, which the render loop can reference
|
|
// What kinds of things we have?
|
|
// Text : Consists of some text content; could have formatting; could have title;
|
|
// May want to specialize it to support data or whatever...
|
|
// Connection : Like a line / arrow ; May have different kinds of connections such as
|
|
// Precedence / hierarchy tree; depencency graph;
|
|
// May have multiple start / end points (a.k.a. may be a hyperedge)
|
|
// Also worth thinking about matrices - outer products
|
|
// Might as well further consider tensor products
|
|
|
|
// So then maybe we have an output / display node; this could be displaying things such as
|
|
// Values of some parameters
|
|
// Graph of (historical trends of) parameters
|
|
// Results of logic computations / expression evaluation
|
|
|
|
// Utility elements to start, for displaying document time and pointer location
|
|
|
|
import { Main } from "./main.js";
|
|
const main = new Main("mydeate-main");
|
|
|
|
// Add utility elements
|
|
main.addElement({
|
|
id: "time",
|
|
classes: ["monospace"],
|
|
detail: () => {
|
|
const t = main.currentTime;
|
|
const s = t / 1000;
|
|
const m = s / 60;
|
|
const h = m / 60;
|
|
const d = h / 24;
|
|
const timeStr = [d % 60, h % 24, m % 60, s % 60].map(x => x.toFixed(0).padStart(2, "0")).join(":");
|
|
return `runtime: ${timeStr}`;
|
|
},
|
|
});
|
|
main.addElement({
|
|
id: "pointer-info",
|
|
classes: ["monospace"],
|
|
detail: () => (["x", "y"]
|
|
.map(q => `${q}:${(main.pointer[q] ?? 0).toFixed(2).padStart(7, " ")}`)
|
|
.join(", ")
|
|
.replace(/ /g, " ")),
|
|
});
|
|
main.addElement({
|
|
classes: ["monospace"],
|
|
id: 'pointer-history-length',
|
|
detail: () => `ptr hist len: ${main.pointer.history.length}`,
|
|
});
|
|
main.addElement({
|
|
summary: () => "Element Summary",
|
|
detail: () => "Element Detail<br> With multile lines<br> How about that?",
|
|
});
|
|
|
|
// Run main loop
|
|
main.start(); |