@hypericon/mico 0.3.6 → 0.3.8

package/dist/components/dialog/dialog-manager.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dialogMgr = exports.DialogManager = void 0;
 const mithril_1 = __importDefault(require("mithril"));
+const utils_1 = require("../../utils");
 class DialogManager {
     get isOpen() { return this.currentDialog !== undefined; }
     constructor(options) {
@@ -65,11 +66,7 @@ class DialogManager {
                                 // console.log(ev);
                                 if (ev.target !== dom)
                                     return;
-                                const dialogRect = dom.getBoundingClientRect();
-                                const isInDialog = (ev.clientY >= dialogRect.top) &&
-                                    (ev.clientY <= dialogRect.bottom) &&
-                                    (ev.clientX >= dialogRect.left) &&
-                                    (ev.clientX <= dialogRect.right);
+                                const isInDialog = (0, utils_1.mouseWithinElement)(ev, dom);
                                 if (!isInDialog)
                                     manager.close();
                             });

package/dist/components/index.d.ts

@@ -2,5 +2,6 @@ export * from "./dialog";
 export * from "./drop-target";
 export * from "./icon";
 export * from "./markdown";
+export * from "./markdown-editor";
 export * from "./menu";
 export * from "./table";

package/dist/components/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./drop-target"), exports);
 // export * from "./form";
 __exportStar(require("./icon"), exports);
 __exportStar(require("./markdown"), exports);
+__exportStar(require("./markdown-editor"), exports);
 __exportStar(require("./menu"), exports);
 // export * from "./modal";
 // export * from "./pagination";

package/dist/components/markdown-editor/MarkdownEditor.d.ts

@@ -0,0 +1,19 @@
+import m from "mithril";
+import { MarkdownEditorState } from "./markdown-editor.state";
+export declare const MarkdownEditor: m.Component<{
+    /** The current markdown content as a string */
+    markdown: string;
+    /** Function called whenever the markdown string is edited */
+    onEdit: (markdown: string) => any;
+    /**
+     * Attempt to highlight syntax of code blocks
+     * @default false
+     */
+    highlight?: boolean;
+    /** @default true */
+    enableShortcuts?: boolean;
+    class?: string;
+    style?: string;
+}, {
+    state: MarkdownEditorState;
+}>;

package/dist/components/markdown-editor/MarkdownEditor.js

@@ -0,0 +1,202 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownEditor = void 0;
+const mithril_1 = __importStar(require("mithril"));
+const Icon_1 = require("../icon/Icon");
+const Markdown_1 = require("../markdown/Markdown");
+const menu_1 = require("../menu");
+const markdown_editor_state_1 = require("./markdown-editor.state");
+exports.MarkdownEditor = {
+    oninit({ attrs }) {
+        this.state = new markdown_editor_state_1.MarkdownEditorState(attrs.onEdit);
+    },
+    onremove() {
+        this.state.destroy();
+    },
+    onupdate({ attrs, dom }) {
+        if (this.state.isEditing && !this.state.editorContainerEl) {
+            this.state.editorContainerEl = [...dom.getElementsByClassName("editor-container")].at(0);
+        }
+        if (this.state.isEditing && !this.state.editorEl) {
+            this.state.editorEl = [...dom.getElementsByTagName("textarea")].at(0);
+        }
+        if (this.state.isEditing && !this.state.isEditingPrevious) {
+            const editorEl = [...dom.getElementsByTagName("textarea")].at(0);
+            editorEl === null || editorEl === void 0 ? void 0 : editorEl.focus();
+            editorEl === null || editorEl === void 0 ? void 0 : editorEl.setSelectionRange(0, 0);
+            if (editorEl)
+                this.state.editorEl = editorEl;
+            this.state.editorValue = attrs.markdown;
+            this.state.editValue = attrs.onEdit;
+            this.state.setSelection(0, 0);
+            setTimeout(() => {
+                (0, mithril_1.redraw)();
+            }, 1);
+        }
+        if (this.state.requestSelection && this.state.editorEl) {
+            this.state.editorEl.setSelectionRange(this.state.requestSelection.start, this.state.requestSelection.end);
+            this.state.requestSelection = undefined;
+            (0, mithril_1.redraw)();
+        }
+        this.state.isEditingPrevious = this.state.isEditing;
+    },
+    view({ attrs }) {
+        return (0, mithril_1.default)(".mico-markdown-editor", {
+            class: attrs.class,
+            style: attrs.style,
+        }, [
+            (!this.state.isEditing) ? [
+                (0, mithril_1.default)(".render-container", {
+                    tabindex: 0,
+                    onclick: () => {
+                        this.state.isEditing = true;
+                    },
+                }, [
+                    (0, mithril_1.default)(Markdown_1.Markdown, {
+                        highlight: attrs.highlight,
+                        markdown: attrs.markdown,
+                    }),
+                ]),
+            ] : [
+                (0, mithril_1.default)(".editor-container", [
+                    // Editor buttons
+                    (0, mithril_1.default)(".editor-buttons", [
+                        (0, mithril_1.default)(".editor-button-group", [
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+H",
+                                onclick: () => this.state.applyHeading(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "heading" })),
+                            (0, mithril_1.default)("button", {
+                                onclick: (ev) => menu_1.menuMgr.show(ev, [
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 1", onclick: () => this.state.applyHeading(1) }),
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 2", onclick: () => this.state.applyHeading(2) }),
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 3", onclick: () => this.state.applyHeading(3) }),
+                                    (0, mithril_1.default)(menu_1.MenuButton, { label: "Heading 4", onclick: () => this.state.applyHeading(4) }),
+                                ], {
+                                    noFlipH: true,
+                                    noFlipV: true,
+                                }),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "caret-down" })),
+                        ]),
+                        (0, mithril_1.default)(".editor-button-group", [
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+B",
+                                onclick: () => this.state.applyBold(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "bold" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+I",
+                                onclick: () => this.state.applyItalic(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "italic" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+C",
+                                onclick: () => this.state.applyCode(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "code" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+S",
+                                onclick: () => this.state.applyStrikethrough(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "strikethrough" })),
+                        ]),
+                        (0, mithril_1.default)(".editor-button-group", [
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+U",
+                                onclick: () => this.state.applyUnorderedList(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "list-ul" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+O",
+                                onclick: () => this.state.applyOrderedList(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "list-ol" })),
+                            (0, mithril_1.default)("button", {
+                                title: "Ctrl+Shift+L",
+                                onclick: () => this.state.applyLink(),
+                            }, (0, mithril_1.default)(Icon_1.Icon, { fas: "link" })),
+                        ]),
+                    ]),
+                    // Editor content
+                    (0, mithril_1.default)("textarea.editor-textarea", {
+                        rows: this.state.editorValue.split("\n").length + 1,
+                        value: this.state.editorValue,
+                        oninput: (e) => {
+                            this.state.editorValue = e.target.value;
+                            this.state.editValue(e.target.value);
+                        },
+                        onmousemove: (ev) => {
+                            const textareaEl = ev.currentTarget;
+                            this.state.setSelection(textareaEl.selectionStart, textareaEl.selectionEnd);
+                        },
+                        onkeyup: (ev) => {
+                            const textareaEl = ev.currentTarget;
+                            this.state.setSelection(textareaEl.selectionStart, textareaEl.selectionEnd);
+                        },
+                        onkeydown: (ev) => {
+                            const textareaEl = ev.currentTarget;
+                            this.state.setSelection(textareaEl.selectionStart, textareaEl.selectionEnd);
+                            if (ev.code === "Escape")
+                                this.state.isEditing = false;
+                            if (ev.ctrlKey && ev.shiftKey) {
+                                if (ev.key.toLowerCase() === "h") {
+                                    this.state.applyHeading();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "b") {
+                                    this.state.applyBold();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "i") {
+                                    this.state.applyItalic();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "c") {
+                                    this.state.applyCode();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "s") {
+                                    this.state.applyStrikethrough();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "u") {
+                                    this.state.applyUnorderedList();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "o") {
+                                    this.state.applyOrderedList();
+                                    ev.preventDefault();
+                                }
+                                if (ev.key.toLowerCase() === "l") {
+                                    this.state.applyLink();
+                                    ev.preventDefault();
+                                }
+                            }
+                            if (ev.key === "Tab") {
+                                this.state.applyIndent(ev.shiftKey);
+                                ev.preventDefault();
+                            }
+                        },
+                    }),
+                ]),
+            ],
+        ]);
+    }
+};

