remove "cut mode" class when gettting content

lib/single-file-extension-editor.js

@@ -54,6 +54,7 @@
 		const CUT_OUTER_HOVER_CLASS = "single-file-cut-outer-hover";
 		const CUT_SELECTED_CLASS = "single-file-cut-selected";
 		const CUT_OUTER_SELECTED_CLASS = "single-file-cut-outer-selected";
+		const CUT_MODE_CLASS = "single-file-cut-mode";
 		const NOTE_INITIAL_POSITION_X = 20;
 		const NOTE_INITIAL_POSITION_Y = 20;
 		const NOTE_INITIAL_WIDTH = 150;
@@ -975,7 +976,7 @@ pre code {
 }`;
 
 		let NOTES_WEB_STYLESHEET, MASK_WEB_STYLESHEET, HIGHLIGHTS_WEB_STYLESHEET;
-		let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingOuterMode, cuttingMode, cuttingPath, cuttingPathIndex, previousContent;
+		let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingOuterMode, cuttingMode, cuttingTouchTarget, cuttingPath, cuttingPathIndex, previousContent;
 		let removedElements = [], removedElementIndex = 0, initScriptContent;
 
 		window.onmessage = async event => {
@@ -1036,24 +1037,19 @@ pre code {
 			}
 			if (message.method == "enableCutInnerPage") {
 				cuttingMode = true;
-				document.documentElement.classList.add("single-file-cut-mode");
+				document.documentElement.classList.add(CUT_MODE_CLASS);
 			}
 			if (message.method == "enableCutOuterPage") {
 				cuttingOuterMode = true;
-				document.documentElement.classList.add("single-file-cut-mode");
+				document.documentElement.classList.add(CUT_MODE_CLASS);
 			}
-			if (message.method == "disableCutInnerPage") {
-				cuttingMode = false;
-				document.documentElement.classList.remove("single-file-cut-mode");
-				resetSelectedElements();
-				if (cuttingPath) {
-					unhighlightCutElement();
-					cuttingPath = null;
+			if (message.method == "disableCutInnerPage" || message.method == "disableCutOuterPage") {
+				if (message.method == "disableCutInnerPage") {
+					cuttingMode = false;
+				} else {
+					cuttingOuterMode = false;
 				}
-			}
-			if (message.method == "disableCutOuterPage") {
-				cuttingOuterMode = false;
-				document.documentElement.classList.remove("single-file-cut-mode");
+				document.documentElement.classList.remove(CUT_MODE_CLASS);
 				resetSelectedElements();
 				if (cuttingPath) {
 					unhighlightCutElement();
@@ -1139,11 +1135,12 @@ pre code {
 				document.documentElement.appendChild(getStyleElement(HIGHLIGHTS_WEB_STYLESHEET));
 				maskPageElement = getMaskElement(PAGE_MASK_CLASS, PAGE_MASK_CONTAINER_CLASS);
 				maskNoteElement = getMaskElement(NOTE_MASK_CLASS);
-				document.documentElement.onmousedown = document.documentElement.ontouchstart = onMouseDown;
+				document.documentElement.onmousedown = onMouseDown;
 				document.documentElement.onmouseup = document.documentElement.ontouchend = onMouseUp;
 				document.documentElement.onmouseover = onMouseOver;
 				document.documentElement.onmouseout = onMouseOut;
 				document.documentElement.onkeydown = onKeyDown;
+				document.documentElement.ontouchstart = document.documentElement.ontouchmove = onTouchMove;
 				window.onclick = event => event.preventDefault();
 				const iconElement = document.querySelector("link[rel*=icon]");
 				window.parent.postMessage(JSON.stringify({
@@ -1185,7 +1182,7 @@ pre code {
 			noteShadow.appendChild(noteElement);
 			const notesElements = Array.from(document.querySelectorAll(NOTE_TAGNAME));
 			const noteId = Math.max.call(Math, 0, ...notesElements.map(noteElement => Number(noteElement.dataset.noteId))) + 1;
-			noteElement.cite = "https://www.w3.org/TR/annotation-model/#selector(type=CssSelector,value=[data-single-file-note-refs~=\"" + noteId + "\"])";
+			blockquoteElement.cite = "https://www.w3.org/TR/annotation-model/#selector(type=CssSelector,value=[data-single-file-note-refs~=\"" + noteId + "\"])";
 			noteElement.classList.add(NOTE_CLASS);
 			noteElement.classList.add(NOTE_ANCHORED_CLASS);
 			noteElement.classList.add(color);
@@ -1409,10 +1406,12 @@ pre code {
 
 		function onMouseUp(event) {
 			if (highlightSelectionMode) {
+				event.preventDefault();
 				highlightSelection();
 				onUpdate(false);
 			}
 			if (removeHighlightMode) {
+				event.preventDefault();
 				let element = event.target, done;
 				while (element && !done) {
 					if (element.classList.contains(HIGHLIGHT_CLASS)) {
@@ -1426,23 +1425,24 @@ pre code {
 				}
 			}
 			if (resizingNoteMode) {
+				event.preventDefault();
 				resizingNoteMode = false;
 				document.documentElement.style.removeProperty("user-select");
 				maskPageElement.classList.remove(PAGE_MASK_ACTIVE_CLASS);
-				document.documentElement.ontouchmove = document.documentElement.onmousemove = null;
+				document.documentElement.ontouchmove = onTouchMove;
+				document.documentElement.onmousemove = null;
 				onUpdate(false);
 			}
 			if (movingNoteMode) {
+				event.preventDefault();
 				anchorNote(movingNoteMode.event || event, selectedNote, movingNoteMode.deltaX, movingNoteMode.deltaY);
 				movingNoteMode = null;
-				document.documentElement.ontouchmove = document.documentElement.onmousemove = null;
+				document.documentElement.ontouchmove = onTouchMove;
+				document.documentElement.onmousemove = null;
 				onUpdate(false);
 			}
-			if (collapseNoteTimeout) {
-				clearTimeout(collapseNoteTimeout);
-				collapseNoteTimeout = null;
-			}
 			if ((cuttingMode || cuttingOuterMode) && cuttingPath) {
+				event.preventDefault();
 				if (event.ctrlKey) {
 					const element = cuttingPath[cuttingPathIndex];
 					element.classList.toggle(cuttingMode ? CUT_SELECTED_CLASS : CUT_OUTER_SELECTED_CLASS);
@@ -1450,6 +1450,10 @@ pre code {
 					validateCutElement(event.shiftKey);
 				}
 			}
+			if (collapseNoteTimeout) {
+				clearTimeout(collapseNoteTimeout);
+				collapseNoteTimeout = null;
+			}
 		}
 
 		function onMouseOver(event) {
@@ -1482,6 +1486,21 @@ pre code {
 			}
 		}
 
+		function onTouchMove(event) {
+			if (cuttingMode || cuttingOuterMode) {
+				event.preventDefault();
+				const { clientX, clientY } = getPosition(event);
+				const target = document.elementFromPoint(clientX, clientY);
+				if (cuttingTouchTarget != target) {
+					onMouseOut();
+					if (target) {
+						cuttingTouchTarget = target;
+						onMouseOver({ target });
+					}
+				}
+			}
+		}
+
 		function onKeyDown(event) {
 			if (cuttingMode || cuttingOuterMode) {
 				if (event.code == "Tab") {
@@ -1593,6 +1612,7 @@ pre code {
 					resetSelectedElements();
 					if (elementsRemoved.length) {
 						elementsRemoved.forEach(element => {
+							unhighlightCutElement();
 							if (element.tagName.toLowerCase() == NOTE_TAGNAME) {
 								resetAnchorNote(element);
 							} else {
@@ -1622,6 +1642,7 @@ pre code {
 						}
 					});
 					elementsKept.forEach(elementKept => {
+						unhighlightCutElement();
 						const elementKeptRect = elementKept.getBoundingClientRect();
 						elementKept.querySelectorAll(searchSelector).forEach(descendant => {
 							const descendantRect = descendant.getBoundingClientRect();
@@ -1880,6 +1901,7 @@ pre code {
 			resetSelectedElements(doc);
 			deserializeShadowRoots(doc);
 			deserializeShadowRoots(document);
+			doc.documentElement.classList.remove(CUT_MODE_CLASS);
 			doc.querySelectorAll("[" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "]").forEach(element => {
 				element.textContent = element.getAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
 				element.removeAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);

src/ui/content/content-ui-editor-web.js

@@ -51,6 +51,7 @@
 	const CUT_OUTER_HOVER_CLASS = "single-file-cut-outer-hover";
 	const CUT_SELECTED_CLASS = "single-file-cut-selected";
 	const CUT_OUTER_SELECTED_CLASS = "single-file-cut-outer-selected";
+	const CUT_MODE_CLASS = "single-file-cut-mode";
 	const NOTE_INITIAL_POSITION_X = 20;
 	const NOTE_INITIAL_POSITION_Y = 20;
 	const NOTE_INITIAL_WIDTH = 150;
@@ -1033,24 +1034,19 @@ pre code {
 		}
 		if (message.method == "enableCutInnerPage") {
 			cuttingMode = true;
-			document.documentElement.classList.add("single-file-cut-mode");
+			document.documentElement.classList.add(CUT_MODE_CLASS);
 		}
 		if (message.method == "enableCutOuterPage") {
 			cuttingOuterMode = true;
-			document.documentElement.classList.add("single-file-cut-mode");
+			document.documentElement.classList.add(CUT_MODE_CLASS);
 		}
-		if (message.method == "disableCutInnerPage") {
-			cuttingMode = false;
-			document.documentElement.classList.remove("single-file-cut-mode");
-			resetSelectedElements();
-			if (cuttingPath) {
-				unhighlightCutElement();
-				cuttingPath = null;
+		if (message.method == "disableCutInnerPage" || message.method == "disableCutOuterPage") {
+			if (message.method == "disableCutInnerPage") {
+				cuttingMode = false;
+			} else {
+				cuttingOuterMode = false;
 			}
-		}
-		if (message.method == "disableCutOuterPage") {
-			cuttingOuterMode = false;
-			document.documentElement.classList.remove("single-file-cut-mode");
+			document.documentElement.classList.remove(CUT_MODE_CLASS);
 			resetSelectedElements();
 			if (cuttingPath) {
 				unhighlightCutElement();
@@ -1902,6 +1898,7 @@ pre code {
 		resetSelectedElements(doc);
 		deserializeShadowRoots(doc);
 		deserializeShadowRoots(document);
+		doc.documentElement.classList.remove(CUT_MODE_CLASS);
 		doc.querySelectorAll("[" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "]").forEach(element => {
 			element.textContent = element.getAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
 			element.removeAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);