tycho-components 0.8.24 → 0.9.0

package/dist/CytoscapeMenu/CytoscapeMenuCanvas.d.ts

@@ -0,0 +1,18 @@
+import cytoscape, { Core } from 'cytoscape';
+import type { CytoscapeContextMenuOptions, MenuItemOption } from './constants';
+import './style.scss';
+export interface CytoscapeMenuCanvasProps {
+    /** Unique id for the container element */
+    id?: string;
+    /** Cytoscape elements (nodes and edges) */
+    elements?: cytoscape.ElementDefinition[];
+    /** Context menu options */
+    menuItems?: MenuItemOption[];
+    /** Called when cytoscape instance is ready */
+    onReady?: (cy: Core) => void;
+    /** Additional context menu options */
+    contextMenuOptions?: Omit<CytoscapeContextMenuOptions, 'menuItems'>;
+    /** Container height */
+    height?: string | number;
+}
+export default function CytoscapeMenuCanvas({ id, elements, menuItems, onReady, contextMenuOptions, height, }: CytoscapeMenuCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/CytoscapeMenu/CytoscapeMenuCanvas.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cytoscape from 'cytoscape';
+import { useEffect, useRef } from 'react';
+import { registerCytoscapeContextMenus } from './index';
+import './style.scss';
+registerCytoscapeContextMenus(cytoscape);
+const DEFAULT_ELEMENTS = [
+    { data: { id: 'a', label: 'Node A' } },
+    { data: { id: 'b', label: 'Node B' } },
+    { data: { id: 'c', label: 'Node C' } },
+    { data: { id: 'ab', source: 'a', target: 'b' } },
+    { data: { id: 'bc', source: 'b', target: 'c' } },
+];
+export default function CytoscapeMenuCanvas({ id = 'cytoscape-menu-canvas', elements = DEFAULT_ELEMENTS, menuItems = [], onReady, contextMenuOptions = {}, height = '400px', }) {
+    const cyRef = useRef(null);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const container = document.getElementById(id);
+        if (!container)
+            return;
+        container.innerHTML = '';
+        const cy = cytoscape({
+            container,
+            elements,
+            style: [
+                {
+                    selector: 'node',
+                    style: {
+                        label: 'data(label)',
+                        'background-color': '#4a90d9',
+                        color: '#fff',
+                        'text-valign': 'center',
+                        'text-halign': 'center',
+                        padding: '8px',
+                    },
+                },
+                {
+                    selector: 'edge',
+                    style: {
+                        width: 2,
+                        'line-color': '#ccc',
+                        'target-arrow-color': '#ccc',
+                        'target-arrow-shape': 'triangle',
+                        'curve-style': 'bezier',
+                    },
+                },
+            ],
+            layout: { name: 'grid' },
+        });
+        const menuOptions = {
+            menuItems: menuItems.length > 0 ? menuItems : [
+                {
+                    id: 'remove',
+                    content: 'Remove',
+                    tooltipText: 'Remove element',
+                    selector: 'node, edge',
+                    onClickFunction: (event) => {
+                        event.target.remove();
+                    },
+                    hasTrailingDivider: true,
+                },
+                {
+                    id: 'select',
+                    content: 'Select',
+                    tooltipText: 'Select element',
+                    selector: 'node, edge',
+                    onClickFunction: (event) => {
+                        cy.elements().unselect();
+                        event.target.select();
+                    },
+                },
+                {
+                    id: 'fit',
+                    content: 'Fit to view',
+                    tooltipText: 'Fit graph to view',
+                    selector: 'core',
+                    coreAsWell: true,
+                    onClickFunction: () => {
+                        cy.fit();
+                    },
+                },
+            ],
+            ...contextMenuOptions,
+        };
+        const contextMenusInstance = cy.contextMenus(menuOptions);
+        cyRef.current = cy;
+        onReady?.(cy);
+        return () => {
+            contextMenusInstance.destroy();
+            cy.destroy();
+            cyRef.current = null;
+        };
+    }, [id, elements, menuItems, contextMenuOptions, onReady]);
+    return (_jsx("div", { ref: containerRef, id: id, style: { height: typeof height === 'number' ? `${height}px` : height, width: '100%' }, className: "cytoscape-menu-canvas" }));
+}

package/dist/CytoscapeMenu/constants.d.ts

@@ -0,0 +1,38 @@
+export declare const CXT_MENU_CSS_CLASS = "cy-context-menus-cxt-menu";
+export declare const MENUITEM_CSS_CLASS = "cy-context-menus-cxt-menuitem";
+export declare const DIVIDER_CSS_CLASS = "cy-context-menus-divider";
+export declare const INDICATOR_CSS_CLASS = "cy-context-menus-submenu-indicator";
+export interface MenuItemImage {
+    src: string;
+    width: number;
+    height: number;
+    y: string;
+    x: string;
+}
+import type { EventObject } from 'cytoscape';
+export interface MenuItemOption {
+    id: string;
+    content: string;
+    tooltipText?: string;
+    selector: string;
+    disabled?: boolean;
+    image?: MenuItemImage;
+    show?: boolean;
+    submenu?: MenuItemOption[];
+    coreAsWell?: boolean;
+    onClickFunction?: (event: EventObject) => void;
+    hasTrailingDivider?: boolean;
+}
+export interface SubmenuIndicatorOption {
+    src: string;
+    width: number;
+    height: number;
+}
+export interface CytoscapeContextMenuOptions {
+    evtType?: string;
+    menuItems?: MenuItemOption[];
+    menuItemClasses?: string[];
+    contextMenuClasses?: string[];
+    submenuIndicator?: SubmenuIndicatorOption;
+}
+export declare const DEFAULT_OPTS: CytoscapeContextMenuOptions;

package/dist/CytoscapeMenu/constants.js