package/dist/components/markdown-editor/index.d.ts

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

package/dist/components/markdown-editor/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("./MarkdownEditor"), exports);

package/dist/components/markdown-editor/markdown-editor.state.d.ts

@@ -0,0 +1,31 @@
+import { Subscription } from "rxjs";
+export declare class MarkdownEditorState {
+    subs: Subscription;
+    isEditing: boolean;
+    isEditingPrevious: boolean;
+    editorValue: string;
+    editorEl: HTMLTextAreaElement | undefined;
+    editorContainerEl: HTMLDivElement | undefined;
+    editValue: (markdown: string) => any;
+    selectionStart: number;
+    selectionEnd: number;
+    requestSelection: {
+        start: number;
+        end: number;
+    } | undefined;
+    constructor(editValue: (markdown: string) => any);
+    private selectedText;
+    private findSelectedLines;
+    private findSelectedWord;
+    destroy(): void;
+    setSelection(start: number, end: number): void;
+    applyHeading(level?: number): void;
+    applyBold(): void;
+    applyItalic(): void;
+    applyCode(): void;
+    applyStrikethrough(): void;
+    applyUnorderedList(): void;
+    applyOrderedList(): void;
+    applyLink(): void;
+    applyIndent(backward?: boolean): void;
+}

package/dist/components/markdown-editor/markdown-editor.state.js

