From c85e2f6612714c54db9995b0f810cd2486049304 Mon Sep 17 00:00:00 2001 From: Rachel Powers <508861+Ryex@users.noreply.github.com> Date: Wed, 10 Apr 2024 19:31:20 -0700 Subject: [PATCH] Id is a property that shoudl be copiable Signed-off-by: Rachel Powers <508861+Ryex@users.noreply.github.com> --- www/package.json | 1 + www/pnpm-lock.yaml | 63 +++++++++++++++++++++++++- www/src/ts/virtual_machine/controls.ts | 31 ++++++++++--- www/src/ts/virtual_machine/device.ts | 16 ++++++- www/tsconfig.json | 12 ++++- 5 files changed, 112 insertions(+), 11 deletions(-) diff --git a/www/package.json b/www/package.json index 0b66459..9547bad 100644 --- a/www/package.json +++ b/www/package.json @@ -50,6 +50,7 @@ "ts-lit-plugin": "^2.0.2", "ts-loader": "^9.5.1", "typescript": "^5.4.3", + "typescript-lit-html-plugin": "^0.9.0", "webpack": "^5.91.0", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.0.4" diff --git a/www/pnpm-lock.yaml b/www/pnpm-lock.yaml index a51b16b..b42a88f 100644 --- a/www/pnpm-lock.yaml +++ b/www/pnpm-lock.yaml @@ -133,6 +133,9 @@ devDependencies: typescript: specifier: ^5.4.3 version: 5.4.3 + typescript-lit-html-plugin: + specifier: ^0.9.0 + version: 0.9.0 webpack: specifier: ^5.91.0 version: 5.91.0(webpack-cli@5.1.4) @@ -185,6 +188,10 @@ packages: engines: {node: '>=10.0.0'} dev: true + /@emmetio/extract-abbreviation@0.1.6: + resolution: {integrity: sha512-Ce3xE2JvTSEbASFbRbA1gAIcMcZWdS2yUYRaQbeM0nbOzaZrUYfa3ePtcriYRZOZmr+CkKA+zbjhvTpIOAYVcw==} + dev: true + /@floating-ui/core@1.6.0: resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==} dependencies: @@ -4107,6 +4114,10 @@ packages: minimist: 1.2.8 dev: true + /jsonc-parser@1.0.3: + resolution: {integrity: sha512-hk/69oAeaIzchq/v3lS50PXuzn5O2ynldopMC+SWBql7J2WtdptfB9dy8Y7+Og5rPkTCpn83zTiO8FMcqlXJ/g==} + dev: true + /jsonc-parser@3.2.1: resolution: {integrity: sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==} dev: false @@ -6453,6 +6464,29 @@ packages: mime-types: 2.1.35 dev: true + /typescript-lit-html-plugin@0.9.0: + resolution: {integrity: sha512-Ux2I1sPpt2akNbRZiBAND9oA8XNE2BuVmDwsb7rZshJ9T8/Na2rICE5Tnuj9dPHdFUATdOGjVEagn1/v8T4gCQ==} + dependencies: + typescript-styled-plugin: 0.13.0 + typescript-template-language-service-decorator: 2.3.2 + vscode-html-languageservice: 2.1.12 + vscode-languageserver-types: 3.17.5 + dev: true + + /typescript-styled-plugin@0.13.0: + resolution: {integrity: sha512-GGMzv/JAd4S8mvWgHZslvW2G1HHrdurrp93oSR4h85SM8e5at7+KCqHsZICiTaL+iN25YGkJqoaZe4XklA76rg==} + deprecated: Deprecated in favor of https://github.com/styled-components/typescript-styled-plugin + dependencies: + typescript-template-language-service-decorator: 2.3.2 + vscode-css-languageservice: 3.0.13 + vscode-emmet-helper: 1.2.11 + vscode-languageserver-types: 3.17.5 + dev: true + + /typescript-template-language-service-decorator@2.3.2: + resolution: {integrity: sha512-hN0zNkr5luPCeXTlXKxsfBPlkAzx86ZRM1vPdL7DbEqqWoeXSxplACy98NpKpLmXsdq7iePUzAXloCAoPKBV6A==} + dev: true + /typescript@5.2.2: resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} engines: {node: '>=14.17'} @@ -6566,6 +6600,13 @@ packages: resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==} dev: false + /vscode-css-languageservice@3.0.13: + resolution: {integrity: sha512-RWkO/c/A7iXhHEy3OuEqkCqavDjpD4NF2Ca8vjai+ZtEYNeHrm1ybTnBYLP4Ft1uXvvaaVtYA9HrDjD6+CUONg==} + dependencies: + vscode-languageserver-types: 3.17.5 + vscode-nls: 4.1.2 + dev: true + /vscode-css-languageservice@4.3.0: resolution: {integrity: sha512-BkQAMz4oVHjr0oOAz5PdeE72txlLQK7NIwzmclfr+b6fj6I8POwB+VoXvrZLTbWt9hWRgfvgiQRkh5JwrjPJ5A==} dependencies: @@ -6584,6 +6625,23 @@ packages: vscode-uri: 3.0.8 dev: false + /vscode-emmet-helper@1.2.11: + resolution: {integrity: sha512-ms6/Z9TfNbjXS8r/KgbGxrNrFlu4RcIfVJxTZ2yFi0K4gn+Ka9X1+8cXvb5+5IOBGUrOsPjR0BuefdDkG+CKbQ==} + deprecated: This package has been renamed to @vscode/emmet-helper, please update to the new name + dependencies: + '@emmetio/extract-abbreviation': 0.1.6 + jsonc-parser: 1.0.3 + vscode-languageserver-types: 3.17.5 + dev: true + + /vscode-html-languageservice@2.1.12: + resolution: {integrity: sha512-mIb5VMXM5jI97HzCk2eadI1K//rCEZXte0wBqA7PGXsyJH4KTyJUaYk9MR+mbfpUl2vMi3HZw9GUOLGYLc6l5w==} + dependencies: + vscode-languageserver-types: 3.17.5 + vscode-nls: 4.1.2 + vscode-uri: 1.0.8 + dev: true + /vscode-html-languageservice@3.1.0: resolution: {integrity: sha512-QAyRHI98bbEIBCqTzZVA0VblGU40na0txggongw5ZgTj9UVsVk5XbLT16O9OTcbqBGSqn0oWmFDNjK/XGIDcqg==} dependencies: @@ -6638,12 +6696,15 @@ packages: /vscode-languageserver-types@3.17.5: resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==} - dev: false /vscode-nls@4.1.2: resolution: {integrity: sha512-7bOHxPsfyuCqmP+hZXscLhiHwe7CSuFE4hyhbs22xPIhQ4jv99FcR4eBzfYYVLP356HNFpdvz63FFb/xw6T4Iw==} dev: true + /vscode-uri@1.0.8: + resolution: {integrity: sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==} + dev: true + /vscode-uri@2.1.2: resolution: {integrity: sha512-8TEXQxlldWAuIODdukIb+TR5s+9Ds40eSJrw+1iDDA9IFORPjMELarNQE3myz5XIkWWpdprmJjm1/SxMlWOC8A==} dev: true diff --git a/www/src/ts/virtual_machine/controls.ts b/www/src/ts/virtual_machine/controls.ts index 6ce2257..1efd169 100644 --- a/www/src/ts/virtual_machine/controls.ts +++ b/www/src/ts/virtual_machine/controls.ts @@ -1,8 +1,7 @@ import { html, css } from "lit"; -import { customElement } from "lit/decorators.js"; +import { customElement, query } from "lit/decorators.js"; import { BaseElement, defaultCss } from "../components"; import { VMActiveICMixin } from "./base_device"; -import { structuralEqual } from "../utils"; import "@shoelace-style/shoelace/dist/components/card/card.js"; import "@shoelace-style/shoelace/dist/components/button-group/button-group.js"; @@ -38,10 +37,14 @@ export class VMICControls extends VMActiveICMixin(BaseElement) { } .device-id { margin-left: 2rem; + flex-grow: 1; } .button-group-toolbar sl-button-group:not(:last-of-type) { margin-right: var(--sl-spacing-x-small); } + .active-ic-select { + width: 100%; + } sl-divider { --spacing: 0.25rem; } @@ -61,10 +64,7 @@ export class VMICControls extends VMActiveICMixin(BaseElement) { `, ]; - constructor() { - super(); - this.deviceID = window.App!.session.activeIC; - } + @query(".active-ic-select") accessor activeICSelect: SlSelect; protected render() { const ics = Array.from(window.VM!.ics); @@ -116,13 +116,18 @@ export class VMICControls extends VMActiveICMixin(BaseElement) {
${ics.map( ([id, device], _index) => - html` + html` + ${device.name + ? html`${device.prefabName}` + : ""} Device:${id} ${device.name ?? device.prefabName} `, )} @@ -173,6 +178,18 @@ export class VMICControls extends VMActiveICMixin(BaseElement) { window.VM?.reset(); } + updateIC(): void { + super.updateIC(); + this.activeICSelect?.dispatchEvent(new Event("slotchange")); + // if (this.activeICSelect) { + // const val = this.activeICSelect.value; + // this.activeICSelect.value = ""; + // this.activeICSelect.requestUpdate(); + // this.activeICSelect.value = val; + // this.activeICSelect. + // } + } + _handleChangeActiveIC(e: CustomEvent) { const select = e.target as SlSelect; const icId = parseInt(select.value as string); diff --git a/www/src/ts/virtual_machine/device.ts b/www/src/ts/virtual_machine/device.ts index 5d025d4..7bdc272 100644 --- a/www/src/ts/virtual_machine/device.ts +++ b/www/src/ts/virtual_machine/device.ts @@ -55,6 +55,9 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { .device-name::part(input) { width: 10rem; } + .device-id::part(input) { + width: 2rem; + } .device-name-hash::part(input) { width: 7rem; } @@ -106,6 +109,17 @@ export class VMDeviceCard extends VMDeviceMixin(BaseElement) { />
+ + Id + + - Device ${this.deviceID} + Name