From 70b42474cf019c3899d464b2336a18e96a719671 Mon Sep 17 00:00:00 2001 From: Anneke Kleppe Date: Sat, 21 Sep 2024 14:57:02 +0200 Subject: [PATCH] success --- .../src/lib/components/TextComponent.svelte | 36 ++++++++++--- .../components/TextDropdownComponent.svelte | 54 ++++++++++++++----- packages/core-svelte/src/lib/styles/freon.css | 1 - 3 files changed, 72 insertions(+), 19 deletions(-) diff --git a/packages/core-svelte/src/lib/components/TextComponent.svelte b/packages/core-svelte/src/lib/components/TextComponent.svelte index b839630fc..df5442f03 100644 --- a/packages/core-svelte/src/lib/components/TextComponent.svelte +++ b/packages/core-svelte/src/lib/components/TextComponent.svelte @@ -47,8 +47,11 @@ export let partOfActionBox: boolean = false; // indication whether this text component is part of an TextDropdownComponent export let text: string; // the text to be displayed, needs to be exported for to use 'bind:text' in TextDropdownComponent + // changed export let textUpdateFunction = undefined export let endEditingParentFunction = undefined + // end changed + // Local variables let id: string; // an id for the html element id = !!box ? componentId(box) : 'text-with-unknown-box'; @@ -59,8 +62,10 @@ let from = -1; // the cursor position, or when different from 'to', the start of the selected text let to = -1; // the cursor position, or when different from 'from', the end of the selected text // Note that 'from <= to' always holds. + // changed let placeHolderStyle: string; $: placeHolderStyle = (partOfActionBox ? "text-component-action-placeholder" : "text-component-placeholder"); + // end changed let boxType: BoxType = "text"; // indication how is this text component is used, determines styling $: boxType = !!box.parent ? (isActionBox(box?.parent) ? "action" : isSelectBox(box?.parent) ? "select" : "text") : "text"; @@ -153,14 +158,16 @@ * @param event */ function onClick(event: MouseEvent) { - if (!!inputElement) { + if (!!inputElement) { // changed if-stat removed LOGGER.log('onClick: ' + id + ', ' + inputElement?.selectionStart + ", " + inputElement?.selectionEnd); setFromAndTo(inputElement.selectionStart, inputElement.selectionEnd); } if (partOfActionBox) { // let TextDropdownComponent know, dropdown menu needs to be altered LOGGER.log('dispatching from on click'); + // changed textUpdateFunction({content: text, caret: from}) // dispatcher('textUpdate', {content: text, caret: from}); + // end changed } event.stopPropagation(); } @@ -189,11 +196,13 @@ } }); } else { + // changed if (!!endEditingParentFunction) { endEditingParentFunction(); } else { LOGGER.error("No parent endEditing function") } + // end changed } } } @@ -357,15 +366,18 @@ } default: { // the event.key is SHIFT or a printable character getCaretPosition(event); + // changed if (event.shiftKey && event.key === "Shift") { // shift key pressed, ignore event.stopPropagation(); break } + // end changed switch (box.isCharAllowed(text, event.key, from)) { case CharAllowed.OK: // add to text, handled by browser LOGGER.log('CharAllowed ' + JSON.stringify(event.key)); - // afterUpdate handles the dispatch of the textUpdate to the TextDropdown Component, if needed + // afterUpdate handles the dispatch of the textUpdate to the TextDropdown Component, if needed. + // changed if (editor.selectedBox.kind === "ActionBox") { LOGGER.log(`${id}: TEXT UPDATE text '${text}' key: '${event.key}' from: ${from}`) @@ -384,6 +396,7 @@ // dispatcher('textUpdate', {content: text.concat(event.key), caret: from - 1}); } event.stopPropagation() + // end changed break; case CharAllowed.NOT_OK: // ignore // ignore any spaces in the text TODO make this depend on textbox.spaceAllowed @@ -391,7 +404,8 @@ event.preventDefault(); event.stopPropagation(); break; - case CharAllowed.GOTO_NEXT: // try in previous or next box + case CharAllowed.GOTO_NEXT: // try in next box + // changed LOGGER.log("KeyPressAction.GOTO_NEXT FROM IS " + from); editor.selectNextLeaf(); LOGGER.log(" NEXT LEAF IS " + editor.selectedBox.role); @@ -403,7 +417,7 @@ event.preventDefault(); event.stopPropagation(); break; - case CharAllowed.GOTO_PREVIOUS: // try in previous or next box + case CharAllowed.GOTO_PREVIOUS: // try in previous box LOGGER.log("KeyPressAction.GOTO_PREVIOUS FROM IS " + from); editor.selectPreviousLeaf(); LOGGER.log(" PREVIOUS LEAF IS " + editor.selectedBox.role); @@ -415,6 +429,7 @@ event.preventDefault(); event.stopPropagation(); break; + // end changed } } } @@ -430,7 +445,7 @@ endEditing(); } else { // let TextDropdownComponent handle it - dispatcher("onFocusOutText") + dispatcher("onFocusOutText") // changed: removed } } @@ -438,7 +453,7 @@ LOGGER.log(`${id}: REFRESH ${id} (${box?.node?.freLanguageConcept()}) boxtext '${box.getText()}' text '${text}'`) placeholder = box.placeHolder; // If being edited, do not set the value, let the user type whatever (s)he wants - // if (!isEditing) { + // if (!isEditing) { // changed if-stat text = box.getText(); // } boxType = (box.parent instanceof ActionBox ? "action" : (box.parent instanceof SelectBox ? "select" : "text")); @@ -475,6 +490,7 @@ inputElement.focus(); editStart = false; } + // changed // if (isEditing && partOfActionBox) { // if (text !== originalText) { // send event to parent @@ -483,6 +499,7 @@ // textUpdateFunction({content: text, caret: from + 1}) // } // } + // end changed // Always set the input width explicitly. setInputWidth(); placeholder = box.placeHolder @@ -512,9 +529,11 @@ * See https://dev.to/matrixersp/how-to-make-an-input-field-grow-shrink-as-you-type-513l */ function setInputWidth() { + // changed if (box.getText().startsWith("home")) { console.log(`setInputWidth box ${box.$id} for value '${inputElement?.value}' isEditing ${isEditing}`) } + // end changed if(!!widthSpan && !!inputElement) { let value = inputElement.value; if ((value !== undefined) && (value !== null) && (value.length === 0)) { @@ -528,13 +547,17 @@ const width = widthSpan.offsetWidth + "px"; inputElement.style.width = width; // LOGGER.log("setInputWidth mirror [" + value + "] input [" + inputElement.value + "] placeholder [" + placeholder + "] w: " + width + " " + widthSpan.clientWidth + " for element " + box?.element?.freId() + " (" + box?.element?.freLanguageConcept() + ")") + // changed if (box.getText().startsWith("home")) { console.log(" setInputWidth " + width) } + // end changed } else { + // changed if (box.getText().startsWith("home")) { console.log(` setInputWidth ${box.$id} not calculated`) } + // end changed // LOGGER.log("SetInputWidth do nothing for element " + box?.element?.freId() + " (" + box?.element?.freLanguageConcept() + ") " + widthSpan + "::" + inputElement + "::" + spanElement); } } @@ -598,6 +621,7 @@ {/if}