From b54a5e50613bad001d2a9e8cf55071a612cef0f9 Mon Sep 17 00:00:00 2001 From: Garrett Date: Tue, 31 Oct 2023 17:32:57 -0700 Subject: [PATCH 1/5] Edit list order --- src/renderer/src/stories/List.ts | 93 +++++++++++++++++++++++++++----- 1 file changed, 79 insertions(+), 14 deletions(-) diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts index d6e92b37e..d5c266988 100644 --- a/src/renderer/src/stories/List.ts +++ b/src/renderer/src/stories/List.ts @@ -51,6 +51,10 @@ export class List extends LitElement { text-overflow: ellipsis } + :host(:not([unordered])) li { + cursor: move; + } + :host([unordered]) ol { list-style-type: none; display: flex; @@ -69,6 +73,10 @@ export class List extends LitElement { align-items: center; } + [contenteditable] { + cursor: text; + } + `; } @@ -121,6 +129,34 @@ export class List extends LitElement { declare listStyles: any + allowDrop = (ev) => ev.preventDefault(); + + drag = (ev, i) => { + ev.dataTransfer.setData("text", `item-${i}`); + } + + // dragOver = (ev) => { + // const data = ev.dataTransfer.getData("text"); + // el.insertAdjacentElement('beforebegin', this.shadowRoot.getElementById(data)); + // } + + drop = (ev, i) => { + ev.preventDefault(); + const data = ev.dataTransfer.getData("text"); + const movedIdx = data.split('-')[1] + const movedItem = this.items[movedIdx] + this.items.splice(movedIdx, 1) + this.items.splice(i, 0, movedItem) + + const ogMoved = this.#ogValues[movedIdx] + this.#ogValues.splice(movedIdx, 1) + this.#ogValues.splice(i, 0, ogMoved) + + + + this.items = [...this.items] + } + constructor(props: ListProps = {}) { super(); @@ -139,21 +175,36 @@ export class List extends LitElement { this.items = [...this.items, item] } + #ogValues = [] + #renderListItem = (item: ListItemType, i: number) => { const { key, value, content = value } = item; const li = document.createElement("li"); + li.id = `item-${i}`; + + if (!this.unordered) { + li.draggable = true; + li.ondragstart = (ev) => this.drag(ev, i); + li.ondrop = (ev) => this.drop(ev, i); + li.ondragover = this.allowDrop; + } + const outerDiv = document.createElement('div') const div = document.createElement('div') li.append(outerDiv) outerDiv.append(div) - const keyEl = document.createElement("span"); + let editableElement = document.createElement("span"); let resolvedKey = key; const originalValue = resolvedKey; - if (key) { + const isUnordered = !!key + + if (!this.#ogValues[i]) this.#ogValues[i] = isUnordered ? resolvedKey : value + + if (isUnordered) { this.setAttribute('unordered', '') @@ -164,8 +215,9 @@ export class List extends LitElement { resolvedKey = `${originalValue}_${i}`; } + const keyEl = editableElement + keyEl.innerText = resolvedKey; - keyEl.contentEditable = true; keyEl.style.cursor = "text"; const sepEl = document.createElement("span"); @@ -173,14 +225,18 @@ export class List extends LitElement { div.append(keyEl, sepEl); this.object[resolvedKey] = value; - } else this.object[i] = value; + } + + else { + this.object[i] = value; + } if (typeof content === 'string') { - const valueEl = document.createElement("span"); + const valueEl = editableElement = document.createElement("span"); valueEl.innerText = content; div.appendChild(valueEl); } - else li.append(content) + else li.append(editableElement = content) @@ -197,23 +253,32 @@ export class List extends LitElement { outerDiv.appendChild(button); + editableElement.contentEditable = true; + // Stop enter key from creating new line - keyEl.addEventListener("keydown", function (e) { + editableElement.addEventListener("keydown", (e) => { if (e.keyCode === 13) { - keyEl.blur(); + editableElement.blur(); return false; } }); const deleteListItem = () => this.delete(i); - keyEl.addEventListener("blur", () => { - const newKey = keyEl.innerText; - if (newKey === "") keyEl.innerText = resolvedKey; // Reset to original value + const ogValue = this.#ogValues[i]; + + editableElement.addEventListener("blur", () => { + const newKey = editableElement.innerText; + if (newKey === "") editableElement.innerText = ogValue; // Reset to original value else { - delete this.object[resolvedKey]; - resolvedKey = newKey; - this.object[resolvedKey] = value; + const oKey = isUnordered ? resolvedKey : i; + delete this.object[oKey]; + this.object[newKey] = value; + + if (!isUnordered) { + this.items[i].value = newKey + this.items = [...this.items] + } } }); From 0036ca5b5b6731744b2e776057b114eea1f02550 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 1 Nov 2023 00:34:31 +0000 Subject: [PATCH 2/5] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/renderer/src/stories/List.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts index d5c266988..b233945dc 100644 --- a/src/renderer/src/stories/List.ts +++ b/src/renderer/src/stories/List.ts @@ -130,7 +130,7 @@ export class List extends LitElement { declare listStyles: any allowDrop = (ev) => ev.preventDefault(); - + drag = (ev, i) => { ev.dataTransfer.setData("text", `item-${i}`); } @@ -188,7 +188,7 @@ export class List extends LitElement { li.ondrop = (ev) => this.drop(ev, i); li.ondragover = this.allowDrop; } - + const outerDiv = document.createElement('div') const div = document.createElement('div') @@ -225,8 +225,8 @@ export class List extends LitElement { div.append(keyEl, sepEl); this.object[resolvedKey] = value; - } - + } + else { this.object[i] = value; } From 7d07d4b543a51e28846ebf3a247ec1adf242961a Mon Sep 17 00:00:00 2001 From: Garrett Date: Wed, 1 Nov 2023 10:58:30 -0700 Subject: [PATCH 3/5] Add placeholder for where the item will end up --- src/renderer/src/stories/List.ts | 67 ++++++++++++++++++++++++------- src/renderer/src/stories/Table.js | 1 - 2 files changed, 52 insertions(+), 16 deletions(-) diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts index b233945dc..0f706e1bd 100644 --- a/src/renderer/src/stories/List.ts +++ b/src/renderer/src/stories/List.ts @@ -77,6 +77,11 @@ export class List extends LitElement { cursor: text; } + [data-idx]{ + background: #f0f0f0; + height: 25px; + } + `; } @@ -131,29 +136,44 @@ export class List extends LitElement { allowDrop = (ev) => ev.preventDefault(); - drag = (ev, i) => { - ev.dataTransfer.setData("text", `item-${i}`); + + #dragged?: number + #placeholder = document.createElement('div') + + drag = (ev, i) => this.#dragged = i + + dragEnter = (ev, i) => { + ev.preventDefault(); + if (this.#dragged !== i) { + const item = this.shadowRoot.getElementById(`item-${i}`) + this.#placeholder.setAttribute('data-idx', i) + item?.insertAdjacentElement('beforebegin', this.#placeholder) + } else { + this.#removePlaceholder() + } } - // dragOver = (ev) => { - // const data = ev.dataTransfer.getData("text"); - // el.insertAdjacentElement('beforebegin', this.shadowRoot.getElementById(data)); - // } + dragExit = (ev, i) => { + ev.preventDefault(); + if (this.#placeholder && i.toString() !== this.#placeholder.getAttribute('data-idx')){ + this.#removePlaceholder() + } + } drop = (ev, i) => { + ev.preventDefault(); - const data = ev.dataTransfer.getData("text"); - const movedIdx = data.split('-')[1] - const movedItem = this.items[movedIdx] - this.items.splice(movedIdx, 1) + const draggedIdx = this.#dragged as number + this.#dragged = undefined + + const movedItem = this.items[draggedIdx] + this.items.splice(draggedIdx, 1) this.items.splice(i, 0, movedItem) - const ogMoved = this.#ogValues[movedIdx] - this.#ogValues.splice(movedIdx, 1) + const ogMoved = this.#ogValues[draggedIdx] + this.#ogValues.splice(draggedIdx, 1) this.#ogValues.splice(i, 0, ogMoved) - - this.items = [...this.items] } @@ -177,6 +197,11 @@ export class List extends LitElement { #ogValues = [] + #removePlaceholder = () => { + this.#placeholder.removeAttribute('data-idx') + this.#placeholder.remove() + } + #renderListItem = (item: ListItemType, i: number) => { const { key, value, content = value } = item; const li = document.createElement("li"); @@ -185,8 +210,20 @@ export class List extends LitElement { if (!this.unordered) { li.draggable = true; li.ondragstart = (ev) => this.drag(ev, i); + + li.ondragend = (ev) => { + if (this.#dragged !== undefined) { + const idx = this.#placeholder.getAttribute('data-idx') + if (idx !== null) this.drop(ev, parseInt(idx)) + this.#removePlaceholder() + } + } + li.ondrop = (ev) => this.drop(ev, i); - li.ondragover = this.allowDrop; + + li.ondragover = (ev) => this.dragEnter(ev, i); + // li.ondragenter = (ev) => this.dragEnter(ev, i); + li.ondragleave = (ev) => this.dragExit(ev, i); } diff --git a/src/renderer/src/stories/Table.js b/src/renderer/src/stories/Table.js index 9984a75bf..968d3577f 100644 --- a/src/renderer/src/stories/Table.js +++ b/src/renderer/src/stories/Table.js @@ -411,7 +411,6 @@ export class Table extends LitElement { // Transfer data to object if (header === this.keyColumn) { - console.log(value, rowName); if (value && value !== rowName) { const old = target[rowName] ?? {}; this.data[value] = old; From d4fbc710de1a77a37b020d3609cf4b6a989ce972 Mon Sep 17 00:00:00 2001 From: Garrett Date: Wed, 1 Nov 2023 11:00:01 -0700 Subject: [PATCH 4/5] Update List.ts --- src/renderer/src/stories/List.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/renderer/src/stories/List.ts b/src/renderer/src/stories/List.ts index 0f706e1bd..c2b8e7480 100644 --- a/src/renderer/src/stories/List.ts +++ b/src/renderer/src/stories/List.ts @@ -170,10 +170,6 @@ export class List extends LitElement { this.items.splice(draggedIdx, 1) this.items.splice(i, 0, movedItem) - const ogMoved = this.#ogValues[draggedIdx] - this.#ogValues.splice(draggedIdx, 1) - this.#ogValues.splice(i, 0, ogMoved) - this.items = [...this.items] } @@ -195,8 +191,6 @@ export class List extends LitElement { this.items = [...this.items, item] } - #ogValues = [] - #removePlaceholder = () => { this.#placeholder.removeAttribute('data-idx') this.#placeholder.remove() @@ -239,8 +233,6 @@ export class List extends LitElement { const isUnordered = !!key - if (!this.#ogValues[i]) this.#ogValues[i] = isUnordered ? resolvedKey : value - if (isUnordered) { this.setAttribute('unordered', '') @@ -302,11 +294,9 @@ export class List extends LitElement { const deleteListItem = () => this.delete(i); - const ogValue = this.#ogValues[i]; - editableElement.addEventListener("blur", () => { const newKey = editableElement.innerText; - if (newKey === "") editableElement.innerText = ogValue; // Reset to original value + if (newKey === "") this.delete(i); // Delete if empty else { const oKey = isUnordered ? resolvedKey : i; delete this.object[oKey]; From d1c19cde8eebbe1ec6b2630227e918c08d99b427 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Wed, 1 Nov 2023 18:57:14 +0000 Subject: [PATCH 5/5] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- src/renderer/src/stories/JSONSchemaInput.js | 1 - .../guided-mode/data/GuidedPathExpansion.js | 23 +++++++++---------- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js index 10d2353d2..81093aa04 100644 --- a/src/renderer/src/stories/JSONSchemaInput.js +++ b/src/renderer/src/stories/JSONSchemaInput.js @@ -110,7 +110,6 @@ export class JSONSchemaInput extends LitElement { // onValidate = () => {} updateData(value, forceValidation = false) { - if (this.value === value && !forceValidation) return false; const { path: fullPath } = this; diff --git a/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js b/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js index eb0d7f94b..28a9a5591 100644 --- a/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js +++ b/src/renderer/src/stories/pages/guided-mode/data/GuidedPathExpansion.js @@ -194,8 +194,7 @@ export class GuidedPathExpansionPage extends Page { if (!sesRef) delete globalResults[sub][ses]; // Delete removed sessions else { - - const globalSesRef = globalResults[sub][ses] + const globalSesRef = globalResults[sub][ses]; for (let name in globalSesRef.source_data) { if (!sesRef.source_data[name]) delete globalSesRef.source_data[name]; // Delete removed interfaces @@ -258,7 +257,10 @@ export class GuidedPathExpansionPage extends Page { // altContent: this.altForm, }); - const structureState = (this.localState = merge(this.info.globalState.structure, { results: {}, keep_existing_data: true })); + const structureState = (this.localState = merge(this.info.globalState.structure, { + results: {}, + keep_existing_data: true, + })); const state = structureState.state; @@ -280,12 +282,11 @@ export class GuidedPathExpansionPage extends Page { // NOTE: These are custom coupled form inputs onUpdate: (path, value) => { - - this.unsavedUpdates = true + this.unsavedUpdates = true; - const parentPath = [...path] + const parentPath = [...path]; const name = parentPath.pop(); - + if (name === "base_directory") { form.getInput([...parentPath, "base_directory"]).value = value; // Update value pre-emptively const input = form.getInput([...parentPath, "format_string_path"]); @@ -296,19 +297,17 @@ export class GuidedPathExpansionPage extends Page { const value = parent[name]; if (fs) { - const baseDir = form.getInput([...parentPath, "base_directory"]) - if (name === "format_string_path") { - + const baseDir = form.getInput([...parentPath, "base_directory"]); + if (name === "format_string_path") { if (value && !baseDir.value) { return [ { message: html`A base directory must be provided to locate your files.`, type: "error", }, - ] + ]; } - const base_directory = [...parentPath, "base_directory"].reduce( (acc, key) => acc[key], this.form.resolved