From 4c3f76251362d9d8938951b40f77da81ec4179f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 11:06:38 +0200 Subject: [PATCH 01/15] moved dummy data load to menu --- src/html/component/menu/menu.ts | 8 ++++++++ .../component/regulations-editor/regulations-editor.ts | 4 ---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/html/component/menu/menu.ts b/src/html/component/menu/menu.ts index 192429c..80f6f2e 100644 --- a/src/html/component/menu/menu.ts +++ b/src/html/component/menu/menu.ts @@ -22,6 +22,10 @@ export default class Menu extends LitElement { label: 'New sketch', action: () => { void this.newSketch() } }, + { + label: 'Import dummy (dev)', + action: () => { this.loadDummy() } + }, { label: 'Import...', action: () => { void this.importSketch() } @@ -41,6 +45,10 @@ export default class Menu extends LitElement { document.addEventListener('click', this.closeMenu.bind(this)) } + loadDummy (): void { + this.dispatchEvent(new Event('load-dummy', { bubbles: true, composed: true })) + } + async importSketch (): Promise { const confirmation = await dialog.ask('Are you sure? This operation is irreversible.', { type: 'warning', diff --git a/src/html/component/regulations-editor/regulations-editor.ts b/src/html/component/regulations-editor/regulations-editor.ts index 6f6ba4a..d4877dc 100644 --- a/src/html/component/regulations-editor/regulations-editor.ts +++ b/src/html/component/regulations-editor/regulations-editor.ts @@ -90,10 +90,6 @@ export class RegulationsEditor extends LitElement { render (): TemplateResult { return html` - ${this.editorElement} From 565309d5f290a1002188d37b46e9b9c0cc325f86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 11:32:42 +0200 Subject: [PATCH 02/15] add variable count display --- .../functions-editor/editor-tile/editor-tile.less | 9 +++++++++ .../functions-editor/editor-tile/function-tile.ts | 8 +++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/html/component/functions-editor/editor-tile/editor-tile.less b/src/html/component/functions-editor/editor-tile/editor-tile.less index f23e380..afda31f 100644 --- a/src/html/component/functions-editor/editor-tile/editor-tile.less +++ b/src/html/component/functions-editor/editor-tile/editor-tile.less @@ -13,6 +13,15 @@ height: 1em; } +.fa-angle-down, .fa-angle-up { + width: 2em; +} + +.var-count { + font-size: 0.9em; + margin-bottom: -.5em; +} + #function-editor { width: 99%; } diff --git a/src/html/component/functions-editor/editor-tile/function-tile.ts b/src/html/component/functions-editor/editor-tile/function-tile.ts index fbae2e1..32de0bb 100644 --- a/src/html/component/functions-editor/editor-tile/function-tile.ts +++ b/src/html/component/functions-editor/editor-tile/function-tile.ts @@ -147,14 +147,20 @@ export class FunctionTile extends EditorTile {
+ + +
From b5e562d81b5e8dd956ab657e5169004ed2a13ceb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 11:46:41 +0200 Subject: [PATCH 03/15] attr count property - auto select exact/range on load --- .../dynamic-attractor-count/dynamic-attractor-count.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts b/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts index 689e624..402ff71 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts @@ -1,4 +1,4 @@ -import { css, html, type TemplateResult, unsafeCSS } from 'lit' +import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' import { customElement, property, state } from 'lit/decorators.js' import style_less from './dynamic-attractor-count.less?inline' import { icon } from '@fortawesome/fontawesome-svg-core' @@ -11,7 +11,7 @@ import AbstractDynamicProperty from '../abstract-dynamic-property' export default class DynamicAttractorCount extends AbstractDynamicProperty { static styles = css`${unsafeCSS(style_less)}` @property() declare property: IAttractorCountDynamicProperty - @state() exact = true + @state() exact = false setExact (exact: boolean): void { if (exact) { @@ -48,6 +48,11 @@ export default class DynamicAttractorCount extends AbstractDynamicProperty { }) } + protected firstUpdated (_changedProperties: PropertyValues): void { + super.firstUpdated(_changedProperties) + this.exact = this.property.minimal === this.property.maximal + } + render (): TemplateResult { return html`
From 1f9c6fcba82df298350ea1e5af8aade73d8d8f90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 13:47:00 +0200 Subject: [PATCH 04/15] fix property state on update --- .../dynamic-obs-selection.ts | 26 ++++++++++++------- src/html/util/data-interfaces.ts | 14 +++++----- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts index def77e6..b0388cc 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts @@ -1,4 +1,4 @@ -import { css, html, type TemplateResult, unsafeCSS } from 'lit' +import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' import { customElement, property, query } from 'lit/decorators.js' import style_less from './dynamic-obs-selection.less?inline' import { icon } from '@fortawesome/fontawesome-svg-core' @@ -19,14 +19,15 @@ export default class DynamicObsSelection extends AbstractDynamicProperty { static styles = css`${unsafeCSS(style_less)}` @property() declare property: ITrapSpaceDynamicProperty @property() declare observations: IObservationSet[] + @query('#dataset') declare datasetSelector: HTMLSelectElement @query('#observation') declare observationSelector: HTMLSelectElement datasetChanged (event: Event): void { const datasetId = (event.target as HTMLSelectElement).value this.updateProperty({ ...this.property, - dataset: datasetId === '' ? undefined : datasetId, - observation: this.property.variant === DynamicPropertyType.HasAttractor ? ALL : undefined + dataset: datasetId === '' ? null : datasetId, + observation: this.property.variant === DynamicPropertyType.HasAttractor ? ALL : null }) if (this.property.variant !== DynamicPropertyType.ExistsTrajectory) { this.observationSelector.selectedIndex = 0 @@ -37,7 +38,7 @@ export default class DynamicObsSelection extends AbstractDynamicProperty { const observation = (event.target as HTMLSelectElement).value this.updateProperty({ ...this.property, - observation: observation === '' ? undefined : observation + observation: observation === '' ? null : observation }) } @@ -55,6 +56,13 @@ export default class DynamicObsSelection extends AbstractDynamicProperty { }) } + protected updated (_changedProperties: PropertyValues): void { + super.updated(_changedProperties) + const obsIndex = this.observations.findIndex(dataset => dataset.id === this.property.dataset) + this.datasetSelector.selectedIndex = obsIndex + 1 + this.observationSelector.selectedIndex = this.observations[obsIndex]?.observations.findIndex(obs => obs.id === this.property.observation) + 1 + } + render (): TemplateResult { return html`
@@ -71,7 +79,7 @@ export default class DynamicObsSelection extends AbstractDynamicProperty {
+ ?disabled="${this.property.dataset === null}"> ${when(this.property.variant === DynamicPropertyType.HasAttractor, () => html` `, () => html` - `)} + `)} ${map(this.observations[this.observations.findIndex(dataset => dataset.id === this.property.dataset)]?.observations, (observation) => html` @@ -103,13 +111,13 @@ export default class DynamicObsSelection extends AbstractDynamicProperty { ${when(this.property.variant === DynamicPropertyType.TrapSpace, () => html`
-
+ ?checked=${this.property.nonpercolable} @change=${this.nonpercolableChanged} />
`)} diff --git a/src/html/util/data-interfaces.ts b/src/html/util/data-interfaces.ts index 6fa94a7..2028aa4 100644 --- a/src/html/util/data-interfaces.ts +++ b/src/html/util/data-interfaces.ts @@ -102,19 +102,19 @@ export interface IProperty { } export interface IFixedPointDynamicProperty extends IProperty { - dataset: string | undefined - observation: string | undefined + dataset: string | null + observation: string | null } export interface ITrapSpaceDynamicProperty extends IProperty { - dataset: string | undefined - observation: string | undefined + dataset: string | null + observation: string | null minimal: boolean nonpercolable: boolean } export interface IExistsTrajectoryDynamicProperty extends IProperty { - dataset: string | undefined + dataset: string | null } export interface IAttractorCountDynamicProperty extends IProperty { @@ -123,8 +123,8 @@ export interface IAttractorCountDynamicProperty extends IProperty { } export interface IHasAttractorDynamicProperty extends IProperty { - dataset: string | undefined - observation: string | undefined + dataset: string | null + observation: string | null } export interface IGenericDynamicProperty extends IProperty { From 2411066a8bc35edfd1b3fb71740607479ca40d33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 15:07:45 +0200 Subject: [PATCH 05/15] add toolbar to observations datasets --- .../observations-editor.less | 2 +- .../observations-editor.ts | 38 +++++++++++---- .../observations-set/observations-set.less | 11 +++++ .../observations-set/observations-set.ts | 47 +++++++++++++++++++ 4 files changed, 88 insertions(+), 10 deletions(-) diff --git a/src/html/component/observations-editor/observations-editor.less b/src/html/component/observations-editor/observations-editor.less index 6db909f..e149fed 100644 --- a/src/html/component/observations-editor/observations-editor.less +++ b/src/html/component/observations-editor/observations-editor.less @@ -16,7 +16,7 @@ .container.active .content { height: 100%; - padding-top: 2em; + padding-top: 1em; } .container.active .label::before { diff --git a/src/html/component/observations-editor/observations-editor.ts b/src/html/component/observations-editor/observations-editor.ts index 2b96a9c..8cddcc2 100644 --- a/src/html/component/observations-editor/observations-editor.ts +++ b/src/html/component/observations-editor/observations-editor.ts @@ -1,10 +1,10 @@ import { css, html, LitElement, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' -import { customElement, property } from 'lit/decorators.js' +import { customElement, property, state } from 'lit/decorators.js' import style_less from './observations-editor.less?inline' import './observations-set/observations-set' -import { ContentData, type IObservation, type IObservationSet, DataCategory } from '../../util/data-interfaces' +import { ContentData, DataCategory, type IObservation, type IObservationSet } from '../../util/data-interfaces' import { map } from 'lit/directives/map.js' -import { dialog } from '@tauri-apps/api' +import { dialog, invoke, tauri } from '@tauri-apps/api' import { appWindow, WebviewWindow } from '@tauri-apps/api/window' import { type Event as TauriEvent } from '@tauri-apps/api/helpers/event' import { debounce } from 'lodash' @@ -22,10 +22,13 @@ export default class ObservationsEditor extends LitElement { static styles = css`${unsafeCSS(style_less)}` @property() contentData = ContentData.create() index = 0 + @state() datasetRenameIndex = -1 constructor () { super() + this.addEventListener('rename-dataset', this.renameDataset) + // observations-related event listeners aeonState.sketch.observations.datasetLoaded.addEventListener(this.#onDatasetLoaded.bind(this)) aeonState.sketch.observations.datasetContentChanged.addEventListener(this.#onDatasetContentChanged.bind(this)) @@ -37,6 +40,8 @@ export default class ObservationsEditor extends LitElement { this.addEventListener('change-observation', this.changeObservation) aeonState.sketch.observations.observationContentChanged.addEventListener(this.#onObservationContentChanged.bind(this)) aeonState.sketch.observations.observationIdChanged.addEventListener(this.#onObservationIdChanged.bind(this)) + this.addEventListener('remove-dataset', this.removeDataset) + aeonState.sketch.observations.datasetRemoved.addEventListener(this.#onDatasetRemoved.bind(this)) // TODO add all other events // refresh-event listeners @@ -124,7 +129,7 @@ export default class ObservationsEditor extends LitElement { } else { fileName = handle } - + // TODO: move dataset id generation to backend aeonState.sketch.observations.loadDataset(fileName, 'dataset' + this.index) } @@ -266,6 +271,23 @@ export default class ObservationsEditor extends LitElement { })) } + renameDataset (event: Event): void { + const detail = (event as CustomEvent).detail + this.datasetRenameIndex = this.contentData.observations.findIndex(d => d.id === detail.id); + (this.shadowRoot?.querySelector('#set-name-' + this.datasetRenameIndex) as HTMLInputElement)?.focus() + } + + async removeDataset (event: Event): Promise { + if (!await dialog.confirm('Remove dataset?')) return + const detail = (event as CustomEvent).detail + aeonState.sketch.observations.removeDataset(detail.id) + } + + #onDatasetRemoved (data: DatasetData): void { + const datasets = this.contentData.observations.filter(d => d.id !== data.id) + this.updateObservations(datasets) + } + render (): TemplateResult { return html`
@@ -283,11 +305,9 @@ export default class ObservationsEditor extends LitElement { @input="${(e: InputEvent) => { this.updateDatasetId((e.target as HTMLInputElement).value, index) }}" - ?readonly="${true}" - @dblclick="${(e: InputEvent) => { - (e.target as HTMLInputElement).readOnly = !(e.target as HTMLInputElement).readOnly - }}" - class="set-name heading uk-input uk-form-blank" + ?readonly="${this.datasetRenameIndex !== index}" + @keydown="${(e: KeyboardEvent) => { if (e.key === 'Enter') { this.datasetRenameIndex = -1 } }}" + class="set-name heading uk-input uk-form-blank" id="${'set-name-' + index}" value="${dataset.id}"/>
diff --git a/src/html/component/observations-editor/observations-set/observations-set.less b/src/html/component/observations-editor/observations-set/observations-set.less index ad1dbbc..82e0370 100644 --- a/src/html/component/observations-editor/observations-set/observations-set.less +++ b/src/html/component/observations-editor/observations-set/observations-set.less @@ -4,3 +4,14 @@ height: 100%; overflow-x: auto; } + +.svg-inline--fa { + height: 1em; +} + +.button-label { + .uk-flex; + .uk-flex-row; + .uk-flex-middle; + gap: 0.5em; +} diff --git a/src/html/component/observations-editor/observations-set/observations-set.ts b/src/html/component/observations-editor/observations-set/observations-set.ts index 83429ff..8163de9 100644 --- a/src/html/component/observations-editor/observations-set/observations-set.ts +++ b/src/html/component/observations-editor/observations-set/observations-set.ts @@ -7,6 +7,8 @@ import { type IObservation, type IObservationSet } from '../../../util/data-inte import { appWindow, WebviewWindow } from '@tauri-apps/api/window' import { type Event as TauriEvent } from '@tauri-apps/api/helpers/event' import { checkboxColumn, dataCell, loadTabulatorPlugins, nameColumn, tabulatorOptions } from '../tabulator-utility' +import { icon } from '@fortawesome/fontawesome-svg-core' +import { faAdd, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons' @customElement('observations-set') export default class ObservationsSet extends LitElement { @@ -176,8 +178,53 @@ export default class ObservationsSet extends LitElement { }) } + removeDataset (): void { + this.dispatchEvent(new CustomEvent('remove-dataset', { + detail: { + id: this.data.id + }, + bubbles: true, + composed: true + })) + } + + renameDataset (): void { + this.dispatchEvent(new CustomEvent('rename-dataset', { + detail: { + id: this.data.id + }, + bubbles: true, + composed: true + })) + } + render (): TemplateResult { return html` +
+ + + +
` } From 6d6262786fc53786a600ad2d86e6bcc47a1fa086 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 15:37:34 +0200 Subject: [PATCH 06/15] unified dynamic property nameplates --- .../dynamic/abstract-dynamic-property.ts | 15 +++++++++++++++ .../dynamic-attractor-count.ts | 8 +------- .../dynamic/dynamic-generic/dynamic-generic.ts | 8 +------- .../dynamic-obs-selection.ts | 9 +-------- 4 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts index 7eb3b5e..5394867 100644 --- a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts +++ b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts @@ -1,6 +1,9 @@ import { type DynamicProperty, type StaticProperty } from '../../../util/data-interfaces' import { debounce } from 'lodash' import AbstractProperty from '../abstract-property/abstract-property' +import { faTrash } from '@fortawesome/free-solid-svg-icons' +import { icon } from '@fortawesome/fontawesome-svg-core' +import { html, type TemplateResult } from 'lit' const EVENT_PROPERTY_CHANGED = 'dynamic-property-changed' const EVENT_PROPERTY_REMOVED = 'dynamic-property-removed' @@ -17,4 +20,16 @@ export default class AbstractDynamicProperty extends AbstractProperty { updateProperty (property: DynamicProperty | StaticProperty): void { super.updateProperty(property, EVENT_PROPERTY_CHANGED) } + + renderNameplate (): TemplateResult { + return html` +
+ + +
+ ` + } } diff --git a/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts b/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts index 402ff71..5bf7c4e 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts @@ -56,13 +56,7 @@ export default class DynamicAttractorCount extends AbstractDynamicProperty { render (): TemplateResult { return html`
-
- - -
+ ${this.renderNameplate()}
-
+ ${this.renderNameplate()}
diff --git a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts index b0388cc..a0431cd 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts @@ -66,14 +66,7 @@ export default class DynamicObsSelection extends AbstractDynamicProperty { render (): TemplateResult { return html`
-
- - -
- + ${this.renderNameplate()}
From a668d8fc42a9b9f15294b4f012857f800010292d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 15:39:47 +0200 Subject: [PATCH 07/15] formatting --- .../dynamic/abstract-dynamic-property.ts | 16 +++---- .../dynamic-attractor-count.ts | 8 ++-- .../dynamic-generic/dynamic-generic.ts | 8 ++-- .../dynamic-obs-selection.ts | 46 +++++++++---------- 4 files changed, 38 insertions(+), 40 deletions(-) diff --git a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts index 5394867..228f1e1 100644 --- a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts +++ b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts @@ -23,13 +23,13 @@ export default class AbstractDynamicProperty extends AbstractProperty { renderNameplate (): TemplateResult { return html` -
- - -
- ` +
+ + +
+ ` } } diff --git a/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts b/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts index 5bf7c4e..5954312 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-attractor-count/dynamic-attractor-count.ts @@ -1,8 +1,6 @@ import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' import { customElement, property, state } from 'lit/decorators.js' import style_less from './dynamic-attractor-count.less?inline' -import { icon } from '@fortawesome/fontawesome-svg-core' -import { faTrash } from '@fortawesome/free-solid-svg-icons' import { type IAttractorCountDynamicProperty } from '../../../../util/data-interfaces' import { when } from 'lit/directives/when.js' import AbstractDynamicProperty from '../abstract-dynamic-property' @@ -85,14 +83,16 @@ export default class DynamicAttractorCount extends AbstractDynamicProperty {
-
-
diff --git a/src/html/component/properties-editor/dynamic/dynamic-generic/dynamic-generic.ts b/src/html/component/properties-editor/dynamic/dynamic-generic/dynamic-generic.ts index 297aefe..d093e8e 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-generic/dynamic-generic.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-generic/dynamic-generic.ts @@ -1,8 +1,6 @@ -import { html, css, unsafeCSS, type TemplateResult } from 'lit' +import { css, html, type TemplateResult, unsafeCSS } from 'lit' import { customElement, property } from 'lit/decorators.js' import style_less from './dynamic-generic.less?inline' -import { icon } from '@fortawesome/fontawesome-svg-core' -import { faTrash } from '@fortawesome/free-solid-svg-icons' import { type IGenericDynamicProperty } from '../../../../util/data-interfaces' import { debounce } from 'lodash' import { functionDebounceTimer } from '../../../../util/config' @@ -25,7 +23,9 @@ export default class DynamicGeneric extends AbstractDynamicProperty {
${this.renderNameplate()} + @input="${(e: Event) => { + this.valueUpdated((e.target as HTMLInputElement).value) + }}">
` diff --git a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts index a0431cd..18d03d4 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts @@ -1,8 +1,6 @@ import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' import { customElement, property, query } from 'lit/decorators.js' import style_less from './dynamic-obs-selection.less?inline' -import { icon } from '@fortawesome/fontawesome-svg-core' -import { faTrash } from '@fortawesome/free-solid-svg-icons' import { DynamicPropertyType, type IObservationSet, @@ -79,38 +77,38 @@ export default class DynamicObsSelection extends AbstractDynamicProperty {
- + ${when(this.property.variant !== DynamicPropertyType.ExistsTrajectory, () => html` -
- -
- -
-
`)} +
+ +
+ +
+
`)}
- + ${when(this.property.variant === DynamicPropertyType.TrapSpace, () => html`
+ @change=${this.minimalChanged}/>
+ ?checked=${this.property.nonpercolable} @change=${this.nonpercolableChanged}/>
`)} From 0ed9d49547d8585e9f2f94cf1ec218ab742fc602 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 16:25:03 +0200 Subject: [PATCH 08/15] add id field --- .../abstract-property/abstract-property.less | 18 ++++++++++++++++++ .../dynamic/abstract-dynamic-property.ts | 18 +++++++++++++++--- 2 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/html/component/properties-editor/abstract-property/abstract-property.less b/src/html/component/properties-editor/abstract-property/abstract-property.less index 5ee66c2..09ede1c 100644 --- a/src/html/component/properties-editor/abstract-property/abstract-property.less +++ b/src/html/component/properties-editor/abstract-property/abstract-property.less @@ -15,6 +15,7 @@ .uk-button; .uk-button-small; .uk-button-secondary; + width: 4em; } .name-field { @@ -22,6 +23,18 @@ .uk-text-center; } +.name-section { + width: 100%; +} + +.uk-form-label { + color: @text-light; +} + +.nameplate { + width: 100%; +} + .static-name-field { .uk-form-blank; .uk-h4; @@ -35,6 +48,7 @@ .remove-property{ background: @button-light; color: @text-light; + height: 3em; } .static-name-field { @@ -50,5 +64,9 @@ .static-name-field { color: @text-dark; } + + .uk-form-label { + color: @text-dark; + } } diff --git a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts index 228f1e1..19c2b06 100644 --- a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts +++ b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts @@ -13,6 +13,10 @@ export default class AbstractDynamicProperty extends AbstractProperty { super.nameUpdated(name, EVENT_PROPERTY_CHANGED) }, 0) + idUpdated = debounce((name: string) => { + super.nameUpdated(name, EVENT_PROPERTY_CHANGED) + }, 0) + removeProperty (): void { super.removeProperty(EVENT_PROPERTY_REMOVED) } @@ -23,9 +27,17 @@ export default class AbstractDynamicProperty extends AbstractProperty { renderNameplate (): TemplateResult { return html` -
- +
+
+ + +
+
+ + +
From 68dbfe20c56b6c00e7d8a03c71bd7dc5e0414f0a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 16:43:10 +0200 Subject: [PATCH 09/15] unify static property nameplates --- .../static/static-dynamic-property.ts | 18 ++++++++++++++++++ .../static-input-essential-condition.ts | 9 +-------- .../static-input-essential.ts | 7 ++----- .../static-input-monotonic-condition.ts | 9 +-------- .../static-input-monotonic.ts | 4 +--- 5 files changed, 23 insertions(+), 24 deletions(-) diff --git a/src/html/component/properties-editor/static/static-dynamic-property.ts b/src/html/component/properties-editor/static/static-dynamic-property.ts index dfd8d8f..56a00e5 100644 --- a/src/html/component/properties-editor/static/static-dynamic-property.ts +++ b/src/html/component/properties-editor/static/static-dynamic-property.ts @@ -1,6 +1,10 @@ import { type DynamicProperty, type StaticProperty } from '../../../util/data-interfaces' import { debounce } from 'lodash' import AbstractProperty from '../abstract-property/abstract-property' +import { html, type TemplateResult } from 'lit' +import { icon } from '@fortawesome/fontawesome-svg-core' +import { faTrash } from '@fortawesome/free-solid-svg-icons' +import { when } from 'lit/directives/when.js' const EVENT_PROPERTY_CHANGED = 'static-property-changed' const EVENT_PROPERTY_REMOVED = 'static-property-removed' @@ -17,4 +21,18 @@ export default class StaticDynamicProperty extends AbstractProperty { updateProperty (property: DynamicProperty | StaticProperty): void { super.updateProperty(property, EVENT_PROPERTY_CHANGED) } + + renderNameplate (removeButton: boolean = true): TemplateResult { + return html` +
+ + ${when(removeButton, () => html` + + `)} + +
+ ` + } } diff --git a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts index a6a7563..7e5031e 100644 --- a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts +++ b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts @@ -13,8 +13,6 @@ import { getEssentialityText, getNextEssentiality } from '../../../../util/utili import { map } from 'lit/directives/map.js' import { debounce } from 'lodash' import { functionDebounceTimer } from '../../../../util/config' -import { faTrash } from '@fortawesome/free-solid-svg-icons' -import { icon } from '@fortawesome/fontawesome-svg-core' import StaticDynamicProperty from '../static-dynamic-property' @customElement('static-input-essential-condition') @@ -112,12 +110,7 @@ export default class StaticInputEssentialCondition extends StaticDynamicProperty render (): TemplateResult { return html`
-
- - -
+ ${this.renderNameplate()}
-
- + ${this.renderNameplate(false)}
${this.property.input}
diff --git a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts index 5b5dd59..ec07864 100644 --- a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts +++ b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts @@ -13,8 +13,6 @@ import { getMonotonicityClass, getNextMonotonicity } from '../../../../util/util import { map } from 'lit/directives/map.js' import { debounce } from 'lodash' import { functionDebounceTimer } from '../../../../util/config' -import { faTrash } from '@fortawesome/free-solid-svg-icons' -import { icon } from '@fortawesome/fontawesome-svg-core' import StaticDynamicProperty from '../static-dynamic-property' @customElement('static-input-monotonic-condition') @@ -117,12 +115,7 @@ export default class StaticInputMonotonicCondition extends StaticDynamicProperty render (): TemplateResult { return html`
-
- - -
+ ${this.renderNameplate()}
-
+ ${this.renderNameplate(false)}
${this.property.input}
From 8a235b425628b88ff34a7e788f3c41a312d4a512 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 17:13:04 +0200 Subject: [PATCH 10/15] fix static property updates --- .../properties-editor/default-properties.ts | 30 +++++------ .../static-input-essential-condition.ts | 45 +++++++++------- .../static-input-monotonic-condition.ts | 51 ++++++++++--------- src/html/util/data-interfaces.ts | 16 +++--- 4 files changed, 78 insertions(+), 64 deletions(-) diff --git a/src/html/component/properties-editor/default-properties.ts b/src/html/component/properties-editor/default-properties.ts index 8932494..671a363 100644 --- a/src/html/component/properties-editor/default-properties.ts +++ b/src/html/component/properties-editor/default-properties.ts @@ -19,8 +19,8 @@ export const fixedPointDynamic = (id: string): IFixedPointDynamicProperty => { id, name: 'fixed-point', variant: DynamicPropertyType.FixedPoint, - dataset: undefined, - observation: undefined + dataset: null, + observation: null } } @@ -29,8 +29,8 @@ export const trapSpaceDynamic = (id: string): ITrapSpaceDynamicProperty => { id, name: 'trap-space', variant: DynamicPropertyType.TrapSpace, - dataset: undefined, - observation: undefined, + dataset: null, + observation: null, minimal: false, nonpercolable: false } @@ -41,7 +41,7 @@ export const existsTrajectoryDynamic = (id: string): IExistsTrajectoryDynamicPro id, name: 'exists-trajectory', variant: DynamicPropertyType.ExistsTrajectory, - dataset: undefined + dataset: null } } @@ -60,8 +60,8 @@ export const hasAttractorDynamic = (id: string): IHasAttractorDynamicProperty => id, name: 'has-attractor', variant: DynamicPropertyType.HasAttractor, - dataset: undefined, - observation: undefined + dataset: null, + observation: null } } @@ -91,8 +91,8 @@ export const functionInputEssentialWithCondition = (id: string): IFunctionInputE id, name: 'function-input-essential', variant: StaticPropertyType.FunctionInputEssentialWithCondition, - target: undefined, - input: undefined, + target: null, + input: null, value: Essentiality.TRUE, context: undefined } @@ -115,8 +115,8 @@ export const functionInputMonotonicWithCondition = (id: string): IFunctionInputM id, name: 'function-input-monotonic', variant: StaticPropertyType.FunctionInputMonotonicWithCondition, - target: undefined, - input: undefined, + target: null, + input: null, value: Monotonicity.ACTIVATION, context: '' } @@ -127,8 +127,8 @@ export const variableRegulationMonotonicWithCondition = (id: string): IVariableR id, name: 'variable-regulation-monotonic', variant: StaticPropertyType.VariableRegulationMonotonicWithCondition, - target: undefined, - input: undefined, + target: null, + input: null, value: Monotonicity.ACTIVATION, context: '' } @@ -139,8 +139,8 @@ export const variableRegulationEssentialWithCondition = (id: string): IVariableR id, name: 'variable-regulation-essential', variant: StaticPropertyType.VariableRegulationEssentialWithCondition, - target: undefined, - input: undefined, + target: null, + input: null, value: Essentiality.TRUE, context: '' } diff --git a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts index 7e5031e..cc97fee 100644 --- a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts +++ b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts @@ -1,4 +1,4 @@ -import { css, html, type TemplateResult, unsafeCSS } from 'lit' +import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' import { customElement, property, query, state } from 'lit/decorators.js' import style_less from './static-input-essential-condition.less?inline' import { @@ -21,7 +21,8 @@ export default class StaticInputEssentialCondition extends StaticDynamicProperty @property() declare contentData: ContentData @property() declare property: IFunctionInputEssentialStaticProperty | IVariableRegulatorEssentialStaticProperty @state() selectedVariable: IVariableData | undefined - @query('#second-selector') declare secondSelector: HTMLSelectElement + @query('#target-selector') declare targetSelector: HTMLSelectElement + @query('#input-selector') declare inputSelector: HTMLSelectElement private getEssentialitySymbol (): string { switch (this.property.value) { @@ -52,26 +53,28 @@ export default class StaticInputEssentialCondition extends StaticDynamicProperty }) }, functionDebounceTimer) - firstChanged (event: Event): void { - const value = (event.target as HTMLSelectElement).value + targetChanged (event: Event): void { + let value: null | string = (event.target as HTMLSelectElement).value + value = value === '' ? null : value if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { this.updateProperty({ ...this.property, target: value, - input: undefined + input: null }) } else if (this.property.variant === StaticPropertyType.VariableRegulationEssentialWithCondition) { this.updateProperty({ ...this.property, target: value, - input: undefined + input: null }) } - this.secondSelector.selectedIndex = 0 + this.targetSelector.selectedIndex = 0 } - secondChanged (event: Event): void { - const value = (event.target as HTMLSelectElement).value + inputChanged (event: Event): void { + let value: null | string = (event.target as HTMLSelectElement).value + value = value === '' ? null : value if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { this.updateProperty({ ...this.property, @@ -85,7 +88,7 @@ export default class StaticInputEssentialCondition extends StaticDynamicProperty } } - getFirstSelectorItems (): string[] { + getTargetSelectorItems (): string[] { if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { return this.contentData.functions.map(func => func.id) } else if (this.property.variant === StaticPropertyType.VariableRegulationEssentialWithCondition) { @@ -94,7 +97,7 @@ export default class StaticInputEssentialCondition extends StaticDynamicProperty return [] } - getSecondSelectorItems (): string[] { + getInputSelectorItems (): string[] { if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { return this.contentData.functions .find(func => func.id === (this.property as IFunctionInputEssentialStaticProperty).target) @@ -107,23 +110,29 @@ export default class StaticInputEssentialCondition extends StaticDynamicProperty return [] } + protected updated (_changedProperties: PropertyValues): void { + super.updated(_changedProperties) + this.targetSelector.selectedIndex = this.getTargetSelectorItems().indexOf(this.property.target ?? '') + 1 + this.inputSelector.selectedIndex = this.getInputSelectorItems().indexOf(this.property.input ?? '') + 1 + } + render (): TemplateResult { return html`
${this.renderNameplate()}
- + + ${map(this.getTargetSelectorItems(), (item) => html` `)} ${this.getEssentialitySymbol()} - + + ${map(this.getInputSelectorItems(), (item) => html` `)} diff --git a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts index ec07864..85ef469 100644 --- a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts +++ b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts @@ -1,10 +1,9 @@ -import { css, html, type TemplateResult, unsafeCSS } from 'lit' -import { customElement, property, query, state } from 'lit/decorators.js' +import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' +import { customElement, property, query } from 'lit/decorators.js' import style_less from './static-input-monotonic-condition.less?inline' import { type ContentData, type IFunctionInputMonotonicStaticProperty, - type IVariableData, type IVariableRegulatorMonotonicStaticProperty, Monotonicity, StaticPropertyType @@ -20,8 +19,8 @@ export default class StaticInputMonotonicCondition extends StaticDynamicProperty static styles = css`${unsafeCSS(style_less)}` @property() declare contentData: ContentData @property() declare property: IFunctionInputMonotonicStaticProperty | IVariableRegulatorMonotonicStaticProperty - @state() selectedVariable: IVariableData | undefined - @query('#second-selector') declare secondSelector: HTMLSelectElement + @query('#target-selector') declare targetSelector: HTMLSelectElement + @query('#input-selector') declare inputSelector: HTMLSelectElement toggleMonotonicity (): void { let value = getNextMonotonicity(this.property.value) @@ -54,29 +53,29 @@ export default class StaticInputMonotonicCondition extends StaticDynamicProperty } } - firstChanged (event: Event): void { - let value: string | undefined = (event.target as HTMLSelectElement).value - value = value === '' ? undefined : value + targetChanged (event: Event): void { + let value: string | null = (event.target as HTMLSelectElement).value + value = value === '' ? null : value console.log(value) if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { this.updateProperty({ ...this.property, target: value, - input: undefined + input: null }) } else if (this.property.variant === StaticPropertyType.VariableRegulationMonotonicWithCondition) { this.updateProperty({ ...this.property, target: value, - input: undefined + input: null }) } - this.secondSelector.selectedIndex = 0 + this.inputSelector.selectedIndex = 0 } - secondChanged (event: Event): void { - let value: string | undefined = (event.target as HTMLSelectElement).value - value = value === '' ? undefined : value + inputChanged (event: Event): void { + let value: string | null = (event.target as HTMLSelectElement).value + value = value === '' ? null : value if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { this.updateProperty({ ...this.property, @@ -90,7 +89,7 @@ export default class StaticInputMonotonicCondition extends StaticDynamicProperty } } - getFirstSelectorItems (): string[] { + getTargetSelectorItems (): string[] { if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { return this.contentData.functions.map(func => func.id) } else if (this.property.variant === StaticPropertyType.VariableRegulationMonotonicWithCondition) { @@ -99,7 +98,7 @@ export default class StaticInputMonotonicCondition extends StaticDynamicProperty return [] } - getSecondSelectorItems (): string[] { + getInputSelectorItems (): string[] { if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { return this.contentData.functions .find(func => func.id === (this.property as IFunctionInputMonotonicStaticProperty).target) @@ -112,23 +111,29 @@ export default class StaticInputMonotonicCondition extends StaticDynamicProperty return [] } + protected updated (_changedProperties: PropertyValues): void { + super.updated(_changedProperties) + this.targetSelector.selectedIndex = this.getTargetSelectorItems().indexOf(this.property.target ?? '') + 1 + this.inputSelector.selectedIndex = this.getInputSelectorItems().indexOf(this.property.input ?? '') + 1 + } + render (): TemplateResult { return html`
${this.renderNameplate()}
- + + ${map(this.getTargetSelectorItems(), (item) => html` `)} ${this.getMonotonicitySymbol()} - + + ${map(this.getInputSelectorItems(), (item) => html` `)} diff --git a/src/html/util/data-interfaces.ts b/src/html/util/data-interfaces.ts index 2028aa4..f2669bf 100644 --- a/src/html/util/data-interfaces.ts +++ b/src/html/util/data-interfaces.ts @@ -140,15 +140,15 @@ export type DynamicProperty = | IGenericDynamicProperty export interface IFunctionInputEssentialStaticProperty extends IProperty { - input: string | undefined - target: string | undefined + input: string | null + target: string | null value: Essentiality context: string | undefined } export interface IFunctionInputMonotonicStaticProperty extends IProperty { - input: string | undefined - target: string | undefined + input: string | null + target: string | null value: Monotonicity context: string | undefined } @@ -158,15 +158,15 @@ export interface IGenericStaticProperty extends IProperty { } export interface IVariableRegulatorMonotonicStaticProperty extends IProperty { - input: string | undefined - target: string | undefined + input: string | null + target: string | null value: Monotonicity context: string | undefined } export interface IVariableRegulatorEssentialStaticProperty extends IProperty { - input: string | undefined - target: string | undefined + input: string | null + target: string | null value: Essentiality context: string | undefined } From 081333d3e080e0642cfd23e91fa1055e3528488f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 17:20:50 +0200 Subject: [PATCH 11/15] typo --- ...static-dynamic-property.ts => abstract-static-property.ts} | 2 +- .../properties-editor/static/static-generic/static-generic.ts | 4 ++-- .../static-input-essential-condition.ts | 4 ++-- .../static/static-input-essential/static-input-essential.ts | 4 ++-- .../static-input-monotonic-condition.ts | 4 ++-- .../static/static-input-monotonic/static-input-monotonic.ts | 4 ++-- 6 files changed, 11 insertions(+), 11 deletions(-) rename src/html/component/properties-editor/static/{static-dynamic-property.ts => abstract-static-property.ts} (94%) diff --git a/src/html/component/properties-editor/static/static-dynamic-property.ts b/src/html/component/properties-editor/static/abstract-static-property.ts similarity index 94% rename from src/html/component/properties-editor/static/static-dynamic-property.ts rename to src/html/component/properties-editor/static/abstract-static-property.ts index 56a00e5..a95d22e 100644 --- a/src/html/component/properties-editor/static/static-dynamic-property.ts +++ b/src/html/component/properties-editor/static/abstract-static-property.ts @@ -9,7 +9,7 @@ import { when } from 'lit/directives/when.js' const EVENT_PROPERTY_CHANGED = 'static-property-changed' const EVENT_PROPERTY_REMOVED = 'static-property-removed' -export default class StaticDynamicProperty extends AbstractProperty { +export default class abstractStaticProperty extends AbstractProperty { nameUpdated = debounce((name: string) => { super.nameUpdated(name, EVENT_PROPERTY_CHANGED) }, 0) diff --git a/src/html/component/properties-editor/static/static-generic/static-generic.ts b/src/html/component/properties-editor/static/static-generic/static-generic.ts index f8ad947..39a4573 100644 --- a/src/html/component/properties-editor/static/static-generic/static-generic.ts +++ b/src/html/component/properties-editor/static/static-generic/static-generic.ts @@ -6,10 +6,10 @@ import { icon } from '@fortawesome/fontawesome-svg-core' import { faTrash } from '@fortawesome/free-solid-svg-icons' import { debounce } from 'lodash' import { functionDebounceTimer } from '../../../../util/config' -import StaticDynamicProperty from '../static-dynamic-property' +import abstractStaticProperty from '../abstract-static-property' @customElement('static-generic') -export default class StaticGeneric extends StaticDynamicProperty { +export default class StaticGeneric extends abstractStaticProperty { static styles = css`${unsafeCSS(style_less)}` @property() declare property: IGenericStaticProperty diff --git a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts index cc97fee..9cbd1ea 100644 --- a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts +++ b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts @@ -13,10 +13,10 @@ import { getEssentialityText, getNextEssentiality } from '../../../../util/utili import { map } from 'lit/directives/map.js' import { debounce } from 'lodash' import { functionDebounceTimer } from '../../../../util/config' -import StaticDynamicProperty from '../static-dynamic-property' +import abstractStaticProperty from '../abstract-static-property' @customElement('static-input-essential-condition') -export default class StaticInputEssentialCondition extends StaticDynamicProperty { +export default class StaticInputEssentialCondition extends abstractStaticProperty { static styles = css`${unsafeCSS(style_less)}` @property() declare contentData: ContentData @property() declare property: IFunctionInputEssentialStaticProperty | IVariableRegulatorEssentialStaticProperty diff --git a/src/html/component/properties-editor/static/static-input-essential/static-input-essential.ts b/src/html/component/properties-editor/static/static-input-essential/static-input-essential.ts index f65eb72..35c3a4d 100644 --- a/src/html/component/properties-editor/static/static-input-essential/static-input-essential.ts +++ b/src/html/component/properties-editor/static/static-input-essential/static-input-essential.ts @@ -3,10 +3,10 @@ import { customElement, property } from 'lit/decorators.js' import style_less from './static-input-essential.less?inline' import { Essentiality, type IFunctionInputEssentialStaticProperty } from '../../../../util/data-interfaces' import { getEssentialityText, getNextEssentiality } from '../../../../util/utilities' -import StaticDynamicProperty from '../static-dynamic-property' +import abstractStaticProperty from '../abstract-static-property' @customElement('static-input-essential') -export default class StaticInputEssential extends StaticDynamicProperty { +export default class StaticInputEssential extends abstractStaticProperty { static styles = css`${unsafeCSS(style_less)}` @property() declare property: IFunctionInputEssentialStaticProperty diff --git a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts index 85ef469..8907eac 100644 --- a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts +++ b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts @@ -12,10 +12,10 @@ import { getMonotonicityClass, getNextMonotonicity } from '../../../../util/util import { map } from 'lit/directives/map.js' import { debounce } from 'lodash' import { functionDebounceTimer } from '../../../../util/config' -import StaticDynamicProperty from '../static-dynamic-property' +import abstractStaticProperty from '../abstract-static-property' @customElement('static-input-monotonic-condition') -export default class StaticInputMonotonicCondition extends StaticDynamicProperty { +export default class StaticInputMonotonicCondition extends abstractStaticProperty { static styles = css`${unsafeCSS(style_less)}` @property() declare contentData: ContentData @property() declare property: IFunctionInputMonotonicStaticProperty | IVariableRegulatorMonotonicStaticProperty diff --git a/src/html/component/properties-editor/static/static-input-monotonic/static-input-monotonic.ts b/src/html/component/properties-editor/static/static-input-monotonic/static-input-monotonic.ts index f02aa65..2bc7b14 100644 --- a/src/html/component/properties-editor/static/static-input-monotonic/static-input-monotonic.ts +++ b/src/html/component/properties-editor/static/static-input-monotonic/static-input-monotonic.ts @@ -7,10 +7,10 @@ import { StaticPropertyType } from '../../../../util/data-interfaces' import { getMonotonicityClass, getNextMonotonicity } from '../../../../util/utilities' -import StaticDynamicProperty from '../static-dynamic-property' +import abstractStaticProperty from '../abstract-static-property' @customElement('static-input-monotonic') -export default class StaticInputMonotonic extends StaticDynamicProperty { +export default class StaticInputMonotonic extends abstractStaticProperty { static styles = css`${unsafeCSS(style_less)}` @property() declare property: IFunctionInputMonotonicStaticProperty From 9970e5ff51a49f70bcf8c17025c32c695dea8f12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 17:58:22 +0200 Subject: [PATCH 12/15] add id changed events --- .../abstract-property/abstract-property.ts | 17 ++++++++++---- .../dynamic/abstract-dynamic-property.ts | 10 ++++---- .../properties-editor/properties-editor.ts | 19 +++++++++++---- .../static/abstract-static-property.ts | 23 +++++++++++++++---- .../static-input-essential-condition.ts | 4 +--- 5 files changed, 53 insertions(+), 20 deletions(-) diff --git a/src/html/component/properties-editor/abstract-property/abstract-property.ts b/src/html/component/properties-editor/abstract-property/abstract-property.ts index f7e77af..2eee7e6 100644 --- a/src/html/component/properties-editor/abstract-property/abstract-property.ts +++ b/src/html/component/properties-editor/abstract-property/abstract-property.ts @@ -2,15 +2,13 @@ import { css, LitElement, unsafeCSS } from 'lit' import { property } from 'lit/decorators.js' import style_less from './abstract-property.less?inline' import { type DynamicProperty, type StaticProperty } from '../../../util/data-interfaces' -import { debounce } from 'lodash' -import { functionDebounceTimer } from '../../../util/config' export default class AbstractProperty extends LitElement { static styles = css`${unsafeCSS(style_less)}` @property() declare property: DynamicProperty | StaticProperty @property() declare index: number - nameUpdated = debounce((name: string, eventName: string) => { + nameUpdated (name: string, eventName: string): void { this.dispatchEvent(new CustomEvent(eventName, { detail: { property: { @@ -21,7 +19,18 @@ export default class AbstractProperty extends LitElement { bubbles: true, composed: true })) - }, functionDebounceTimer) + } + + idUpdated (oldId: string, newId: string, eventName: string): void { + this.dispatchEvent(new CustomEvent(eventName, { + detail: { + oldId, + newId + }, + bubbles: true, + composed: true + })) + } removeProperty (eventName: string): void { this.dispatchEvent(new CustomEvent(eventName, { diff --git a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts index 19c2b06..18fad0f 100644 --- a/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts +++ b/src/html/component/properties-editor/dynamic/abstract-dynamic-property.ts @@ -4,18 +4,20 @@ import AbstractProperty from '../abstract-property/abstract-property' import { faTrash } from '@fortawesome/free-solid-svg-icons' import { icon } from '@fortawesome/fontawesome-svg-core' import { html, type TemplateResult } from 'lit' +import { functionDebounceTimer } from '../../../util/config' const EVENT_PROPERTY_CHANGED = 'dynamic-property-changed' +const EVENT_PROPERTY_ID_CHANGED = 'dynamic-property-id-changed' const EVENT_PROPERTY_REMOVED = 'dynamic-property-removed' export default class AbstractDynamicProperty extends AbstractProperty { nameUpdated = debounce((name: string) => { super.nameUpdated(name, EVENT_PROPERTY_CHANGED) - }, 0) + }, functionDebounceTimer) - idUpdated = debounce((name: string) => { - super.nameUpdated(name, EVENT_PROPERTY_CHANGED) - }, 0) + idUpdated = debounce((id: string) => { + super.idUpdated(this.property.id, id, EVENT_PROPERTY_ID_CHANGED) + }, functionDebounceTimer) removeProperty (): void { super.removeProperty(EVENT_PROPERTY_REMOVED) diff --git a/src/html/component/properties-editor/properties-editor.ts b/src/html/component/properties-editor/properties-editor.ts index 9125881..e7ce7e8 100644 --- a/src/html/component/properties-editor/properties-editor.ts +++ b/src/html/component/properties-editor/properties-editor.ts @@ -96,6 +96,10 @@ export default class PropertiesEditor extends LitElement { this.addEventListener('static-property-changed', this.changeStaticProperty) aeonState.sketch.properties.staticContentChanged.addEventListener(this.#onStaticChanged.bind(this)) + this.addEventListener('dynamic-property-id-changed', this.changeDynamicPropertyId) + + this.addEventListener('static-property-id-changed', this.changeStaticPropertyId) + // refresh-event listeners aeonState.sketch.properties.staticPropsRefreshed.addEventListener(this.#onStaticRefreshed.bind(this)) aeonState.sketch.properties.dynamicPropsRefreshed.addEventListener(this.#onDynamicRefreshed.bind(this)) @@ -143,11 +147,6 @@ export default class PropertiesEditor extends LitElement { console.log(refreshedStatic) } - protected firstUpdated (_changedProperties: PropertyValues): void { - super.firstUpdated(_changedProperties) - UIkit.sticky(this.shadowRoot?.querySelector('.header') as HTMLElement) - } - addDynamicProperty (type: DynamicPropertyType): void { const id = 'dynamic' + this.dynPropIndex++ aeonState.sketch.properties.addDefaultDynamic(id, type) @@ -231,6 +230,16 @@ export default class PropertiesEditor extends LitElement { this.updateStaticProperties(properties) } + changeDynamicPropertyId (event: Event): void { + const detail = (event as CustomEvent).detail + console.log(detail.oldId, detail.newId) + } + + changeStaticPropertyId (event: Event): void { + const detail = (event as CustomEvent).detail + console.log(detail.oldId, detail.newId) + } + async openAddDynamicPropertyMenu (): Promise { this.addDynamicMenuVisible = true void computePosition(this.addDynamicPropertyElement, this.dynamicPropertyMenuElement, diff --git a/src/html/component/properties-editor/static/abstract-static-property.ts b/src/html/component/properties-editor/static/abstract-static-property.ts index a95d22e..0910076 100644 --- a/src/html/component/properties-editor/static/abstract-static-property.ts +++ b/src/html/component/properties-editor/static/abstract-static-property.ts @@ -5,14 +5,21 @@ import { html, type TemplateResult } from 'lit' import { icon } from '@fortawesome/fontawesome-svg-core' import { faTrash } from '@fortawesome/free-solid-svg-icons' import { when } from 'lit/directives/when.js' +import { functionDebounceTimer } from '../../../util/config' const EVENT_PROPERTY_CHANGED = 'static-property-changed' +const EVENT_PROPERTY_ID_CHANGED = 'static-property-id-changed' + const EVENT_PROPERTY_REMOVED = 'static-property-removed' export default class abstractStaticProperty extends AbstractProperty { nameUpdated = debounce((name: string) => { super.nameUpdated(name, EVENT_PROPERTY_CHANGED) - }, 0) + }, functionDebounceTimer) + + idUpdated = debounce((id: string) => { + super.idUpdated(this.property.id, id, EVENT_PROPERTY_ID_CHANGED) + }, functionDebounceTimer) removeProperty (): void { super.removeProperty(EVENT_PROPERTY_REMOVED) @@ -24,14 +31,22 @@ export default class abstractStaticProperty extends AbstractProperty { renderNameplate (removeButton: boolean = true): TemplateResult { return html` -
- +
+
+ + +
+
+ + + +
${when(removeButton, () => html` `)} -
` } diff --git a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts index 9cbd1ea..2c86f5b 100644 --- a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts +++ b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts @@ -1,11 +1,10 @@ import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' -import { customElement, property, query, state } from 'lit/decorators.js' +import { customElement, property, query } from 'lit/decorators.js' import style_less from './static-input-essential-condition.less?inline' import { type ContentData, Essentiality, type IFunctionInputEssentialStaticProperty, - type IVariableData, type IVariableRegulatorEssentialStaticProperty, StaticPropertyType } from '../../../../util/data-interfaces' @@ -20,7 +19,6 @@ export default class StaticInputEssentialCondition extends abstractStaticPropert static styles = css`${unsafeCSS(style_less)}` @property() declare contentData: ContentData @property() declare property: IFunctionInputEssentialStaticProperty | IVariableRegulatorEssentialStaticProperty - @state() selectedVariable: IVariableData | undefined @query('#target-selector') declare targetSelector: HTMLSelectElement @query('#input-selector') declare inputSelector: HTMLSelectElement From e419ab7f9c23ff590f7e7262ca05e9e7951ca35f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 18:31:44 +0200 Subject: [PATCH 13/15] moved duplicate code to a separate class --- .../properties-editor/properties-editor.ts | 1 - .../static-input-essential-condition.ts | 87 +-------------- .../static-input-monotonic-condition.ts | 83 ++------------ .../static/static-selectors.ts | 101 ++++++++++++++++++ 4 files changed, 113 insertions(+), 159 deletions(-) create mode 100644 src/html/component/properties-editor/static/static-selectors.ts diff --git a/src/html/component/properties-editor/properties-editor.ts b/src/html/component/properties-editor/properties-editor.ts index e7ce7e8..fc82994 100644 --- a/src/html/component/properties-editor/properties-editor.ts +++ b/src/html/component/properties-editor/properties-editor.ts @@ -20,7 +20,6 @@ import { } from '../../util/data-interfaces' import { when } from 'lit/directives/when.js' import { computePosition, flip } from '@floating-ui/dom' -import UIkit from 'uikit' import { icon } from '@fortawesome/fontawesome-svg-core' import { faAngleDown } from '@fortawesome/free-solid-svg-icons' import { aeonState } from '../../../aeon_events' diff --git a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts index 2c86f5b..aaa308d 100644 --- a/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts +++ b/src/html/component/properties-editor/static/static-input-essential-condition/static-input-essential-condition.ts @@ -1,26 +1,19 @@ -import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' -import { customElement, property, query } from 'lit/decorators.js' +import { css, html, type TemplateResult, unsafeCSS } from 'lit' +import { customElement, property } from 'lit/decorators.js' import style_less from './static-input-essential-condition.less?inline' import { - type ContentData, Essentiality, type IFunctionInputEssentialStaticProperty, - type IVariableRegulatorEssentialStaticProperty, - StaticPropertyType + type IVariableRegulatorEssentialStaticProperty } from '../../../../util/data-interfaces' import { getEssentialityText, getNextEssentiality } from '../../../../util/utilities' import { map } from 'lit/directives/map.js' -import { debounce } from 'lodash' -import { functionDebounceTimer } from '../../../../util/config' -import abstractStaticProperty from '../abstract-static-property' +import StaticSelectors from '../static-selectors' @customElement('static-input-essential-condition') -export default class StaticInputEssentialCondition extends abstractStaticProperty { +export default class StaticInputEssentialCondition extends StaticSelectors { static styles = css`${unsafeCSS(style_less)}` - @property() declare contentData: ContentData @property() declare property: IFunctionInputEssentialStaticProperty | IVariableRegulatorEssentialStaticProperty - @query('#target-selector') declare targetSelector: HTMLSelectElement - @query('#input-selector') declare inputSelector: HTMLSelectElement private getEssentialitySymbol (): string { switch (this.property.value) { @@ -44,76 +37,6 @@ export default class StaticInputEssentialCondition extends abstractStaticPropert }) } - conditionChanged = debounce((context: string): void => { - this.updateProperty({ - ...this.property, - context - }) - }, functionDebounceTimer) - - targetChanged (event: Event): void { - let value: null | string = (event.target as HTMLSelectElement).value - value = value === '' ? null : value - if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { - this.updateProperty({ - ...this.property, - target: value, - input: null - }) - } else if (this.property.variant === StaticPropertyType.VariableRegulationEssentialWithCondition) { - this.updateProperty({ - ...this.property, - target: value, - input: null - }) - } - this.targetSelector.selectedIndex = 0 - } - - inputChanged (event: Event): void { - let value: null | string = (event.target as HTMLSelectElement).value - value = value === '' ? null : value - if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { - this.updateProperty({ - ...this.property, - input: value - }) - } else if (this.property.variant === StaticPropertyType.VariableRegulationEssentialWithCondition) { - this.updateProperty({ - ...this.property, - input: value - }) - } - } - - getTargetSelectorItems (): string[] { - if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { - return this.contentData.functions.map(func => func.id) - } else if (this.property.variant === StaticPropertyType.VariableRegulationEssentialWithCondition) { - return this.contentData.variables.map(variable => variable.id) - } - return [] - } - - getInputSelectorItems (): string[] { - if (this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition) { - return this.contentData.functions - .find(func => func.id === (this.property as IFunctionInputEssentialStaticProperty).target) - ?.variables.map(variable => variable.source) ?? [] - } else if (this.property.variant === StaticPropertyType.VariableRegulationEssentialWithCondition) { - return this.contentData.regulations - .filter(regulation => regulation.target === (this.property as IVariableRegulatorEssentialStaticProperty).target) - .map(regulation => regulation.source) - } - return [] - } - - protected updated (_changedProperties: PropertyValues): void { - super.updated(_changedProperties) - this.targetSelector.selectedIndex = this.getTargetSelectorItems().indexOf(this.property.target ?? '') + 1 - this.inputSelector.selectedIndex = this.getInputSelectorItems().indexOf(this.property.input ?? '') + 1 - } - render (): TemplateResult { return html`
diff --git a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts index 8907eac..1877bbd 100644 --- a/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts +++ b/src/html/component/properties-editor/static/static-input-monotonic-condition/static-input-monotonic-condition.ts @@ -1,26 +1,21 @@ -import { css, html, type PropertyValues, type TemplateResult, unsafeCSS } from 'lit' -import { customElement, property, query } from 'lit/decorators.js' +import { css, html, type TemplateResult, unsafeCSS } from 'lit' +import { customElement, property } from 'lit/decorators.js' import style_less from './static-input-monotonic-condition.less?inline' import { - type ContentData, type IFunctionInputMonotonicStaticProperty, type IVariableRegulatorMonotonicStaticProperty, - Monotonicity, - StaticPropertyType + Monotonicity } from '../../../../util/data-interfaces' import { getMonotonicityClass, getNextMonotonicity } from '../../../../util/utilities' import { map } from 'lit/directives/map.js' import { debounce } from 'lodash' import { functionDebounceTimer } from '../../../../util/config' -import abstractStaticProperty from '../abstract-static-property' +import StaticSelectors from '../static-selectors' @customElement('static-input-monotonic-condition') -export default class StaticInputMonotonicCondition extends abstractStaticProperty { +export default class StaticInputMonotonicCondition extends StaticSelectors { static styles = css`${unsafeCSS(style_less)}` - @property() declare contentData: ContentData @property() declare property: IFunctionInputMonotonicStaticProperty | IVariableRegulatorMonotonicStaticProperty - @query('#target-selector') declare targetSelector: HTMLSelectElement - @query('#input-selector') declare inputSelector: HTMLSelectElement toggleMonotonicity (): void { let value = getNextMonotonicity(this.property.value) @@ -53,74 +48,10 @@ export default class StaticInputMonotonicCondition extends abstractStaticPropert } } - targetChanged (event: Event): void { - let value: string | null = (event.target as HTMLSelectElement).value - value = value === '' ? null : value - console.log(value) - if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { - this.updateProperty({ - ...this.property, - target: value, - input: null - }) - } else if (this.property.variant === StaticPropertyType.VariableRegulationMonotonicWithCondition) { - this.updateProperty({ - ...this.property, - target: value, - input: null - }) - } - this.inputSelector.selectedIndex = 0 - } - - inputChanged (event: Event): void { - let value: string | null = (event.target as HTMLSelectElement).value - value = value === '' ? null : value - if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { - this.updateProperty({ - ...this.property, - input: value - }) - } else if (this.property.variant === StaticPropertyType.VariableRegulationMonotonicWithCondition) { - this.updateProperty({ - ...this.property, - input: value - }) - } - } - - getTargetSelectorItems (): string[] { - if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { - return this.contentData.functions.map(func => func.id) - } else if (this.property.variant === StaticPropertyType.VariableRegulationMonotonicWithCondition) { - return this.contentData.variables.map(variable => variable.id) - } - return [] - } - - getInputSelectorItems (): string[] { - if (this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition) { - return this.contentData.functions - .find(func => func.id === (this.property as IFunctionInputMonotonicStaticProperty).target) - ?.variables.map(variable => variable.source) ?? [] - } else if (this.property.variant === StaticPropertyType.VariableRegulationMonotonicWithCondition) { - return this.contentData.regulations - .filter(regulation => regulation.target === (this.property as IVariableRegulatorMonotonicStaticProperty).target) - .map(regulation => regulation.source) - } - return [] - } - - protected updated (_changedProperties: PropertyValues): void { - super.updated(_changedProperties) - this.targetSelector.selectedIndex = this.getTargetSelectorItems().indexOf(this.property.target ?? '') + 1 - this.inputSelector.selectedIndex = this.getInputSelectorItems().indexOf(this.property.input ?? '') + 1 - } - render (): TemplateResult { return html`
- ${this.renderNameplate()} + ${this.renderNameplate()}
- + ${map(this.getInputSelectorItems(), (item) => html` `)} diff --git a/src/html/component/properties-editor/static/static-selectors.ts b/src/html/component/properties-editor/static/static-selectors.ts new file mode 100644 index 0000000..db54037 --- /dev/null +++ b/src/html/component/properties-editor/static/static-selectors.ts @@ -0,0 +1,101 @@ +import { type PropertyValues } from 'lit' +import { property, query } from 'lit/decorators.js' +import { debounce } from 'lodash' +import { functionDebounceTimer } from '../../../util/config' +import AbstractStaticProperty from './abstract-static-property' +import { + type ContentData, + type IFunctionInputEssentialStaticProperty, + type IFunctionInputMonotonicStaticProperty, + type IVariableRegulatorEssentialStaticProperty, + type IVariableRegulatorMonotonicStaticProperty, + StaticPropertyType +} from '../../../util/data-interfaces' + +export default class StaticSelectors extends AbstractStaticProperty { + @property() declare contentData: ContentData + @property() declare property: IFunctionInputMonotonicStaticProperty | IVariableRegulatorMonotonicStaticProperty | IFunctionInputEssentialStaticProperty | IVariableRegulatorEssentialStaticProperty + @query('#target-selector') declare targetSelector: HTMLSelectElement + @query('#input-selector') declare inputSelector: HTMLSelectElement + + conditionChanged = debounce((context: string): void => { + this.updateProperty({ + ...this.property, + context + }) + }, functionDebounceTimer) + + private isFunctionInput (): boolean { + return this.property.variant === StaticPropertyType.FunctionInputMonotonicWithCondition || + this.property.variant === StaticPropertyType.FunctionInputEssentialWithCondition + } + + private isVariableRegulator (): boolean { + return this.property.variant === StaticPropertyType.VariableRegulationMonotonicWithCondition || + this.property.variant === StaticPropertyType.VariableRegulationEssentialWithCondition + } + + targetChanged (event: Event): void { + let value: string | null = (event.target as HTMLSelectElement).value + value = value === '' ? null : value + console.log(value) + if (this.isFunctionInput()) { + this.updateProperty({ + ...this.property, + target: value, + input: null + }) + } else if (this.isVariableRegulator()) { + this.updateProperty({ + ...this.property, + target: value, + input: null + }) + } + this.inputSelector.selectedIndex = 0 + } + + inputChanged (event: Event): void { + let value: string | null = (event.target as HTMLSelectElement).value + value = value === '' ? null : value + if (this.isFunctionInput()) { + this.updateProperty({ + ...this.property, + input: value + }) + } else if (this.isVariableRegulator()) { + this.updateProperty({ + ...this.property, + input: value + }) + } + } + + getTargetSelectorItems (): string[] { + if (this.isFunctionInput()) { + return this.contentData.functions.map(func => func.id) + } else if (this.isVariableRegulator()) { + return this.contentData.variables.map(variable => variable.id) + } + return [] + } + + getInputSelectorItems (): string[] { + if (this.isFunctionInput()) { + return this.contentData.functions + .find(func => func.id === (this.property as IFunctionInputMonotonicStaticProperty).target) + ?.variables.map(variable => variable.source) ?? [] + } else if (this.isVariableRegulator()) { + return this.contentData.regulations + .filter(regulation => regulation.target === (this.property as IVariableRegulatorMonotonicStaticProperty).target) + .map(regulation => regulation.source) + } + return [] + } + + protected updated (_changedProperties: PropertyValues): void { + super.updated(_changedProperties) + this.targetSelector.selectedIndex = this.getTargetSelectorItems().indexOf(this.property.target ?? '') + 1 + this.inputSelector.selectedIndex = this.getInputSelectorItems().indexOf(this.property.input ?? '') + 1 + } +} From 04e6789369ad3325a69396deaeb6212433dd42e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 18:33:44 +0200 Subject: [PATCH 14/15] cleanup --- src/html/component/observations-editor/observations-editor.ts | 4 ++-- .../dynamic/dynamic-obs-selection/dynamic-obs-selection.ts | 4 ++-- src/html/component/regulations-editor/regulations-editor.ts | 4 ---- 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/html/component/observations-editor/observations-editor.ts b/src/html/component/observations-editor/observations-editor.ts index 8cddcc2..9d74235 100644 --- a/src/html/component/observations-editor/observations-editor.ts +++ b/src/html/component/observations-editor/observations-editor.ts @@ -4,7 +4,7 @@ import style_less from './observations-editor.less?inline' import './observations-set/observations-set' import { ContentData, DataCategory, type IObservation, type IObservationSet } from '../../util/data-interfaces' import { map } from 'lit/directives/map.js' -import { dialog, invoke, tauri } from '@tauri-apps/api' +import { dialog } from '@tauri-apps/api' import { appWindow, WebviewWindow } from '@tauri-apps/api/window' import { type Event as TauriEvent } from '@tauri-apps/api/helpers/event' import { debounce } from 'lodash' @@ -40,7 +40,7 @@ export default class ObservationsEditor extends LitElement { this.addEventListener('change-observation', this.changeObservation) aeonState.sketch.observations.observationContentChanged.addEventListener(this.#onObservationContentChanged.bind(this)) aeonState.sketch.observations.observationIdChanged.addEventListener(this.#onObservationIdChanged.bind(this)) - this.addEventListener('remove-dataset', this.removeDataset) + this.addEventListener('remove-dataset', (e) => { void this.removeDataset(e) }) aeonState.sketch.observations.datasetRemoved.addEventListener(this.#onDatasetRemoved.bind(this)) // TODO add all other events diff --git a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts index 18d03d4..ad5e44e 100644 --- a/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts +++ b/src/html/component/properties-editor/dynamic/dynamic-obs-selection/dynamic-obs-selection.ts @@ -103,12 +103,12 @@ export default class DynamicObsSelection extends AbstractDynamicProperty {
+ @change=${this.minimalChanged} />
+ ?checked=${this.property.nonpercolable} @change=${this.nonpercolableChanged} />
`)} diff --git a/src/html/component/regulations-editor/regulations-editor.ts b/src/html/component/regulations-editor/regulations-editor.ts index d4877dc..6e68366 100644 --- a/src/html/component/regulations-editor/regulations-editor.ts +++ b/src/html/component/regulations-editor/regulations-editor.ts @@ -203,10 +203,6 @@ export class RegulationsEditor extends LitElement { }) } - private loadDummyData (): void { - this.dispatchEvent(new Event('load-dummy', { bubbles: true, composed: true })) - } - private async renameNodeDialog (event: Event): Promise { this.toggleMenu(ElementType.NONE) const variableId = (event as CustomEvent).detail.id From 9b659d420aad80e767b058aa5d0cc14c2ee8c731 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Petr=20Ivi=C4=8Di=C4=8D?= <492712@mail.muni.cz> Date: Thu, 16 May 2024 19:13:24 +0200 Subject: [PATCH 15/15] switch observations from css hide conditional render --- .../observations-editor.ts | 59 +++++++++++++------ 1 file changed, 40 insertions(+), 19 deletions(-) diff --git a/src/html/component/observations-editor/observations-editor.ts b/src/html/component/observations-editor/observations-editor.ts index 9d74235..6914c97 100644 --- a/src/html/component/observations-editor/observations-editor.ts +++ b/src/html/component/observations-editor/observations-editor.ts @@ -16,6 +16,7 @@ import { type ObservationData, type ObservationIdUpdateData } from '../../../aeon_events' +import { when } from 'lit/directives/when.js' @customElement('observations-editor') export default class ObservationsEditor extends LitElement { @@ -23,6 +24,7 @@ export default class ObservationsEditor extends LitElement { @property() contentData = ContentData.create() index = 0 @state() datasetRenameIndex = -1 + @state() shownDatasets: number[] = [] constructor () { super() @@ -288,6 +290,17 @@ export default class ObservationsEditor extends LitElement { this.updateObservations(datasets) } + toggleDataset (index: number): void { + const dsIndex = this.shownDatasets.indexOf(index) + if (dsIndex === -1) { + this.shownDatasets = this.shownDatasets.concat([index]) + return + } + const shownDatasets = [...this.shownDatasets] + shownDatasets.splice(dsIndex, 1) + this.shownDatasets = shownDatasets + } + render (): TemplateResult { return html`
@@ -299,25 +312,33 @@ export default class ObservationsEditor extends LitElement {
${map(this.contentData.observations, (dataset, index) => html` -
-
- -
-
- - -
-
-
- `)} +
+
+ +
+ ${when(this.shownDatasets.includes(index), () => html` +
+ + +
+ `)} +
+
+ `)}