@@ -0,0 +1,15 @@
+export const CXT_MENU_CSS_CLASS = 'cy-context-menus-cxt-menu';
+export const MENUITEM_CSS_CLASS = 'cy-context-menus-cxt-menuitem';
+export const DIVIDER_CSS_CLASS = 'cy-context-menus-divider';
+export const INDICATOR_CSS_CLASS = 'cy-context-menus-submenu-indicator';
+export const DEFAULT_OPTS = {
+    evtType: 'cxttap',
+    menuItems: [],
+    menuItemClasses: [MENUITEM_CSS_CLASS],
+    contextMenuClasses: [CXT_MENU_CSS_CLASS],
+    submenuIndicator: {
+        src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48cGF0aCBmaWxsPSIjNjY2IiBkPSJNNCA0IEw4IDggTDQgMTIiLz48L3N2Zz4=',
+        width: 12,
+        height: 12,
+    },
+};

package/dist/CytoscapeMenu/context-menu.d.ts

@@ -0,0 +1,78 @@
+import type { EventObject } from 'cytoscape';
+import type { MenuItemOption } from './constants';
+export interface Scratchpad {
+    cxtMenuItemClasses: string;
+    cxtMenuClasses: string;
+    submenuIndicatorGen: () => HTMLImageElement;
+    currentCyEvent?: EventObject;
+    [key: string]: unknown;
+}
+export declare class MenuItem extends HTMLButtonElement {
+    onMenuItemClick: (event: Event) => void;
+    data: Record<string, unknown>;
+    clickFns: (() => void)[];
+    selector: string;
+    hasTrailingDivider?: boolean;
+    show: boolean;
+    coreAsWell: boolean;
+    scratchpad: Scratchpad;
+    onClickFunction?: (event: EventObject) => void;
+    submenu?: MenuItemList;
+    indicator?: HTMLImageElement;
+    mouseEnterHandler?: (event: MouseEvent) => void;
+    mouseLeaveHandler?: (event: MouseEvent) => void;
+    constructor(params: MenuItemOption, onMenuItemClick: (event: Event) => void, scratchpad: Scratchpad);
+    bindOnClickFunction(onClickFn: () => void): void;
+    unbindOnClickFunctions(): void;
+    enable(): void;
+    disable(): void;
+    hide(): void;
+    getHasTrailingDivider(): boolean;
+    setHasTrailingDivider(status: boolean): void;
+    hasSubmenu(): boolean;
+    appendSubmenuItem(menuItem: MenuItem, before?: Element): void;
+    isClickable(): boolean;
+    display(): void;
+    isVisible(): boolean;
+    removeSubmenu(): void;
+    detachSubmenu(): void;
+    _onMouseEnter(_event: MouseEvent): void;
+    _onMouseLeave(event: MouseEvent): void;
+    _createSubmenu(items?: MenuItemOption[]): void;
+    _getMenuItemClassStr(classStr: string, hasTrailingDivider?: boolean): string;
+    static define(): void;
+}
+export declare class MenuItemList extends HTMLDivElement {
+    onMenuItemClick: (event: Event) => void;
+    scratchpad: Scratchpad;
+    constructor(onMenuItemClick: (event: Event) => void, scratchpad: Scratchpad);
+    hide(): void;
+    display(): void;
+    isVisible(): boolean;
+    hideMenuItems(): void;
+    hideSubmenus(): void;
+    appendMenuItem(menuItem: MenuItem, before?: Element): void;
+    moveBefore(menuItem: MenuItem, before: MenuItem): void;
+    removeAllMenuItems(): void;
+    _removeImmediateMenuItem(menuItem: MenuItem): void;
+    _detachImmediateMenuItem(menuItem: MenuItem): boolean;
+    _performBindings(menuItem: MenuItem): void;
+    _bindOnClick(onClickFn: (event: EventObject) => void): () => void;
+    static define(): void;
+}
+export declare class ContextMenu extends MenuItemList {
+    constructor(onMenuItemClick: () => void, scratchpad: Scratchpad);
+    removeMenuItem(menuItem: MenuItem): void;
+    appendMenuItem(menuItem: MenuItem, before?: Element): void;
+    insertMenuItem(menuItem: MenuItem, { before, parent }?: {
+        before?: MenuItem;
+        parent?: MenuItem;
+    }): void;
+    moveBefore(menuItem: MenuItem, before: MenuItem): void;
+    moveToSubmenu(menuItem: MenuItem, parent?: MenuItem | null, options?: {
+        selector?: string;
+        coreAsWell?: boolean;
+    } | null): void;
+    ensureDoesntContain(id: string): void;
+    static define(): void;
+}

package/dist/CytoscapeMenu/context-menu.js

