@hypericon/mico 0.3.19 → 0.3.20

package/dist/components/drag-handler/DragHandler.d.ts

@@ -0,0 +1,40 @@
+import m from "mithril";
+export interface DragHandlerAttrs {
+    /** Enable dragging this element */
+    enableDrag?: boolean;
+    /** Enable dropping dragged elements on this element */
+    enableDrop?: boolean;
+    /** Optionally specify what sort of effect should be allowed using this drag */
+    dragEffect?: "link" | "copy" | "none" | "copyLink" | "copyMove" | "linkMove" | "move" | "all" | "uninitialized";
+    dragData?: string | (() => string);
+    onDragStart?: (args: {
+        ev: DragEvent;
+        dragData?: string;
+    }) => any;
+    onDragOver?: (args: {
+        ev: DragEvent;
+        dragData?: string;
+    }) => any;
+    onDrop?: (args: {
+        ev: DragEvent;
+        dragData?: string;
+    }) => any;
+    /** Enable debug logging for events */
+    enableLogging?: boolean;
+    /** CSS classes to apply to the wrapper div */
+    class?: string;
+    /** CSS styles to apply to the wrapper div */
+    style?: string;
+    /** CSS classes to apply to the div while it is being dragged (if dragging is enabled) */
+    classDragging?: string;
+    /** CSS styles to apply to the div while it is being dragged (if dragging is enabled) */
+    styleDragging?: string;
+    /** CSS classes to apply to the div while it is being dragged over (if dropping is enabled) */
+    classDraggingOver?: string;
+    /** CSS styles to apply to the div while it is being dragged over (if dropping is enabled) */
+    styleDraggingOver?: string;
+}
+export declare const DragHandler: m.Component<DragHandlerAttrs, {
+    isDragging: boolean;
+    isDraggingOver: boolean;
+}>;

