jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
labs/folk-rope.ts
View File

@ -107,7 +107,7 @@ export class FolkRope extends FolkBaseConnection implements AnimationFrameContro
} else { } else {
source = { source = {
x: sourceRect.x + sourceRect.width / 2, 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 { } else {
target = { target = {
x: targetRect.x + targetRect.width / 2, x: targetRect.x + targetRect.width / 2,
y: targetRect.y + targetRect.height / 2, y: targetRect.y + targetRect.height,
}; };
} }

17
labs/folk-spreadsheet.ts
View File

@ -266,6 +266,23 @@ export class FolkSpreadsheet extends HTMLElement {
return this.querySelector(`folk-cell[column="${column}"][row="${row}"]`); 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) { handleEvent(event: Event) {
switch (event.type) { switch (event.type) {
case 'keydown': { case 'keydown': {

1
labs/folk-transformed-space.ts
View File

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

8
lib/folk-gizmos.ts
View File

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

15
website/canvas/html-spreadsheet.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@ -122,9 +122,22 @@
</folk-spreadsheet> </folk-spreadsheet>
</folk-shape> </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"> <script type="module">
import 'https://esm.sh/inspector-elements@0.1.0';
import '@labs/standalone/folk-shape.ts'; import '@labs/standalone/folk-shape.ts';
import '@labs/standalone/folk-spreadsheet.ts'; import '@labs/standalone/folk-spreadsheet.ts';
import '@labs/standalone/folk-event-propagator.ts';
</script> </script>
</body> </body>
</html> </html>