console inspector element

This commit is contained in:
“chrisshank” 2024-12-23 20:28:23 -08:00
parent 8ab0d84386
commit 0365325c8e
5 changed files with 39 additions and 8 deletions

View File

@ -48,7 +48,7 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
`,
];
// TODO: stop simulation when energy approaches 0
// TODO: stop simulation when energy approaches 0
#rAF = new AnimationFrameController(this, 10000);
#svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
@ -107,7 +107,7 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
} else {
source = {
x: sourceRect.x + sourceRect.width / 2,
y: sourceRect.y + sourceRect.height / 2,
y: sourceRect.y + sourceRect.height,
};
}
@ -116,7 +116,7 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
} else {
target = {
x: targetRect.x + targetRect.width / 2,
y: targetRect.y + targetRect.height / 2,
y: targetRect.y + targetRect.height,
};
}

View File

@ -266,6 +266,23 @@ export class FolkSpreadsheet extends HTMLElement {
return this.querySelector(`folk-cell[column="${column}"][row="${row}"]`);
}
getCells() {
return Array.from(this.querySelectorAll(`folk-cell`));
}
getValues() {
const cells = this.getCells();
const data: Record<string, any> = {};
for (const cell of cells) {
if (cell.value !== undefined) {
data[cell.name] = cell.value;
}
}
return data;
}
handleEvent(event: Event) {
switch (event.type) {
case 'keydown': {

View File

@ -1,7 +1,6 @@
import { FolkElement, type Point } from '@lib';
import { Gizmos } from '@lib/folk-gizmos';
import { html } from '@lib/tags';
import { TransformEvent } from '@lib/TransformEvent';
import { css } from '@lit/reactive-element';
export class FolkTransformedSpace extends FolkElement {

View File

@ -45,6 +45,7 @@ interface VectorOptions extends LineOptions {
*/
export class Gizmos extends FolkElement {
static override tagName = 'folk-gizmos';
static #layers = new Map<
string,
{
@ -53,8 +54,11 @@ export class Gizmos extends FolkElement {
hidden: boolean;
}
>();
static #defaultLayer = 'default';
static #hasLoggedDrawWarning = false;
static #hasLoggedInitMessage = false;
static styles = css`
@ -288,6 +292,4 @@ export class Gizmos extends FolkElement {
}
}
if (!customElements.get('folk-gizmos')) {
customElements.define('folk-gizmos', Gizmos);
}
Gizmos.define();

View File

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@ -122,9 +122,22 @@
</folk-spreadsheet>
</folk-shape>
<folk-shape x="50" y="600" width="200">
<ix-object-inspector></ix-object-inspector>
</folk-shape>
<folk-event-propagator
source="folk-spreadsheet"
target="ix-object-inspector"
trigger="propagate"
expression="data: from.getValues()"
></folk-event-propagator>
<script type="module">
import 'https://esm.sh/inspector-elements@0.1.0';
import '@labs/standalone/folk-shape.ts';
import '@labs/standalone/folk-spreadsheet.ts';
import '@labs/standalone/folk-event-propagator.ts';
</script>
</body>
</html>