mind-elixir 4.5.2 → 5.0.0-beta.10

package/dist/types/vanilla/src/index.d.ts

@@ -0,0 +1,112 @@
+import { EventTarget } from './EventEmitter';
+import type { AreaLocation, ScrollEvent, SelectionEvents } from './types';
+import type { PartialSelectionOptions } from './types';
+import type { SelectAllSelectors } from './utils/selectAll';
+export * from './types';
+export default class SelectionArea extends EventTarget<SelectionEvents> {
+    static version: string;
+    private readonly _options;
+    private _selection;
+    private readonly _area;
+    private readonly _clippingElement;
+    private _targetElement?;
+    private _targetBoundary?;
+    private _targetBoundaryScrolled;
+    private _targetRect?;
+    private _selectables;
+    private _latestElement?;
+    private _areaLocation;
+    private _areaRect;
+    private _singleClick;
+    private _frame;
+    private _scrollAvailable;
+    private _scrollingActive;
+    private _scrollSpeed;
+    private _scrollDelta;
+    private _lastMousePosition;
+    constructor(opt: PartialSelectionOptions);
+    _toggleStartEvents(activate?: boolean): void;
+    _onTapStart(evt: MouseEvent | TouchEvent, silent?: boolean): void;
+    _onSingleTap(evt: MouseEvent | TouchEvent): void;
+    _delayedTapMove(evt: MouseEvent | TouchEvent): void;
+    _setupSelectionArea(): void;
+    _onTapMove(evt: MouseEvent | TouchEvent): void;
+    _handleMoveEvent(evt: MouseEvent | TouchEvent): void;
+    _onScroll(): void;
+    _onStartAreaScroll(): void;
+    _wheelScroll(evt: ScrollEvent): void;
+    _keyboardScroll(evt: KeyboardEvent): void;
+    _recalculateSelectionAreaRect(): void;
+    _redrawSelectionArea(): void;
+    _onTapStop(evt: MouseEvent | TouchEvent | null, silent: boolean): void;
+    _updateElementSelection(): void;
+    _emitEvent(name: keyof SelectionEvents, evt: MouseEvent | TouchEvent | null): unknown;
+    _keepSelection(): void;
+    /**
+     * Manually triggers the start of a selection
+     * @param evt A MouseEvent / TouchEvent-like object
+     * @param silent If beforestart should be fired
+     */
+    trigger(evt: MouseEvent | TouchEvent, silent?: boolean): void;
+    /**
+     * Can be used if during a selection elements have been added
+     * Will update everything that can be selected
+     */
+    resolveSelectables(): void;
+    /**
+     * Same as deselecting, but for all elements currently selected
+     * @param includeStored If the store should also get cleared
+     * @param quiet If move / stop events should be fired
+     */
+    clearSelection(includeStored?: boolean, quiet?: boolean): void;
+    /**
+     * @returns {Array} Selected elements
+     */
+    getSelection(): Element[];
+    /**
+     * @returns {HTMLElement} The selection area element
+     */
+    getSelectionArea(): HTMLElement;
+    /**
+     * @returns {Element[]} Available selectable elements for current selection
+     */
+    getSelectables(): Element[];
+    /**
+     * Set the location of the selection area
+     * @param location A partial AreaLocation object
+     */
+    setAreaLocation(location: Partial<AreaLocation>): void;
+    /**
+     * @returns {AreaLocation} The current location of the selection area
+     */
+    getAreaLocation(): AreaLocation;
+    /**
+     * Cancel the current selection process, pass true to fire a stop event after cancel
+     * @param keepEvent If a stop event should be fired
+     */
+    cancel(keepEvent?: boolean): void;
+    /**
+     * Unbinds all events and removes the area-element.
+     */
+    destroy(): void;
+    /**
+     * Enable selecting elements
+     */
+    enable: (activate?: boolean) => void;
+    /**
+     * Disable selecting elements
+     */
+    disable: () => void;
+    /**
+     * Adds elements to the selection
+     * @param query CSS Query, can be an array of queries
+     * @param quiet If this should not trigger the move event
+     */
+    select(query: SelectAllSelectors, quiet?: boolean): Element[];
+    /**
+     * Removes a particular element from the selection
+     * @param query CSS Query, can be an array of queries
+     * @param quiet If this should not trigger the move event
+     */
+    deselect(query: SelectAllSelectors, quiet?: boolean): void;
+}