@@ -0,0 +1,408 @@
+import { setBooleanAttribute, isIn, getDimensionsHidden, defineCustomElement, } from './utils';
+import { DIVIDER_CSS_CLASS } from './constants';
+function stopEvent(event) {
+    event.preventDefault();
+    event.stopPropagation();
+}
+export class MenuItem extends HTMLButtonElement {
+    constructor(params, onMenuItemClick, scratchpad) {
+        super();
+        this.clickFns = [];
+        super.setAttribute('id', params.id);
+        const className = this._getMenuItemClassStr(scratchpad['cxtMenuItemClasses'], params.hasTrailingDivider);
+        super.setAttribute('class', className);
+        super.setAttribute('title', params.tooltipText ?? '');
+        if (params.disabled) {
+            setBooleanAttribute(this, 'disabled', true);
+        }
+        if (params.image) {
+            const img = document.createElement('img');
+            img.src = params.image.src;
+            img.width = params.image.width;
+            img.height = params.image.height;
+            img.style.position = 'absolute';
+            img.style.top = params.image.y + 'px';
+            img.style.left = params.image.x + 'px';
+            super.appendChild(img);
+        }
+        this.innerHTML += params.content;
+        this.onMenuItemClick = onMenuItemClick;
+        this.data = {};
+        this.clickFns = [];
+        this.selector = params.selector;
+        this.hasTrailingDivider = params.hasTrailingDivider;
+        this.show = typeof params.show === 'undefined' || params.show;
+        this.coreAsWell = params.coreAsWell || false;
+        this.scratchpad = scratchpad;
+        if (typeof params.onClickFunction === 'undefined' &&
+            typeof params.submenu === 'undefined') {
+            throw new Error('A menu item must either have click function or a submenu or both');
+        }
+        this.onClickFunction = params.onClickFunction;
+        if (params.submenu instanceof Array) {
+            this._createSubmenu(params.submenu);
+        }
+        super.addEventListener('mousedown', stopEvent);
+        super.addEventListener('mouseup', stopEvent);
+        super.addEventListener('touchstart', stopEvent);
+        super.addEventListener('touchend', stopEvent);
+    }
+    bindOnClickFunction(onClickFn) {
+        this.clickFns.push(onClickFn);
+        super.addEventListener('click', onClickFn);
+    }
+    unbindOnClickFunctions() {
+        for (const onClickFn of this.clickFns) {
+            super.removeEventListener('click', onClickFn);
+        }
+        this.clickFns = [];
+    }
+    enable() {
+        setBooleanAttribute(this, 'disabled', false);
+        if (this.hasSubmenu() && this.mouseEnterHandler) {
+            this.addEventListener('mouseenter', this.mouseEnterHandler);
+        }
+    }
+    disable() {
+        setBooleanAttribute(this, 'disabled', true);
+        if (this.hasSubmenu() && this.mouseEnterHandler) {
+            this.removeEventListener('mouseenter', this.mouseEnterHandler);
+        }
+    }
+    hide() {
+        this.show = false;
+        this.style.display = 'none';
+    }
+    getHasTrailingDivider() {
+        return this.hasTrailingDivider ? true : false;
+    }
+    setHasTrailingDivider(status) {
+        this.hasTrailingDivider = status;
+    }
+    hasSubmenu() {
+        return this.submenu instanceof MenuItemList;
+    }
+    appendSubmenuItem(menuItem, before) {
+        if (!this.hasSubmenu()) {
+            this._createSubmenu();
+        }
+        this.submenu.appendMenuItem(menuItem, before);
+    }
+    isClickable() {
+        return this.onClickFunction !== undefined;
+    }
+    display() {
+        this.show = true;
+        this.style.display = 'block';
+    }
+    isVisible() {
+        return this.show === true && this.style.display !== 'none';
+    }
+    removeSubmenu() {
+        if (this.hasSubmenu()) {
+            this.submenu.removeAllMenuItems();
+            this.detachSubmenu();
+        }
+    }
+    detachSubmenu() {
+        if (this.hasSubmenu()) {
+            this.removeChild(this.submenu);
+            this.removeChild(this.indicator);
+            this.removeEventListener('mouseenter', this.mouseEnterHandler);
+            this.removeEventListener('mouseleave', this.mouseLeaveHandler);
+            this.submenu = undefined;
+            this.indicator = undefined;
+        }
+    }
+    _onMouseEnter(_event) {
+        const rect = this.getBoundingClientRect();
+        const submenuRect = getDimensionsHidden(this.submenu);
+        const exceedsRight = rect.right + submenuRect.width > window.innerWidth;
+        const exceedsBottom = rect.top + submenuRect.height > window.innerHeight;
+        if (!exceedsRight && !exceedsBottom) {
+            this.submenu.style.left = this.clientWidth + 'px';
+            this.submenu.style.top = '0px';
+            this.submenu.style.right = 'auto';
+            this.submenu.style.bottom = 'auto';
+        }
+        else if (exceedsRight && !exceedsBottom) {
+            this.submenu.style.right = this.clientWidth + 'px';
+            this.submenu.style.top = '0px';
+            this.submenu.style.left = 'auto';
+            this.submenu.style.bottom = 'auto';
+        }
+        else if (exceedsRight && exceedsBottom) {
+            this.submenu.style.right = this.clientWidth + 'px';
+            this.submenu.style.bottom = '0px';
+            this.submenu.style.top = 'auto';
+            this.submenu.style.left = 'auto';
+        }
+        else {
+            this.submenu.style.left = this.clientWidth + 'px';
+            this.submenu.style.bottom = '0px';
+            this.submenu.style.right = 'auto';
+            this.submenu.style.top = 'auto';
+        }
+        this.submenu.display();
+        const visibleItems = Array.from(this.submenu.children).filter((item) => {
+            if (item instanceof MenuItem)
+                return item.isVisible();
+            return false;
+        });
+        const length = visibleItems.length;
+        visibleItems.forEach((item, index) => {
+            if (!(item instanceof MenuItem))
+                return;
+            if (index < length - 1 && item.getHasTrailingDivider()) {
+                item.classList.add(DIVIDER_CSS_CLASS);
+            }
+            else if (item.getHasTrailingDivider()) {
+                item.classList.remove(DIVIDER_CSS_CLASS);
+            }
+        });
+    }
+    _onMouseLeave(event) {
+        const pos = { x: event.clientX, y: event.clientY };
+        if (!isIn(pos, this.submenu)) {
+            this.submenu.hide();
+        }
+    }
+    _createSubmenu(items = []) {
+        this.indicator = this.scratchpad['submenuIndicatorGen']();
+        this.submenu = new MenuItemList(this.onMenuItemClick, this.scratchpad);
+        this.appendChild(this.indicator);
+        this.appendChild(this.submenu);
+        for (const item of items) {
+            const menuItem = new MenuItem(item, this.onMenuItemClick, this.scratchpad);
+            this.submenu.appendMenuItem(menuItem);
+        }
+        this.mouseEnterHandler = this._onMouseEnter.bind(this);
+        this.mouseLeaveHandler = this._onMouseLeave.bind(this);
+        this.addEventListener('mouseenter', this.mouseEnterHandler);
+        this.addEventListener('mouseleave', this.mouseLeaveHandler);
+    }
+    _getMenuItemClassStr(classStr, hasTrailingDivider) {
+        return hasTrailingDivider
+            ? classStr + ' ' + DIVIDER_CSS_CLASS
+            : classStr;
+    }
+    static define() {
+        defineCustomElement('ctx-menu-item', MenuItem, 'button');
+    }
+}
+export class MenuItemList extends HTMLDivElement {
+    constructor(onMenuItemClick, scratchpad) {
+        super();
+        super.setAttribute('class', scratchpad['cxtMenuClasses']);
+        this.style.position = 'absolute';
+        this.onMenuItemClick = onMenuItemClick;
+        this.scratchpad = scratchpad;
+    }
+    hide() {
+        if (this.isVisible()) {
+            this.hideSubmenus();
+            this.style.display = 'none';
+        }
+    }
+    display() {
+        this.style.display = 'block';
+    }
+    isVisible() {
+        return this.style.display !== 'none';
+    }
+    hideMenuItems() {
+        for (const item of this.children) {
+            if (item instanceof HTMLElement) {
+                item.style.display = 'none';
+            }
+            else {
+                console.warn(`${item} is not a HTMLElement`);
+            }
+        }
+    }
+    hideSubmenus() {
+        for (const menuItem of this.children) {
+            if (menuItem instanceof MenuItem) {
+                if (menuItem.submenu) {
+                    menuItem.submenu.hide();
+                }
+            }
+        }
+    }
+    appendMenuItem(menuItem, before) {
+        if (typeof before !== 'undefined') {
+            if (before.parentNode === this) {
+                this.insertBefore(menuItem, before);
+            }
+            else {
+                throw new Error(`The item with id='${before.id}' is not a child of the context menu`);
+            }
+        }
+        else {
+            this.appendChild(menuItem);
+        }
+        if (menuItem.isClickable()) {
+            this._performBindings(menuItem);
+        }
+    }
+    moveBefore(menuItem, before) {
+        if (menuItem.parentNode !== this) {
+            throw new Error(`The item with id='${menuItem.id}' is not a child of context menu`);
+        }
+        if (before.parentNode !== this) {
+            throw new Error(`The item with id='${before.id}' is not a child of context menu`);
+        }
+        this.removeChild(menuItem);
+        this.insertBefore(menuItem, before);
+    }
+    removeAllMenuItems() {
+        while (this.firstChild) {
+            const child = this.lastChild;
+            if (child instanceof MenuItem) {
+                this._removeImmediateMenuItem(child);
+            }
+            else {
+                console.warn('Found non menu item in the context menu: ', child);
+                this.removeChild(child);
+            }
+        }
+    }
+    _removeImmediateMenuItem(menuItem) {
+        if (this._detachImmediateMenuItem(menuItem)) {
+            menuItem.detachSubmenu();
+            menuItem.unbindOnClickFunctions();
+        }
+        else {
+            throw new Error(`menu item(id=${menuItem.id}) is not in the context menu`);
+        }
+    }
+    _detachImmediateMenuItem(menuItem) {
+        if (menuItem.parentNode === this) {
+            this.removeChild(menuItem);
+            if (this.children.length <= 0) {
+                const parent = this.parentNode;
+                if (parent instanceof MenuItem) {
+                    parent.detachSubmenu();
+                }
+            }
+            return true;
+        }
+        return false;
+    }
+    _performBindings(menuItem) {
+        const callback = this._bindOnClick(menuItem.onClickFunction);
+        menuItem.bindOnClickFunction(callback);
+        menuItem.bindOnClickFunction(this.onMenuItemClick);
+    }
+    _bindOnClick(onClickFn) {
+        return () => {
+            const event = this.scratchpad['currentCyEvent'];
+            onClickFn(event);
+        };
+    }
+    static define() {
+        defineCustomElement('menu-item-list', MenuItemList, 'div');
+    }
+}
+export class ContextMenu extends MenuItemList {
+    constructor(onMenuItemClick, scratchpad) {
+        super(onMenuItemClick, scratchpad);
+        this.onMenuItemClick = (event) => {
+            stopEvent(event);
+            this.hide();
+            onMenuItemClick();
+        };
+    }
+    removeMenuItem(menuItem) {
+        const parent = menuItem.parentElement;
+        if (parent instanceof MenuItemList && this.contains(parent)) {
+            parent._removeImmediateMenuItem(menuItem);
+        }
+    }
+    appendMenuItem(menuItem, before) {
+        this.ensureDoesntContain(menuItem.id);
+        super.appendMenuItem(menuItem, before);
+    }
+    insertMenuItem(menuItem, { before, parent } = {}) {
+        this.ensureDoesntContain(menuItem.id);
+        if (typeof before !== 'undefined') {
+            if (this.contains(before)) {
+                const parentNode = before.parentNode;
+                if (parentNode instanceof MenuItemList) {
+                    parentNode.appendMenuItem(menuItem, before);
+                }
+                else {
+                    throw new Error(`Parent of before(id=${before.id}) is not a submenu`);
+                }
+            }
+            else {
+                throw new Error(`before(id=${before.id}) is not in the context menu`);
+            }
+        }
+        else if (typeof parent !== 'undefined') {
+            if (this.contains(parent)) {
+                parent.appendSubmenuItem(menuItem);
+            }
+            else {
+                throw new Error(`parent(id=${parent.id}) is not a descendant of the context menu`);
+            }
+        }
+        else {
+            this.appendMenuItem(menuItem);
+        }
+    }
+    moveBefore(menuItem, before) {
+        const parent = menuItem.parentElement;
+        if (this.contains(parent)) {
+            if (this.contains(before)) {
+                parent.removeChild(menuItem);
+                this.insertMenuItem(menuItem, { before });
+            }
+            else {
+                throw new Error(`before(id=${before.id}) is not in the context menu`);
+            }
+        }
+        else {
+            throw new Error(`parent(id=${parent?.id}) is not in the context menu`);
+        }
+    }
+    moveToSubmenu(menuItem, parent = null, options = null) {
+        const oldParent = menuItem.parentElement;
+        if (oldParent instanceof MenuItemList) {
+            if (this.contains(oldParent)) {
+                if (parent !== null) {
+                    if (this.contains(parent)) {
+                        oldParent._detachImmediateMenuItem(menuItem);
+                        parent.appendSubmenuItem(menuItem);
+                    }
+                    else {
+                        throw new Error(`parent(id=${parent.id}) is not in the context menu`);
+                    }
+                }
+                else {
+                    if (options !== null) {
+                        menuItem.selector = options.selector ?? menuItem.selector;
+                        menuItem.coreAsWell = options.coreAsWell ?? menuItem.coreAsWell;
+                    }
+                    oldParent._detachImmediateMenuItem(menuItem);
+                    this.appendMenuItem(menuItem);
+                }
+            }
+            else {
+                throw new Error(`parent of the menu item(id=${oldParent.id}) is not in the context menu`);
+            }
+        }
+        else {
+            throw new Error(`current parent(id=${oldParent?.id}) is not a submenu`);
+        }
+    }
+    ensureDoesntContain(id) {
+        const elem = document.getElementById(id);
+        if (typeof elem !== 'undefined' && elem && this.contains(elem)) {
+            throw new Error(`There is already an element with id=${id} in the context menu`);
+        }
+    }
+    static define() {
+        defineCustomElement('ctx-menu', ContextMenu, 'div');
+    }
+}

