(
392 | Symbol('NFE_FLOW'),
393 | );
394 |
395 | // MARK: Coordinates
396 |
397 | public readonly $isCoordinatesVisible = signal(false);
398 | public get isCoordinatesVisible(): boolean {
399 | return this.$isCoordinatesVisible.get();
400 | }
401 | public setIsCoordinatesVisible(state: this['isCoordinatesVisible']): void {
402 | this.$isCoordinatesVisible.set(state);
403 | this.dispatch(this.setIsCoordinatesVisible.name, arguments, this);
404 | }
405 |
406 | public toJSON() {
407 | const { nodes } = this;
408 |
409 | const result = { nodes: nodes.map((node) => node.toJSON()) };
410 | console.log(result);
411 | return result;
412 | }
413 | }
414 |
--------------------------------------------------------------------------------
/src/lib/handle.el.tsx:
--------------------------------------------------------------------------------
1 | 'use html-signal';
2 | import { css, LitElement } from 'lit';
3 | import { SignalWatcher } from '@lit-labs/signals';
4 | import { HANDLE } from './types.js';
5 |
6 | export class NfHandleElement extends SignalWatcher(LitElement) {
7 | public readonly [HANDLE] = true;
8 |
9 | static styles = css`
10 | :host {
11 | display: contents;
12 | cursor: var(--cursor-move, move);
13 | }
14 | `;
15 |
16 | public override render(): JSX.LitTemplate {
17 | return event.stopPropagation()}
95 | class="links"
96 | style:map={{
97 | width: `${this.#flow.viewportRect.width}px`,
98 | height: `${this.#flow.viewportRect.height}px`,
99 |
100 | left: `${this.#flow.viewportRect.x}px`,
101 | top: `${this.#flow.viewportRect.y}px`,
102 |
103 | zIndex: this.#flow.isDraggingNode ? this.#flow.nodes.length + 1 : 0,
104 | }}
105 | >
106 |
107 | {this.#flow.connectingLink
108 | ? svg`
109 | ${this.Cable({ link: this.#flow.connectingLink })}
110 | ${this.Cable({
111 | link: this.#flow.connectingLink,
112 | type: 'overlay',
113 | })}
114 | `
115 | : null}
116 |
117 | `${link.from.id}_${link.to.id}`}
120 | >
121 | {(link) => {
122 | const animation = animate({
123 | in: [],
124 | out: [{ opacity: 0 }],
125 | stabilizeOut: true,
126 | properties: ['opacity'],
127 | keyframeOptions: { duration: 150 },
128 | id: `${link.from.id}_${link.to.id}`,
129 | inId: `in_${link.from.id}_${link.to.id}`,
130 |
131 | skipInitial: true,
132 | });
133 | const classes = classMap({
134 | paths: true,
135 | 'is-connecting-port': this.#flow.connectingLink !== null,
136 | });
137 |
138 | return svg`
139 | link.from.disconnect(link.to.id)}
143 | @mousedown=${(event: MouseEvent): void =>
144 | event.stopPropagation()}
145 | >
146 | ${this.Cable({ link, type: 'outline' })}
147 | ${this.Cable({ link })}
148 | ${this.Cable({ link, type: 'overlay' })}
149 | ${this.Cable({ link, type: 'fatty' })}
150 |
151 | `;
152 | }}
153 |
154 |
155 |
156 | );
157 | }
158 | }
159 |
160 | declare global {
161 | interface HTMLElementTagNameMap {
162 | 'nf-links': NfLinksElement;
163 | }
164 | }
165 | customElements.define('nf-links', NfLinksElement);
166 |
--------------------------------------------------------------------------------
/src/lib/links.scss:
--------------------------------------------------------------------------------
1 | .links {
2 | --_nf-links-grid-stroke-main-color: var(
3 | --nf-links-grid-stroke-main-color,
4 | grey
5 | );
6 | --_nf-links-grid-stroke-main-pulsing-color: var(
7 | --nf-links-grid-stroke-main-pulsing-color,
8 | lightgreen
9 | );
10 | --_nf-links-grid-stroke-main-overlay-color: var(
11 | --nf-links-grid-stroke-main-overlay-color,
12 | grey
13 | );
14 | --_nf-links-grid-stroke-main-outline-color: var(
15 | --nf-links-grid-stroke-main-outline-color,
16 | hsl(0, 0%, 0%, 0.15)
17 | );
18 |
19 | position: absolute;
20 | pointer-events: none;
21 |
22 | & svg {
23 | width: 100%;
24 | height: 100%;
25 | overflow: visible;
26 | }
27 |
28 | & .paths {
29 | pointer-events: initial;
30 | cursor: crosshair;
31 |
32 | &:not(.is-connecting-port) {
33 | cursor: no-drop;
34 |
35 | &:hover {
36 | & path:not(.fatty, .overlay) {
37 | stroke: var(--sl-color-danger-100) !important;
38 | stroke-width: 2px !important;
39 | }
40 | }
41 | }
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/lib/node.el.tsx:
--------------------------------------------------------------------------------
1 | 'use html-signal';
2 | import './port.el.jsx';
3 |
4 | import { SignalWatcher } from '@lit-labs/signals';
5 | import { css, LitElement } from 'lit';
6 |
7 | import { Node } from './node.js';
8 | import { NODE } from './types.js';
9 |
10 | export class NfNodeElement extends SignalWatcher(LitElement) {
11 | public readonly [NODE] = true;
12 |
13 | static override properties = { node: { attribute: false } };
14 | declare public node: Node;
15 |
16 | static styles = css`
17 | :host {
18 | display: block;
19 | }
20 | `;
21 |
22 | public override firstUpdated(): void {
23 | if (!this.node) throw new ReferenceError('Missing node.');
24 |
25 | const observer = new ResizeObserver(() => this.#onResize());
26 | observer.observe(this);
27 | }
28 |
29 | #onResize(): void {
30 | const rect = this.getBoundingClientRect();
31 | this.node.updateSizeFromDom(rect);
32 | }
33 |
34 | public override render(): JSX.LitTemplate {
35 | return {
17 | public readonly flow;
18 | public readonly superType = 'Node';
19 |
20 | public readonly type: string = 'Node';
21 | public id: string;
22 |
23 | public readonly defaultDisplayName: string = 'Node';
24 | public readonly defaultIcon: string = 'activity';
25 | public readonly helpText: string | null = null;
26 |
27 | public readonly Template: (() => unknown) | null = null;
28 |
29 | declare readonly ports: AnyNodePorts | DefaultNodePorts;
30 |
31 | constructor(options: NodeConstructorParameters) {
32 | this.flow = options.flow;
33 |
34 | this.id = options.data?.id || `node_${crypto.randomUUID()}`;
35 |
36 | if (options.data) this.fromJSON(options.data);
37 |
38 | setTimeout(() => {
39 | console.log({ ddd: Node.prototype.defaultDisplayName });
40 | }, 10);
41 |
42 | this.ports = {
43 | input: this.addPort({ direction: 'in' }),
44 | output: this.addPort({ direction: 'out' }),
45 | };
46 | }
47 |
48 | public get slotName(): string {
49 | return `node_${this.id}`;
50 | }
51 |
52 | public readonly $customDisplayName = signal(null);
53 | public get customDisplayName(): string | null {
54 | return this.$customDisplayName.get();
55 | }
56 | public updateDisplayName(customName: string): void {
57 | this.$customDisplayName.set(customName);
58 | this.flow.dispatch(this.updateDisplayName.name, arguments, this);
59 | }
60 | public get displayName(): string {
61 | return this.customDisplayName ?? this.defaultDisplayName;
62 | }
63 |
64 | public readonly $isSelected = computed(() => this.flow.selectedNode === this);
65 | public get isSelected(): boolean {
66 | return this.$isSelected.get();
67 | }
68 |
69 | public readonly $zIndex = signal(null);
70 | public get zIndex(): number | null {
71 | return this.$zIndex.get();
72 | }
73 | public updateZIndex(value: number): void {
74 | this.$zIndex.set(value);
75 | this.flow.dispatch(this.updateZIndex.name, arguments, this);
76 | }
77 |
78 | public readonly $isDragging = signal(false);
79 | public get isDragging(): boolean {
80 | return this.$isDragging.get();
81 | }
82 | public setIsDragging(state: boolean): void {
83 | this.$isDragging.set(state);
84 | this.flow.dispatch(this.setIsDragging.name, arguments, this);
85 | }
86 |
87 | public readonly $isHovering = signal(false);
88 | public get isHovering(): boolean {
89 | return this.$isHovering.get();
90 | }
91 | public setIsHovering(state: boolean): void {
92 | this.$isHovering.set(state);
93 | this.flow.dispatch(this.setIsHovering.name, arguments, this);
94 | }
95 |
96 | public readonly $x = signal(0);
97 | public get x(): number {
98 | return this.$x.get();
99 | }
100 | public readonly $y = signal(0);
101 | public get y(): number {
102 | return this.$y.get();
103 | }
104 |
105 | public readonly $width = signal(0);
106 | public get width(): number {
107 | return this.$width.get();
108 | }
109 | public readonly $height = signal(0);
110 | public get height(): number {
111 | return this.$height.get();
112 | }
113 |
114 | // realX = 0;
115 | // realY = 0;
116 |
117 | public updatePosition(options: Coordinates): void {
118 | // const gridSize = 16;
119 |
120 | // TODO:
121 | // const roundNearest = (coord, gridSize) => {
122 | // return Math.round(coord / gridSize) * gridSize;
123 | // };
124 | // const roundNearest = (xx, nearest) => {
125 | // return xx % gridSize ? xx - (xx % gridSize) + gridSize : xx;
126 | // };
127 | // if (this.realX % gridSize === 0) this.x = x;
128 | // if (this.realY % gridSize === 0) this.y = y;
129 |
130 | // this.realX = x;
131 | // this.realY = y;
132 |
133 | // this.x = roundNearest(x, gridSize);
134 | // this.y = roundNearest(y, gridSize);
135 |
136 | if (options.x) this.$x.set(options.x);
137 | if (options.y) this.$y.set(options.y);
138 |
139 | this.flow.dispatch(this.updatePosition.name, arguments, this);
140 | }
141 |
142 | public updateSizeFromDom({ width, height }: DOMRect): void {
143 | this.$width.set(width / this.flow.scale);
144 | this.$height.set(height / this.flow.scale);
145 | }
146 |
147 | public delete(): void {
148 | for (const port of Object.values(this.ports as AnyNodePorts))
149 | for (const extensionPort of port.connectedTo)
150 | for (const candidatePort of extensionPort.connectedTo)
151 | extensionPort.$connectedTo.set(
152 | extensionPort.connectedTo.filter((port) => port !== candidatePort),
153 | );
154 |
155 | // TODO: cleanup connections
156 | this.flow.$nodes.set(this.flow.nodes.filter((node) => node !== this));
157 | this.flow.dispatch(this.delete.name, arguments, this);
158 | }
159 |
160 | public addPort(
161 | options: AddPortOptions,
162 | ): Port {
163 | const createdPort = new Port(options, this);
164 |
165 | return createdPort;
166 | }
167 |
168 | public fromJSON(options: NodeSerializableOptions): void {
169 | this.id = options.id;
170 | this.$x.set(options.x);
171 | this.$y.set(options.y);
172 | if (options.zIndex) this.$zIndex.set(options.zIndex);
173 | if (options.customDisplayName)
174 | this.$customDisplayName.set(options.customDisplayName);
175 | }
176 |
177 | public toJSON(): NodeSerializableOptions {
178 | const { type, id: id, x, y, displayName, zIndex, ports: _ports } = this;
179 |
180 | const ports = Object.fromEntries(
181 | Object.entries(_ports).map(([name, port]) => [name, port.toJSON()]),
182 | );
183 |
184 | return { type, id: id, x, y, displayName, zIndex, ports };
185 | }
186 | }
187 |
--------------------------------------------------------------------------------
/src/lib/port.el.tsx:
--------------------------------------------------------------------------------
1 | 'use html-signal';
2 | import { css, LitElement } from 'lit';
3 | import { SignalWatcher } from '@lit-labs/signals';
4 |
5 | import { reaction } from 'signal-utils/subtle/reaction';
6 | import { PORT, type GenericPort } from './types.js';
7 |
8 | export class NfPortElement extends SignalWatcher(LitElement) {
9 | public readonly [PORT] = true;
10 |
11 | static override styles = css`
12 | :host {
13 | display: inline-block;
14 | user-select: none;
15 | cursor: var(--cursor-connecting, crosshair);
16 | }
17 | `;
18 |
19 | static override properties = {
20 | port: { attribute: false },
21 | // TODO: CSS API.
22 | cableOffset: { type: Number },
23 | };
24 | declare public port?: GenericPort;
25 | declare public cableOffset?: number;
26 |
27 | public override firstUpdated(): void {
28 | if (!this.port) throw new ReferenceError('No port.');
29 |
30 | // this.#updatePosition();
31 | reaction(
32 | () => [
33 | this.port?.node.x,
34 | this.port?.node.y,
35 | this.port?.node.width,
36 | this.port?.node.height,
37 | // this.port?.flow.viewportRect.x,
38 | // this.port?.flow.viewportRect.y,
39 | ],
40 | () => this.#updatePosition(),
41 | );
42 | }
43 |
44 | #updatePosition(): void {
45 | if (!this.port) return;
46 |
47 | this.port.updatePositionFromDom({
48 | rect: this.getBoundingClientRect(),
49 | scroll: { x: window.scrollX, y: window.scrollY },
50 | cableOffset: this.cableOffset,
51 | });
52 | }
53 |
54 | public override render(): JSX.LitTemplate {
55 | return {
11 | public readonly flow: Flow;
12 |
13 | public readonly node: Node;
14 | public readonly superType = 'Port';
15 |
16 | public get name(): string {
17 | for (const [name, port] of Object.entries(this.node.ports))
18 | if (port === this) return name;
19 | throw new ReferenceError('Incorrect port mapping.');
20 | }
21 | public get id(): string {
22 | for (const [name, port] of Object.entries(this.node.ports))
23 | if (port === this) return `port_${name}__${port.node.id}`;
24 | throw new ReferenceError('Incorrect port mapping.');
25 | }
26 |
27 | public readonly $direction = signal('both');
28 | public get direction(): PortDirection {
29 | return this.$direction.get();
30 | }
31 |
32 | public readonly validate: Validate | null = null;
33 |
34 | public readonly $metadata = signal({} as PortMetadata);
35 | public get metadata(): PortMetadata {
36 | return this.$metadata.get();
37 | }
38 |
39 | constructor(
40 | options: AddPortOptions,
41 | node: Node,
42 | ) {
43 | this.node = node;
44 | this.flow = node.flow;
45 |
46 | this.fromJSON(options);
47 |
48 | if (options.validate) this.validate = options.validate;
49 | }
50 |
51 | public readonly $connectedTo = signal([]);
52 | public get connectedTo(): Port[] {
53 | return this.$connectedTo.get();
54 | }
55 |
56 | declare public readonly customValueType?: string;
57 |
58 | public readonly $value = signal(null);
59 | public get value(): Value | null {
60 | return this.$value.get();
61 | }
62 | public updateValue(value: this['value']): void {
63 | this.$value.set(value);
64 |
65 | for (const port of this.connectedTo)
66 | if (port.direction === 'in') port.updateValue(value);
67 |
68 | this.bang();
69 | this.flow.dispatch(this.updateValue.name, null, this);
70 | }
71 |
72 | public setValidity(state: boolean): void {
73 | this.$validity.set(state);
74 | setTimeout(() => this.setValidity(state));
75 | }
76 |
77 | public connectTo(id: string): void {
78 | const foundPort = this.flow.ports.find((p) => p.id === id);
79 |
80 | if (!foundPort) return;
81 |
82 | if (
83 | foundPort.node !== this.node &&
84 | foundPort.direction !== this.direction
85 | ) {
86 | if (foundPort.validate) {
87 | const isValid = foundPort.validate(this.value);
88 |
89 | if (!isValid) {
90 | this.setValidity(false);
91 | return;
92 | }
93 | }
94 |
95 | foundPort.$connectedTo.set([...foundPort.connectedTo, this]);
96 | this.$connectedTo.set([...this.connectedTo, foundPort]);
97 |
98 | if (foundPort.direction === 'in') foundPort.updateValue(this.value);
99 |
100 | this.flow.updateMousePosition({ x: null, y: null });
101 | }
102 | this.flow.dispatch(this.connectTo.name, arguments, this);
103 | }
104 |
105 | public disconnect(id: string): void {
106 | const connectedPort = this.flow.ports.find((p) => p.id === id);
107 | if (!connectedPort) return;
108 |
109 | this.$connectedTo.set(
110 | this.connectedTo.filter((port) => port !== connectedPort),
111 | );
112 | connectedPort.$connectedTo.set(
113 | connectedPort.connectedTo.filter((port) => port !== this),
114 | );
115 | this.setIsDisconnecting(false);
116 | this.flow.dispatch(this.disconnect.name, arguments, this);
117 | }
118 |
119 | public disconnectAll(): void {
120 | for (const port of this.connectedTo)
121 | port.$connectedTo.set(port.connectedTo.filter((port) => port !== this));
122 |
123 | this.$connectedTo.set([]);
124 | this.flow.dispatch(this.disconnectAll.name, null, this);
125 | }
126 |
127 | public readonly $isDisconnecting = signal(false);
128 | public get isDisconnecting(): boolean {
129 | return this.$isDisconnecting.get();
130 | }
131 | public setIsDisconnecting(value: boolean): void {
132 | this.$isDisconnecting.set(value);
133 | }
134 |
135 | public readonly $customDisplayName = signal(null);
136 | public get customDisplayName(): string | null {
137 | return this.$customDisplayName.get();
138 | }
139 |
140 | public get displayName(): string {
141 | return this.customDisplayName ?? this.name;
142 | }
143 |
144 | public updateDisplayName(customName: string): void {
145 | this.$customDisplayName.set(customName);
146 | this.flow.dispatch(this.updateDisplayName.name, arguments, this);
147 | }
148 |
149 | public readonly $validity = signal(true);
150 | public get validity(): boolean {
151 | return this.$validity.get();
152 | }
153 |
154 | public setIsPulsing(state: boolean): void {
155 | this.$isPulsing.set(state);
156 | }
157 |
158 | public readonly $lastChangeTime = signal(0);
159 | public get lastChangeTime(): number {
160 | return this.$lastChangeTime.get();
161 | }
162 |
163 | public bang(): void {
164 | this.setIsPulsing(true);
165 | setTimeout(() => this.setIsPulsing(false), 50);
166 | this.$lastChangeTime.set(Date.now());
167 | this.flow.dispatch(this.bang.name, null, this);
168 | }
169 |
170 | public readonly $isPulsing = signal(false);
171 | public get isPulsing(): boolean {
172 | return this.$isPulsing.get();
173 | }
174 |
175 | public readonly $x = signal(0);
176 | public get x(): number {
177 | return this.$x.get();
178 | }
179 | public readonly $y = signal(0);
180 | public get y(): number {
181 | return this.$y.get();
182 | }
183 |
184 | public updatePositionFromDom({
185 | rect,
186 | scroll,
187 | cableOffset = 4,
188 | }: {
189 | rect: DOMRect;
190 | scroll: { x: number; y: number };
191 | cableOffset?: number;
192 | }): void {
193 | const { scale, offsetX, offsetY, viewportRect } = this.flow;
194 |
195 | // NOTE: So the cable is sticking out
196 | const adjustment = cableOffset * (this.direction === 'in' ? -1 : 1);
197 |
198 | this.$x.set(
199 | (rect.x +
200 | scroll.x -
201 | offsetX -
202 | viewportRect.x +
203 | rect.width / 2 +
204 | adjustment) /
205 | scale,
206 | );
207 | this.$y.set(
208 | (rect.y +
209 | //
210 | scroll.y -
211 | offsetY -
212 | viewportRect.y +
213 | rect.height / 2) /
214 | scale,
215 | );
216 | }
217 |
218 | public fromJSON(options: AddPortOptions): void {
219 | if (options.value) this.$value.set(options.value);
220 | if (options.direction) this.$direction.set(options.direction);
221 | if (options.metadata) this.$metadata.set(options.metadata);
222 | if (options.customDisplayName)
223 | this.$customDisplayName.set(options.customDisplayName);
224 | }
225 |
226 | // FIXME:
227 | public toJSON() /* : PortSerializationOptions */ {
228 | const { x, y, value, connectedTo: _connectedTo } = this;
229 |
230 | const connectedTo = _connectedTo.map((connectedPort) => {
231 | let portName;
232 | for (const [nodePortName, nodePort] of Object.entries(
233 | connectedPort.node.ports,
234 | ))
235 | if (connectedPort === nodePort) portName = nodePortName;
236 |
237 | if (!portName) throw new ReferenceError('Incorrect port.');
238 |
239 | return { node: connectedPort.node.id, port: portName };
240 | });
241 |
242 | return { x, y, value, connectedTo };
243 | }
244 | }
245 |
--------------------------------------------------------------------------------
/src/lib/themes/lit-renderer.el.ts:
--------------------------------------------------------------------------------
1 | import { LitElement, css } from 'lit';
2 |
3 | export class LitRenderer extends LitElement {
4 | static styles = [
5 | css`
6 | :host {
7 | display: contents;
8 | }
9 | `,
10 | ];
11 |
12 | static override properties = { template: { attribute: false } };
13 | declare template?: unknown;
14 |
15 | public override render(): JSX.LitTemplate {
16 | return this.template || null;
17 | }
18 | }
19 | customElements.define('lit-renderer', LitRenderer);
20 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/broadcast-channel.el.tsx:
--------------------------------------------------------------------------------
1 | import '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js';
2 | import { css, LitElement } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import { SignalWatcher } from '@lit-labs/signals';
5 | import { signal } from 'signal-utils';
6 | import { reaction } from 'signal-utils/subtle/reaction';
7 |
8 | import { Port } from '../../../port.js';
9 | import { Node } from '../../../node.js';
10 |
11 | import type { PortsWithSchema } from './schemas.js';
12 |
13 | export class NfWaBroadcastChannelNode extends Node {
14 | public override readonly type = 'NfWaBroadcastChannelNode';
15 |
16 | public override readonly defaultDisplayName = 'Broadcast';
17 | public override readonly defaultIcon = 'broadcast-pin';
18 |
19 | public override readonly ports = {
20 | messageInput: this.addPort({
21 | direction: 'in',
22 | customDisplayName: 'TX',
23 | }),
24 |
25 | messageOutput: this.addPort({
26 | direction: 'out',
27 | customDisplayName: 'RX',
28 | }),
29 | };
30 |
31 | @signal accessor defaultValue: string = 'main';
32 |
33 | public override readonly Template = (): JSX.LitTemplate => (
34 |
35 |
41 | );
42 | }
43 |
44 | @customElement('wf-broadcast-channel')
45 | export class NfWaBroadcastChannelElement extends SignalWatcher(LitElement) {
46 | static styles = [
47 | css`
48 | :host {
49 | display: flex;
50 | justify-content: center;
51 | align-items: center;
52 | }
53 |
54 | .channel-wrapper {
55 | display: flex;
56 | align-items: center;
57 | }
58 |
59 | header {
60 | display: flex;
61 | align-items: center;
62 | justify-content: space-around;
63 | }
64 |
65 | sl-copy-button {
66 | margin-top: 2rem;
67 | margin-right: var(--sl-spacing-medium);
68 |
69 | &::part(button) {
70 | padding: 0;
71 | }
72 | }
73 | `,
74 | ];
75 |
76 | @property({ attribute: false }) accessor messageInput!: Port;
77 | @property({ attribute: false }) accessor messageOutput!: Port;
78 |
79 | // @property({ attribute: false }) accessor channel = 'main';
80 | @signal accessor channel = 'main';
81 |
82 | #broadcastChannel: BroadcastChannel = new BroadcastChannel('default');
83 |
84 | protected firstUpdated(): void {
85 | this.#reinitListener();
86 | reaction(
87 | () => [this.channel],
88 | () => {
89 | this.#reinitListener();
90 | },
91 | );
92 |
93 | reaction(
94 | () => [this.messageInput?.value],
95 | () => {
96 | this.#broadcastChannel.postMessage(this.messageInput.value);
97 | },
98 | );
99 |
100 | queueMicrotask(() =>
101 | this.#broadcastChannel.postMessage(this.messageInput.value),
102 | );
103 | }
104 |
105 | #listener = (event: MessageEvent) => {
106 | this.messageOutput.updateValue(event.data);
107 | };
108 | #reinitListener(): void {
109 | this.#broadcastChannel.removeEventListener('message', this.#listener);
110 | this.#broadcastChannel.close();
111 | this.#broadcastChannel = new BroadcastChannel(this.channel);
112 | this.#broadcastChannel.addEventListener('message', this.#listener);
113 | }
114 |
115 | public override render(): JSX.LitTemplate {
116 | return (
117 |
118 | {/* @ts-expect-error TODO: generate typings for JSFE. */}
119 | {
132 | this.channel = data.text;
133 | }}
134 | prop:submitButton={false}
135 | />
136 |
138 | );
139 | }
140 | }
141 |
142 | declare global {
143 | interface HTMLElementTagNameMap {
144 | 'wf-broadcast-channel': NfWaBroadcastChannelElement;
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/canvas-color.el.tsx:
--------------------------------------------------------------------------------
1 | import { css, LitElement } from 'lit';
2 | import { customElement, property } from 'lit/decorators.js';
3 | import { createRef } from 'lit/directives/ref.js';
4 | import { SignalWatcher } from '@lit-labs/signals';
5 | import { reaction } from 'signal-utils/subtle/reaction';
6 | import type { SlColorPicker } from '@shoelace-style/shoelace';
7 |
8 | import type { Port } from '../../../port.js';
9 |
10 | import {
11 | textPortSchema,
12 | type PortsWithSchema,
13 | type TextPort,
14 | } from './schemas.js';
15 | import { Node } from '../../../node.js';
16 |
17 | // TODO: add "image node source" before
18 | export class NfWaCanvasColorNode extends Node {
19 | public override readonly type = 'NfWaCanvasColorNode';
20 |
21 | public override readonly defaultDisplayName = 'Solid color';
22 | public override readonly defaultIcon = 'alphabet-uppercase';
23 |
24 | public override readonly ports = {
25 | text: this.addPort({
26 | direction: 'in',
27 | customDisplayName: 'Text',
28 | metadata: { schema: textPortSchema },
29 | }),
30 |
31 | canvas: this.addPort({
32 | direction: 'out',
33 | customDisplayName: 'Canvas',
34 | }),
35 | };
36 |
37 | public override readonly Template = (): JSX.LitTemplate => (
38 |
39 |
44 | );
45 | }
46 |
47 | @customElement('nf-canvas-color')
48 | export class NfWaCanvasColorElement extends SignalWatcher(LitElement) {
49 | static styles = [
50 | css`
51 | :host {
52 | display: flex;
53 | flex-direction: column;
54 | justify-content: center;
55 | }
56 |
57 | header {
58 | display: flex;
59 |
60 | justify-content: center;
61 | align-items: center;
62 | gap: var(--sl-spacing-x-large);
63 | padding: var(--sl-spacing-small);
64 | }
65 | `,
66 | ];
67 |
68 | #canvasRef = createRef();
69 |
70 | protected firstUpdated(): void {
71 | this.draw();
72 |
73 | reaction(
74 | () => [this.textIn?.lastChangeTime],
75 | () => {
76 | this.draw();
77 | },
78 | );
79 | }
80 |
81 | draw() {
82 | const canvas = this.#canvasRef.value!;
83 |
84 | const context = canvas.getContext('2d')!;
85 |
86 | context.fillStyle = this.color;
87 |
88 | context.font = '36px system-ui';
89 |
90 | context.fillRect(0, 0, canvas.width, canvas.height);
91 |
92 | this.canvasOut?.updateValue(canvas);
93 | }
94 |
95 | @property({ attribute: false })
96 | accessor canvasOut: Port | null = null;
97 |
98 | @property({ attribute: false }) accessor textIn: Port | null = null;
99 |
100 | // TODO: extract to node body initial value with schema (everywhere)
101 | @property({ attribute: false }) accessor color: string = '#45001d';
102 |
103 | public override render(): JSX.LitTemplate {
104 | return (
105 | <>
106 |
107 | Color
108 | {
112 | this.color = (event.target as SlColorPicker).value;
113 | this.draw();
114 | }}
115 | />
116 |
117 | {this.color}
118 |
119 |
120 |
121 | {
16 | public override readonly type = 'NfWaCanvasComparerNode';
17 |
18 | public override readonly defaultDisplayName = 'A/B Comparer';
19 | public override readonly defaultIcon = 'layout-split';
20 |
21 | public override readonly ports = {
22 | canvasBefore: this.addPort({
23 | direction: 'in',
24 | customDisplayName: 'Before',
25 | }),
26 | canvasAfter: this.addPort({
27 | direction: 'in',
28 | customDisplayName: 'After',
29 | }),
30 | };
31 |
32 | public override readonly Template = (): JSX.LitTemplate => (
33 |
34 |
39 | );
40 | }
41 |
42 | @customElement('nf-wa-canvas-comparer')
43 | export class NfWaCanvasComparerElement extends SignalWatcher(LitElement) {
44 | static styles = [
45 | css`
46 | :host {
47 | display: flex;
48 | justify-content: center;
49 | align-items: center;
50 | }
51 | `,
52 | ];
53 |
54 | #canvasBeforeRef = createRef()!;
55 | #canvasAfterRef = createRef()!;
56 |
57 | @property({ attribute: false })
58 | accessor canvasBeforeIn!: Port;
59 |
60 | @property({ attribute: false })
61 | accessor canvasAfterIn!: Port;
62 |
63 | @state() accessor blurFactor = 5;
64 |
65 | protected firstUpdated(): void {
66 | this.draw();
67 | reaction(
68 | () => [
69 | this.canvasAfterIn.lastChangeTime,
70 | this.canvasBeforeIn.lastChangeTime,
71 | ],
72 | () => this.draw(),
73 | );
74 | }
75 |
76 | draw() {
77 | if (this.canvasBeforeIn?.value instanceof HTMLCanvasElement) {
78 | const canvasBeforeOut = this.#canvasBeforeRef.value;
79 | const ctxBeforeOut = canvasBeforeOut?.getContext('2d');
80 |
81 | if (ctxBeforeOut) {
82 | const canvasBeforeIn = this.canvasBeforeIn?.value;
83 | ctxBeforeOut.drawImage(canvasBeforeIn, 0, 0);
84 | }
85 | }
86 | if (this.canvasAfterIn?.value instanceof HTMLCanvasElement) {
87 | const canvasAfterOut = this.#canvasAfterRef.value;
88 | const ctxAfterOut = canvasAfterOut?.getContext('2d');
89 |
90 | if (ctxAfterOut) {
91 | const canvasAfterIn = this.canvasAfterIn?.value;
92 |
93 | ctxAfterOut.drawImage(canvasAfterIn, 0, 0);
94 | }
95 | }
96 | }
97 |
98 | public override render(): JSX.LitTemplate {
99 | return (
100 |
101 |
114 | );
115 | }
116 | }
117 |
118 | declare global {
119 | interface HTMLElementTagNameMap {
120 | 'nf-wa-canvas-comparer': NfWaCanvasComparerElement;
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/canvas-filters.el.tsx:
--------------------------------------------------------------------------------
1 | // import '@shoelace-style/shoelace/dist/components/details/details.js';
2 |
3 | import { css, LitElement } from 'lit';
4 | import { customElement, property } from 'lit/decorators.js';
5 | import { createRef } from 'lit/directives/ref.js';
6 | import { SignalWatcher } from '@lit-labs/signals';
7 | import { reaction } from 'signal-utils/subtle/reaction';
8 |
9 | import { Node } from '../../../node.js';
10 | import type { Port } from '../../../port.js';
11 |
12 | import type { NumberPort, PortsWithSchema } from './schemas.js';
13 |
14 | export class NfWaCanvasFiltersNode extends Node {
15 | public override readonly type = 'NfWaCanvasFiltersNode';
16 |
17 | public override readonly defaultDisplayName = 'Filters';
18 | public override readonly defaultIcon = 'shadows';
19 |
20 | // TODO:
21 | public override readonly helpText = 'Cool canvas filters…';
22 |
23 | public override readonly ports = {
24 | blurIn: this.addPort({
25 | direction: 'in',
26 | customDisplayName: 'Blur (px)',
27 |
28 | metadata: {
29 | schema: {
30 | title: 'Blur',
31 | type: 'number',
32 | minimum: 0,
33 | maximum: 25,
34 | default: 15,
35 | },
36 | },
37 | }),
38 |
39 | brightnessIn: this.addPort({
40 | direction: 'in',
41 | customDisplayName: 'Brightness (%)',
42 | metadata: {
43 | schema: {
44 | title: 'Brightness',
45 | type: 'number',
46 | minimum: 0,
47 | maximum: 100,
48 | default: 75,
49 | },
50 | },
51 | }),
52 |
53 | canvasIn: this.addPort({
54 | direction: 'in',
55 | customDisplayName: 'Canvas',
56 | // TODO: validate
57 | }),
58 |
59 | canvasOut: this.addPort({
60 | direction: 'out',
61 | customDisplayName: 'Result',
62 | }),
63 | };
64 |
65 | public override readonly Template = (): JSX.LitTemplate => (
66 |
67 |
74 | );
75 | }
76 |
77 | @customElement('nf-wa-canvas-filters')
78 | export class NfWaCanvasFiltersElement extends SignalWatcher(LitElement) {
79 | static styles = [
80 | css`
81 | :host {
82 | display: contents;
83 | }
84 |
85 | .render {
86 | width: 100%;
87 | display: flex;
88 | justify-content: center;
89 | }
90 | `,
91 | ];
92 |
93 | #canvasRef = createRef();
94 |
95 | @property({ attribute: false })
96 | accessor canvasIn!: Port;
97 |
98 | @property({ attribute: false })
99 | accessor canvasOut!: Port;
100 |
101 | @property({ attribute: false }) accessor blurIn!: Port<
102 | number,
103 | PortsWithSchema
104 | >;
105 |
106 | @property({ attribute: false })
107 | accessor brightnessIn!: Port;
108 |
109 | protected firstUpdated(): void {
110 | this.draw();
111 |
112 | reaction(
113 | () => [
114 | this.canvasIn?.lastChangeTime,
115 | this.blurIn?.lastChangeTime,
116 | this.brightnessIn?.lastChangeTime,
117 | ],
118 | () => {
119 | this.draw();
120 | },
121 | );
122 | }
123 |
124 | draw() {
125 | const canvas = this.#canvasRef?.value;
126 | const context = canvas?.getContext('2d');
127 | if (!context) return;
128 |
129 | const canvasInput = this.canvasIn;
130 |
131 | context.filter =
132 | `blur(${this.blurIn.value}px) ` +
133 | `brightness(${this.brightnessIn?.value}%)`;
134 |
135 | if (canvasInput?.value instanceof HTMLCanvasElement) {
136 | context.drawImage(canvasInput.value, 0, 0);
137 |
138 | if (canvas) this.canvasOut?.updateValue(canvas);
139 | }
140 | }
141 |
142 | public override render(): JSX.LitTemplate {
143 | return (
144 |
145 |
147 | );
148 | }
149 | }
150 |
151 | declare global {
152 | interface HTMLElementTagNameMap {
153 | 'nf-wa-canvas-filters': NfWaCanvasFiltersElement;
154 | }
155 | }
156 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/canvas-mixer.el.tsx:
--------------------------------------------------------------------------------
1 | // import '@shoelace-style/shoelace/dist/components/details/details.js';
2 |
3 | import { css, LitElement } from 'lit';
4 | import { customElement, property } from 'lit/decorators.js';
5 | import { createRef } from 'lit/directives/ref.js';
6 | import { SignalWatcher } from '@lit-labs/signals';
7 | import { reaction } from 'signal-utils/subtle/reaction';
8 |
9 | import type { Port } from '../../../port.js';
10 | import { Node } from '../../../node.js';
11 |
12 | import { type PortsWithSchema } from './schemas.js';
13 |
14 | export class NfWaCanvasMixerNode extends Node {
15 | public override readonly type = 'NfWaCanvasMixerNode';
16 |
17 | public override readonly defaultDisplayName = 'Mixer';
18 | public override readonly defaultIcon = 'transparency';
19 |
20 | public override readonly ports = {
21 | canvasAIn: this.addPort({
22 | direction: 'in',
23 | customDisplayName: 'Canvas A',
24 | }),
25 | canvasBIn: this.addPort({
26 | direction: 'in',
27 | customDisplayName: 'Canvas B',
28 | }),
29 |
30 | canvasOut: this.addPort({
31 | direction: 'out',
32 | customDisplayName: 'Result',
33 | }),
34 | };
35 |
36 | public override readonly Template = (): JSX.LitTemplate => (
37 |
38 |
44 | );
45 | }
46 |
47 | @customElement('wf-canvas-mixer')
48 | export class NfWaCanvasMixerElement extends SignalWatcher(LitElement) {
49 | static styles = [
50 | css`
51 | :host {
52 | display: contents;
53 | }
54 |
55 | .render {
56 | width: 100%;
57 | display: flex;
58 | justify-content: center;
59 | }
60 | `,
61 | ];
62 |
63 | #canvasRef = createRef();
64 |
65 | @property({ attribute: false })
66 | accessor canvasAIn: Port | null = null;
67 |
68 | @property({ attribute: false })
69 | accessor canvasBIn: Port | null = null;
70 |
71 | @property({ attribute: false })
72 | accessor canvasOut: Port | null = null;
73 |
74 | protected firstUpdated(): void {
75 | this.draw();
76 |
77 | reaction(
78 | () => [this.canvasAIn?.lastChangeTime, this.canvasBIn?.lastChangeTime],
79 | () => {
80 | this.draw();
81 | },
82 | );
83 | }
84 |
85 | draw() {
86 | const canvas = this.#canvasRef?.value;
87 | const context = canvas?.getContext('2d');
88 |
89 | const canvasA = this.canvasAIn;
90 | const canvasB = this.canvasBIn;
91 |
92 | if (
93 | context &&
94 | canvasA?.value instanceof HTMLCanvasElement &&
95 | canvasB?.value instanceof HTMLCanvasElement
96 | ) {
97 | context.drawImage(canvasA.value, 0, 0);
98 |
99 | context.drawImage(canvasB.value, 0, 0);
100 |
101 | if (canvas) this.canvasOut?.updateValue(canvas);
102 | }
103 | }
104 |
105 | public override render(): JSX.LitTemplate {
106 | return (
107 |
108 |
110 | );
111 | }
112 | }
113 |
114 | declare global {
115 | interface HTMLElementTagNameMap {
116 | 'wf-canvas-mixer': NfWaCanvasMixerElement;
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/canvas-text.el.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable unicorn/prevent-abbreviations */
2 | import { css, LitElement } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import { createRef } from 'lit/directives/ref.js';
5 | import { reaction } from 'signal-utils/subtle/reaction';
6 | import { SignalWatcher } from '@lit-labs/signals';
7 |
8 | import { Node } from '../../../node.js';
9 | import type { Port } from '../../../port.js';
10 |
11 | import {
12 | textPortSchema,
13 | type PortsWithSchema,
14 | type TextPort,
15 | } from './schemas.js';
16 |
17 | // TODO: add "image node source" before
18 | export class NfWaCanvasTextNode extends Node {
19 | public override readonly type = 'NfWaCanvasTextNode';
20 |
21 | public override readonly defaultDisplayName = 'Text';
22 | public override readonly defaultIcon = 'alphabet-uppercase';
23 |
24 | public override readonly ports = {
25 | text: this.addPort({
26 | direction: 'in',
27 | customDisplayName: 'Text',
28 | metadata: { schema: textPortSchema },
29 | }),
30 | canvas: this.addPort({
31 | direction: 'out',
32 | customDisplayName: 'Canvas',
33 | }),
34 | };
35 |
36 | public override readonly Template = (): JSX.LitTemplate => (
37 |
38 |
43 | );
44 | }
45 |
46 | @customElement('nf-canvas-text')
47 | export class NfWaCanvasTextElement extends SignalWatcher(LitElement) {
48 | static styles = [
49 | css`
50 | :host {
51 | display: flex;
52 | justify-content: center;
53 | }
54 | `,
55 | ];
56 |
57 | #canvasRef = createRef();
58 |
59 | protected firstUpdated(): void {
60 | this.draw();
61 |
62 | reaction(
63 | () => [this.textIn?.lastChangeTime],
64 | () => {
65 | this.draw();
66 | },
67 | );
68 | }
69 |
70 | draw() {
71 | const canvas = this.#canvasRef.value!;
72 |
73 | const ctx = canvas.getContext('2d')!;
74 |
75 | ctx.clearRect(0, 0, canvas.width, canvas.height);
76 |
77 | ctx.font = '36px system-ui';
78 |
79 | ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue(
80 | '--sl-color-primary-950',
81 | );
82 | ctx.fillText(this.textIn?.value || '<…Empty…>', 10, 100);
83 |
84 | this.canvasOut?.updateValue(canvas);
85 | }
86 |
87 | @property({ attribute: false })
88 | accessor canvasOut: Port | null = null;
89 |
90 | @property({ attribute: false }) accessor textIn: Port | null = null;
91 |
92 | public override render(): JSX.LitTemplate {
93 | return {
6 | public override readonly type = 'NfWaDisplayNumberNode';
7 |
8 | public override readonly defaultDisplayName = 'Display';
9 | public override readonly defaultIcon = 'clipboard-pulse';
10 |
11 | public override readonly ports = {
12 | number: this.addPort({
13 | direction: 'in',
14 | customDisplayName: 'Number',
15 | metadata: { schema: numberPortSchema },
16 | }),
17 | };
18 |
19 | public override readonly Template = (): JSX.LitTemplate => (
20 |
21 |
22 | {/* Result
*/}
23 |
30 | {typeof this.ports.number?.value === 'number' ? (
31 | Math.round(Number(this.ports.number.value) * 100_000) / 100_000
32 | ) : (
33 | Empty
34 | )}
35 |
36 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/index.ts:
--------------------------------------------------------------------------------
1 | import '@jsfe/shoelace';
2 |
3 | import './operation.el.js';
4 | import './text.el.js';
5 | import './canvas-comparer.el.js';
6 | import './canvas-color.el.jsx';
7 |
8 | import './note.el.js';
9 | import './canvas-text.el.js';
10 | import './canvas-mixer.el.js';
11 | import './display-number.el.js';
12 | import './number.el.js';
13 | import './broadcast-channel.el.js';
14 | import './canvas-filters.el.js';
15 | import '../../../../../.old/.old/wf-canvas-p5.jsx';
16 |
17 | export * from './presets/index.js';
18 |
19 | import '../../lit-renderer.el.js';
20 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/note.el.tsx:
--------------------------------------------------------------------------------
1 | import { SlTextarea } from '@shoelace-style/shoelace';
2 | import { css, LitElement } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import { createRef } from 'lit/directives/ref.js';
5 | import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
6 | import { SignalWatcher } from '@lit-labs/signals';
7 |
8 | import { Node } from '../../../node.js';
9 |
10 | import type { PortsWithSchema } from './schemas.js';
11 |
12 | export class NfWaNoteNode extends Node {
13 | public override readonly type = 'NfWaNoteNode';
14 |
15 | public override readonly defaultDisplayName = 'Sticky note';
16 | public override readonly defaultIcon = 'sticky';
17 |
18 | public override readonly ports = {
19 | text: this.addPort({
20 | direction: 'in',
21 | metadata: { hidden: true },
22 | }),
23 | };
24 |
25 | // NOTE: beware those custom settings are not persisted
26 | // @signal accessor textContent = '';
27 |
28 | // public updateTextContent(text: string): void {
29 | // this.textContent = text;
30 | // }
31 |
32 | public override readonly Template = (): JSX.LitTemplate => (
33 |
34 |
39 | );
40 | }
41 |
42 | @customElement('nf-wa-note')
43 | export class NfWaNoteElement extends SignalWatcher(LitElement) {
44 | static styles = [
45 | css`
46 | :host {
47 | display: contents;
48 | }
49 |
50 | .wrapper {
51 | padding: var(--sl-spacing-x-small);
52 | }
53 | `,
54 | ];
55 |
56 | #textAreaRef = createRef();
57 |
58 | // TODO: Sync (save)
59 | // TODO: extract to node body initial value with schema (everywhere)
60 | @property({ attribute: false }) accessor textContent: string = '';
61 |
62 | public override render(): JSX.LitTemplate {
63 | return (
64 |
65 |
72 | );
73 | }
74 | }
75 |
76 | declare global {
77 | interface HTMLElementTagNameMap {
78 | 'nf-wa-note': NfWaNoteElement;
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/number.el.tsx:
--------------------------------------------------------------------------------
1 | import { Node } from '../../../node.js';
2 |
3 | import * as schemas from './schemas.js';
4 |
5 | export class NfWaNumberNode extends Node {
6 | public override readonly type = 'NfWaNumberNode';
7 | public override readonly defaultDisplayName = 'Number Input';
8 | public override readonly defaultIcon = 'input-cursor';
9 |
10 | public override readonly ports = {
11 | number: this.addPort({
12 | direction: 'out',
13 | customDisplayName: 'Number',
14 | validate: schemas.numberPortValidator,
15 | // FIXME:
16 | // value: 3,
17 | metadata: { schema: schemas.numberPortSchema },
18 | }),
19 | };
20 |
21 | public override readonly Template = (): JSX.LitTemplate => (
22 |
23 | {/* @ts-expect-error TODO: generate typings for JSFE. */}
24 | {
34 | this.ports.number?.updateValue(data.number);
35 | }}
36 | prop:submitButton={false}
37 | />
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/operation.el.tsx:
--------------------------------------------------------------------------------
1 | import { signal } from '@lit-labs/signals';
2 | import { reaction } from 'signal-utils/subtle/reaction';
3 |
4 | import { Node } from '../../../node.js';
5 | import type {
6 | NodeConstructorParameters,
7 | NodeSerializableOptions,
8 | } from '../../../types.js';
9 |
10 | import {
11 | type NumberPort,
12 | numberPortValidator,
13 | type PortsWithSchema,
14 | } from './schemas.js';
15 | import * as schemas from './schemas.js';
16 |
17 | type Operation = (typeof NfWaOperationNode)['operations'][number];
18 |
19 | export class NfWaOperationNode extends Node {
20 | public override readonly type = 'NfWaOperationNode';
21 |
22 | public override readonly defaultDisplayName = 'Operation';
23 | public override readonly defaultIcon = 'calculator';
24 |
25 | foo = 'foo';
26 |
27 | public override readonly ports = {
28 | numberA: this.addPort({
29 | direction: 'in',
30 | customDisplayName: 'Operand A',
31 | validate: numberPortValidator,
32 | metadata: { schema: schemas.numberPortSchema },
33 | }),
34 | numberB: this.addPort({
35 | direction: 'in',
36 | customDisplayName: 'Operand B',
37 | validate: numberPortValidator,
38 | metadata: { schema: schemas.numberPortSchema },
39 | }),
40 |
41 | result: this.addPort({
42 | direction: 'out',
43 | customDisplayName: 'Result',
44 | value: 0,
45 | }),
46 | };
47 |
48 | public static readonly operations = [
49 | 'Sum',
50 | 'Divide',
51 | 'Minus',
52 | 'Multiply',
53 | ] as const;
54 |
55 | public accessor $currentOperation = signal('Sum');
56 | public changeOperation(operation: Operation): void {
57 | this.$currentOperation.set(operation);
58 | }
59 |
60 | constructor(options: NodeConstructorParameters) {
61 | super(options);
62 |
63 | reaction(
64 | () => [
65 | this.ports.numberA.value,
66 | this.ports.numberB.value,
67 | this.$currentOperation.get(),
68 | ],
69 | () => this.updateResult(),
70 | );
71 | }
72 |
73 | public updateResult(): void {
74 | let result = Number.NaN;
75 |
76 | const b = this.ports.numberB.value || 0;
77 | const a = this.ports.numberA.value || 0;
78 |
79 | switch (this.$currentOperation.get()) {
80 | case 'Minus': {
81 | result = a - b;
82 | break;
83 | }
84 | case 'Divide': {
85 | result = a / b;
86 | break;
87 | }
88 | case 'Multiply': {
89 | result = a * b;
90 | break;
91 | }
92 | default: {
93 | result = a + b;
94 | break;
95 | }
96 | }
97 | this.ports.result.updateValue(result);
98 | }
99 |
100 | public override readonly Template = (): JSX.LitTemplate => (
101 |
102 |
103 | {/* @ts-expect-error TODO: generate typings for JSFE. */}
104 | {
120 | this.changeOperation(data.operation);
121 | }}
122 | />
123 |
124 |
125 | );
126 |
127 | public override fromJSON(
128 | options: NodeSerializableOptions,
129 | ): void {
130 | super.fromJSON(options);
131 |
132 | const operation = options.initialOperation;
133 |
134 | queueMicrotask(() => this.changeOperation(operation));
135 | }
136 |
137 | // TODO:
138 | // public override toJSON(): SerializableOptions> {
139 | // const { foo } = this;
140 | // return { ...super.toJSON(), foo };
141 | // }
142 | }
143 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/presets/default.ts:
--------------------------------------------------------------------------------
1 | import type { NodeType } from '../../../../types.js';
2 |
3 | export const defaultPreset = {
4 | initialNodes: [
5 | {
6 | id: 'Node_1',
7 | customDisplayName: 'Node A',
8 | x: 100,
9 | y: 100,
10 | ports: { output: { connectedTo: [{ node: 'Node_2', port: 'input' }] } },
11 | },
12 | {
13 | id: 'Node_2',
14 | customDisplayName: 'Node B',
15 | x: 400,
16 | y: 300,
17 | ports: { output: { connectedTo: [{ node: 'Node_3', port: 'input' }] } },
18 | },
19 | {
20 | id: 'Node_3',
21 | customDisplayName: 'Node B',
22 | x: 700,
23 | y: 600,
24 | },
25 | ] satisfies NodeType[],
26 | };
27 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/presets/index.ts:
--------------------------------------------------------------------------------
1 | export { preset as kitchenSink } from './kitchen-sink.js';
2 | export { defaultPreset } from './default.js';
3 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/presets/kitchen-sink.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | FlowConstructorParameters,
3 | NodeList,
4 | NodeType,
5 | } from '../../../../types.js';
6 | import { NfWaOperationNode } from '../operation.el.js';
7 | import type { PortsWithSchema } from '../schemas.js';
8 | import { NfWaDisplayNumberNode } from '../display-number.el.js';
9 | import { NfWaNumberNode } from '../number.el.js';
10 | import { NfWaTextNode } from '../text.el.js';
11 | import { NfWaNoteNode } from '../note.el.js';
12 | import { NfWaCanvasFiltersNode } from '../canvas-filters.el.js';
13 | import { NfWaCanvasTextNode } from '../canvas-text.el.js';
14 | import { NfWaCanvasComparerNode } from '../canvas-comparer.el.js';
15 | import { NfWaBroadcastChannelNode } from '../broadcast-channel.el.js';
16 | import { NfWaCanvasMixerNode } from '../canvas-mixer.el.js';
17 | import { NfWaCanvasColorNode } from '../canvas-color.el.jsx';
18 |
19 | import { menu } from './menu.js';
20 |
21 | export const nodeTypes = {
22 | NfWaNumberNode,
23 | NfWaOperationNode,
24 | NfWaDisplayNumberNode,
25 | NfWaTextNode,
26 | NfWaNoteNode,
27 | NfWaCanvasTextNode,
28 | NfWaCanvasComparerNode,
29 | NfWaCanvasFiltersNode,
30 | NfWaBroadcastChannelNode,
31 | NfWaCanvasMixerNode,
32 | NfWaCanvasColorNode,
33 | } satisfies NodeList;
34 |
35 | const offsetX = -200;
36 | const offsetY = 200;
37 |
38 | const initialNodes = [
39 | {
40 | id: 'num_1',
41 | type: 'NfWaNumberNode',
42 | x: 61 - offsetX,
43 | y: 33 - offsetY,
44 | customDisplayName: 'Factor - Brightness',
45 | test: 12,
46 | ports: {
47 | number: {
48 | value: 15,
49 | connectedTo: [{ node: 'op', port: 'numberA' }],
50 | },
51 | },
52 | },
53 | {
54 | type: 'NfWaOperationNode',
55 | id: 'op',
56 | x: 507 - offsetX,
57 | y: 94 - offsetY,
58 | foo2: 'sss',
59 | initialOperation: 'Multiply',
60 | ports: {
61 | result: {
62 | connectedTo: [
63 | { node: 'bd_in', port: 'messageInput' },
64 | { node: 'filters', port: 'brightnessIn' },
65 | ],
66 | },
67 | },
68 | },
69 | {
70 | type: 'NfWaNumberNode',
71 | id: 'num2',
72 | customDisplayName: 'Factor - Blur x Brightness',
73 | x: 0 - offsetX,
74 | y: 316 - offsetY,
75 | test: 1,
76 | ports: {
77 | number: {
78 | value: 11,
79 | connectedTo: [
80 | { node: 'op', port: 'numberA' },
81 | { node: 'op', port: 'numberB' },
82 | { node: 'filters', port: 'blurIn' },
83 | ],
84 | },
85 | },
86 | },
87 |
88 | {
89 | type: 'NfWaDisplayNumberNode',
90 | id: 'num_d',
91 | x: 1500 - offsetX,
92 | y: 57 - offsetY,
93 | },
94 | {
95 | type: 'NfWaCanvasTextNode',
96 | id: 'text_canvas',
97 | x: 333 - offsetX,
98 | y: 926 - offsetY,
99 |
100 | ports: {
101 | canvas: { connectedTo: [{ node: 'mixer_1', port: 'canvasBIn' }] },
102 | },
103 | },
104 | {
105 | type: 'NfWaCanvasFiltersNode',
106 | id: 'filters',
107 | x: 1304 - offsetX,
108 | y: 357 - offsetY,
109 |
110 | ports: {
111 | canvasOut: { connectedTo: [{ node: 'comparer_1', port: 'canvasAfter' }] },
112 | },
113 | },
114 | {
115 | type: 'NfWaTextNode',
116 | id: 'text_1',
117 | x: 39 - offsetX,
118 | y: 639 - offsetY,
119 |
120 | ports: {
121 | textOutput: {
122 | connectedTo: [{ node: 'text_canvas', port: 'text' }],
123 | },
124 | },
125 | },
126 | {
127 | type: 'NfWaCanvasComparerNode',
128 |
129 | id: 'comparer_1',
130 | x: 1801 - offsetX,
131 | y: 881 - offsetY,
132 | },
133 | {
134 | type: 'NfWaBroadcastChannelNode',
135 | id: 'bd_in',
136 | x: 930 - offsetX,
137 | y: 351 - offsetY,
138 | customDisplayName: 'Broadcast In (op.)',
139 | },
140 | {
141 | type: 'NfWaBroadcastChannelNode',
142 | id: 'bd_out',
143 | x: 993 - offsetX,
144 | y: 33 - offsetY,
145 | customDisplayName: 'Broadcast Out (op.)',
146 |
147 | ports: {
148 | messageOutput: { connectedTo: [{ node: 'num_d', port: 'number' }] },
149 | },
150 | },
151 | {
152 | type: 'NfWaCanvasMixerNode',
153 | id: 'mixer_1',
154 | x: 867 - offsetX,
155 | y: 886 - offsetY,
156 |
157 | // ports: { canvasOut: { node: 'filters', port: 'canvasIn' } },
158 | ports: {
159 | canvasOut: {
160 | connectedTo: [
161 | { node: 'comparer_1', port: 'canvasBefore' },
162 | { node: 'filters', port: 'canvasIn' },
163 | ],
164 | },
165 | },
166 | },
167 | {
168 | type: 'NfWaCanvasColorNode',
169 | id: 'img_1',
170 | x: 451 - offsetX,
171 | y: 413 - offsetY,
172 |
173 | ports: {
174 | canvas: { connectedTo: [{ node: 'mixer_1', port: 'canvasAIn' }] },
175 | },
176 | },
177 | {
178 | id: 'note_1',
179 | type: 'NfWaNoteNode',
180 | x: 855 - offsetX,
181 | y: 684 - offsetY,
182 | ports: {
183 | text: {
184 | value:
185 | '💡 Right click on the canvas to create new nodes, clear all of them, etc.',
186 | },
187 | },
188 | },
189 | {
190 | id: 'note_2',
191 | type: 'NfWaNoteNode',
192 | x: 1751 - offsetX,
193 | y: 109 - offsetY,
194 | ports: {
195 | text: {
196 | value:
197 | '👈 Open a new tab / window to see how messages can be broadcasted!',
198 | },
199 | },
200 | },
201 | ] as const satisfies NodeType[];
202 |
203 | export const preset = {
204 | id: 'flow_1',
205 | nodeTypes,
206 | initialNodes,
207 | menu,
208 | } as const satisfies FlowConstructorParameters;
209 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/presets/menu.ts:
--------------------------------------------------------------------------------
1 | import type { MenuItem } from '../../../../types.js';
2 | import { NfWaBroadcastChannelNode } from '../broadcast-channel.el.jsx';
3 | import { NfWaCanvasColorNode } from '../canvas-color.el.jsx';
4 | import { NfWaCanvasComparerNode } from '../canvas-comparer.el.jsx';
5 | import { NfWaCanvasFiltersNode } from '../canvas-filters.el.jsx';
6 | import { NfWaCanvasMixerNode } from '../canvas-mixer.el.jsx';
7 | import { NfWaCanvasTextNode } from '../canvas-text.el.jsx';
8 | import { NfWaDisplayNumberNode } from '../display-number.el.jsx';
9 | import { NfWaNoteNode } from '../note.el.jsx';
10 | import { NfWaNumberNode } from '../number.el.jsx';
11 | import { NfWaOperationNode } from '../operation.el.jsx';
12 | import { NfWaTextNode } from '../text.el.jsx';
13 |
14 | export const menu = [
15 | { displayName: 'Primitives', label: true },
16 | {
17 | displayName: 'Number',
18 | icon: '123',
19 | children: [
20 | //
21 | { nodeCtor: NfWaNumberNode },
22 | { nodeCtor: NfWaOperationNode },
23 | { nodeCtor: NfWaDisplayNumberNode },
24 | ],
25 | },
26 | {
27 | displayName: 'Text',
28 | icon: 'alphabet-uppercase',
29 | children: [
30 | //
31 | { nodeCtor: NfWaTextNode },
32 | ],
33 | },
34 | { displayName: 'Media', label: true },
35 | {
36 | displayName: 'Canvas',
37 | icon: 'collection-play',
38 | children: [
39 | //
40 | { nodeCtor: NfWaCanvasTextNode },
41 | { nodeCtor: NfWaCanvasFiltersNode },
42 | { nodeCtor: NfWaCanvasComparerNode },
43 | { nodeCtor: NfWaCanvasMixerNode },
44 | { nodeCtor: NfWaCanvasColorNode },
45 | ],
46 | },
47 |
48 | { displayName: 'Channels', label: true },
49 |
50 | { nodeCtor: NfWaBroadcastChannelNode },
51 |
52 | { displayName: 'Others', label: true },
53 | { nodeCtor: NfWaNoteNode },
54 | ] as const satisfies MenuItem[];
55 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/schemas.ts:
--------------------------------------------------------------------------------
1 | import { Ajv } from 'ajv';
2 | import { FromSchema, JSONSchema } from 'json-schema-to-ts';
3 |
4 | export type PortsWithSchema = { schema?: JSONSchema; hidden?: true };
5 |
6 | export const ajv = new Ajv();
7 |
8 | export const numberPortSchema = {
9 | type: 'number',
10 | title: 'Number',
11 | default: 1,
12 | // maximum: 50,
13 | } as const satisfies JSONSchema;
14 | export type NumberPort = FromSchema;
15 | export const numberPortValidator = ajv.compile(numberPortSchema);
16 |
17 | export const textPortSchema = {
18 | type: 'string',
19 | title: 'Text',
20 | default: 'Type here…',
21 | } as const satisfies JSONSchema;
22 | export type TextPort = FromSchema;
23 | export const textPortValidator = ajv.compile(textPortSchema);
24 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/demo-nodes/text.el.tsx:
--------------------------------------------------------------------------------
1 | import { Node } from '../../../node.js';
2 |
3 | import {
4 | textPortSchema,
5 | type PortsWithSchema,
6 | type TextPort,
7 | } from './schemas.js';
8 |
9 | export class NfWaTextNode extends Node {
10 | public override readonly type = 'NfWaTextNode';
11 |
12 | public override readonly defaultDisplayName = 'Text Input';
13 | public override readonly defaultIcon = 'input-cursor';
14 |
15 | public override readonly ports = {
16 | textOutput: this.addPort({
17 | direction: 'out',
18 | customDisplayName: 'Text',
19 | metadata: { schema: textPortSchema },
20 | }),
21 | };
22 |
23 | public override readonly Template = (): JSX.LitTemplate => (
24 |
25 |
26 | {/* @ts-expect-error TODO: generate typings for JSFE. */}
27 |
30 | this.ports.textOutput.updateValue(data.textInput)
31 | }
32 | prop:submitButton={false}
33 | />
34 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/extra/center.el.tsx:
--------------------------------------------------------------------------------
1 | 'use html-signal';
2 | import { LitElement, unsafeCSS } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import { consume } from '@lit/context';
5 | import { SignalWatcher } from '@lit-labs/signals';
6 |
7 | import { Flow } from '../../../flow.js';
8 | import type { NfFlowElement as Nfe } from '../../../flow.el.jsx';
9 |
10 | import styles from './center.scss?inline';
11 | import type { GenericFlow } from '../../../types.js';
12 |
13 | @customElement('nf-wa-center')
14 | export class NfWaCenterElement extends SignalWatcher(LitElement) {
15 | static styles = unsafeCSS(styles);
16 |
17 | declare slot: (typeof Nfe)['SLOT']['bgInteractive'];
18 |
19 | @consume({ context: Flow.CONTEXT, subscribe: true })
20 | @property({ attribute: false })
21 | accessor flow!: GenericFlow;
22 |
23 | public override render(): JSX.LitTemplate {
24 | return (
25 |
32 |
34 | );
35 | }
36 | }
37 |
38 | declare global {
39 | interface HTMLElementTagNameMap {
40 | 'nf-wa-center': NfWaCenterElement;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/extra/center.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: contents;
3 | pointer-events: none;
4 | }
5 |
6 | .center {
7 | // font-size: 120px;
8 | color: var(--sl-color-neutral-600);
9 | opacity: 0.1;
10 |
11 | sl-icon {
12 | width: 128px;
13 | height: 128px;
14 | }
15 |
16 | // FIXME:
17 | transform: translate(calc(var(--x) - 64px), calc(var(--y) - 64px));
18 | }
19 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/extra/inventory.el.tsx:
--------------------------------------------------------------------------------
1 | 'use html-signal';
2 | import { LitElement, unsafeCSS } from 'lit';
3 | import { customElement, property } from 'lit/decorators.js';
4 | import { createRef } from 'lit/directives/ref.js';
5 | import { SignalWatcher } from '@lit-labs/signals';
6 | import { consume } from '@lit/context';
7 | import type { SlDialog } from '@shoelace-style/shoelace';
8 |
9 | import { Flow } from '../../../flow.js';
10 | import type { NfFlowElement as Nfe } from '../../../flow.el.jsx';
11 | import type { GenericFlow, MenuItem } from '../../../types.js';
12 |
13 | import styles from './inventory.scss?inline';
14 |
15 | @customElement('nf-wa-inventory')
16 | export class NfWaInventoryElement extends SignalWatcher(LitElement) {
17 | static styles = unsafeCSS(styles);
18 |
19 | declare slot: (typeof Nfe)['SLOT']['foreground'];
20 |
21 | @consume({ context: Flow.CONTEXT, subscribe: true })
22 | @property({ attribute: false })
23 | accessor flow!: GenericFlow;
24 |
25 | #confirmClearAllDialogRef = createRef();
26 |
27 | MenuPanel = (tree: MenuItem[]) =>
28 | tree.map((node) => {
29 | if (node.children)
30 | return (
31 |
32 | {node.displayName}
33 | {this.MenuPanel(node.children)}
36 |
37 | );
38 | else if (node.label) {
39 | return {node.displayName} ;
40 | } else if (node.nodeCtor) {
41 | const dummyNode = new node.nodeCtor({ flow: this.flow });
42 | return (
43 | <>
44 | {
46 | this.flow.addNode({
47 | id: `added_node_${crypto.randomUUID()}`,
48 | type: dummyNode.type,
49 | x:
50 | (this.flow.contextMenuPosition.x - this.flow.offsetX) /
51 | this.flow.scale,
52 | y:
53 | (this.flow.contextMenuPosition.y - this.flow.offsetY) /
54 | this.flow.scale,
55 | });
56 |
57 | this.flow.setIsContextMenuVisible(false);
58 | }}
59 | >
60 |
63 |
64 | );
65 | }
66 | });
67 |
68 | private Dialog = () => (
69 |
70 |
71 |
74 |
75 | Are you sure you want to delete all nodes from canvas?
76 |
77 |
78 |
79 | Press ENTER to confirm.
80 |
81 |
82 |
83 | this.#confirmClearAllDialogRef.value?.hide()}
86 | >
87 | Cancel
88 |
89 | {
93 | this.flow.clearNodes();
94 | this.#confirmClearAllDialogRef.value?.hide();
95 | }}
96 | variant="primary"
97 | >
98 | Confirm
99 |
100 |
101 | );
102 |
103 | public override render(): JSX.LitTemplate {
104 | return (
105 | <>
106 | event.preventDefault()}
116 | >
117 | this.#confirmClearAllDialogRef.value?.show()}
121 | >
122 |
124 |
125 |
143 |
144 |
145 | ();
27 |
28 | @property({ attribute: false }) accessor scale = 10;
29 | @property({ type: Number }) accessor width = 256;
30 | @property({ type: Number }) accessor height = 256;
31 |
32 | protected updated(_changedProperties: PropertyValues): void {
33 | this.updateCanvas();
34 | }
35 |
36 | public override firstUpdated(): void {
37 | reaction(
38 | () => [
39 | this.flow.viewportRect,
40 | this.flow.offsetX,
41 | this.flow.offsetY,
42 | this.flow.scale,
43 | this.flow.nodes.map((node) => [node.x, node.y, node.zIndex]),
44 | ],
45 |
46 | () => this.updateCanvas(),
47 | );
48 | }
49 |
50 | updateCanvas = (): void => {
51 | const canvas = this.#canvasRef.value!;
52 |
53 | const context = canvas.getContext('2d');
54 | if (!context) return;
55 |
56 | context.clearRect(0, 0, canvas.width, canvas.height);
57 |
58 | const sortedNodes = [...this.flow.nodes].sort(
59 | (a: Node, b: Node /* FIXME */) =>
60 | (a.zIndex ?? 0) < (b.zIndex ?? 0) ? -1 : 1,
61 | );
62 | for (const node of sortedNodes) {
63 | // return;
64 | context.strokeStyle = 'grey';
65 | context.fillStyle = node.isSelected ? 'white' : 'lightgrey';
66 |
67 | context.beginPath();
68 | context.roundRect(
69 | ((node.x + this.flow.offsetX + this.flow.viewportRect.width / 2) *
70 | this.flow.scale) /
71 | this.scale,
72 | ((node.y + this.flow.offsetY + this.flow.viewportRect.height / 2) *
73 | this.flow.scale) /
74 | this.scale,
75 | (node.width * this.flow.scale) / this.scale,
76 | (node.height * this.flow.scale) / this.scale,
77 | 2 * ((this.flow.scale * this.scale) / 10),
78 | );
79 | context.stroke();
80 | context.fill();
81 | }
82 | };
83 |
84 | render(): JSX.LitTemplate {
85 | return (
86 |
90 |
102 | X: {Math.round(this.flow.offsetX)}
103 | Y: {Math.round(this.flow.offsetY)}
104 |
105 | Z: {Math.round(this.flow.scale * 1000) / 1000}
106 |
107 |
108 |
109 |
event.preventDefault()}
114 | />
115 |
31 |
34 | this.flow.setIsCoordinatesVisible(!this.flow.isCoordinatesVisible)
35 | }
36 | size="small"
37 | >
38 |
40 |
41 | this.flow.zoom('in')}
44 | size="small"
45 | >
46 |
48 |
49 | this.flow.zoom('out')}
52 | size="small"
53 | >
54 |
56 |
57 | this.flow.resetViewport()}
60 | size="small"
61 | >
62 |
64 |
65 | );
66 | }
67 | }
68 |
69 | declare global {
70 | interface HTMLElementTagNameMap {
71 | 'nf-wa-navigation': NfWaNavigationElement;
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/extra/navigation.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: contents;
3 | }
4 |
5 | .navigation-overlay {
6 | position: absolute;
7 | right: var(--sl-spacing-large);
8 | bottom: var(--sl-spacing-large);
9 | display: flex;
10 | flex-direction: column;
11 | gap: 0.5rem;
12 | margin: var(--sl-spacing-x-small);
13 | font-size: 1.5rem;
14 | opacity: 0;
15 | transition: opacity 0.3334s;
16 |
17 | &.is-visible {
18 | opacity: 1;
19 | transition: opacity 0.6667s;
20 | }
21 |
22 | // TODO:
23 | // .toggle-coordinates {
24 | // svg {
25 | // color: red;
26 | // }
27 | // }
28 | }
29 |
30 | sl-button {
31 | &::part(base) {
32 | min-height: initial;
33 | font-size: 1.15rem;
34 | box-shadow: var(--sl-shadow-small);
35 | }
36 |
37 | &::part(label) {
38 | display: flex;
39 | align-items: center;
40 | padding: var(--sl-spacing-x-small);
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/index.ts:
--------------------------------------------------------------------------------
1 | // TODO: Split and put in components.
2 |
3 | import '@shoelace-style/shoelace/dist/components/animation/animation.js';
4 | import '@shoelace-style/shoelace/dist/components/menu/menu.js';
5 | import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
6 | import '@shoelace-style/shoelace/dist/components/divider/divider.js';
7 | import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
8 | import '@shoelace-style/shoelace/dist/components/tag/tag.js';
9 | import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
10 | import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
11 | import '@shoelace-style/shoelace/dist/components/menu-label/menu-label.js';
12 | import '@shoelace-style/shoelace/dist/components/card/card.js';
13 | import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
14 |
15 | import './node.el.jsx';
16 | import './port.el.jsx';
17 |
18 | import './extra/navigation.el.jsx';
19 | import './extra/center.el.jsx';
20 | import './extra/inventory.el.jsx';
21 | import './extra/minimap.el.jsx';
22 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/node.el.tsx:
--------------------------------------------------------------------------------
1 | 'use html-signal';
2 | import '../../port.el.jsx';
3 | import '../../handle.el.jsx';
4 |
5 | import { createRef } from 'lit/directives/ref.js';
6 | import { LitElement, unsafeCSS } from 'lit';
7 | import { customElement, property, state } from 'lit/decorators.js';
8 | import type { SlCard, SlInput } from '@shoelace-style/shoelace';
9 | import { SignalWatcher } from '@lit-labs/signals';
10 | import { For } from '@gracile-labs/jsx/components/for';
11 |
12 | import type { Port } from '../../port.js';
13 |
14 | import styles from './node.scss?inline';
15 | import type { PortsWithSchema } from './demo-nodes/schemas.js';
16 | import type { GenericNode } from '../../types.js';
17 | import { reaction } from 'signal-utils/subtle/reaction';
18 |
19 | @customElement('nf-wa-node')
20 | export class NfWaNodeElement extends SignalWatcher(LitElement) {
21 | static styles = unsafeCSS(styles);
22 |
23 | @state() accessor isNodeInfosEditModeActive = false;
24 | @state() accessor isDeleting = false;
25 | @property({ attribute: false }) accessor node!: GenericNode;
26 |
27 | #renameInputRef = createRef();
28 | #draggableRef = createRef();
29 |
30 | public override firstUpdated(): void {
31 | reaction(
32 | () => this.node.isSelected,
33 | () => {
34 | if (!this.node.isSelected && this.isNodeInfosEditModeActive)
35 | this.isNodeInfosEditModeActive = false;
36 | },
37 | );
38 | }
39 |
40 | public override render(): JSX.LitTemplate {
41 | if (!this.node) throw new ReferenceError('Missing node.');
42 | return (
43 |
54 |
60 | );
61 | }
62 |
63 | private Coordinates = (): JSX.LitTemplate => (
64 |
70 |
71 | X: {Math.round(this.node.x)}
72 |
73 |
74 | Y: {Math.round(this.node.y)}
75 |
76 |
77 | );
78 |
79 | private Title = (): JSX.LitTemplate => (
80 |
81 |
82 |
83 | {this.node.defaultDisplayName}
84 |
85 | {this.node.helpText ? (
86 | <>
87 | {this.node.helpText}
89 |
90 | ) : null}
91 |
92 |
93 |
95 |
96 | {this.node?.displayName}
97 |
{
105 | this.isNodeInfosEditModeActive = false;
106 | }}
107 | on:sl-show={() => {
108 | this.isNodeInfosEditModeActive = true;
109 |
110 | if (this.isNodeInfosEditModeActive)
111 | setTimeout(() => {
112 | this.#renameInputRef.value!.focus();
113 | }, 50);
114 | }}
115 | >
116 | {
128 | event.stopPropagation();
129 | this.node.flow.selectNode(this.node);
130 | this.isNodeInfosEditModeActive = !this.isNodeInfosEditModeActive;
131 | }}
132 | />
133 |
134 |
135 | {
137 | this.isNodeInfosEditModeActive = false;
138 |
139 | // FIXME: cables
140 | this.isDeleting = true;
141 | setTimeout(() => {
142 | this.isDeleting = false;
143 | }, 270);
144 | this.node.delete();
145 | }}
146 | size="small"
147 | variant="text"
148 | outline
149 | class="delete-node"
150 | >
151 | delete
152 |
153 |
154 | {
163 | // HACK:
164 | if (event.key === 'Enter') {
165 | event.currentTarget
166 | .closest('form')
167 | ?.dispatchEvent(new Event('submit'));
168 | }
169 | }}
170 | />
171 |
172 |
173 | ok
174 |
175 |
176 |
177 | );
178 |
179 | private Header = (): JSX.LitTemplate => (
180 |
206 | );
207 |
208 | private Footer = (): JSX.LitTemplate => {
209 | const inputs = Object.values(this.node.ports).filter(
210 | (port) => port.direction === 'in' && !port.metadata.hidden,
211 | );
212 | const outputs = Object.values(this.node.ports).filter(
213 | (port) => port.direction === 'out' && !port.metadata.hidden,
214 | );
215 | return (
216 | 0 && outputs.length > 0}>
217 | {inputs.length > 0 ?
222 | );
223 | };
224 |
225 | private readonly Label = ({
226 | port,
227 | type,
228 | }: {
229 | port: Port;
230 | type: 'output' | 'input';
231 | }): JSX.LitTemplate => (
232 |
233 | {type === 'output' ?
240 |
246 | {port.displayName}
247 |
248 |
249 |
250 | {/* TODO: Put in slot: */}
251 | {typeof port.metadata.schema === 'object' ? (
252 | // @ts-expect-error Need custom elements manifest.
253 | {
266 | port.updateValue(value.portValue);
267 | }}
268 | prop:submitButton={false}
269 | />
270 | ) : null}
271 |
272 |
273 |
274 | {type === 'output' ?
277 | );
278 |
279 | private readonly Banger = ({ port }: { port: Port }): JSX.LitTemplate => (
280 | port.bang()}
286 | >
287 |
289 | );
290 |
291 | private readonly Deleter = ({ port }: { port: Port }): JSX.LitTemplate => (
292 | port.disconnectAll()}
298 | >
299 |
301 | );
302 |
303 | private readonly Ports = ({
304 | ports,
305 | type,
306 | }: {
307 | ports: Port[];
308 | type: 'input' | 'output';
309 | }): JSX.LitTemplate => (
310 |
311 |
port.id}>
312 | {(port) =>
313 | port.metadata.hidden ? null : (
314 |
315 | {type === 'output' ? (
316 |
317 | ) : null}
318 |
319 |
325 |
327 |
328 | {type === 'input' ?
: null}
329 |
333 |
0 && 'is-connected',
32 | ]}
33 | >
34 |
35 |
36 | {portType}
37 |
39 |
40 |
46 |
48 |
49 |
50 | );
51 | }
52 | }
53 |
54 | declare global {
55 | interface HTMLElementTagNameMap {
56 | 'nf-wa-port': NfWaPortElement;
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/port.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: contents;
3 | }
4 |
5 | .is-hovering {
6 | background: var(--sl-color-red-700);
7 | }
8 |
9 | .is-dragging {
10 | background: var(--sl-color-green-700);
11 | }
12 |
13 | .is-dragged-over {
14 | background: var(--sl-color-cyan-700);
15 | }
16 |
17 | .is-hidden {
18 | visibility: hidden;
19 | }
20 |
21 | nf-port {
22 | padding: 0.5rem;
23 | }
24 |
25 | .port {
26 | z-index: 99;
27 | display: flex;
28 | align-items: center;
29 | justify-content: center;
30 | width: 0.9rem;
31 | height: 0.9rem;
32 | font-size: 0.7rem;
33 | color: var(--sl-color-neutral-700);
34 | background-color: var(--sl-color-neutral-0);
35 | border: 2px solid;
36 | border-color: var(--sl-color-neutral-500);
37 | border-radius: 3px;
38 |
39 | .is-connected & {
40 | color: var(--sl-color-primary-700);
41 | background-color: var(--sl-color-neutral-50);
42 | border-color: var(--sl-color-primary-300);
43 | }
44 |
45 | &:hover {
46 | // color: var(--sl-color-primary-50);
47 | background-color: var(--sl-color-primary-800);
48 | box-shadow: var(--sl-shadow-small), var(--sl-shadow-large);
49 | }
50 | }
51 |
52 | .wrapper .port {
53 | transition:
54 | background-color 250ms,
55 | border-color 750ms;
56 | }
57 |
58 | .wrapper.is-pulsing .port {
59 | background-color: var(--sl-color-green-400);
60 | border-color: var(--sl-color-green-200);
61 | transition:
62 | background-color 5ms,
63 | border-color 50ms;
64 | }
65 |
66 | .port.inlet {
67 | transform: translateX(calc(0.7rem / 2));
68 | }
69 |
70 | .port.outlet {
71 | transform: translateX(calc(-0.7rem / 2));
72 | }
73 |
74 | .port-type-tooltip-content {
75 | display: flex;
76 | gap: var(--sl-spacing-2x-small);
77 | align-items: center;
78 | }
79 |
--------------------------------------------------------------------------------
/src/lib/themes/webawesome/theme.scss:
--------------------------------------------------------------------------------
1 | .nf-webawesome {
2 | // --nf-background-grid-line-colors: red;
3 | --nf-background-grid-line-colors: var(--sl-color-neutral-0);
4 | --nf-background-grid-line-width: 0.5;
5 | --nf-background-grid-line-spacing: 48;
6 | --nf-links-grid-stroke-main-color: var(--sl-color-neutral-500);
7 | --nf-links-grid-stroke-main-pulsing-color: var(--sl-color-green-300);
8 | --nf-links-grid-stroke-main-overlay-color: var(--sl-color-neutral-500);
9 | }
10 |
--------------------------------------------------------------------------------
/src/lib/types.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 |
3 | import type { Flow } from './flow.js';
4 | import { type NfHandleElement } from './handle.el.jsx';
5 | import { type NfNodeElement } from './node.el.jsx';
6 | import { Node } from './node.js';
7 | import { type NfPortElement } from './port.el.jsx';
8 | import type { Port } from './port.js';
9 | // import type { Inlet, Outlet } from './port.js';
10 |
11 | export type Link = {
12 | from: Port;
13 | to: Port;
14 | };
15 | export type ConnectingLink = {
16 | from: Port;
17 | to: Port | null;
18 | };
19 |
20 | // type NodeConstructor = { x; y; id?: string };
21 |
22 | export type Coordinates = { x: number; y: number };
23 |
24 | // export type SerializableResult = Partial<
25 | // ReturnType
26 | // >;
27 |
28 | export type FlowConstructorParameters = {
29 | id?: string;
30 | nodeTypes?: NodeTypes;
31 | initialNodes?: InitialNodes;
32 | menu?: MenuItem[];
33 | };
34 |
35 | export type NodeConstructorParameters<_Node extends Node = Node> = {
36 | flow: Flow;
37 | data?: NodeSerializableOptions<_Node>;
38 | };
39 |
40 | export type PortSerializationOptions = Pick<
41 | Port,
42 | 'direction'
43 | > &
44 | Partial> &
45 | PortMetadata;
46 |
47 | export type Validate = (value: unknown) => boolean;
48 | export type AddPortOptions<
49 | Type = any,
50 | PortMetadata = any,
51 | > = PortSerializationOptions & {
52 | validate?: Validate;
53 | value?: Type;
54 | metadata?: PortMetadata;
55 | };
56 |
57 | export type PortDirection = 'in' | 'out' | 'both';
58 |
59 | // export type Port = Inlet | Outlet;
60 |
61 | // export type PortConstructionData = Partial>;
62 |
63 | export const PZ_EVENT = {
64 | panstart: 'panstart',
65 | pan: 'pan',
66 | panend: 'panend',
67 | zoom: 'zoom',
68 | zoomend: 'zoomend',
69 | transform: 'transform',
70 | } as const;
71 |
72 | export interface Offset {
73 | x: number;
74 | y: number;
75 | }
76 |
77 | export interface PointerData {
78 | id: number;
79 | startPos: Offset;
80 | currentPos: Offset;
81 | }
82 |
83 | export interface MenuItem {
84 | displayName?: string;
85 | icon?: string;
86 | label?: boolean;
87 | children?: MenuItem[];
88 | nodeCtor?: typeof Node;
89 | }
90 |
91 | export function isNode(element: EventTarget): element is NfNodeElement {
92 | return NODE in element;
93 | }
94 | export function isHandle(element: EventTarget): element is NfHandleElement {
95 | return HANDLE in element;
96 | }
97 | export function isPort(element: EventTarget): element is NfPortElement {
98 | return PORT in element;
99 | }
100 |
101 | export type NodeSerializableOptions<
102 | NodeType extends Node = Node,
103 | Data extends Record = Record,
104 | > = Pick &
105 | Partial> &
106 | Data & {
107 | ports?: Partial<{
108 | [key in keyof NodeType['ports']]: {
109 | value?: NodeType['ports'][key]['value'];
110 | connectedTo?: { node: string; port: string }[];
111 | };
112 | }>;
113 | };
114 |
115 | export type GenericFlow = Flow;
116 |
117 | export type GenericNode = Omit, 'type'> & {
118 | type: string;
119 | };
120 | export type GenericPort = Port;
121 |
122 | export type NodeList = Record<
123 | string,
124 | typeof Node
125 | >;
126 | export type NodeType<
127 | PortMetadata = any,
128 | _B extends Record> = Record<
129 | string,
130 | typeof Node
131 | >,
132 | _Node extends _B[keyof _B] = _B[keyof _B],
133 | > = Parameters['fromJSON']>[0] /* & {
134 | ports: keyof InstanceType<_Node>['ports'];
135 | // ports: {
136 | // [key in keyof InstanceType<_Node>['ports']]: string;
137 | // };
138 | } */;
139 |
140 | // NOTE: EXPERIMENTAL
141 |
142 | // type Link<
143 | // B extends (typeof initialNodes)[number] = (typeof initialNodes)[number],
144 | // C extends keyof InstanceType<
145 | // (typeof nodeTypes)[keyof typeof nodeTypes]
146 | // >['ports'] = keyof InstanceType<
147 | // (typeof nodeTypes)[keyof typeof nodeTypes]
148 | // >['ports'],
149 | // > = {
150 | // id: string;
151 | // from: {
152 | // node: B['id'];
153 | // port: C;
154 | // };
155 | // };
156 |
157 | // const initialLinks: Link[] = [
158 | // {
159 | // id: 'test',
160 | // from: { node: 'hey', port: 'number' },
161 | // to: { node: 'op', port: 'numberA' },
162 | // },
163 | // {
164 | // id: 'test2',
165 | // from: { node: 'op', port: 'number' },
166 | // to: { node: 'op', port: 'numberAb' },
167 | // },
168 | // ];
169 |
170 | export const FLOW_SLOT = {
171 | background: 'background',
172 | bgInteractive: 'background-interactive',
173 | foreground: 'foreground',
174 | fgInteractive: 'foreground-interactive',
175 | } as const;
176 | export type FlowSlot = (typeof FLOW_SLOT)[keyof typeof FLOW_SLOT];
177 |
178 | export const HANDLE = Symbol('HANDLE');
179 |
180 | export const NODE = Symbol('NODE');
181 |
182 | export const PORT = Symbol('PORT');
183 |
184 | export interface DefaultNodePorts {
185 | input: Port;
186 | output: Port;
187 | }
188 |
189 | export type AnyNodePorts = Record<
190 | string,
191 | Port
192 | >;
193 |
--------------------------------------------------------------------------------
/src/routes/(home).client.tsx:
--------------------------------------------------------------------------------
1 | 'use html-signal';
2 | import { signal, SignalWatcher } from '@lit-labs/signals';
3 |
4 | import '../features/wa-theme.js';
5 |
6 | import { Flow } from '../lib/flow.js';
7 | import * as presets from '../lib/themes/webawesome/demo-nodes/presets/index.js';
8 |
9 | import { LitElement, css } from 'lit';
10 | import { customElement, property } from 'lit/decorators.js';
11 |
12 | import * as readme from '../../README.md';
13 |
14 | import '../features/demo-nf-wa.jsx';
15 |
16 | type Syntax = 'react' | 'lit' | 'lit-jsx';
17 | const currentSyntaxKey = 'nfe:current-syntax';
18 | const mode = signal(
19 | (localStorage.getItem(currentSyntaxKey) as Syntax) || 'lit-jsx',
20 | );
21 |
22 | const blocks = await Promise.all(
23 | readme.codeFiles.map(
24 | async (file) => ({
25 | m: await file.module(),
26 | path: file.path /* name: code.meta.at(0) */,
27 | }),
28 | // file.lang === 'TSX'
29 | // ?
30 | // : null,
31 | ),
32 | );
33 |
34 | console.log({
35 | currentSyntax: localStorage.getItem('nfe:current-syntax'),
36 | });
37 |
38 | @customElement('code-runner')
39 | export class Demo1 extends SignalWatcher(LitElement) {
40 | static styles = [
41 | css`
42 | :host {
43 | display: block;
44 | /* max-height: 50vh; */
45 | }
46 |
47 | main {
48 | height: 100%;
49 | width: 100%;
50 | border-radius: 1rem;
51 | overflow: hidden;
52 | }
53 |
54 | .wrapper {
55 | display: flex;
56 | flex-wrap: wrap;
57 | gap: 1rem;
58 | }
59 |
60 | .code {
61 | max-width: 80ch;
62 | flex-grow: 1;
63 | max-height: 80vh;
64 | }
65 |
66 | sl-tab-panel {
67 | /* overflow-y: scroll; */
68 | /* &::part(base) {
69 | padding: 0;
70 | } */
71 | --padding: 0;
72 | }
73 |
74 | /* sl-tab-panel::part(base) {
75 | padding: 0;
76 | } */
77 |
78 | .preview {
79 | min-height: 35rem;
80 | min-width: 35rem;
81 | /* max-width: 50rem; */
82 | flex-grow: 1;
83 | overflow: hidden;
84 | border-radius: var(--sl-border-radius-x-large);
85 | }
86 | `,
87 | ];
88 |
89 | flow = new Flow(presets.defaultPreset);
90 |
91 | @property() accessor import: string | null = null;
92 |
93 | render() {
94 | const imported = blocks
95 | .find((block) => block.path === this.import)
96 | ?.m.App();
97 |
98 | return (
99 |
100 |
101 | {
104 | const name = event.detail.name as Syntax;
105 | mode.set(name);
106 | localStorage.setItem(currentSyntaxKey, name);
107 | }}
108 | >
109 |
114 | React
115 |
116 |
121 | Lit JSX
122 |
123 |
124 | Lit HTML
125 |
126 |
127 |
128 |
130 |
131 |
133 |
134 |
136 | {/* TODO: */}
137 | {/*
138 | */}
140 |
141 |
142 |
143 | {imported ? (
144 |
145 | {/* FIXME: Typings upstream */}
146 | {imported}
147 |
148 | ) : null}
149 |
{'<'} Node- Flow- Elements{'>'}
9 |
10 | export default defineRoute({
11 | document: () => document(),
12 |
13 | template: () => (
14 |
15 |
19 |
20 | Gracile .
24 |
25 |
15 | {/*
*/}
16 |
17 |
18 | {/*
20 | {/*
*/}
21 | {/*
*/}
22 |
23 | {/*
*/}
24 |
25 | {/*
*/}
26 |
12 |
13 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Error qui ullam
14 | quam iusto quia quidem ipsam id suscipit, ipsa nostrum repellat quis?
15 | Iste, dignissimos quia facilis officia repellendus fugit rem?
16 |
17 |
18 |
19 |
21 |
22 | ),
23 | });
24 |
--------------------------------------------------------------------------------
/src/types/ambient.d.ts:
--------------------------------------------------------------------------------
1 | /// >;
210 |
211 | /**
212 | *
213 | *
214 | * ---
215 | *
216 | */
217 | "nf-interactive-canvas": Partial>;
218 |
219 | /**
220 | *
221 | *
222 | * ---
223 | *
224 | *
225 | * ### **Slots:**
226 | * - **background** - undefined
227 | * - **background-interactive** - undefined
228 | * - **foreground** - undefined
229 | * - **foreground-interactive** - undefined
230 | */
231 | "nf-flow": Partial>;
232 |
233 | /**
234 | *
235 | *
236 | * ---
237 | *
238 | */
239 | "nf-handle": Partial>;
240 |
241 | /**
242 | *
243 | *
244 | * ---
245 | *
246 | */
247 | "nf-links": Partial>;
248 |
249 | /**
250 | *
251 | *
252 | * ---
253 | *
254 | */
255 | "nf-node": Partial>;
256 |
257 | /**
258 | *
259 | *
260 | * ---
261 | *
262 | */
263 | "nf-port": Partial>;
264 |
265 | /**
266 | *
267 | *
268 | * ---
269 | *
270 | */
271 | "lit-renderer": Partial>;
272 |
273 | /**
274 | *
275 | *
276 | * ---
277 | *
278 | */
279 | "wf-broadcast-channel": Partial<
280 | NfWaBroadcastChannelElementProps & BaseEvents & JSX.HTMLAttributes
281 | >;
282 |
283 | /**
284 | *
285 | *
286 | * ---
287 | *
288 | */
289 | "nf-canvas-color": Partial>;
290 |
291 | /**
292 | *
293 | *
294 | * ---
295 | *
296 | */
297 | "nf-wa-canvas-comparer": Partial<
298 | NfWaCanvasComparerElementProps & BaseEvents & JSX.HTMLAttributes
299 | >;
300 |
301 | /**
302 | *
303 | *
304 | * ---
305 | *
306 | */
307 | "nf-wa-canvas-filters": Partial<
308 | NfWaCanvasFiltersElementProps & BaseEvents & JSX.HTMLAttributes
309 | >;
310 |
311 | /**
312 | *
313 | *
314 | * ---
315 | *
316 | */
317 | "wf-canvas-mixer": Partial>;
318 |
319 | /**
320 | *
321 | *
322 | * ---
323 | *
324 | */
325 | "nf-canvas-text": Partial>;
326 |
327 | /**
328 | *
329 | *
330 | * ---
331 | *
332 | */
333 | "nf-wa-note": Partial>;
334 |
335 | /**
336 | *
337 | *
338 | * ---
339 | *
340 | */
341 | "nf-wa-center": Partial>;
342 |
343 | /**
344 | *
345 | *
346 | * ---
347 | *
348 | */
349 | "nf-wa-inventory": Partial>;
350 |
351 | /**
352 | *
353 | *
354 | * ---
355 | *
356 | */
357 | "nf-wa-minimap": Partial>;
358 |
359 | /**
360 | *
361 | *
362 | * ---
363 | *
364 | */
365 | "nf-wa-navigation": Partial>;
366 |
367 | /**
368 | *
369 | *
370 | * ---
371 | *
372 | */
373 | "nf-wa-node": Partial>;
374 |
375 | /**
376 | *
377 | *
378 | * ---
379 | *
380 | */
381 | "nf-wa-port": Partial>;
382 | };
383 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// ('http://localhost:8787');
8 | export const ws = client.ws.$ws(0);
9 |
10 | ws.addEventListener('open', () => {
11 | // setInterval(() => {
12 | // ws.send(new Date().toString());
13 | // }, 1000);
14 | });
15 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2022",
4 | "experimentalDecorators": false,
5 | "useDefineForClassFields": true,
6 | // "experimentalDecorators": false,
7 | // "useDefineForClassFields": true,
8 | "module": "ES2022",
9 | "lib": ["ES2022", "DOM", "DOM.Iterable"],
10 | "skipLibCheck": true,
11 |
12 | /* Bundler mode */
13 | "moduleResolution": "bundler",
14 | "allowImportingTsExtensions": false,
15 | "resolveJsonModule": true,
16 | "isolatedModules": true,
17 | "noEmit": true,
18 |
19 | /* Linting */
20 | "strict": true,
21 | "noUnusedLocals": true,
22 | "noUnusedParameters": true,
23 | "noFallthroughCasesInSwitch": true,
24 | "noImplicitAny": true,
25 |
26 | "jsx": "preserve",
27 | "jsxImportSource": "@gracile-labs/jsx",
28 |
29 | // "emitDeclarationOnly": true,
30 | "declaration": true,
31 | "declarationMap": true,
32 | "sourceMap": true
33 | // "outDir": "dist",
34 | // "rootDir": "./src/lib"
35 | },
36 | "include": ["src"]
37 | }
38 |
--------------------------------------------------------------------------------
/typedoc.json:
--------------------------------------------------------------------------------
1 | {
2 | "entryPoints": [
3 | //
4 | "./src/lib/_typedoc.ts"
5 | ],
6 | // "plugin": ["typedoc-plugin-markdown"]
7 | "out": "./public/api",
8 | "readme": "none"
9 | }
10 |
--------------------------------------------------------------------------------
/types/common.d.ts:
--------------------------------------------------------------------------------
1 | import type { NodeFlowFlowElement } from '../dist/flow.el.js';
2 | import type { NodeFlowBackground } from '../dist/background.el.js';
3 | import type { NfeWaCenterElement } from '../dist/themes/webawesome/extra/center.el.js';
4 | import type { NfeWaLinks } from '../dist/themes/webawesome/links.el.js';
5 | import type { NfeWaMinimap } from '../dist/themes/webawesome/extra/minimap.el.js';
6 | import type { NfeWaInventoryElement } from '../dist/themes/webawesome/extra/inventory.el.js';
7 | import type { NfeWaNavigation } from '../dist/themes/webawesome/extra/navigation.el.js';
8 | import type { LitRenderer } from '../src/lib/themes/lit-renderer.el.ts';
9 | import type { NodeFlowHandleElement } from '../dist/handle.el.js';
10 | import type { NodeFlowPortElement } from '../dist/port.el.js';
11 |
12 | export type NodeFlowFlowProps = Pick;
13 |
14 | export type NodeFlowBackgroundProps = Partial<
15 | Pick
16 | > & {
17 | slot: 'background';
18 | };
19 |
20 | export type NodeFlowHandleProps = {};
21 |
22 | export type NodeFlowPortProps = Partial>;
23 |
24 | export type NfeWaCenterElementProps = Partial<
25 | Pick
26 | > & {
27 | slot: 'background-interactive';
28 | };
29 |
30 | export type NfeWaInventoryElementProps = Partial<
31 | Pick
32 | > & {
33 | slot: 'foreground';
34 | };
35 |
36 | export type NfeWaMinimapProps = Partial> & {
37 | slot: 'foreground';
38 | };
39 |
40 | export type NfeWaNavigationProps = Partial> & {
41 | slot: 'foreground';
42 | };
43 |
44 | export type NfeWaLinksProps = Partial> & {
45 | slot: 'foreground-interactive';
46 | };
47 |
48 | export type LitRendererProps = Partial>;
49 |
50 | export type Component =
51 | | 'nf-flow'
52 | | 'nf-handle'
53 | | 'nf-port'
54 | | 'nf-background'
55 | | 'nf-links'
56 | | 'lit-renderer'
57 | | 'nf-wa-center'
58 | | 'nf-wa-inventory'
59 | | 'nf-wa-minimap'
60 | | 'nf-wa-navigation';
61 |
--------------------------------------------------------------------------------
/types/lit.d.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JulianCataldo/node-flow-elements/e209f83f1f99a15dd233771ac07606341dd3e14e/types/lit.d.ts
--------------------------------------------------------------------------------
/types/react.d.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | Component,
3 | LitRendererProps,
4 | NfeWaCenterElementProps,
5 | NfeWaInventoryElementProps,
6 | NfeWaLinksProps,
7 | NfeWaMinimapProps,
8 | NfeWaNavigationProps,
9 | NodeFlowBackgroundProps,
10 | NodeFlowFlowProps,
11 | NodeFlowHandleProps,
12 | NodeFlowPortProps,
13 | } from './common';
14 |
15 | /**
16 | * Usage, in an ambient `d.ts`:
17 | *
18 | * ```ts
19 | * declare global {
20 | * declare module "react" {
21 | * namespace JSX {
22 | * interface IntrinsicElements extends Nfe {}
23 | * }
24 | * }
25 | * }
26 | * type Nfe = import("@node-flow-elements/nfe/types/react").NodeFlowElements;
27 | * ```
28 | */
29 | export interface NodeFlowElements extends Record {
30 | 'nf-flow': Base & NodeFlowFlowProps;
31 | 'nf-handle': Base & NodeFlowHandleProps;
32 | 'nf-port': Base & NodeFlowPortProps;
33 | 'nf-background': Base & NodeFlowBackgroundProps;
34 | 'nf-wa-center': Base & NfeWaCenterElementProps;
35 | 'nf-wa-inventory': Base & NfeWaInventoryElementProps;
36 | 'nf-wa-minimap': Base & NfeWaMinimapProps;
37 | 'nf-wa-navigation': Base & NfeWaNavigationProps;
38 | 'nf-links': Base & NfeWaLinksProps;
39 | 'lit-renderer': Base & LitRendererProps;
40 | }
41 |
42 | type Base = Pick<
43 | React.AllHTMLAttributes,
44 | | 'children'
45 | | 'dir'
46 | | 'hidden'
47 | | 'id'
48 | | 'lang'
49 | | 'slot'
50 | | 'style'
51 | | 'title'
52 | | 'translate'
53 | | 'onClick'
54 | | 'onFocus'
55 | | 'onBlur'
56 | > & {
57 | /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
58 | className?: string;
59 |
60 | /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
61 | exportparts?: string;
62 |
63 | /** Used for labels to link them with their inputs (using input id). */
64 | htmlFor?: string;
65 |
66 | /** Used to help React identify which items have changed, are added, or are removed within a list. */
67 | key?: number | string;
68 |
69 | /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
70 | part?: string;
71 |
72 | /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
73 | ref?: any;
74 |
75 | /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
76 | tabIndex?: number;
77 | };
78 |
--------------------------------------------------------------------------------
/types/vue.d.ts:
--------------------------------------------------------------------------------
1 | import type { Component as VueComponent, DefineComponent } from 'vue';
2 | import type {
3 | Component,
4 | LitRendererProps,
5 | NfeWaCenterElementProps,
6 | NfeWaInventoryElementProps,
7 | NfeWaLinksProps,
8 | NfeWaMinimapProps,
9 | NfeWaNavigationProps,
10 | NodeFlowBackgroundProps,
11 | NodeFlowFlowProps,
12 | NodeFlowHandleProps,
13 | NodeFlowPortProps,
14 | } from './common';
15 |
16 | /**
17 | * Usage, in an ambient `d.ts`:
18 | *
19 | * ```ts
20 | * import type { NodeFlowElements } from "@node-flow-elements/nfe/types/vue";
21 | *
22 | * declare module "vue" {
23 | * interface GlobalComponents extends NodeFlowElements {}
24 | * }
25 | * ```
26 | */
27 | export interface NodeFlowElements extends Record {
28 | 'nf-flow': DefineComponent;
29 | 'nf-handle': DefineComponent;
30 | 'nf-port': DefineComponent;
31 | 'nf-background': DefineComponent;
32 | 'nf-wa-center': DefineComponent;
33 | 'nf-wa-inventory': DefineComponent;
34 | 'nf-wa-minimap': DefineComponent;
35 | 'nf-wa-navigation': DefineComponent;
36 | 'nf-links': DefineComponent;
37 | 'lit-renderer': DefineComponent;
38 | }
39 |
--------------------------------------------------------------------------------
/vite.common.ts:
--------------------------------------------------------------------------------
1 | import babelPluginProposalDecorators from '@babel/plugin-proposal-decorators';
2 | // import babelPluginSyntaxDecorators from '@babel/plugin-syntax-decorators';
3 | import babelPluginSyntaxTypescript from '@babel/plugin-syntax-typescript';
4 | // import babelPluginDecoratorTransforms from 'decorator-transforms';
5 | import { gracileJsx } from '@gracile-labs/jsx/vite';
6 |
7 | // import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
8 | // import { customElementReactWrapperPlugin } from 'custom-element-react-wrappers';
9 |
10 | import { babel } from '@rollup/plugin-babel';
11 | import { viteStaticCopy } from 'vite-plugin-static-copy';
12 |
13 | export const resolve = {
14 | alias: [
15 | {
16 | find: '@node-flow-elements/nfe',
17 | replacement: '/src/lib',
18 | },
19 | ],
20 | };
21 |
22 | export const babelConfig = babel({
23 | extensions: [/* '.js', */ '.ts', '.tsx'],
24 | sourceType: 'unambiguous',
25 | babelHelpers: 'bundled', // NOTE: Explicit default.
26 |
27 | plugins: [
28 | [babelPluginSyntaxTypescript, { isTSX: true }],
29 |
30 | // babelPluginSyntaxDecorators,
31 | // TODO: Test this:
32 | // [babelPluginDecoratorTransforms, {}],
33 | // [
34 | // 'decorator-transforms',
35 | // {
36 | // runtime: {
37 | // import: 'decorator-transforms/runtime',
38 | // },
39 | // },
40 | // ],
41 | [babelPluginProposalDecorators, { version: '2023-11' }],
42 | ],
43 | });
44 |
45 | export const staticCopy = (mode: string) =>
46 | viteStaticCopy({
47 | targets: [
48 | {
49 | src: 'node_modules/@shoelace-style/shoelace/dist/assets/icons/*.svg',
50 | dest: 'assets/icons',
51 | },
52 | ],
53 | });
54 |
55 | export const gracileJsxConfig = gracileJsx({
56 | cemPlugin: {
57 | files: ['./src/**/*.el.{js,ts,jsx,tsx}'],
58 | plugins: [
59 | // customElementReactWrapperPlugin({
60 | // modulePath(className, tagName) {
61 | // console.log(className, tagName);
62 | // return `../dist/${tagName.replace('nf-', '')}.el.js`;
63 | // },
64 | // }) as any,
65 | // customElementVuejsPlugin({
66 | // outdir: './vue',
67 | // fileName: 'my-library-vuejs.d.ts',
68 | // globalTypePath: '../components/index.js', // relative to `outdir`
69 | // }) as any,
70 | ],
71 | },
72 | });
73 |
--------------------------------------------------------------------------------
/vite.config.lib.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import dts from 'vite-plugin-dts';
3 | import { cemPluginDefaultOptions } from '@gracile-labs/jsx/vite';
4 | import autoExternal from 'rollup-plugin-auto-external';
5 | import { generateLitTypes } from '@gracile-labs/jsx/cem/index';
6 | import { literalsHtmlCssMinifier } from '@literals/rollup-plugin-html-css-minifier';
7 | import manifest from '@shoelace-style/shoelace/dist/custom-elements.json' with { type: 'json' };
8 |
9 | import * as common from './vite.common.js';
10 |
11 | generateLitTypes(manifest, {
12 | ...cemPluginDefaultOptions,
13 | fileName: 'jsx-vendor.d.ts',
14 | });
15 |
16 | export default defineConfig(({ mode }) => {
17 | console.log("'Mode", mode);
18 | return {
19 | resolve: common.resolve,
20 |
21 | build: {
22 | lib: {
23 | entry: [
24 | './src/lib/index.ts',
25 | './src/lib/themes/webawesome/index.ts',
26 | './src/lib/themes/webawesome/demo-nodes/index.ts',
27 | './src/lib/adapters/react.ts',
28 | // './src/lib/adapters/vue.ts',
29 | ],
30 | name: 'NodeFlowElements',
31 | formats: ['es'],
32 | },
33 |
34 | target: 'esnext',
35 | sourcemap: true,
36 |
37 | minify: false,
38 |
39 | rollupOptions: {
40 | output: { preserveModules: true },
41 |
42 | // NOTE: Needed because `auto-external` will not catch everything.
43 | external: [
44 | '@shoelace-style/shoelace/dist/components/menu/menu.js',
45 | '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js',
46 | '@shoelace-style/shoelace/dist/components/divider/divider.js',
47 | '@shoelace-style/shoelace/dist/components/animation/animation.js',
48 | '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js',
49 | '@shoelace-style/shoelace/dist/components/tag/tag.js',
50 | '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js',
51 | '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js',
52 | '@shoelace-style/shoelace/dist/components/menu/menu.js',
53 | '@shoelace-style/shoelace/dist/components/image-comparer/image-comparer.js',
54 | '@shoelace-style/shoelace/dist/components/details/details.js',
55 | '@shoelace-style/shoelace/dist/components/menu-label/menu-label.js',
56 | '@shoelace-style/shoelace/dist/components/copy-button/copy-button.js',
57 | '@shoelace-style/shoelace/dist/components/dialog/dialog.js',
58 | '@shoelace-style/shoelace/dist/components/textarea/textarea.js',
59 | '@shoelace-style/shoelace/dist/components/select/select.js',
60 | '@shoelace-style/shoelace/dist/components/option/option.js',
61 | '@shoelace-style/shoelace/dist/components/card/card.js',
62 |
63 | 'clsx',
64 | 'signal-polyfill',
65 | 'signal-utils/subtle/reaction',
66 | '@gracile-labs/jsx/components/for',
67 |
68 | 'lit/directives/ref.js',
69 | 'lit/decorators.js',
70 | 'lit/directives/unsafe-html.js',
71 | 'lit/directives/class-map.js',
72 | 'lit/directives/style-map.js',
73 | '@lit-labs/signals',
74 | '@lit-labs/motion',
75 | '@lit/context',
76 | 'lit/directives/repeat.js',
77 |
78 | // TODO: Use regex
79 | // external: [/^lit\/.*/],
80 |
81 | 'react',
82 | 'vue',
83 | ],
84 |
85 | plugins: [autoExternal()],
86 | },
87 | },
88 |
89 | plugins: [
90 | dts({ entryRoot: './src/lib' }),
91 |
92 | common.staticCopy(mode),
93 | common.babelConfig,
94 | common.gracileJsxConfig,
95 | literalsHtmlCssMinifier(),
96 | ],
97 | };
98 | });
99 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import { cemPluginDefaultOptions } from '@gracile-labs/jsx/vite';
3 | import { generateLitTypes } from '@gracile-labs/jsx/cem/index';
4 | import { literalsHtmlCssMinifier } from '@literals/rollup-plugin-html-css-minifier';
5 | import manifest from '@shoelace-style/shoelace/dist/custom-elements.json' with { type: 'json' };
6 | import Inspect from 'vite-plugin-inspect';
7 | import { gracile } from '@gracile/gracile/plugin';
8 | import { marked } from 'marked';
9 | import markedShiki from 'marked-shiki';
10 | import { litShikiLanguages } from '@gracile/doc/lib/markdown-old/tm-grammars/lit.js';
11 | import { createHighlighter, type ShikiTransformer } from 'shiki';
12 | // import {
13 | // transformerNotationDiff,
14 | // transformerNotationHighlight,
15 | // transformerNotationWordHighlight,
16 | // transformerNotationFocus,
17 | // transformerNotationErrorLevel,
18 | // transformerMetaHighlight,
19 | // transformerMetaWordHighlight,
20 | // } from '@shikijs/transformers';
21 | import terser from '@rollup/plugin-terser';
22 |
23 | // import { babel } from '@rollup/plugin-babel';
24 | // FIXME:
25 | // import babelPluginProposalDecorators from '@babel/plugin-proposal-decorators';
26 | // import babelPluginSyntaxTypescript from '@babel/plugin-syntax-typescript';
27 | // import strip from '@rollup/plugin-strip';
28 | // import vue from '@vitejs/plugin-vue';
29 | // import react from '@vitejs/plugin-react';
30 | // import { svelte } from '@sveltejs/vite-plugin-svelte';
31 |
32 | import { viteMarkdownPlugin } from '@gracile/markdown/vite';
33 | import { MarkdownRenderer } from '@gracile/markdown-preset-marked';
34 |
35 | import * as common from './vite.common.js';
36 | // import { viteStaticCopy } from 'vite-plugin-static-copy';
37 | import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown';
38 | import fs from 'fs';
39 |
40 | generateLitTypes(manifest, {
41 | ...cemPluginDefaultOptions,
42 | fileName: 'jsx-vendor.d.ts',
43 | });
44 |
45 | function generateCemDocs() {
46 | const manifest = JSON.parse(
47 | fs.readFileSync('./dist/custom-elements.json', 'utf-8'),
48 | );
49 | const markdown = customElementsManifestToMarkdown(manifest, {
50 | private: 'hidden',
51 | omitDeclarations: [
52 | 'mixins',
53 | 'variables',
54 | 'functions',
55 | 'exports',
56 | 'super-class',
57 | ],
58 | omitSections: ['mixins', 'super-class'],
59 | // headingOffset: 0,
60 | // private: 'details',
61 | });
62 |
63 | fs.writeFileSync('./custom-elements.md', markdown);
64 | }
65 |
66 | generateCemDocs();
67 |
68 | export default defineConfig(async ({ mode }) => {
69 | console.log("'Mode", mode);
70 | return {
71 | server: { watch: { usePolling: false } },
72 | resolve: common.resolve,
73 |
74 | build: {
75 | target: 'esnext',
76 | sourcemap: true,
77 | outDir: 'dist-site',
78 | },
79 |
80 | plugins: [
81 | common.babelConfig,
82 |
83 | Inspect(),
84 |
85 | common.gracileJsxConfig,
86 | gracile(),
87 |
88 | common.staticCopy(mode),
89 | // viteStaticCopy({
90 | // targets: [
91 | // {
92 | // src: 'docs',
93 | // dest: 'api',
94 | // },
95 | // ],
96 | // }),
97 |
98 | await mdConfig(),
99 |
100 | mode === 'production' ? terser() : null,
101 | mode === 'production' ? literalsHtmlCssMinifier() : null,
102 |
103 | // vue(),
104 | // react({ exclude: ['**/*.el.*'] }),
105 | // svelte(),
106 | ],
107 | };
108 | });
109 |
110 | const highlighter = await createHighlighter({
111 | langs: [
112 | 'md',
113 | 'js',
114 | 'ts',
115 | 'tsx',
116 | 'vue',
117 | 'sh',
118 | 'css',
119 | 'scss',
120 | ...litShikiLanguages,
121 | ],
122 | themes: ['github-dark-default'],
123 | });
124 |
125 | function transformerFileNames(): ShikiTransformer {
126 | return {
127 | line(hast) {
128 | const comment = '// @filename: ';
129 |
130 | const fileNameCommentLine = hast.children.find(
131 | (e) =>
132 | e?.type === 'element' &&
133 | e?.children?.some(
134 | (e2) => e2?.type === 'text' && e2?.value?.startsWith(comment),
135 | ),
136 | );
137 | if (fileNameCommentLine?.type === 'element') {
138 | const elem = fileNameCommentLine.children.at(0);
139 |
140 | if (elem?.type !== 'text') return;
141 |
142 | const value = elem.value.replace(comment, '');
143 |
144 | hast.tagName = 'div';
145 | hast.properties = { class: 'file-title' };
146 | hast.children = [{ type: 'text', value }];
147 | }
148 | },
149 | };
150 | }
151 |
152 | async function mdConfig() {
153 | const _marked = marked
154 | // .use({
155 | // walkTokens() {},
156 | // })
157 | .use(
158 | markedShiki({
159 | highlight(code, lang, props) {
160 | // console.log(code, lang);
161 |
162 | return highlighter.codeToHtml(code, {
163 | lang,
164 | theme: 'github-dark-default',
165 | meta: { __raw: props.join(' ') }, // required by `transformerMeta*`
166 | transformers: [
167 | // transformerNotationDiff(),
168 | // transformerNotationHighlight(),
169 | // transformerNotationWordHighlight(),
170 | // transformerNotationFocus(),
171 | // transformerNotationErrorLevel(),
172 | // transformerMetaHighlight(),
173 | // transformerMetaWordHighlight(),
174 | transformerFileNames(),
175 | ],
176 | });
177 | },
178 | }),
179 | );
180 |
181 | return [
182 | viteMarkdownPlugin({
183 | MarkdownRenderer,
184 | options: {
185 | markedInstance: _marked,
186 | collectCodeBlocks: true,
187 | post(infos) {
188 | // console.log({ infos });
189 | },
190 | },
191 | }),
192 | ];
193 | }
194 |
--------------------------------------------------------------------------------