package/dist/types/vanilla/src/types.d.ts

@@ -0,0 +1,84 @@
+import type SelectionArea from './index';
+import type { Intersection } from './utils/intersects';
+import type { Trigger } from './utils/matchesTrigger';
+export type DeepPartial<T> = T extends unknown[] ? T : T extends HTMLElement ? T : {
+    [P in keyof T]?: DeepPartial<T[P]>;
+};
+export type Quantify<T> = T[] | T;
+export interface ScrollEvent extends MouseEvent {
+    deltaY: number;
+    deltaX: number;
+}
+export interface ChangedElements {
+    added: Element[];
+    removed: Element[];
+}
+export interface SelectionStore {
+    touched: Element[];
+    stored: Element[];
+    selected: Element[];
+    changed: ChangedElements;
+}
+export interface SelectionEvent {
+    event: MouseEvent | TouchEvent | null;
+    store: SelectionStore;
+    selection: SelectionArea;
+}
+export type SelectionEvents = {
+    beforestart: (e: SelectionEvent) => boolean | void;
+    beforedrag: (e: SelectionEvent) => boolean | void;
+    start: (e: SelectionEvent) => void;
+    move: (e: SelectionEvent) => void;
+    stop: (e: SelectionEvent) => void;
+};
+export type AreaLocation = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export interface Coordinates {
+    x: number;
+    y: number;
+}
+export type TapMode = 'touch' | 'native';
+export type OverlapMode = 'keep' | 'drop' | 'invert';
+export interface Scrolling {
+    speedDivider: number;
+    manualSpeed: number;
+    startScrollMargins: {
+        x: number;
+        y: number;
+    };
+}
+export interface SingleTap {
+    allow: boolean;
+    intersect: TapMode;
+}
+export interface Features {
+    deselectOnBlur: boolean;
+    singleTap: SingleTap;
+    range: boolean;
+    touch: boolean;
+}
+export interface Behaviour {
+    intersect: Intersection;
+    startThreshold: number | Coordinates;
+    overlap: OverlapMode;
+    scrolling: Scrolling;
+    triggers: Trigger[];
+}
+export interface SelectionOptions {
+    selectionAreaClass: string;
+    selectionContainerClass: string | undefined;
+    container: Quantify<string | HTMLElement>;
+    document: Document;
+    selectables: Quantify<string>;
+    startAreas: Quantify<string | HTMLElement>;
+    boundaries: Quantify<string | HTMLElement>;
+    behaviour: Behaviour;
+    features: Features;
+}
+export type PartialSelectionOptions = DeepPartial<Omit<SelectionOptions, 'document'>> & {
+    document?: Document;
+};

package/dist/types/vanilla/src/utils/arrayify.d.ts

@@ -0,0 +1 @@
+export declare const arrayify: <T>(value: T | T[]) => T[];

package/dist/types/vanilla/src/utils/browser.d.ts

@@ -0,0 +1,2 @@
+export declare const isTouchDevice: () => boolean;
+export declare const isSafariBrowser: () => boolean;

package/dist/types/vanilla/src/utils/css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Add css to a DOM-Element or returns the current
+ * value of a property.
+ *
+ * @param el The Element.
+ * @param attr The attribute or an object which holds css key-properties.
+ * @param val The value for a single attribute.
+ * @returns {*}
+ */
+export declare const css: ({ style }: HTMLElement, attr: Partial<Record<keyof CSSStyleDeclaration, string | number>> | string, val?: string | number) => void;

package/dist/types/vanilla/src/utils/domRect.d.ts

@@ -0,0 +1 @@
+export declare const domRect: (x?: number, y?: number, width?: number, height?: number) => DOMRect;

package/dist/types/vanilla/src/utils/events.d.ts

@@ -0,0 +1,29 @@
+type AnyFunction = (...arg: any) => any;
+/**
+ * Add event(s) to element(s).
+ * @param elements DOM-Elements
+ * @param events Event names
+ * @param fn Callback
+ * @param options Optional options
+ * @return Array passed arguments
+ */
+export declare const on: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => void;
+/**
+ * Remove event(s) from element(s).
+ * @param elements DOM-Elements
+ * @param events Event names
+ * @param fn Callback
+ * @param options Optional options
+ * @return Array passed arguments
+ */
+export declare const off: (items: (EventTarget | undefined) | (EventTarget | undefined)[], events: string | string[], fn: AnyFunction, options?: {}) => void;
+/**
+ * Simplifies a touch / mouse-event
+ * @param evt
+ */
+export declare const simplifyEvent: (evt: any) => {
+    target: HTMLElement;
+    x: number;
+    y: number;
+};
+export {};

