@cocreate/position 1.16.0 → 2.0.1

package/src/draggable.js

@@ -0,0 +1,64 @@
+import observer from "@cocreate/observer";
+import Position from "./draggable/engine.js";
+
+const selector = "[draggable]";
+
+export function initElement(element, options = {}) {
+	if (!element?.matches) return;
+	const draggable = options.draggable ?? element.matches(selector);
+	const previous = element.position;
+	const dragScope = options.dragScope || null;
+
+	if (!previous?._positionController) {
+		const position = new Position(element, element.parentElement, {
+			draggable,
+			dragScope,
+			delegated: options.delegated
+		});
+		if (previous?.place) position.place = previous.place;
+		if (previous?.unplace) position.unplace = previous.unplace;
+		position._positionController = true;
+		element.position = position;
+	} else {
+		previous.options.draggable = draggable;
+		previous.options.dragScope = dragScope;
+		if (draggable && !options.delegated && previous.options.delegated) {
+			previous.options.delegated = false;
+			previous._initEvent();
+		}
+	}
+	return element.position;
+}
+
+export function initElements(elements) {
+	for (const element of elements) initElement(element);
+}
+
+function refresh(node) {
+	if (node.nodeType !== 1) return;
+	if (node.matches(selector)) initElement(node);
+	initElements(node.querySelectorAll(selector));
+}
+
+export function init() {
+	initElements(document.querySelectorAll(selector));
+}
+
+observer.init({
+	name: "positionDraggableAddedNodes",
+	types: ["addedNodes"],
+	selector,
+	callback: mutation => refresh(mutation.target)
+});
+
+observer.init({
+	name: "positionDraggableAttributes",
+	types: ["attributes"],
+	attributeFilter: ["draggable"],
+	selector,
+	callback: mutation => initElement(mutation.target)
+});
+
+init();
+
+export default { init, initElement, initElements };

package/src/eventOperator.js

@@ -0,0 +1,15 @@
+import { getValueFromObject } from "@cocreate/utils";
+
+export function resolveEventOperator(query, event) {
+	if (typeof query !== "string" || !query.startsWith("event."))
+		return { handled: false, value: undefined, selector: null };
+
+	const [, path, remaining = ""] = query.match(/^event\.([^\s]+)(?:\s+([\s\S]*))?$/) || [];
+	if (!path) return { handled: true, value: undefined, selector: null };
+
+	return {
+		handled: true,
+		value: getValueFromObject(event, path),
+		selector: remaining.trim() || "$this"
+	};
+}

package/src/helpers/events.js

@@ -0,0 +1,34 @@
+export function normalizeEvent(event) {
+	const detail = event?.detail && typeof event.detail === "object" ? event.detail : {};
+	const originalEvent = detail.originalEvent || event;
+	const target = detail.target ?? originalEvent?.target ?? event?.target ?? null;
+	const cursor = detail.cursor || {};
+	return {
+		type: originalEvent?.type || event?.type || "",
+		target,
+		relatedTarget: detail.relatedTarget ?? originalEvent?.relatedTarget ?? event?.relatedTarget ?? null,
+		document: detail.document ?? originalEvent?.view?.document ?? target?.ownerDocument ?? null,
+		clientX: cursor.x ?? originalEvent?.clientX ?? event?.clientX,
+		clientY: cursor.y ?? originalEvent?.clientY ?? event?.clientY,
+		which: originalEvent?.which ?? event?.which,
+		button: originalEvent?.button ?? event?.button,
+		touches: originalEvent?.touches ?? event?.touches,
+		changedTouches: originalEvent?.changedTouches ?? event?.changedTouches,
+		originalEvent,
+		detail: event?.detail,
+		preventDefault() {
+			originalEvent?.preventDefault?.();
+			if (event !== originalEvent) event?.preventDefault?.();
+		}
+	};
+}
+
+export function dispatch(element, name, detail = {}) {
+	const EventConstructor = element?.ownerDocument?.defaultView?.CustomEvent;
+	if (!EventConstructor) return;
+	const event = new EventConstructor(name, {
+		detail: { element, instance: element.position, ...detail }
+	});
+	element.dispatchEvent(event);
+	return event;
+}

