dave/ic10emu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move to rsbuild over webpack

Browse Source
This commit is contained in:
Rachel Powers
2024-04-20 14:56:53 -07:00
parent 756a47510f
commit d7d84fa7e6
18 changed files with 993 additions and 4407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
www/src/index.html
View File

@@ -12,6 +12,7 @@
<meta property="og:url" content="https://ryex.github.io/ic10emu/" />
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
<style>
body {
opacity: 0;

31
www/src/ts/app/nav.ts
View File

@@ -2,14 +2,14 @@ import { HTMLTemplateResult, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";
import { BaseElement, defaultCss } from "../components";
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
import "@shoelace-style/shoelace/dist/components/icon/icon.js";
import "@shoelace-style/shoelace/dist/components/icon-button/icon-button.js";
import "@shoelace-style/shoelace/dist/components/menu/menu.js";
import "@shoelace-style/shoelace/dist/components/divider/divider.js";
import "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
import "@shoelace-style/shoelace/dist/components/relative-time/relative-time.js";
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
import SlMenuItem from "@shoelace-style/shoelace/dist/components/menu-item/menu-item.js";
@customElement("app-nav")
@@ -99,9 +99,9 @@ export class Nav extends BaseElement {
super();
}
@property() accessor gitVer: string;
@property() accessor appVer: string;
@property() accessor buildDate: string;
@property() gitVer: string;
@property() appVer: string;
@property() buildDate: string;
protected render(): HTMLTemplateResult {
return html`
<nav id="navBar" class="navbar navbar-default">
@@ -114,7 +114,11 @@ export class Nav extends BaseElement {
label="Main Menu"
></sl-icon-button>
<sl-menu class="menu" @sl-select=${this._menuClickHandler} style="z-index: 10">
<sl-menu
class="menu"
@sl-select=${this._menuClickHandler}
style="z-index: 10"
>
<sl-menu-item value="share">
Share
<sl-icon name="share" slot="prefix"></sl-icon>
@@ -150,9 +154,7 @@ export class Nav extends BaseElement {
Presets
<sl-icon name="code-square" slot="prefix"></sl-icon>
<sl-menu slot="submenu">
<sl-menu-item value="preset-demo">
Demo
</sl-menu-item>
<sl-menu-item value="preset-demo"> Demo </sl-menu-item>
</sl-menu>
</sl-menu-item>
</sl-menu>
@@ -167,7 +169,9 @@ export class Nav extends BaseElement {
</div>
<div class="hstack version mt-auto mb-auto">
<small>v${this.appVer}-${this.gitVer}</small>
<small class="ms-2"><sl-relative-time date=${this.buildDate}></sl-relative-time></small>
<small class="ms-2">
<sl-relative-time date=${this.buildDate}></sl-relative-time>
</small>
</div>
</div>
@@ -175,7 +179,8 @@ export class Nav extends BaseElement {
<a
class="navbar-text mt-auto mb-auto align-self-center"
href="https://github.com/ryex/ic10emu"
>View on Github <sl-icon library="fa" name="fab-github"></sl-icon>
>View on Github
<sl-icon library="fa" name="fab-github"></sl-icon>
</a>
</div>
@@ -239,7 +244,7 @@ export class Nav extends BaseElement {
case "keyboardShortcuts":
window.Editor.kbShortcuts.show();
break;
case 'preset-demo':
case "preset-demo":
window.location.hash = "demo";
default:
console.log("Unknown main menu item", item.value);

96
www/src/ts/app/save.ts
View File

@@ -3,11 +3,11 @@ import { customElement, property, query, state } from "lit/decorators.js";
import { BaseElement, defaultCss } from "../components";
import { VMState } from "../session";
import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
import '@shoelace-style/shoelace/dist/components/format-date/format-date.js';
import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
import '@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.js';
import SlInput from '@shoelace-style/shoelace/dist/components/input/input.js';
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
import "@shoelace-style/shoelace/dist/components/format-date/format-date.js";
import "@shoelace-style/shoelace/dist/components/relative-time/relative-time.js";
import "@shoelace-style/shoelace/dist/components/format-bytes/format-bytes.js";
import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";
import { repeat } from "lit/directives/repeat.js";
import SlDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
import { when } from "lit/directives/when.js";
@@ -16,12 +16,10 @@ export type SaveDialogMode = "save" | "load";
@customElement("save-dialog")
export class SaveDialog extends BaseElement {
static styles = [
...defaultCss,
];
static styles = [...defaultCss];
@state() accessor saves: { name: string, date: Date, session: VMState }[];
@state() accessor mode: SaveDialogMode;
@state() saves: { name: string; date: Date; session: VMState }[];
@state() mode: SaveDialogMode;
constructor() {
super();
@@ -29,8 +27,13 @@ export class SaveDialog extends BaseElement {
}
connectedCallback(): void {
super.connectedCallback()
window.App.get().then(app => app.session.addEventListener("sessions-local-update", this._handleSessionsUpdate.bind(this)));
super.connectedCallback();
window.App.get().then((app) =>
app.session.addEventListener(
"sessions-local-update",
this._handleSessionsUpdate.bind(this),
),
);
this.loadsaves();
}
@@ -45,7 +48,7 @@ export class SaveDialog extends BaseElement {
});
}
@query("sl-dialog") accessor dialog: SlDialog;
@query("sl-dialog") dialog: SlDialog;
show(mode: SaveDialogMode) {
this.mode = mode;
@@ -59,16 +62,27 @@ export class SaveDialog extends BaseElement {
render() {
return html`
<sl-dialog label="Save Session">
${when(this.mode === "save",
${when(
this.mode === "save",
() => html`
<div class="hstack mb-2">
<sl-input class="save-name-input" autofocus></sl-input>
<sl-button class="ms-2" variant="success" @click=${this._handleSaveClick}>Save</sl-button>
</div>
`
<div class="hstack mb-2">
<sl-input class="save-name-input" autofocus></sl-input>
<sl-button
class="ms-2"
variant="success"
@click=${this._handleSaveClick}
>Save</sl-button
>
</div>
`,
)}
<sl-input class="filter-input" ?autofocus=${this.mode === "load"} placeholder="Filter Saves" clearable
@sl-input=${this._handleSearchInput}>
<sl-input
class="filter-input"
?autofocus=${this.mode === "load"}
placeholder="Filter Saves"
clearable
@sl-input=${this._handleSearchInput}
>
<sl-icon slot="suffix" name="search"></sl-icon>
</sl-input>
<table>
@@ -77,22 +91,26 @@ export class SaveDialog extends BaseElement {
<th>Date</th>
<th>Size</th>
</tr>
${when(
typeof this.saves !== "undefined",
() => repeat(this.saves, (save) => save.name, (save) => {
const size = JSON.stringify(save.session).length
return html`
<tr>
<td>${save.name}</td>
<td>
<sl-format-date .date=${save.date}></sl-format-date>
<sl-relative-time .date=${save.date}></sl-relative-time>
</td>
<td><sl-format-bytes .value=${size}></sl-format-bytes></td>
</tr>
`;
},
)
${when(typeof this.saves !== "undefined", () =>
repeat(
this.saves,
(save) => save.name,
(save) => {
const size = JSON.stringify(save.session).length;
return html`
<tr>
<td>${save.name}</td>
<td>
<sl-format-date .date=${save.date}></sl-format-date>
<sl-relative-time .date=${save.date}></sl-relative-time>
</td>
<td>
<sl-format-bytes .value=${size}></sl-format-bytes>
</td>
</tr>
`;
},
),
)}
</table>
</sl-dialog>
@@ -108,7 +126,5 @@ export class SaveDialog extends BaseElement {
await app.session.saveLocal(name);
}
_handleSearchInput() {
}
_handleSearchInput() {}
}

6
www/src/ts/app/share.ts
View File

@@ -12,9 +12,9 @@ import SlInput from "@shoelace-style/shoelace/dist/components/input/input.js";
@customElement("session-share-dialog")
export class ShareSessionDialog extends BaseElement {
@query(".dialog") accessor dialog: SlDialog;
@query(".input") accessor input: SlInput;
@property({ type: String }) accessor link: string;
@query(".dialog") dialog: SlDialog;
@query(".input") input: SlInput;
@property({ type: String }) link: string;
constructor() {
super();

2
www/src/ts/components/details.ts
View File

@@ -11,7 +11,7 @@ import SlDetails from "@shoelace-style/shoelace/dist/components/details/details.
@customElement("ic10-details")
export class IC10Details extends SlDetails {
@query(".details__summary-icon") accessor summaryIcon: HTMLSpanElement;
@query(".details__summary-icon") summaryIcon: HTMLSpanElement;
static styles = [
SlDetails.styles,

32
www/src/ts/editor/index.ts
View File

@@ -1,10 +1,4 @@
import {
ace,
Ace,
Range,
AceLanguageClient,
setupLspWorker,
} from "./ace";
import { ace, Ace, Range, AceLanguageClient, setupLspWorker } from "./ace";
import { LanguageProvider } from "ace-linters/types/language-provider";
@@ -32,7 +26,10 @@ import { customElement, state, query } from "lit/decorators.js";
import { editorStyles } from "./styles";
import "./shortcuts_ui";
import { AceKeyboardShortcuts } from "./shortcuts_ui";
import { LanguageClientConfig, ProviderOptions } from "ace-linters/types/types/language-service";
import {
LanguageClientConfig,
ProviderOptions,
} from "ace-linters/types/types/language-service";
@customElement("ace-ic10")
export class IC10Editor extends BaseElement {
@@ -69,9 +66,9 @@ export class IC10Editor extends BaseElement {
stylesAdded: string[];
tooltipObserver: MutationObserver;
@query(".e-kb-shortcuts") accessor kbShortcuts: AceKeyboardShortcuts;
@query(".e-kb-shortcuts") kbShortcuts: AceKeyboardShortcuts;
@query(".e-settings-dialog") accessor settingDialog: SlDialog;
@query(".e-settings-dialog") settingDialog: SlDialog;
constructor() {
super();
@@ -137,8 +134,9 @@ export class IC10Editor extends BaseElement {
<sl-switch
id="editorRelativeLineNumbers"
?checked=${this.settings.relativeLineNumbers}
>Relative Line Numbers</sl-switch
>
>
Relative Line Numbers
</sl-switch>
</sl-dialog>
<ace-kb-menu class="e-kb-shortcuts"></ace-kb-menu>
`;
@@ -513,9 +511,9 @@ export class IC10Editor extends BaseElement {
};
const options: ProviderOptions = {
functionality: {
semanticTokens: true
}
}
semanticTokens: true,
},
};
// Create a language provider for web worker
this.languageProvider = AceLanguageClient.for(serverData, options);
this.languageProvider.registerEditor(this.editor);
@@ -589,7 +587,9 @@ export class IC10Editor extends BaseElement {
if (session) {
session.on("change", () => {
var val = session.getValue();
window.App.get().then(app => app.session.setProgramCode(session_id, val));
window.App.get().then((app) =>
app.session.setProgramCode(session_id, val),
);
});
}
}

2
www/src/ts/editor/shortcuts_ui.ts
View File

@@ -29,7 +29,7 @@ export class AceKeyboardShortcuts extends BaseElement {
];
editor?: Ace.Editor;
@query('.drawer') accessor drawer: SlDrawer;
@query(".drawer") drawer: SlDrawer;
constructor() {
super();

0
www/src/ts/main.ts → www/src/ts/index.ts
View File

60
www/src/ts/virtual_machine/base_device.ts
View File

@@ -47,7 +47,6 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
superClass: T,
) => {
class VMDeviceMixinClass extends superClass {
_deviceID: number;
get deviceID() {
return this._deviceID;
@@ -60,33 +59,37 @@ export const VMDeviceMixin = <T extends Constructor<LitElement>>(
device: DeviceRef;
@state() accessor name: string | null = null;
@state() accessor nameHash: number | null = null;
@state() accessor prefabName: string | null;
@state() accessor fields: LogicFields;
@state() accessor slots: Slot[];
@state() accessor reagents: Reagents;
@state() accessor connections: Connection[];
@state() accessor icIP: number;
@state() accessor icOpCount: number;
@state() accessor icState: string;
@state() accessor errors: ICError[];
@state() accessor registers: Registers | null;
@state() accessor stack: Stack | null;
@state() accessor aliases: Aliases | null;
@state() accessor defines: Defines | null;
@state() accessor pins: Pins | null;
@state() name: string | null = null;
@state() nameHash: number | null = null;
@state() prefabName: string | null;
@state() fields: LogicFields;
@state() slots: Slot[];
@state() reagents: Reagents;
@state() connections: Connection[];
@state() icIP: number;
@state() icOpCount: number;
@state() icState: string;
@state() errors: ICError[];
@state() registers: Registers | null;
@state() stack: Stack | null;
@state() aliases: Aliases | null;
@state() defines: Defines | null;
@state() pins: Pins | null;
connectedCallback(): void {
const root = super.connectedCallback();
window.VM.get().then(vm => vm.addEventListener(
"vm-device-modified",
this._handleDeviceModified.bind(this),
));
window.VM.get().then(vm => vm.addEventListener(
"vm-devices-update",
this._handleDevicesModified.bind(this),
));
window.VM.get().then((vm) =>
vm.addEventListener(
"vm-device-modified",
this._handleDeviceModified.bind(this),
),
);
window.VM.get().then((vm) =>
vm.addEventListener(
"vm-devices-update",
this._handleDevicesModified.bind(this),
),
);
this.updateDevice();
return root;
}
@@ -194,10 +197,9 @@ export const VMActiveICMixin = <T extends Constructor<LitElement>>(
connectedCallback(): void {
const root = super.connectedCallback();
window.VM.get().then(vm => vm.addEventListener(
"vm-run-ic",
this._handleDeviceModified.bind(this),
));
window.VM.get().then((vm) =>
vm.addEventListener("vm-run-ic", this._handleDeviceModified.bind(this)),
);
window.App.app.session.addEventListener(
"session-active-ic",
this._handleActiveIC.bind(this),

14
www/src/ts/virtual_machine/controls.ts
View File

@@ -65,7 +65,7 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
`,
];
@query(".active-ic-select") accessor activeICSelect: SlSelect;
@query(".active-ic-select") activeICSelect: SlSelect;
protected render() {
const ics = Array.from(window.VM.vm.ics);
@@ -125,7 +125,11 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
>
${ics.map(
([id, device], _index) =>
html`<sl-option name=${device.name} prefabName=${device.prefabName} value=${id}>
html`<sl-option
name=${device.name}
prefabName=${device.prefabName}
value=${id}
>
${device.name
? html`<span slot="suffix">${device.prefabName}</span>`
: ""}
@@ -170,13 +174,13 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
}
_handleRunClick() {
window.VM.get().then(vm => vm.run());
window.VM.get().then((vm) => vm.run());
}
_handleStepClick() {
window.VM.get().then(vm => vm.step());
window.VM.get().then((vm) => vm.step());
}
_handleResetClick() {
window.VM.get().then(vm => vm.reset());
window.VM.get().then((vm) => vm.reset());
}
updateIC(): void {

170
www/src/ts/virtual_machine/device.ts
View File

@@ -53,7 +53,7 @@ import { cache } from "lit/directives/cache.js";
export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
image_err: boolean;
@property({ type: Boolean }) accessor open: boolean;
@property({ type: Boolean }) open: boolean;
constructor() {
super();
@@ -200,68 +200,31 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
}, this);
return html`
<sl-tooltip content="${this.prefabName}">
<img
class="image"
src="img/stationpedia/${this.prefabName}.png"
onerror="this.src = '${VMDeviceCard.transparentImg}'"
/>
<img class="image" src="img/stationpedia/${this.prefabName}.png"
onerror="this.src = '${VMDeviceCard.transparentImg}'" />
</sl-tooltip>
<div class="header-name">
<sl-input
id="vmDeviceCard${this.deviceID}Id"
class="device-id"
size="small"
pill
value=${this.deviceID}
@sl-change=${this._handleChangeID}
>
<sl-input id="vmDeviceCard${this.deviceID}Id" class="device-id" size="small" pill value=${this.deviceID}
@sl-change=${this._handleChangeID}>
<span slot="prefix">Id</span>
<sl-copy-button slot="suffix" value=${this.deviceID}></sl-copy-button>
</sl-input>
<sl-input
id="vmDeviceCard${this.deviceID}Name"
class="device-name"
size="small"
pill
placeholder=${this.prefabName}
value=${this.name}
@sl-change=${this._handleChangeName}
>
<sl-input id="vmDeviceCard${this.deviceID}Name" class="device-name" size="small" pill placeholder=${this.prefabName}
value=${this.name} @sl-change=${this._handleChangeName}>
<span slot="prefix">Name</span>
<sl-copy-button
slot="suffix"
from="vmDeviceCard${this.deviceID}Name.value"
></sl-copy-button>
<sl-copy-button slot="suffix" from="vmDeviceCard${this.deviceID}Name.value"></sl-copy-button>
</sl-input>
<sl-input
id="vmDeviceCard${this.deviceID}NameHash"
size="small"
pill
class="device-name-hash"
value="${this.nameHash}"
disabled
>
<sl-input id="vmDeviceCard${this.deviceID}NameHash" size="small" pill class="device-name-hash"
value="${this.nameHash}" disabled>
<span slot="prefix">Hash</span>
<sl-copy-button
slot="suffix"
from="vmDeviceCard${this.deviceID}NameHash.value"
></sl-copy-button>
<sl-copy-button slot="suffix" from="vmDeviceCard${this.deviceID}NameHash.value"></sl-copy-button>
</sl-input>
${badges.map((badge) => badge)}
</div>
<div class="ms-auto mt-auto mb-auto me-2">
<sl-tooltip
content=${thisIsActiveIc
? "Removing the selected Active IC is disabled"
: "Remove Device"}
>
<sl-icon-button
class="remove-button"
name="trash"
label="Remove Device"
?disabled=${thisIsActiveIc}
@click=${this._handleDeviceRemoveButton}
></sl-icon-button>
<sl-tooltip content=${thisIsActiveIc ? "Removing the selected Active IC is disabled" : "Remove Device" }>
<sl-icon-button class="remove-button" name="trash" label="Remove Device" ?disabled=${thisIsActiveIc}
@click=${this._handleDeviceRemoveButton}></sl-icon-button>
</sl-tooltip>
</div>
`;
@@ -272,20 +235,12 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
const inputIdBase = `vmDeviceCard${this.deviceID}Field`;
return html`
${fields.map(([name, field], _index, _fields) => {
return html` <sl-input
id="${inputIdBase}${name}"
key="${name}"
value="${displayNumber(field.value)}"
size="small"
@sl-change=${this._handleChangeField}
>
<span slot="prefix">${name}</span>
<sl-copy-button
slot="suffix"
from="${inputIdBase}${name}.value"
></sl-copy-button>
<span slot="suffix">${field.field_type}</span>
</sl-input>`;
return html` <sl-input id="${inputIdBase}${name}" key="${name}" value="${displayNumber(field.value)}" size="small"
@sl-change=${this._handleChangeField}>
<span slot="prefix">${name}</span>
<sl-copy-button slot="suffix" from="${inputIdBase}${name}.value"></sl-copy-button>
<span slot="suffix">${field.field_type}</span>
</sl-input>`;
})}
`;
}
@@ -396,8 +351,8 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
(pin, index) =>
html`
<sl-select hoist placement="top" clearable key=${index} value=${pin} @sl-change=${this._handleChangePin}>
<span slot="prefix">d${index}</span>
${visibleDevices.map(
<span slot="prefix">d${index}</span>
${visibleDevices.map(
(device, _index) =>
html`
<sl-option value=${device.id}>
@@ -425,47 +380,31 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
<sl-tab slot="nav" panel="networks">Networks</sl-tab>
<sl-tab slot="nav" panel="pins" ?disabled=${!this.pins}>Pins</sl-tab>
<sl-tab-panel name="fields" active
>${this.renderFields()}</sl-tab-panel
>
<sl-tab-panel name="fields" active>${this.renderFields()}</sl-tab-panel>
<sl-tab-panel name="slots">${this.renderSlots()}</sl-tab-panel>
<sl-tab-panel name="reagents">${this.renderReagents()}</sl-tab-panel>
<sl-tab-panel name="networks">${this.renderNetworks()}</sl-tab-panel>
<sl-tab-panel name="pins">${this.renderPins()}</sl-tab-panel>
</sl-tab-group>
</ic10-details>
<sl-dialog
class="remove-device-dialog"
no-header
@sl-request-close=${this._preventOverlayClose}
>
<sl-dialog class="remove-device-dialog" no-header @sl-request-close=${this._preventOverlayClose}>
<div class="remove-dialog-body">
<img
class="dialog-image mt-auto mb-auto me-2"
src="img/stationpedia/${this.prefabName}.png"
onerror="this.src = '${VMDeviceCard.transparentImg}'"
/>
<img class="dialog-image mt-auto mb-auto me-2" src="img/stationpedia/${this.prefabName}.png"
onerror="this.src = '${VMDeviceCard.transparentImg}'" />
<div class="flex-g">
<p><strong>Are you sure you want to remove this device?</strong></p>
<span>Id ${this.deviceID} : ${this.name ?? this.prefabName}</span>
</div>
</div>
<div slot="footer">
<sl-button
variant="primary"
autofocus
@click=${this._closeRemoveDialog}
>Close</sl-button
>
<sl-button variant="danger" @click=${this._removeDialogRemove}
>Remove</sl-button
>
<sl-button variant="primary" autofocus @click=${this._closeRemoveDialog}>Close</sl-button>
<sl-button variant="danger" @click=${this._removeDialogRemove}>Remove</sl-button>
</div>
</sl-dialog>
`;
}
@query(".remove-device-dialog") accessor removeDialog: SlDialog;
@query(".remove-device-dialog") removeDialog: SlDialog;
_preventOverlayClose(event: CustomEvent) {
if (event.detail.source === "overlay") {
@@ -557,7 +496,7 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) {
@customElement("vm-device-list")
export class VMDeviceList extends BaseElement {
@state() accessor devices: number[];
@state() devices: number[];
static styles = [
...defaultCss,
@@ -650,7 +589,7 @@ export class VMDeviceList extends BaseElement {
private _filteredDeviceIds: number[] | undefined;
private _filter: string = "";
@query(".device-filter-input") accessor filterInput: SlInput;
@query(".device-filter-input") filterInput: SlInput;
get filter() {
return this._filter;
}
@@ -729,8 +668,8 @@ export class VMAddDeviceButton extends BaseElement {
`,
];
@query("sl-drawer") accessor drawer: SlDrawer;
@query(".device-search-input") accessor searchInput: SlInput;
@query("sl-drawer") drawer: SlDrawer;
@query(".device-search-input") searchInput: SlInput;
private _deviceDB: DeviceDB;
private _strutures: Map<string, DeviceDBEntry> = new Map();
@@ -828,11 +767,7 @@ export class VMAddDeviceButton extends BaseElement {
this._searchResults ?? [],
(result) => result.name,
(result) => cache(html`
<vm-device-template
prefab_name=${result.name}
class="card"
@add-device-template=${this._handleDeviceAdd}
>
<vm-device-template prefab_name=${result.name} class="card" @add-device-template=${this._handleDeviceAdd}>
</vm-device-template>
`)
);
@@ -845,33 +780,20 @@ export class VMAddDeviceButton extends BaseElement {
render() {
return html`
<sl-button
variant="neutral"
outline
pill
@click=${this._handleAddButtonClick}
>
<sl-button variant="neutral" outline pill @click=${this._handleAddButtonClick}>
Add Device
</sl-button>
<sl-drawer class="add-device-drawer" placement="bottom" no-header>
<sl-input
class="device-search-input"
autofocus
placeholder="Search For Device"
clearable
@sl-input=${this._handleSearchInput}
>
<sl-input class="device-search-input" autofocus placeholder="Search For Device" clearable
@sl-input=${this._handleSearchInput}>
<span slot="prefix">Search Structures</span>
<sl-icon slot="suffix" name="search"></sl-icon>
</sl-input>
<div class="search-results">${this.renderSearchResults()}</div>
<sl-button
slot="footer"
variant="primary"
@click=${() => {
this.drawer.hide();
<sl-button slot="footer" variant="primary" @click=${()=> {
this.drawer.hide();
}}
>
>
Close
</sl-button>
</sl-drawer>
@@ -928,12 +850,12 @@ export class VmDeviceTemplate extends BaseElement {
`,
];
@state() accessor fields: { [key in LogicType]?: LogicField };
@state() accessor slots: SlotTemplate[];
@state() accessor template: DeviceTemplate;
@state() accessor device_id: number | undefined;
@state() accessor device_name: string | undefined;
@state() accessor connections: Connection[];
@state() fields: { [key in LogicType]?: LogicField };
@state() slots: SlotTemplate[];
@state() template: DeviceTemplate;
@state() device_id: number | undefined;
@state() device_name: string | undefined;
@state() connections: Connection[];
constructor() {
super();

2
www/src/ts/virtual_machine/index.ts
View File

@@ -24,7 +24,7 @@ class VirtualMachine extends EventTarget {
_devices: Map<number, DeviceRef>;
_ics: Map<number, DeviceRef>;
accessor db: DeviceDB;
db: DeviceDB;
dbPromise: Promise<{ default: DeviceDB }>;
private app: App;