package/dist/types/vanilla/src/utils/frames.d.ts

@@ -0,0 +1,7 @@
+type AnyFunction = (...args: any[]) => void;
+export interface Frames<F extends AnyFunction = AnyFunction> {
+    next(...args: Parameters<F>): void;
+    cancel(): void;
+}
+export declare const frames: <F extends AnyFunction>(fn: F) => Frames<F>;
+export {};

package/dist/types/vanilla/src/utils/intersects.d.ts

@@ -0,0 +1,9 @@
+export type Intersection = 'center' | 'cover' | 'touch';
+/**
+ * Check if two DOM-Elements intersects each other.
+ * @param a BoundingClientRect of the first element.
+ * @param b BoundingClientRect of the second element.
+ * @param mode Options are center, cover or touch.
+ * @returns {boolean} If both elements intersects each other.
+ */
+export declare const intersects: (a: DOMRect, b: DOMRect, mode?: Intersection) => boolean;

package/dist/types/vanilla/src/utils/matchesTrigger.d.ts

@@ -0,0 +1,16 @@
+export type MouseButton = 0 | 1 | 2 | 3 | 4;
+export type Modifier = 'ctrl' | 'alt' | 'shift';
+export type MouseButtonWithModifiers = {
+    button: MouseButton;
+    modifiers: Modifier[];
+};
+export type Trigger = MouseButton | MouseButtonWithModifiers;
+/**
+ * Determines whether a MouseEvent should execute until completion depending on
+ * which button and modifier(s) are active for the MouseEvent.
+ * The Event will execute to completion if ANY of the triggers "matches"
+ * @param event MouseEvent that should be checked
+ * @param triggers A list of Triggers that signify that the event should execute until completion
+ * @returns Whether the MouseEvent should execute until completion
+ */
+export declare const matchesTrigger: (event: MouseEvent, triggers: Trigger[]) => boolean;

package/dist/types/vanilla/src/utils/selectAll.d.ts

@@ -0,0 +1,8 @@
+export type SelectAllSelectors = (string | Element)[] | string | Element;
+/**
+ * Takes a selector (or array of selectors) and returns the matched nodes.
+ * @param selector The selector or an Array of selectors.
+ * @param doc
+ * @returns {Array} Array of DOM-Nodes.
+ */
+export declare const selectAll: (selector: SelectAllSelectors, doc?: Document) => Element[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mind-elixir",
-  "version": "4.5.2",
+  "version": "5.0.0-beta.10",
   "type": "module",
   "description": "Mind elixir is a free open source mind map core.",
   "keywords": [
@@ -77,7 +77,7 @@
     "@types/node": "^20.14.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
-    "@viselect/vanilla": "3.5.1",
+    "@viselect/vanilla": "3.9.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -89,4 +89,4 @@
     "vite": "^4.5.3",
     "vite-plugin-css-injected-by-js": "^3.5.1"
   }
-}
+}

package/readme.md

@@ -36,11 +36,13 @@ Mind elixir is a open source JavaScript mind map core. You can use it with any f
 
 Features:
 
+- Fluent UX
+- Well designed
 - Lightweight
 - High performance
 - Framework agnostic
 - Pluginable
-- Build-in drag and drop / node edit plugin
+- Built-in drag and drop / node edit plugin
 - Export as SVG / PNG / Html
 - Summarize nodes
 - Bulk operations supported
@@ -428,3 +430,12 @@ Thanks for your contributions to Mind Elixir! Your support and dedication make t
 <a href="https://github.com/SSShooter/mind-elixir-core/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core&columns=6" />
 </a>
+
+## v5 Breaking Changes
+
+- Move scroll-based movement to transition-based movement
+- `Summary.text` -> `Summary.label`
+- Remove `getDataMd()`
+- MindElixir.dragMoveHelper -> instance.dragMoveHelper
+- Remove `unselectNode()`
+- Remove `removeNode()`