package/src/index.css

@@ -20,3 +20,22 @@
 [drag-area] {
   cursor: move;
 }
+
+.position-moving:not(.position-cloning) {
+	position: fixed !important;
+	width: var(--position-moving-width) !important;
+	height: var(--position-moving-height) !important;
+	min-width: var(--position-moving-width) !important;
+	min-height: var(--position-moving-height) !important;
+	max-width: var(--position-moving-width) !important;
+	max-height: var(--position-moving-height) !important;
+	box-sizing: border-box !important;
+}
+
+.position-cloning {
+	opacity: 0.6;
+}
+
+.position-moving-preview {
+	pointer-events: none;
+}

package/src/index.js

@@ -1,71 +1,222 @@
-import observer from "@cocreate/observer";
-import { queryElements } from "@cocreate/utils";
-import position from "./position";
-import "./index.css";
-
-const positionTriggers = new WeakSet();
-
-function init() {
-	let elements = document.querySelectorAll("[moveable], [positionable]");
-	initElements(elements);
-	initPositionTriggers(document.querySelectorAll("[position-query]"));
-}
-
-function initElements(elements) {
-	for (let element of elements) initElement(element);
-}
-
-function initElement(element) {
-	if (!element.position)
-		element.position = new position(element, element.parentElement);
-}
-
-function initPositionTriggers(elements) {
-	for (const trigger of elements) {
-		if (positionTriggers.has(trigger)) continue;
-		positionTriggers.add(trigger);
-		trigger.addEventListener("click", () => {
-			requestAnimationFrame(() => {
-				const targets = queryElements({ element: trigger, prefix: "position" });
-				const anchors = queryElements({ element: trigger, prefix: "position-anchor" });
-				const anchor = anchors[0] || trigger;
-				for (const target of targets) {
-					initElement(target);
-					target.position.place(anchor);
-				}
-			});
-		});
-	}
-}
-
-observer.init({
-	name: "positionAddedNodes",
-	types: ["addedNodes"],
-	selector: "[moveable], [positionable]",
-	callback: (mutation) => {
-		initElement(mutation.target);
-	}
-});
-
-observer.init({
-	name: "positionQueryAddedNodes",
-	types: ["addedNodes", "attributes"],
-	selector: "[position-query]",
-	attributeFilter: ["position-query"],
-	callback: (mutation) => {
-		initPositionTriggers([mutation.target]);
-	}
-});
-
-observer.init({
-	name: "positionAttributes",
-	types: ["attributes"],
-	attributeFilter: ["moveable", "positionable"],
-	callback: (mutation) => {
-		initElement(mutation.target);
-	}
-});
-
-init();
-
-export default position;
+import observer from "@cocreate/observer";
+import "./index.css";
+
+const draggableSelector = "[draggable], [draggable-query], [clonable-query]";
+const snappableSelector = "[droppable-query], [snappable-query], [position-reference]";
+const placementSelector = "[position-query], [position-element], [position-events], [position-box]";
+
+let draggablePromise;
+let snappablePromise;
+let placementPromise;
+
+function load(getPromise, setPromise, importer) {
+	let promise = getPromise();
+	if (!promise) {
+		promise = importer()
+			.then(module => {
+				module.init?.();
+				return module.default || module;
+			})
+			.catch(error => {
+				setPromise(undefined);
+				throw error;
+			});
+	}
+	setPromise(promise);
+	return promise;
+}
+
+/**
+ *
+ * @public
+ * @environment client
+ */
+function loadDraggable() {
+	return load(() => draggablePromise, value => { draggablePromise = value; },
+		() => import(/* webpackChunkName: "position-draggable" */ "./draggable.js"));
+}
+
+/**
+ *
+ * @public
+ * @environment client
+ */
+function loadSnappable() {
+	return load(() => snappablePromise, value => { snappablePromise = value; },
+		() => import(/* webpackChunkName: "position-snappable" */ "./snappable.js"));
+}
+
+/**
+ *
+ * @public
+ * @environment client
+ */
+function loadPlacement() {
+	return load(() => placementPromise, value => { placementPromise = value; },
+		() => import(/* webpackChunkName: "position-placement" */ "./position.js"));
+}
+
+function reportError(element, error, feature) {
+	const EventConstructor = element?.ownerDocument?.defaultView?.CustomEvent || CustomEvent;
+	element?.dispatchEvent(new EventConstructor("position-error", {
+		bubbles: true,
+		detail: { error, feature }
+	}));
+}
+
+function loadForMutation({ target, attributeName }) {
+	if (target?.matches?.(draggableSelector) || attributeName === "draggable")
+		loadDraggable().catch(error => reportError(target, error, "draggable"));
+	if (target?.matches?.(snappableSelector) || ["draggable-query", "clonable-query", "droppable-query", "snappable-query", "position-reference"].includes(attributeName))
+		loadSnappable().catch(error => reportError(target, error, "snappable"));
+	if (target?.matches?.(placementSelector) || ["position-query", "position-element", "position-events", "position-box"].includes(attributeName))
+		loadPlacement().catch(error => reportError(target, error, "placement"));
+}
+
+observer.init([
+	{
+		name: "CoCreatePositionLoaderAddedNodes",
+		types: ["addedNodes"],
+		selector: [draggableSelector, snappableSelector, placementSelector].join(", "),
+		callback: loadForMutation
+	},
+	{
+		name: "CoCreatePositionLoaderAttributes",
+		types: ["attributes"],
+		attributeFilter: ["draggable", "draggable-query", "clonable-query", "droppable-query", "snappable-query", "position-reference", "position-query", "position-element", "position-events", "position-box"],
+		selector: [draggableSelector, snappableSelector, placementSelector].join(", "),
+		callback: loadForMutation
+	}
+]);
+
+function start() {
+	if (document.querySelector(draggableSelector)) loadDraggable().catch(() => {});
+	if (document.querySelector(snappableSelector)) loadSnappable().catch(() => {});
+	if (document.querySelector(placementSelector)) loadPlacement().catch(() => {});
+}
+
+start();
+
+/** Load and initialize the requested position feature modules.  * @public
+ * @environment client
+ */
+export function init() {
+	start();
+	return Promise.all([draggablePromise, snappablePromise, placementPromise].filter(Boolean));
+}
+
+/**
+ *
+ * @public
+ * @environment client
+ */
+export function initElement(element, options) {
+	return loadDraggable().then(module => module.initElement(element, options));
+}
+
+/**
+ *
+ * @public
+ * @environment client
+ */
+export function initElements(elements) {
+	return loadDraggable().then(module => module.initElements(elements));
+}
+
+export { loadDraggable, loadSnappable, loadPlacement };
+
+export default { init, initElement, initElements, loadDraggable, loadSnappable, loadPlacement };
+
+/**
+ *
+ * @name clonable-query
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name draggable
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name draggable-query
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name droppable-query
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name position-box
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name position-element
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name position-events
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name position-query
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name position-reference
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name snappable-query
+ * @kind attribute
+ * @environment client
+ */
+
+/**
+ * Declarative DOM positioning, dragging, snapping, and drag-and-drop for web interfaces.
+ *
+ * @module position
+ * @environment client
+ */
+
+/**
+ * Declarative selectors recognized by this module.
+ *
+ * @name declarative-selectors
+ * @kind member
+ * @selectors
+ * @environment client
+ * @example
+ * ```json
+ * [
+ *   "[draggable], [draggable-query], [clonable-query]",
+ *   "[droppable-query], [snappable-query], [position-reference]",
+ *   "[position-query], [position-element], [position-events], [position-box]"
+ * ]
+ * ```
+ */