package/dist/CytoscapeMenu/cytoscape-context-menus.d.ts

@@ -0,0 +1,22 @@
+import type { Core } from 'cytoscape';
+import type { CytoscapeContextMenuOptions, MenuItemOption } from './constants';
+export interface ContextMenusInstance {
+    isActive: () => boolean;
+    appendMenuItem: (item: MenuItemOption, parentID?: string) => Core;
+    appendMenuItems: (items: MenuItemOption[], parentID?: string) => Core;
+    removeMenuItem: (itemID: string) => Core;
+    hide: () => void;
+    setTrailingDivider: (itemID: string, status: boolean) => Core;
+    insertBeforeMenuItem: (item: MenuItemOption, existingItemID: string) => Core;
+    moveToSubmenu: (itemID: string, options?: string | {
+        coreAsWell?: boolean;
+        selector?: string;
+    }) => Core;
+    moveBeforeOtherMenuItem: (itemID: string, existingItemID: string) => Core;
+    disableMenuItem: (itemID: string) => Core;
+    enableMenuItem: (itemID: string) => Core;
+    hideMenuItem: (itemID: string) => Core;
+    showMenuItem: (itemID: string) => Core;
+    destroy: () => Core;
+}
+export declare function contextMenus(this: Core, opts: CytoscapeContextMenuOptions | 'get'): ContextMenusInstance;