@@ -0,0 +1,259 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownEditorState = void 0;
+const rxjs_1 = require("rxjs");
+const utils_1 = require("../../utils");
+const mithril_1 = require("mithril");
+class MarkdownEditorState {
+    constructor(editValue) {
+        this.subs = new rxjs_1.Subscription();
+        this.isEditing = false;
+        this.isEditingPrevious = false;
+        this.editorValue = "";
+        this.editorEl = undefined;
+        this.editorContainerEl = undefined;
+        this.selectionStart = 0;
+        this.selectionEnd = 0;
+        this.editValue = editValue;
+        const onclick = (ev) => {
+            if (this.isEditing && this.editorContainerEl) {
+                if (!(0, utils_1.mouseWithinElement)(ev, this.editorContainerEl)) {
+                    this.isEditing = false;
+                    (0, mithril_1.redraw)();
+                }
+            }
+        };
+        document.addEventListener("click", onclick);
+        this.subs.add(() => document.removeEventListener("click", onclick));
+    }
+    selectedText() {
+        const selection = this.editorValue.slice(this.selectionStart, this.selectionEnd);
+        return selection;
+    }
+    findSelectedLines() {
+        // if (!this.editorEl) return [];
+        let linesStart = this.selectionStart;
+        let linesEnd = this.selectionEnd;
+        for (let i = this.selectionStart; i >= 0; i--) {
+            if (i > 1 && this.editorValue[i - 1] === "\n") {
+                linesStart = i;
+                break;
+            }
+            if (i === 0) {
+                linesStart = i;
+                break;
+            }
+        }
+        for (let i = this.selectionEnd; i < this.editorValue.length; i++) {
+            if (this.editorValue[i] === "\n" || i === 0) {
+                linesEnd = i;
+                break;
+            }
+        }
+        const selectedLinesString = this.editorValue.slice(linesStart, linesEnd);
+        // console.log("selectedLinesStr", linesStart, linesEnd, selectedLinesString);
+        let selectedLinesText = selectedLinesString.split("\n");
+        selectedLinesText = selectedLinesText.map((line, lineIndex) => {
+            return line + ((lineIndex <= (selectedLinesText.length - 2)) ? "\n" : "");
+        });
+        const lines = [];
+        let offset = linesStart;
+        for (let i = 0; i < selectedLinesText.length; i++) {
+            lines.push({
+                start: offset,
+                end: offset + selectedLinesText[i].length,
+                content: selectedLinesText[i],
+            });
+            offset = offset + selectedLinesText[i].length;
+        }
+        // console.log("lines", lines);
+        return lines;
+    }
+    findSelectedWord() {
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        for (let i = this.selectionStart; i >= 0; i--) {
+            if (i > 1 && (this.editorValue[i - 1] === " " || this.editorValue[i - 1] === "\n")) {
+                start = i;
+                break;
+            }
+            if (i === 0) {
+                start = i;
+                break;
+            }
+        }
+        for (let i = this.selectionEnd; i < this.editorValue.length; i++) {
+            if (this.editorValue[i] === "" || this.editorValue[i] === "\n" || i === 0) {
+                end = i;
+                break;
+            }
+        }
+        return {
+            start,
+            end,
+            content: this.editorValue.slice(start, end),
+        };
+    }
+    destroy() {
+        this.subs.unsubscribe();
+    }
+    setSelection(start, end) {
+        this.selectionStart = start;
+        this.selectionEnd = end;
+        const selection = this.editorValue.slice(start, end);
+        // console.log(start, end, selection);
+    }
+    applyHeading(level = 1) {
+        // console.log("addHeading", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const toInsert = "#".padEnd(level, "#") + " ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + toInsert.length;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyBold() {
+        // console.log("addBold", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "**" + value.slice(end);
+        value = value.slice(0, start) + "**" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyItalic() {
+        // console.log("addItalic", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "*" + value.slice(end);
+        value = value.slice(0, start) + "*" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyCode() {
+        // console.log("addCode", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "`" + value.slice(end);
+        value = value.slice(0, start) + "`" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyStrikethrough() {
+        // console.log("addStrikethrough", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+        }
+        let value = this.editorValue;
+        value = value.slice(0, end) + "~~" + value.slice(end);
+        value = value.slice(0, start) + "~~" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyUnorderedList() {
+        // console.log("addUnorderedList", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const toInsert = "- ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + 2;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyOrderedList() {
+        // console.log("addOrderedList", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            let toInsert = `${i + 1}. `;
+            value = value.slice(0, lines[i].start) + toInsert + value.slice(lines[i].start);
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = this.selectionStart + 3;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyLink() {
+        // console.log("addLink", "selection:", this.selectionStart, this.selectionEnd);
+        let start = this.selectionStart;
+        let end = this.selectionEnd;
+        let content = this.selectedText();
+        if (start === end) {
+            const word = this.findSelectedWord();
+            start = word.start;
+            end = word.end;
+            content = word.content;
+        }
+        const isUrl = content.startsWith("http") || content.startsWith("www");
+        let url = (Boolean(content) && isUrl) ? content : "https://example.com";
+        let value = this.editorValue;
+        value = value.slice(0, end) + `](${url})` + value.slice(end);
+        value = value.slice(0, start) + "[" + value.slice(start);
+        this.editorValue = value;
+        this.editValue(value);
+        const newSelection = start + 1;
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+    applyIndent(backward = false) {
+        // console.log("applyIndent", "selection:", this.selectionStart, this.selectionEnd);
+        let value = this.editorValue;
+        // const toInsert = "- ";
+        const lines = this.findSelectedLines();
+        for (let i = lines.length - 1; i >= 0; i--) {
+            if (backward) {
+                let newContent = lines[i].content;
+                if (newContent.startsWith(" "))
+                    newContent = newContent.slice(1);
+                if (newContent.startsWith(" "))
+                    newContent = newContent.slice(1);
+                value = value.slice(0, lines[i].start) + newContent + value.slice(lines[i].end);
+            }
+            else {
+                value = value.slice(0, lines[i].start) + "  " + value.slice(lines[i].start);
+            }
+        }
+        this.editorValue = value;
+        this.editValue(value);
+        let newSelection = this.selectionStart + (backward ? -2 : 2);
+        newSelection = Math.max(newSelection, lines[0].start);
+        this.requestSelection = { start: newSelection, end: newSelection };
+    }
+}
+exports.MarkdownEditorState = MarkdownEditorState;

package/dist/components/menu/Menu.d.ts

@@ -1,7 +1,14 @@
 import m from "mithril";
+export interface MenuOptions {
+    noFlipV?: boolean;
+    noFlipH?: boolean;
+    forceFlipV?: boolean;
+    forceFlipH?: boolean;
+}
 export declare const Menu: m.Component<{
     x: number | undefined;
     y: number | undefined;
+    options?: MenuOptions;
 }, {
     el?: HTMLDivElement;
 }>;

package/dist/components/menu/Menu.js

@@ -18,16 +18,24 @@ exports.Menu = {
     onupdate({ dom }) {
         // if (dom) this.el = dom as HTMLDivElement;
     },
-    view({ attrs, children, }) {
-        var _a, _b;
+    view({ attrs, children }) {
+        var _a, _b, _c, _d, _e, _f;
         const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
         const maxHeightPx = window.innerHeight / 2;
         const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
         const yPx = (_b = attrs.y) !== null && _b !== void 0 ? _b : 0;
-        const flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
-        const flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
+        let flipH = ((xPx + menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX) > window.innerWidth);
+        let flipV = menu_settings_1.MENU_SETTINGS.ANCHOR === "page"
             ? ((yPx + maxHeightPx - window.scrollY) > window.innerHeight)
             : ((yPx + maxHeightPx) > window.innerHeight);
+        if (((_c = attrs.options) === null || _c === void 0 ? void 0 : _c.noFlipH) === true)
+            flipH = false;
+        if (((_d = attrs.options) === null || _d === void 0 ? void 0 : _d.noFlipV) === true)
+            flipV = false;
+        if (((_e = attrs.options) === null || _e === void 0 ? void 0 : _e.forceFlipH) === true)
+            flipH = true;
+        if (((_f = attrs.options) === null || _f === void 0 ? void 0 : _f.forceFlipV) === true)
+            flipV = true;
         // console.log({
         //   "yPx": yPx,
         //   "maxHeightPx": maxHeightPx,

package/dist/components/menu/menu-manager.d.ts

@@ -1,4 +1,5 @@
 import m from "mithril";
+import { MenuOptions } from "./Menu";
 export declare class MenuManager {
     private containerEl;
     private _menuVnode;
@@ -15,7 +16,7 @@ export declare class MenuManager {
      * @param ev
      * @param menuContents
      */
-    show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive): Promise<void>;
+    show(ev: MouseEvent | undefined, menuContents: m.ChildArrayOrPrimitive, options?: MenuOptions): Promise<void>;
     hide(): void;
 }
 export declare const menuMgr: MenuManager;

package/dist/components/menu/menu-manager.js

@@ -48,7 +48,7 @@ class MenuManager {
      * @param ev
      * @param menuContents
      */
-    show(ev, menuContents) {
+    show(ev, menuContents, options) {
         return __awaiter(this, void 0, void 0, function* () {
             ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
             if (this.isOpen) {
@@ -60,6 +60,7 @@ class MenuManager {
             const menuVnode = (0, mithril_1.default)(Menu_1.Menu, {
                 x: ev === null || ev === void 0 ? void 0 : ev.clientX,
                 y: menu_settings_1.MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY,
+                options,
             }, [
                 menuContents,
             ]);

package/dist/utils/events.d.ts

@@ -1 +1,8 @@
 export declare function dragEventFiles(ev: DragEvent): File[];
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+export declare function mouseWithinElement(ev: MouseEvent, element: Element): boolean;

package/dist/utils/events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dragEventFiles = void 0;
+exports.mouseWithinElement = exports.dragEventFiles = void 0;
 function dragEventFiles(ev) {
     var _a, _b, _c;
     const files = [];
@@ -27,3 +27,18 @@ function dragEventFiles(ev) {
     return files;
 }
 exports.dragEventFiles = dragEventFiles;
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+function mouseWithinElement(ev, element) {
+    const elementRect = element.getBoundingClientRect();
+    const isWithin = (ev.clientY >= elementRect.top) &&
+        (ev.clientY <= elementRect.bottom) &&
+        (ev.clientX >= elementRect.left) &&
+        (ev.clientX <= elementRect.right);
+    return isWithin;
+}
+exports.mouseWithinElement = mouseWithinElement;

package/package.json

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