Skip to content

Commit

Permalink
Merge branch 'refs/heads/test-pos-rel' into show-validations
Browse files Browse the repository at this point in the history 
# Conflicts:
#	packages/core-svelte/src/lib/components/TextComponent.svelte
#	packages/core-svelte/src/lib/components/TextDropdownComponent.svelte
  • Loading branch information
@annekekleppe
annekekleppe committed Sep 21, 2024
2 parents 895db61 + 70b4247 commit f12edde
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 19 deletions.
37 changes: 31 additions & 6 deletions packages/core-svelte/src/lib/components/TextComponent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -63,9 +66,10 @@
let errorCls: string = ''; // css class name for when the node is erroneous
let errMess: string[] = []; // error message to be shown when element is hovered
let hasErr: boolean = false; // indicates whether this box has errors
// 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";
Expand Down Expand Up @@ -158,14 +162,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();
}
Expand Down Expand Up @@ -194,11 +200,13 @@
}
});
} else {
// changed
if (!!endEditingParentFunction) {
endEditingParentFunction();
} else {
LOGGER.error("No parent endEditing function")
}
// end changed
}
}
}
Expand Down Expand Up @@ -362,15 +370,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}`)
Expand All @@ -389,14 +400,16 @@
// 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
LOGGER.log("KeyPressAction.NOT_OK");
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);
Expand All @@ -408,7 +421,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);
Expand All @@ -420,6 +433,7 @@
event.preventDefault();
event.stopPropagation();
break;
// end changed
}
}
}
Expand All @@ -435,13 +449,15 @@
endEditing();
} else {
// let TextDropdownComponent handle it
dispatcher("onFocusOutText")
dispatcher("onFocusOutText") // changed: removed
}
}
const refresh = () => {
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) { // changed if-stat
text = box.getText();
if (box.hasError) {
errorCls = 'text-component-text-error';
Expand Down Expand Up @@ -489,6 +505,7 @@
inputElement.focus();
editStart = false;
}
// changed
// if (isEditing && partOfActionBox) {
// if (text !== originalText) {
// send event to parent
Expand All @@ -497,6 +514,7 @@
// textUpdateFunction({content: text, caret: from + 1})
// }
// }
// end changed
// Always set the input width explicitly.
setInputWidth();
placeholder = box.placeHolder
Expand Down Expand Up @@ -526,9 +544,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)) {
Expand All @@ -542,13 +562,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);
}
}
Expand Down Expand Up @@ -615,6 +639,7 @@
</ErrorTooltip>

<style>
/* changed */
/** Hiding and showing the <input> or <span> by using Svelte #if did not work, because the
* CSS class for <input> was not applied anymore.
* Therefore we switched to using the CSS display: none property.
Expand Down
53 changes: 41 additions & 12 deletions packages/core-svelte/src/lib/components/TextDropdownComponent.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,15 @@
let allOptions: SelectOption[]; // all options as calculated by the editor
let textComponent;
// changed
let setText = (value: string) => {
if (value === null || value === undefined) {
text = "";
} else {
text = value;
}
}
// end changed
const noOptionsId = 'noOptions'; // constant for when the editor has no options
let getOptions = (): SelectOption[] => { // the function used to calculate all_options, called by onClick and setFocus
let result = box?.getOptions(editor);
Expand Down Expand Up @@ -87,7 +88,9 @@
let selectedOption = box.getSelectedOption();
if (!!selectedOption) {
box.textHelper.setText(selectedOption.label);
// changed
setText(box.textHelper.getText());
// end changed
}
}
// because the box maybe a different one than we started with ...
Expand All @@ -97,7 +100,9 @@
afterUpdate( () => {
box.setFocus = setFocus;
box.refreshComponent = refresh;
// changed
box.triggerKeyPressEvent = triggerKeyPressEvent
// end changed
});
onMount(() => {
Expand All @@ -106,14 +111,17 @@
box.refreshComponent = refresh;
box.triggerKeyPressEvent = triggerKeyPressEvent
});
// changed
const triggerKeyPressEvent = (key: string) => {
textUpdateFunction({content: key, caret: 1})
box.textHelper.setText(key)
}
// end changed
// TODO still not functioning: reference shortcuts and chars that are not valid in textComponent to drop in next action!!!
// changed
const textUpdateFunction = (data: {content: string, caret: number}): boolean => {
LOGGER.log(`textUpdateFunction for ${box.kind}: ` + JSON.stringify(data));
dropdownShown = true;
Expand Down Expand Up @@ -173,7 +181,7 @@
}
return false
}
// end changed
/**
* This custom event is triggered when the text in the textComponent is altered or when the
* caret position is changed.
Expand All @@ -188,9 +196,10 @@
// setText(event.detail.content);
allOptions = getOptions();
filteredOptions = allOptions.filter(o => o.label.startsWith(text.substring(0, event.detail.caret)));
// changed
makeUnique();
if (isActionBox(box)) {
// Onlhy one option and has been fully typed in
// Only one option and has been fully typed in
LOGGER.log(`textUpdate: (${filteredOptions.length}, ${filteredOptions[0]?.label}, ${filteredOptions[0]?.label?.length}`)
if (filteredOptions.length === 1 && filteredOptions[0].label === event.detail.content && filteredOptions[0].label.length === event.detail.caret ) {
LOGGER.log("STOP 1 !!")
Expand Down Expand Up @@ -252,7 +261,7 @@
});
filteredOptions = result;
}
// end changed
function selectLastOption() {
if (dropdownShown) {
if (filteredOptions?.length !== 0) {
Expand Down Expand Up @@ -293,7 +302,7 @@
break;
}
case ARROW_DOWN: {
if (dropdownShown) {
if (dropdownShown) { // if stat removed
if (!selectedId || selectedId.length == 0) { // there is no current selection: start at the first option
selectFirstOption();
} else {
Expand All @@ -310,7 +319,7 @@
break;
}
case ARROW_UP: {
if (dropdownShown) {
if (dropdownShown) { // if stat removed
if (!selectedId || selectedId.length == 0) { // there is no current selection, start at the last option
selectLastOption();
} else {
Expand All @@ -329,7 +338,7 @@
case ENTER: { // user wants current selection
// find the chosen option
let chosenOption: SelectOption = null;
if (filteredOptions.length <= 1) {
if (filteredOptions.length <= 1) { // changed: was === 1
if (filteredOptions.length !== 0) { // if there is just one option left, choose that one
chosenOption = filteredOptions[0];
} else { // there are no valid options left
Expand All @@ -345,7 +354,7 @@
if (!!chosenOption) {
storeAndExecute(chosenOption);
} else { // no valid option, restore the original text
setText(textBox.getText());
setText(textBox.getText()); // line : using setText
// stop editing
isEditing = false;
dropdownShown = false;
Expand Down Expand Up @@ -378,7 +387,7 @@
// todo find out whether we can do without this textHelper
LOGGER.log(`clearText for ${id} from text '${text}' & boxtext '${box.textHelper.getText()}' `)
box.textHelper.setText("");
// setText("");
// setText(""); // changed
}
/**
Expand Down Expand Up @@ -413,6 +422,7 @@
editor.selectElementForBox(box);
allOptions = getOptions();
if (!!event) {
// changed
if ( text === undefined || text === null) {
filteredOptions = allOptions.filter(o => true);
} else {
Expand All @@ -421,10 +431,11 @@
return o?.label?.startsWith(text.substring(0, event.detail.caret))
});
}
// end changed
} else {
filteredOptions = allOptions.filter(o => o?.label?.startsWith(text.substring(0, 0)));
}
makeUnique();
makeUnique(); // changed: line added
};
/**
Expand All @@ -438,9 +449,11 @@
LOGGER.log('executing option ' + selected.label);
isEditing = false;
dropdownShown = false;
// changed
if (isActionBox(box)) {
clearText()
}
// end changed
runInAction(() => {
// TODO set the new cursor through the editor
box.selectOption(editor, selected); // TODO the result of the execution is ignored
Expand All @@ -464,6 +477,7 @@
*/
const endEditing = () => {
LOGGER.log("endEditing " +id + " dropdownShow:" + dropdownShown + " isEditing: " + isEditing);
// changed
if (isEditing === true) {
isEditing = false;
} else {
Expand All @@ -472,6 +486,7 @@
}
return;
}
// end changed
if (dropdownShown) {
allOptions = getOptions();
let validOption = allOptions.find(o => o.label === text);
Expand All @@ -491,6 +506,7 @@
}
};
// changed
const onFocusOutText = () => {
LOGGER.log(`onFocusOutText ${id} text '${text}'`);
if (isEditing) {
Expand All @@ -517,9 +533,22 @@
event.preventDefault();
}
};
// end changed
refresh();
/*
changed in html:
textUpdateFunction={textUpdateFunction}
endEditingParentFunction={endEditing}
and
on:onFocusOutText={onFocusOutText}
and
{#if isReferenceBox(box) && box.isSelectAble()}
<button class="reference-button" id="{id}" on:click={(event) => selectReferred(event)}>
<ArrowForward/>
</button>
{/if}
*/
</script>


Expand Down
Loading

0 comments on commit f12edde

Please sign in to comment.