package/dist/CytoscapeMenu/cytoscape-context-menus.js

@@ -0,0 +1,328 @@
+import * as utils from './utils';
+import { DEFAULT_OPTS, DIVIDER_CSS_CLASS, INDICATOR_CSS_CLASS, } from './constants';
+import { MenuItem, ContextMenu, MenuItemList } from './context-menu';
+export function contextMenus(opts) {
+    const cy = this;
+    if (!cy.scratch('cycontextmenus')) {
+        cy.scratch('cycontextmenus', {});
+    }
+    const getScratchProp = (propname) => cy.scratch('cycontextmenus')[propname];
+    const setScratchProp = (propname, value) => (cy.scratch('cycontextmenus')[propname] = value);
+    let cxtMenu = getScratchProp('cxtMenu');
+    let options = getScratchProp('options');
+    const getVariation = (position) => {
+        if (typeof position === 'undefined')
+            return { x: 0, y: 0 };
+        return { x: -200, y: 50 };
+    };
+    const addPositionToEvent = (event, position) => {
+        if (typeof position === 'undefined')
+            return;
+        const cyPos = event.position || event.cyPosition;
+        if (typeof cyPos === 'undefined') {
+            event.position = position;
+        }
+        const renderedPos = event.renderedPosition ||
+            event.cyRenderedPosition;
+        if (typeof renderedPos === 'undefined') {
+            event.renderedPosition = position;
+        }
+    };
+    const bindOnCxttap = () => {
+        const onCxttap = (event, position, someNode) => {
+            if (typeof someNode !== 'undefined') {
+                event.data = { node: someNode };
+            }
+            setScratchProp('currentCyEvent', event);
+            adjustCxtMenu(event, position);
+            const target = event.target || event.cyTarget;
+            for (const menuItem of cxtMenu.children) {
+                if (menuItem instanceof MenuItem) {
+                    const shouldDisplay = target === cy
+                        ? menuItem.coreAsWell
+                        : target.is(menuItem.selector);
+                    if (shouldDisplay && menuItem.show) {
+                        cxtMenu.display();
+                        setScratchProp('anyVisibleChild', true);
+                        menuItem.display();
+                    }
+                }
+            }
+            const visibleItems = Array.from(cxtMenu.children).filter((item) => {
+                if (item instanceof MenuItem)
+                    return item.isVisible();
+                return false;
+            });
+            const length = visibleItems.length;
+            visibleItems.forEach((item, index) => {
+                if (!(item instanceof MenuItem))
+                    return;
+                if (index < length - 1 && item.getHasTrailingDivider()) {
+                    item.classList.add(DIVIDER_CSS_CLASS);
+                }
+                else if (item.getHasTrailingDivider()) {
+                    item.classList.remove(DIVIDER_CSS_CLASS);
+                }
+            });
+            if (!getScratchProp('anyVisibleChild') &&
+                utils.isElementVisible(cxtMenu)) {
+                cxtMenu.hide();
+            }
+        };
+        cy.on(options.evtType, onCxttap);
+        setScratchProp('onCxttap', onCxttap);
+    };
+    const bindCyEvents = () => {
+        const eventCyTapStart = (event) => {
+            if (cxtMenu.contains(event.originalEvent.target)) {
+                return false;
+            }
+            cxtMenu.hide();
+            setScratchProp('cxtMenuPosition', undefined);
+            setScratchProp('currentCyEvent', undefined);
+        };
+        cy.on('tapstart', eventCyTapStart);
+        setScratchProp('eventCyTapStart', eventCyTapStart);
+        const eventCyViewport = () => {
+            cxtMenu.hide();
+        };
+        cy.on('viewport', eventCyViewport);
+        setScratchProp('onViewport', eventCyViewport);
+    };
+    const bindHideCallbacks = () => {
+        const onClick = (event) => {
+            const cyContainer = cy.container();
+            if (!cyContainer.contains(event.target) &&
+                !cxtMenu.contains(event.target)) {
+                cxtMenu.hide();
+                setScratchProp('cxtMenuPosition', undefined);
+            }
+        };
+        document.addEventListener('mouseup', onClick);
+        setScratchProp('hideOnNonCyClick', onClick);
+    };
+    const adjustCxtMenu = (event, position) => {
+        const container = cy.container();
+        const currentCxtMenuPosition = getScratchProp('cxtMenuPosition');
+        addPositionToEvent(event, position);
+        const cyPos = event.position ||
+            event.cyPosition;
+        if (currentCxtMenuPosition != cyPos) {
+            cxtMenu.hideMenuItems();
+            setScratchProp('anyVisibleChild', false);
+            setScratchProp('cxtMenuPosition', cyPos);
+            const containerPos = utils.getOffset(container);
+            const renderedPos = event.renderedPosition ||
+                event.cyRenderedPosition;
+            const borderWidth = getComputedStyle(container).getPropertyValue('border-width');
+            const borderThickness = parseInt(borderWidth.replace('px', ''), 10) || 0;
+            if (borderThickness > 0) {
+                containerPos.top += borderThickness;
+                containerPos.left += borderThickness;
+            }
+            const containerHeight = container.clientHeight;
+            const containerWidth = container.clientWidth;
+            const horizontalSplit = containerHeight / 2;
+            const verticalSplit = containerWidth / 2;
+            const variation = getVariation(position);
+            if (renderedPos.y > horizontalSplit && renderedPos.x <= verticalSplit) {
+                cxtMenu.style.left = renderedPos.x - variation.x + 'px';
+                cxtMenu.style.bottom =
+                    containerHeight - renderedPos.y + variation.y + 'px';
+                cxtMenu.style.right = 'auto';
+                cxtMenu.style.top = 'auto';
+            }
+            else if (renderedPos.y > horizontalSplit &&
+                renderedPos.x > verticalSplit) {
+                cxtMenu.style.right =
+                    containerWidth - renderedPos.x - variation.x + 'px';
+                cxtMenu.style.bottom =
+                    containerHeight - renderedPos.y + variation.y + 'px';
+                cxtMenu.style.left = 'auto';
+                cxtMenu.style.top = 'auto';
+            }
+            else if (renderedPos.y <= horizontalSplit &&
+                renderedPos.x <= verticalSplit) {
+                cxtMenu.style.left = renderedPos.x - variation.x + 'px';
+                cxtMenu.style.top = renderedPos.y + variation.y + 'px';
+                cxtMenu.style.right = 'auto';
+                cxtMenu.style.bottom = 'auto';
+            }
+            else {
+                cxtMenu.style.right =
+                    containerWidth - renderedPos.x - variation.x + 'px';
+                cxtMenu.style.top = renderedPos.y + 'px';
+                cxtMenu.style.left = 'auto';
+                cxtMenu.style.bottom = 'auto';
+            }
+        }
+    };
+    const createAndAppendMenuItemComponent = (opts, parentID) => {
+        const menuItemComponent = createMenuItemComponent(opts);
+        if (typeof parentID !== 'undefined') {
+            const parent = asMenuItem(parentID);
+            cxtMenu.insertMenuItem(menuItemComponent, { parent });
+        }
+        else {
+            cxtMenu.insertMenuItem(menuItemComponent);
+        }
+    };
+    const createAndAppendMenuItemComponents = (optionsArr, parentID) => {
+        for (let i = 0; i < optionsArr.length; i++) {
+            createAndAppendMenuItemComponent(optionsArr[i], parentID);
+        }
+    };
+    const createMenuItemComponent = (opts) => {
+        const scratchpad = cy.scratch('cycontextmenus');
+        return new MenuItem(opts, cxtMenu.onMenuItemClick, scratchpad);
+    };
+    const destroyCxtMenu = () => {
+        if (!getScratchProp('active')) {
+            return;
+        }
+        cxtMenu.removeAllMenuItems();
+        cy.off('tapstart', getScratchProp('eventCyTapStart'));
+        cy.off(options.evtType, getScratchProp('onCxttap'));
+        cy.off('viewport', getScratchProp('onViewport'));
+        document.removeEventListener('mouseup', getScratchProp('hideOnNonCyClick'));
+        cxtMenu.parentNode.removeChild(cxtMenu);
+        cxtMenu = undefined;
+        setScratchProp('cxtMenu', undefined);
+        setScratchProp('active', false);
+        setScratchProp('anyVisibleChild', false);
+        setScratchProp('onCxttap', undefined);
+        setScratchProp('onViewport', undefined);
+        setScratchProp('hideOnNonCyClick', undefined);
+    };
+    const makeSubmenuIndicator = (props) => {
+        const elem = document.createElement('img');
+        elem.src = props.src;
+        elem.width = props.width;
+        elem.height = props.height;
+        elem.classList.add(INDICATOR_CSS_CLASS);
+        return elem;
+    };
+    const asMenuItem = (menuItemID) => {
+        const menuItem = document.getElementById(menuItemID);
+        if (menuItem instanceof MenuItem) {
+            return menuItem;
+        }
+        throw new Error(`The item with id=${menuItemID} is not a menu item`);
+    };
+    const getInstance = () => {
+        const getCxtMenu = () => getScratchProp('cxtMenu');
+        return {
+            isActive: () => getScratchProp('active'),
+            appendMenuItem: (item, parentID) => {
+                createAndAppendMenuItemComponent(item, parentID);
+                return cy;
+            },
+            appendMenuItems: (items, parentID) => {
+                createAndAppendMenuItemComponents(items, parentID);
+                return cy;
+            },
+            removeMenuItem: (itemID) => {
+                const item = asMenuItem(itemID);
+                getCxtMenu()?.removeMenuItem(item);
+                return cy;
+            },
+            hide: () => {
+                getCxtMenu()?.hide();
+            },
+            setTrailingDivider: (itemID, status) => {
+                const menuItem = asMenuItem(itemID);
+                menuItem.setHasTrailingDivider(status);
+                if (status) {
+                    menuItem.classList.add(DIVIDER_CSS_CLASS);
+                }
+                else {
+                    menuItem.classList.remove(DIVIDER_CSS_CLASS);
+                }
+                return cy;
+            },
+            insertBeforeMenuItem: (item, existingItemID) => {
+                const menuItemComponent = createMenuItemComponent(item);
+                const existingItem = asMenuItem(existingItemID);
+                getCxtMenu()?.insertMenuItem(menuItemComponent, { before: existingItem });
+                return cy;
+            },
+            moveToSubmenu: (itemID, optionsParam) => {
+                const item = asMenuItem(itemID);
+                const menu = getCxtMenu();
+                if (optionsParam === undefined || optionsParam === null) {
+                    menu?.moveToSubmenu(item);
+                }
+                else if (typeof optionsParam === 'string') {
+                    const parent = asMenuItem(optionsParam);
+                    menu?.moveToSubmenu(item, parent);
+                }
+                else if (typeof optionsParam.coreAsWell !==
+                    'undefined' ||
+                    typeof optionsParam.selector !== 'undefined') {
+                    menu?.moveToSubmenu(item, null, optionsParam);
+                }
+                else {
+                    console.warn('options neither has coreAsWell nor selector property but it is an object. Are you sure that this is what you want to do?');
+                }
+                return cy;
+            },
+            moveBeforeOtherMenuItem: (itemID, existingItemID) => {
+                const item = asMenuItem(itemID);
+                const before = asMenuItem(existingItemID);
+                getCxtMenu()?.moveBefore(item, before);
+                return cy;
+            },
+            disableMenuItem: (itemID) => {
+                const menuItem = asMenuItem(itemID);
+                menuItem.disable();
+                return cy;
+            },
+            enableMenuItem: (itemID) => {
+                const menuItem = asMenuItem(itemID);
+                menuItem.enable();
+                return cy;
+            },
+            hideMenuItem: (itemID) => {
+                const menuItem = asMenuItem(itemID);
+                menuItem.hide();
+                return cy;
+            },
+            showMenuItem: (itemID) => {
+                const menuItem = asMenuItem(itemID);
+                menuItem.display();
+                return cy;
+            },
+            destroy: () => {
+                destroyCxtMenu();
+                return cy;
+            },
+        };
+    };
+    if (opts !== 'get') {
+        MenuItem.define();
+        MenuItemList.define();
+        ContextMenu.define();
+        options = utils.extend(DEFAULT_OPTS, opts);
+        setScratchProp('options', options);
+        if (getScratchProp('active')) {
+            destroyCxtMenu();
+        }
+        setScratchProp('active', true);
+        setScratchProp('submenuIndicatorGen', makeSubmenuIndicator.bind(undefined, options.submenuIndicator || DEFAULT_OPTS.submenuIndicator));
+        const cxtMenuClasses = utils.getClassStr(options.contextMenuClasses || DEFAULT_OPTS.contextMenuClasses);
+        setScratchProp('cxtMenuClasses', cxtMenuClasses);
+        const onMenuItemClick = () => setScratchProp('cxtMenuPosition', undefined);
+        const scratchpad = cy.scratch('cycontextmenus');
+        cxtMenu = new ContextMenu(onMenuItemClick, scratchpad);
+        setScratchProp('cxtMenu', cxtMenu);
+        cy.container().appendChild(cxtMenu);
+        setScratchProp('cxtMenuItemClasses', utils.getClassStr(options.menuItemClasses || DEFAULT_OPTS.menuItemClasses));
+        const menuItems = options.menuItems || [];
+        createAndAppendMenuItemComponents(menuItems);
+        bindOnCxttap();
+        bindCyEvents();
+        bindHideCallbacks();
+        utils.preventDefaultContextTap();
+    }
+    return getInstance();
+}

