Skip to content

Commit

Permalink
Fixes and improvements to Search&Replace
Browse files Browse the repository at this point in the history
  • Loading branch information
@lmg-anon
lmg-anon authored Aug 20, 2024
1 parent 0f96ecb commit 33200ed
Showing 1 changed file with 42 additions and 30 deletions.
72 changes: 42 additions & 30 deletions mikupad.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<!doctype html>
<meta charset="utf-8">
<!-- mikupad by Anon
Expand Down Expand Up @@ -3418,7 +3419,7 @@
</div>
</div>`;
}
function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, promptArea, cancel, ...props }) {
function SearchAndReplaceWidget({ isOpen, closeWidget, id, children, promptArea, promptText, cancel, ...props }) {
const [searchAndReplaceError, setSearchAndReplaceError] = useState(undefined);
const [searchAndReplaceMode, setSearchAndReplaceMode] = usePersistentState('searchAndReplaceMode', 0);
const [searchTerm, setSearchTerm] = usePersistentState('searchTerm','');
Expand All @@ -3427,6 +3428,8 @@
const [numMatches, setNumMatches] = useState(0);
const [inputElement, setInputElement] = useState(null);
const [replacedTrigger, setReplacedTrigger] = useState(false);
const positions = useRef([]);
const [currentIndex, setCurrentIndex] = useState(-1);

useEffect(() => {
if (promptArea.current) {
Expand Down Expand Up @@ -3467,9 +3470,6 @@
}
}

let positions = [];
let currentIndex = -1;

function findAllMatches(mode, search, flags, elem) {
if (!inputElement)
return 0
Expand Down Expand Up @@ -3509,37 +3509,47 @@
}
return positions;
}
function highlightCurrent(elem) {
if (positions.length > 0 && currentIndex >= 0 && currentIndex < positions.length) {
const position = positions[currentIndex];
function highlightIndex(elem, index) {
if (positions.current.length > 0 && index >= 0 && index < positions.current.length) {
const position = positions.current[index];
elem.focus();
elem.scrollTop = 0;

// Scroll to selection position.
const fullText = elem.value;
elem.value = fullText.substring(0, position.end);
elem.scrollTop = elem.scrollHeight;
elem.value = fullText;

elem.setSelectionRange(position.start, position.end);
}
}
function findNextMatch(mode,search,flags,elem) {
if (positions.length === 0) {
if (positions.current.length === 0) {
findAndStorePositions(mode,search,flags,elem);
}
if (positions.length > 0) {
currentIndex = (currentIndex + 1) % positions.length;
highlightCurrent(elem);
if (positions.current.length > 0) {
let index = (currentIndex + 1) % positions.current.length;
setCurrentIndex(index);
highlightIndex(inputElement, index);
}
}

function findPrevMatch(mode,search,flags,elem) {
if (positions.length === 0) {
if (positions.current.length === 0) {
findAndStorePositions(mode,search,flags,elem);
}
if (positions.length > 0) {
currentIndex = (currentIndex - 1 + positions.length) % positions.length;
highlightCurrent(elem);
if (positions.current.length > 0) {
let index = (currentIndex - 1 + positions.current.length) % positions.current.length;
setCurrentIndex(index);
highlightIndex(inputElement, index);
}
}

function findAndStorePositions(mode,search,flags,elem) {
positions = findAllMatches(mode, search, flags, elem);
currentIndex = -1;
if (positions.length === 0)
positions.current = findAllMatches(mode, search, flags, elem);
setCurrentIndex(-1);
if (positions.current.length === 0)
setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
}

Expand All @@ -3549,8 +3559,8 @@
setSearchAndReplaceError(undefined)
if (!search)
return
positions = findAllMatches(mode, search, flags, inputElement);
if (positions.length === 0) {
positions.current = findAllMatches(mode, search, flags, inputElement);
if (positions.current.length === 0) {
setSearchAndReplaceError(`Warning: No matches found for ${ (mode==0?"Plaintext":mode==1?"RegEx":"Template") } \'${search}\'`)
return
}
Expand Down Expand Up @@ -3595,18 +3605,21 @@
setNumMatches(0)
return
}
positions = findAllMatches(mode, search, flags, inputElement);
positions.current = findAllMatches(mode, search, flags, inputElement);
try {
setNumMatches(positions.length ?? 0)
setNumMatches(positions.current.length ?? 0)
}
catch {
setNumMatches(0)
}
if (positions.current.length <= currentIndex) {
setCurrentIndex(positions.current.length - 1);
}
}

useEffect(() => {
countMatches(searchAndReplaceMode,searchTerm,searchFlags)
}, [searchAndReplaceMode,searchTerm,searchFlags,isOpen,replacedTrigger]);
}, [searchAndReplaceMode,searchTerm,searchFlags,isOpen,replacedTrigger,promptText]);

return html`
<${Widget} isOpen=${isOpen} onClose=${closeWidget}
Expand All @@ -3626,41 +3639,39 @@
${searchAndReplaceMode == 0 && html`
<${InputBox} label="Search This" type="text"
placeholder="Hatsune Miku"
readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
value=${searchTerm} onValueChange=${setSearchTerm}/>
<${InputBox} label="Replace With" type="text"
placeholder="GUMI"
readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
`}
${searchAndReplaceMode == 1 && html`
<${InputBox} label="Search This RegEx" type="text"
placeholder="(\\w+) Miku"
readOnly=${!!cancel} value=${searchTerm} onValueChange=${setSearchTerm}/>
value=${searchTerm} onValueChange=${setSearchTerm}/>
<div style=${{ 'flex':'0 1 min-content' }}>
<${InputBox} label="Flags" type="text"
placeholder="gi"
readOnly=${!!cancel} value=${searchFlags} onValueChange=${setSearchFlags}/>
value=${searchFlags} onValueChange=${setSearchFlags}/>
</div>
<${InputBox} label="Replace With" type="text"
placeholder="$1 GUMI"
readOnly=${!!cancel} value=${replaceTerm} onValueChange=${setReplaceTerm}/>
value=${replaceTerm} onValueChange=${setReplaceTerm}/>
`}
</div>
<div class="searchAndReplace-buttons">
<div class="flexfiller"/>
<div class="number-matches">
${ searchTerm != "" ? numMatches + (numMatches == 1 ? " Match" : " Matches") : ""}
${currentIndex >= 0 ? (currentIndex+1) + " /" : ""} ${ searchTerm != "" ? numMatches + (numMatches == 1 ? " Match" : " Matches") : ""}
</div>
<button
class="findButton"
title="Find Previous Match"
disabled=${!!cancel}
onClick=${() => handleFindPrev(searchAndReplaceMode,searchTerm,searchFlags)}>
<${SVG_ArrowUp}/>
</button>
<button
class="findButton"
title="Find Next Match"
disabled=${!!cancel}
onClick=${() => handleFindNext(searchAndReplaceMode,searchTerm,searchFlags)}>
<${SVG_ArrowDown}/>
</button>
Expand Down Expand Up @@ -5691,6 +5702,7 @@
closeWidget=${() => closeModal("searchAndReplace")}
id="searchAndReplace"
promptArea=${promptArea}
promptText=${promptText}
cancel=${cancel}/>
</div>
${probs ? html`
Expand Down

0 comments on commit 33200ed

Please sign in to comment.