package/dist/components/drag-handler/DragHandler.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandler = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const DEFAULT_DATA_FORMAT = "application/mico-drag-handler";
+exports.DragHandler = {
+    oninit() {
+        this.isDragging = false;
+        this.isDraggingOver = false;
+    },
+    view({ attrs, children }) {
+        var _a, _b, _c, _d, _e, _f;
+        return (0, mithril_1.default)("", {
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${this.isDragging ? (_b = attrs.classDragging) !== null && _b !== void 0 ? _b : "" : ""} ${this.isDraggingOver ? (_c = attrs.classDraggingOver) !== null && _c !== void 0 ? _c : "" : ""}`,
+            style: `${(_d = attrs.style) !== null && _d !== void 0 ? _d : ""} ${this.isDragging ? (_e = attrs.classDragging) !== null && _e !== void 0 ? _e : "" : ""} ${this.isDraggingOver ? (_f = attrs.classDraggingOver) !== null && _f !== void 0 ? _f : "" : ""}`,
+            draggable: attrs.enableDrag,
+            ondragstart: (ev) => {
+                var _a, _b;
+                if (!attrs.enableDrag)
+                    return;
+                if (!ev.dataTransfer)
+                    return;
+                let dragData;
+                if (attrs.dragData !== undefined) {
+                    if (typeof attrs.dragData === "function") {
+                        dragData = (_a = attrs.dragData) === null || _a === void 0 ? void 0 : _a.call(attrs);
+                    }
+                    else {
+                        dragData = attrs.dragData;
+                    }
+                }
+                if (dragData !== undefined) {
+                    ev.dataTransfer.setData(DEFAULT_DATA_FORMAT, dragData);
+                }
+                if (attrs.dragEffect) {
+                    ev.dataTransfer.effectAllowed = attrs.dragEffect;
+                }
+                this.isDragging = true;
+                attrs.enableLogging && console.log(`start dragging, effect: ${ev.dataTransfer.effectAllowed}, data:`, dragData);
+                (_b = attrs.onDragStart) === null || _b === void 0 ? void 0 : _b.call(attrs, { ev, dragData });
+            },
+            ondrag: (ev) => {
+                // attrs.enableLogging && console.log(`on drag`, item.data);
+            },
+            // ondragenter: (ev: DragEvent) => {
+            //   ev.preventDefault();
+            //   if (!attrs.enableDrop) return false;
+            //   if (attrs.enableLogging) {
+            //     const dragData = ev.dataTransfer?.getData(DEFAULT_DATA_FORMAT);
+            //     console.log(`drag enter, effect: ${attrs.dragEffect}, data:`, dragData);
+            //   }
+            //   this.isDraggingOver = true;
+            // },
+            ondragover: (ev) => {
+                var _a, _b, _c;
+                ev.preventDefault();
+                if (!attrs.enableDrop)
+                    return false;
+                // const overDiv = ev.currentTarget as HTMLElement;
+                // const targetRect = overDiv.getBoundingClientRect();
+                // const topToMouse = ev.clientY - targetRect.top;
+                // const isAbove = topToMouse < (targetRect.height - topToMouse);
+                // this.isTargettingAbove = isAbove;
+                this.isDraggingOver = true;
+                const dragData = (_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(DEFAULT_DATA_FORMAT);
+                attrs.enableLogging && console.log(`drag over, effect: ${(_b = ev.dataTransfer) === null || _b === void 0 ? void 0 : _b.effectAllowed}, data:`, dragData);
+                (_c = attrs.onDragOver) === null || _c === void 0 ? void 0 : _c.call(attrs, { ev, dragData });
+                return false;
+            },
+            ondragleave: (ev) => {
+                this.isDraggingOver = false;
+            },
+            ondrop: (ev) => {
+                var _a, _b, _c;
+                ev.stopPropagation();
+                ev.preventDefault();
+                if (!attrs.enableDrop)
+                    return;
+                // if (ev.dataTransfer) {
+                //   ev.dataTransfer.dropEffect = "move";
+                //   const movedNodeData = JSON.parse(ev.dataTransfer.getData(DEFAULT_DATA_FORMAT)) as TNodeData;
+                //   attrs.enableLogging && console.log(`on drop`, movedNodeData, "on", node.data);
+                //   // attrs.reorderfinish?.();
+                //   const droppedOnSelf = compareObjects(movedNodeData, node.data);
+                //   if (!droppedOnSelf) {
+                //     attrs.onreorder?.({ moved: movedNodeData, target: node.data, above: this.isTargettingAbove });
+                //   }
+                // }
+                this.isDragging = false;
+                this.isDraggingOver = false;
+                const dragData = (_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData(DEFAULT_DATA_FORMAT);
+                attrs.enableLogging && console.log(`on drop, effect:`, (_b = ev.dataTransfer) === null || _b === void 0 ? void 0 : _b.dropEffect, "dragData:", dragData);
+                (_c = attrs.onDrop) === null || _c === void 0 ? void 0 : _c.call(attrs, { ev, dragData });
+            },
+            ondragend: (ev) => {
+                var _a;
+                attrs.enableLogging && console.log(`drag end, dropEffect:`, (_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.dropEffect);
+                // "move" on success, "none" on failure/cancellation
+                // attrs.reorderfinish?.();
+                this.isDragging = false;
+                this.isDraggingOver = false;
+            },
+        }, [
+            children,
+        ]);
+    }
+};

package/dist/components/drag-handler/index.d.ts

@@ -0,0 +1 @@
+export * from "./DragHandler";

package/dist/components/drag-handler/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DragHandler"), exports);

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./dialog";
+export * from "./drag-handler";
 export * from "./drop-target";
 export * from "./icon";
 export * from "./markdown";

package/dist/components/index.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // export * from "./data-table";
 __exportStar(require("./dialog"), exports);
 // export * from "./drawer";
+__exportStar(require("./drag-handler"), exports);
 __exportStar(require("./drop-target"), exports);
 // export * from "./form";
 __exportStar(require("./icon"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",