package/dist/CytoscapeMenu/index.d.ts

@@ -0,0 +1,6 @@
+import cytoscape from 'cytoscape';
+import { contextMenus } from './cytoscape-context-menus';
+export type { CytoscapeContextMenuOptions, MenuItemOption } from './constants';
+export type { ContextMenusInstance } from './cytoscape-context-menus';
+export { contextMenus };
+export declare function registerCytoscapeContextMenus(cy?: typeof cytoscape): void;

package/dist/CytoscapeMenu/index.js

@@ -0,0 +1,13 @@
+import cytoscape from 'cytoscape';
+import { contextMenus } from './cytoscape-context-menus';
+export { contextMenus };
+export function registerCytoscapeContextMenus(cy) {
+    const target = cy ?? (typeof cytoscape !== 'undefined' ? cytoscape : undefined);
+    if (!target) {
+        return;
+    }
+    target('core', 'contextMenus', contextMenus);
+}
+if (typeof cytoscape !== 'undefined') {
+    registerCytoscapeContextMenus(cytoscape);
+}

package/dist/CytoscapeMenu/style.scss

@@ -0,0 +1,45 @@
+.cy-context-menus-cxt-menu {
+  position: absolute;
+  z-index: 1000;
+  display: none;
+  min-width: 120px;
+  padding: 4px 0;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-family: inherit;
+  font-size: 14px;
+}
+
+.cy-context-menus-cxt-menuitem {
+  display: block;
+  width: 100%;
+  padding: 8px 24px 8px 12px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background: #f0f0f0;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.cy-context-menus-divider {
+  border-bottom: 1px solid #eee;
+}
+
+.cy-context-menus-submenu-indicator {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}

