From 5ffcd4a9c21085f084575466234dee4a2953c109 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Sat, 16 Nov 2024 23:11:25 -0800 Subject: [PATCH] spreadsheet map propagators --- demo/index.html | 1 + demo/spreadsheet-propagator.html | 180 +++++++++++++++++++++++++++++++ src/arrows/event-propagator.ts | 4 +- src/arrows/fc-rope.ts | 10 +- src/spreadsheet/spreadsheet.ts | 5 +- 5 files changed, 191 insertions(+), 9 deletions(-) create mode 100644 demo/spreadsheet-propagator.html diff --git a/demo/index.html b/demo/index.html index 9ac392c..78a506d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -31,6 +31,7 @@
  • Shapes
  • Spreadsheet
  • Spreadsheet Graph
    • +
  • Spreadsheet Propagator
    • diff --git a/demo/spreadsheet-propagator.html b/demo/spreadsheet-propagator.html new file mode 100644 index 0000000..c5ff04a --- /dev/null +++ b/demo/spreadsheet-propagator.html @@ -0,0 +1,180 @@ + + + + + + Spreadsheet Propagator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/arrows/event-propagator.ts b/src/arrows/event-propagator.ts index 65dd848..4112fd0 100644 --- a/src/arrows/event-propagator.ts +++ b/src/arrows/event-propagator.ts @@ -1,6 +1,6 @@ -import { FolkConnection } from './fc-connection.ts'; +import { FolkRope } from './fc-rope.ts'; -export class EventPropagator extends FolkConnection { +export class EventPropagator extends FolkRope { static override tagName = 'event-propagator'; #triggers = (this.getAttribute('triggers') || '').split(','); diff --git a/src/arrows/fc-rope.ts b/src/arrows/fc-rope.ts index bd80a3e..78099ac 100644 --- a/src/arrows/fc-rope.ts +++ b/src/arrows/fc-rope.ts @@ -76,7 +76,7 @@ export class FolkRope extends AbstractArrow { this.#integratePoint(point, this.#gravity, dts, this.#previousDelta); } - for (let iteration = 0; iteration < 600; iteration++) { + for (let iteration = 0; iteration < 100; iteration++) { for (const point of this.#points) { this.#constrainPoint(point); } @@ -110,10 +110,10 @@ export class FolkRope extends AbstractArrow { if (startingPoint === undefined || endingPoint === undefined) return; startingPoint.pos.x = sourceRect.x + sourceRect.width / 2; - startingPoint.pos.y = sourceRect.y + sourceRect.height / 2; + startingPoint.pos.y = sourceRect.bottom; endingPoint.pos.x = targetRect.x + targetRect.width / 2; - endingPoint.pos.y = targetRect.y + targetRect.height / 2; + endingPoint.pos.y = targetRect.bottom; } drawRopePoints() { @@ -181,7 +181,7 @@ export class FolkRope extends AbstractArrow { point.velocity = Vector.sub(point.pos, point.oldPos); point.oldPos = { ...point.pos }; - //drastically improves stability + // Drastically improves stability let timeCorrection = previousFrameDt != 0.0 ? dt / previousFrameDt : 0.0; let accel = Vector.add(gravity, { x: 0, y: point.mass }); @@ -197,7 +197,7 @@ export class FolkRope extends AbstractArrow { } } - //Apply constraints related to other nodes next to it (keeps each node within distance) + // Apply constraints related to other nodes next to it (keeps each node within distance) #constrainPoint(point: RopePoint) { if (point.next) { const delta = Vector.sub(point.next.pos, point.pos); diff --git a/src/spreadsheet/spreadsheet.ts b/src/spreadsheet/spreadsheet.ts index ef080fc..6d63835 100644 --- a/src/spreadsheet/spreadsheet.ts +++ b/src/spreadsheet/spreadsheet.ts @@ -5,7 +5,7 @@ styles.replaceSync(` --column-number: 10; --row-number: 10; --cell-height: 1.75rem; - --cell-width: 100px; + --cell-width: 200px; --border-color: #e1e1e1; border: solid 1px var(--border-color); box-sizing: border-box; @@ -98,6 +98,7 @@ s-columns, s-rows, s-body { padding: 0.25rem; justify-content: start; scroll-snap-align: start; + overflow: hidden; } ::slotted(s-cell[type='number']) { @@ -424,7 +425,7 @@ export class SpreadsheetCell extends HTMLElement { return this.#expression; } set expression(expression) { - expression = expression.trim(); + expression = String(expression).trim(); this.#expression = expression; this.#dependencies.forEach((dep) => dep.removeEventListener('propagate', this));