From 528036f50d5dac0076b479c266350812a39180b5 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Sat, 12 Oct 2024 20:28:31 +0800 Subject: refactor: don't re-render HTML by dragging --- src/css/dumbymap.css | 2 +- src/editor.mjs | 22 ++++++++++++++-------- 2 files changed, 15 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css index 416c216..7ddb21a 100644 --- a/src/css/dumbymap.css +++ b/src/css/dumbymap.css @@ -761,7 +761,7 @@ root { .dragging-geolink { user-select: none; - .dumby-block > :not(:has(.mapclay)) { + .dumby-block > :not(:has(.mapclay[data-render="fulfilled"])) { opacity: 0.3; } } diff --git a/src/editor.mjs b/src/editor.mjs index c3c51ef..cdbd5cc 100644 --- a/src/editor.mjs +++ b/src/editor.mjs @@ -2,7 +2,7 @@ import { markdown2HTML, generateMaps } from './dumbymap' import { defaultAliases, parseConfigsFromYaml } from 'mapclay' import * as menuItem from './MenuItem' -import { addAnchorByPoint } from './dumbyUtils.mjs' +import { addAnchorByPoint, createGeoLink } from './dumbyUtils.mjs' import { shiftByWindow } from './utils.mjs' import LeaderLine from 'leader-line' import * as tutorial from './tutorial' @@ -1084,6 +1084,7 @@ dumbyContainer.onmousedown = (e) => { const geoLink = document.createElement('a') geoLink.textContent = range.toString() geoLink.classList.add('with-leader-line', 'geolink', 'drag') + const originContent = range.cloneContents() range.deleteContents() range.insertNode(geoLink) @@ -1113,15 +1114,16 @@ dumbyContainer.onmousedown = (e) => { line?.remove() lineEnd.remove() dumbymap.utils.renderedMaps().forEach(map => map.style.removeProperty('cursor')) - const resumeContent = () => updateDumbyMap(newDumbymap => { - const scrollTop = dumbymap.htmlHolder.scrollTop - newDumbymap.htmlHolder.scrollBy(0, scrollTop) - }) + const resumeContent = () => { + range.deleteContents() + range.insertNode(originContent) + } - const map = document.elementFromPoint(e.clientX, e.clientY).closest('.mapclay') + const map = document.elementFromPoint(e.clientX, e.clientY) + .closest('.mapclay[data-render="fulfilled"]') const selection = cm.getSelection() if (!map || !selection) { - resumeContent() + resumeContent('map/selection') return } @@ -1132,16 +1134,20 @@ dumbyContainer.onmousedown = (e) => { validateAnchorName, }) if (!refLink) { - resumeContent() + resumeContent('reflink') return } + const scrollTop = dumbymap.htmlHolder.scrollTop + geoLink.href = refLink.link + createGeoLink(geoLink) appendRefLink(cm, refLink) if (selection === refLink.ref) { cm.replaceSelection(`[${selection}]`) } else { cm.replaceSelection(`[${selection}][${refLink.ref}]`) } + dumbymap.htmlHolder.scrollBy(0, scrollTop) } } -- cgit v1.2.3-70-g09d2