package/dist/CytoscapeMenu/utils.d.ts

@@ -0,0 +1,17 @@
+export declare function getOffset(el: Element): {
+    top: number;
+    left: number;
+};
+export declare function matches(el: Element, selector: string): boolean;
+export declare function isElementHidden(elem: HTMLElement): boolean;
+export declare function isElementVisible(elem: HTMLElement): boolean;
+export declare function extend<T extends Record<string, unknown>>(defaults: T, options: Partial<T>): T;
+export declare function getClassStr(classes: string[]): string;
+export declare function preventDefaultContextTap(): void;
+export declare function setBooleanAttribute(element: Element, attribute: string, boolValue: boolean): void;
+export declare function isIn({ x, y }: {
+    x: number;
+    y: number;
+}, element: Element): boolean;
+export declare function getDimensionsHidden(element: HTMLElement): DOMRect;
+export declare function defineCustomElement(name: string, klass: CustomElementConstructor, extendsType: string): void;

package/dist/CytoscapeMenu/utils.js

@@ -0,0 +1,72 @@
+export function getOffset(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+        top: rect.top,
+        left: rect.left,
+    };
+}
+export function matches(el, selector) {
+    const matchesFn = el.matches ||
+        el.matchesSelector ||
+        el.msMatchesSelector ||
+        el.mozMatchesSelector ||
+        el.webkitMatchesSelector ||
+        el.oMatchesSelector;
+    return matchesFn.call(el, selector);
+}
+export function isElementHidden(elem) {
+    const display = (elem.style && elem.style.display) || getComputedStyle(elem)['display'];
+    return ((elem.offsetWidth <= 0 && elem.offsetHeight <= 0) || display === 'none');
+}
+export function isElementVisible(elem) {
+    return !isElementHidden(elem);
+}
+export function extend(defaults, options) {
+    const obj = {};
+    for (const i in defaults) {
+        obj[i] = defaults[i];
+    }
+    for (const i in options) {
+        if (obj[i] instanceof Array && options[i] instanceof Array) {
+            obj[i] = obj[i].concat(options[i]);
+        }
+        else {
+            obj[i] = options[i];
+        }
+    }
+    return obj;
+}
+export function getClassStr(classes) {
+    return classes.join(' ');
+}
+export function preventDefaultContextTap() {
+    const contextMenuAreas = document.getElementsByClassName('cy-context-menus-cxt-menu');
+    for (const cxtMenuArea of contextMenuAreas) {
+        cxtMenuArea.addEventListener('contextmenu', (e) => e.preventDefault());
+    }
+}
+export function setBooleanAttribute(element, attribute, boolValue) {
+    if (boolValue) {
+        element.setAttribute(attribute, '');
+    }
+    else {
+        element.removeAttribute(attribute);
+    }
+}
+export function isIn({ x, y }, element) {
+    const rect = element.getBoundingClientRect();
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+export function getDimensionsHidden(element) {
+    element.style.opacity = '0';
+    element.style.display = 'block';
+    const rect = element.getBoundingClientRect();
+    element.style.opacity = '1';
+    element.style.display = 'none';
+    return rect;
+}
+export function defineCustomElement(name, klass, extendsType) {
+    if (typeof customElements.get(name) === 'undefined') {
+        customElements.define(name, klass, { extends: extendsType });
+    }
+}

package/dist/cytoscape-context-menus.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Cytoscape context menus extension.
+ * Use: import contextMenus from 'tycho-components/cytoscape-context-menus'
+ */
+export { contextMenus as default } from './CytoscapeMenu/cytoscape-context-menus';

package/dist/cytoscape-context-menus.js

@@ -0,0 +1,5 @@
+/**
+ * Cytoscape context menus extension.
+ * Use: import contextMenus from 'tycho-components/cytoscape-context-menus'
+ */
+export { contextMenus as default } from './CytoscapeMenu/cytoscape-context-menus';

package/dist/index.d.ts

@@ -84,3 +84,6 @@ export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
 export type { KeyboardLayout } from './VirtualKeyboard/KeyboardCustomLayout';
 export { default as AppCopyText } from './AppCopyText';
 export { default as AppConsent } from './AppConsent';
+export { default as CytoscapeMenuCanvas } from './CytoscapeMenu/CytoscapeMenuCanvas';
+export { registerCytoscapeContextMenus, contextMenus, } from './CytoscapeMenu';
+export type { CytoscapeContextMenuOptions, MenuItemOption, ContextMenusInstance, } from './CytoscapeMenu';

package/dist/index.js

@@ -64,3 +64,5 @@ export { default as VirtualKeyboard } from './VirtualKeyboard';
 export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
 export { default as AppCopyText } from './AppCopyText';
 export { default as AppConsent } from './AppConsent';
+export { default as CytoscapeMenuCanvas } from './CytoscapeMenu/CytoscapeMenuCanvas';
+export { registerCytoscapeContextMenus, contextMenus, } from './CytoscapeMenu';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.8.24",
+  "version": "0.9.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -10,6 +10,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
+    "./cytoscape-context-menus": {
+      "types": "./dist/cytoscape-context-menus.d.ts",
+      "import": "./dist/cytoscape-context-menus.js",
+      "require": "./dist/cytoscape-context-menus.js"
+    },
     "./dist/styles/main": "./dist/styles/main.scss"
   },
   "files": [