@schukai/monster 3.102.1 → 3.102.3

package/source/components/layout/panel.mjs

@@ -84,7 +84,7 @@ class Panel extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Host.Viewer}
+	 * @return {Panel}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();

package/source/components/layout/split-panel.mjs

@@ -23,6 +23,7 @@ import { Observer } from "../../types/observer.mjs";
 import { SplitPanelStyleSheet } from "./stylesheet/split-panel.mjs";
 import { instanceSymbol } from "../../constants.mjs";
 import { internalSymbol } from "../../constants.mjs";
+import { getDocument } from "../../dom/util.mjs";
 
 export { SplitPanel, TYPE_VERTICAL, TYPE_HORIZONTAL };
 
@@ -69,6 +70,8 @@ const TYPE_HORIZONTAL = "horizontal";
  *
  * @fragments /fragments/components/layout/split-panel/
  *
+ * @issue https://localhost.alvine.dev:8440/development/issues/closed/184.html
+ *
  * @example /examples/components/layout/split-panel-simple
  *
  * @since 3.54.0
@@ -294,6 +297,8 @@ function initEventHandler() {
 		});
 	}
 
+	let userSelectDefault = getDocument().body.style.userSelect;
+
 	this[draggerElementSymbol].addEventListener("mousedown", () => {
 		self[internalSymbol].getSubject().isDragging = true;
 
@@ -317,6 +322,8 @@ function initEventHandler() {
 				return;
 			}
 
+			getDocument().body.style.userSelect = "none";
+
 			if (self.getOption("splitType") === TYPE_HORIZONTAL) {
 				const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
 				const topPanel = self[startPanelElementSymbol];
@@ -370,6 +377,9 @@ function initEventHandler() {
 
 		const dragEventHandler = (e) => {
 			self[internalSymbol].getSubject().isDragging = false;
+
+			document.body.style.userSelect = userSelectDefault;
+
 			document.removeEventListener("mousemove", eventListener);
 			document.removeEventListener("mouseup", eventListener);
 		};

package/source/dom/customcontrol.mjs

@@ -17,6 +17,8 @@ import { addAttributeToken } from "./attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "./constants.mjs";
 import { CustomElement, attributeObserverSymbol } from "./customelement.mjs";
 import { instanceSymbol } from "../constants.mjs";
+import { DeadMansSwitch } from "../util/deadmansswitch.mjs";
+import { addErrorAttribute } from "./error.mjs";
 
 export { CustomControl };
 
@@ -77,8 +79,8 @@ class CustomControl extends CustomElement {
 			);
 		}
 
-		// initialize a MutationObserver to watch for attribute changes
-		initObserver.call(this);
+		// watch for attribute value changes
+		initValueAttributeObserver.call(this);
 	}
 
 	/**
@@ -348,14 +350,42 @@ function getInternal() {
 	return this[attachedInternalSymbol];
 }
 
+const debounceValueSymbol = Symbol("debounceValue");
+
 /**
+ *
+ * @issue https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/290
+ *
  * @private
  * @return {object}
  * @this CustomControl
  */
-function initObserver() {
-	// value
+function initValueAttributeObserver() {
+	const self = this;
+
 	this[attributeObserverSymbol]["value"] = () => {
-		this.setOption("value", this.getAttribute("value"));
+		if (self[debounceValueSymbol] instanceof DeadMansSwitch) {
+			try {
+				self[debounceValueSymbol].touch();
+				return;
+			} catch (e) {
+				// catch Error("has already run");
+				if (e.message !== "has already run") {
+					throw e;
+				}
+				delete self[debounceValueSymbol];
+			}
+		}
+
+		self[debounceValueSymbol] = new DeadMansSwitch(50, () => {
+			requestAnimationFrame(() => {
+				const oldValue = self.getAttribute("value");
+				const newValue = self.getOption("value");
+
+				if (oldValue !== newValue) {
+					this.setOption("value", this.getAttribute("value"));
+				}
+			});
+		});
 	};
 }