console inspector element
This commit is contained in:
parent
8ab0d84386
commit
0365325c8e
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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': {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue