tree-element 0.1.0

package/lib/options.d.ts

@@ -0,0 +1,310 @@
+import type { AnimationSpeed } from "./animation.js";
+import type { Node, NodeData } from "./node.js";
+export type DataFilter = (data: unknown) => NodeData[];
+export type DataUrl = DataUrlFunction | string;
+export type DragMethod = (node: Node, event: Event | Touch) => void;
+export type IconElement = HTMLElement | string;
+export type OnCanMove = ((node: Node) => boolean) | undefined;
+export type OnCanMoveTo = (node: Node, targetNode: Node, positionName: string) => boolean;
+export type OnCanSelectNode = (node: Node) => boolean;
+export type OnCreateLi = (node: Node, el: HTMLElement, isSelected: boolean) => void;
+export type OnGetStateFromStorage = (() => string) | undefined;
+export type OnIsMoveHandle = (el: HTMLElement) => boolean;
+export type OnSetStateFromStorage = ((data: string) => void) | undefined;
+export interface TreeElementOptions {
+    /**
+     * The duration of the slide animation: `"fast"` is 200ms, `"slow"` is
+     * 600ms, a number is milliseconds.
+     *
+     * @defaultValue `"fast"`
+     * @group Appearance
+     */
+    animationSpeed: AnimationSpeed;
+    /**
+     * Escape node names. With `false`, names are inserted as html — only do
+     * that for data you control.
+     *
+     * @defaultValue `true`
+     * @group Data
+     */
+    autoEscape: boolean;
+    /**
+     * Which levels are open initially: `false` none, `true` all, a number that
+     * many levels starting at `0` (so `0` opens the top level, `1` the first
+     * two levels).
+     *
+     * @defaultValue `false`
+     * @group Appearance
+     */
+    autoOpen: boolean | number;
+    /**
+     * Put the open/close button before the node title. With `false` it goes
+     * after it.
+     *
+     * @defaultValue `true`
+     * @group Appearance
+     */
+    buttonLeft: boolean;
+    /**
+     * The prefix of the css classes the widget puts on the elements it
+     * creates: with `"my-tree"` a title gets `my-tree-title` instead of
+     * `tree-element-title`. The bundled stylesheet uses the default prefix, so
+     * change it only if you bring your own css. See
+     * [Styling](/guide/styling#changing-the-class-names).
+     *
+     * @defaultValue `"tree-element"`
+     * @group Appearance
+     */
+    classPrefix: string;
+    /**
+     * The icon of a closed folder. A string is inserted as html; an element is
+     * cloned for every node.
+     *
+     * Type: `HTMLElement | string`
+     *
+     * @defaultValue `"►"` (`►`), or `"◀"` (`◀`) when `rtl` is
+     * true.
+     * @group Appearance
+     */
+    closedIcon?: IconElement;
+    /**
+     * The class that every element of the widget gets.
+     *
+     * @defaultValue `"<classPrefix>-common"`
+     * @group Appearance
+     */
+    commonClassName?: string;
+    /**
+     * The nodes of the tree. See [Data](/guide/data) for the format.
+     *
+     * @group Data
+     */
+    data?: NodeData[];
+    /**
+     * Transforms a response from `dataUrl` into node data. Use it when the
+     * server wraps the nodes in another object.
+     *
+     * Type: `(data: unknown) => NodeData[]`
+     *
+     * @group Data
+     */
+    dataFilter?: DataFilter;
+    /**
+     * A url to fetch the data from, or a function that returns one. The
+     * function is called with the node that is being loaded, and without an
+     * argument for the initial load. See
+     * [Loading on demand](/guide/loading-on-demand).
+     *
+     * Type: `string | ((node?: Node) => string)`
+     *
+     * @defaultValue The element's `data-url` attribute.
+     * @group Data
+     */
+    dataUrl?: DataUrl;
+    /**
+     * Let the user move nodes by dragging them.
+     *
+     * @defaultValue `false`
+     * @group Drag and drop
+     */
+    dragAndDrop: boolean;
+    /**
+     * Handle the arrow keys when the focus is on the tree. See
+     * [Selection](/guide/selection#keyboard-navigation).
+     *
+     * @defaultValue `true`
+     * @group Selection
+     */
+    keyboardSupport: boolean;
+    /**
+     * The class used to create nodes. Subclass [`Node`](/reference/node) to
+     * add your own methods. The `Node` class is not exposed on the global
+     * `TreeElement`, so this option needs the `lib` build.
+     *
+     * @example
+     * ```js
+     * import TreeElement from "tree-element/lib/index.js";
+     * import { Node } from "tree-element/lib/node.js";
+     *
+     * class MyNode extends Node {
+     *   fullName() {
+     *     return this.getParent()
+     *       ? `${this.getParent().name}/${this.name}`
+     *       : this.name;
+     *   }
+     * }
+     *
+     * new TreeElement({ data, htmlElement, nodeClass: MyNode });
+     * ```
+     *
+     * @defaultValue `Node`
+     * @group Advanced
+     */
+    nodeClass: typeof Node;
+    /**
+     * Called before a drag starts. Return `false` to keep the node in place.
+     *
+     * Type: `(node: Node) => boolean`
+     *
+     * @group Drag and drop
+     */
+    onCanMove?: OnCanMove;
+    /**
+     * Called for a possible drop. `position` is `"before"`, `"after"` or
+     * `"inside"`. Return `false` to refuse the drop.
+     *
+     * Type: `(movedNode: Node, targetNode: Node, position: string) => boolean`
+     *
+     * @group Drag and drop
+     */
+    onCanMoveTo?: OnCanMoveTo;
+    /**
+     * Called before a node is selected. Return `false` to refuse.
+     *
+     * Type: `(node: Node) => boolean`
+     *
+     * @group Selection
+     */
+    onCanSelectNode?: OnCanSelectNode;
+    /**
+     * Called after the `li` of a node is created, so you can add to it. See
+     * [Styling](/guide/styling#customizing-the-markup).
+     *
+     * Type: `(node: Node, li: HTMLElement, isSelected: boolean) => void`
+     *
+     * @group Appearance
+     */
+    onCreateLi?: OnCreateLi;
+    /**
+     * Called while a node is being dragged.
+     *
+     * Type: `(node: Node, event: Event | Touch) => void`
+     *
+     * @group Drag and drop
+     */
+    onDragMove?: DragMethod;
+    /**
+     * Called when a drag ends.
+     *
+     * Type: `(node: Node, event: Event | Touch) => void`
+     *
+     * @group Drag and drop
+     */
+    onDragStop?: DragMethod;
+    /**
+     * Read the saved state, as a json string, from somewhere other than
+     * `localStorage`.
+     *
+     * Type: `() => string`
+     *
+     * @group State
+     */
+    onGetStateFromStorage?: OnGetStateFromStorage;
+    /**
+     * Decides whether an element inside a node starts a drag. Without it, the
+     * whole node is a handle.
+     *
+     * Type: `(element: HTMLElement) => boolean`
+     *
+     * @group Drag and drop
+     */
+    onIsMoveHandle?: OnIsMoveHandle;
+    /**
+     * Write the state, as a json string, to somewhere other than
+     * `localStorage`.
+     *
+     * Type: `(state: string) => void`
+     *
+     * @group State
+     */
+    onSetStateFromStorage?: OnSetStateFromStorage;
+    /**
+     * The icon of an open folder.
+     *
+     * Type: `HTMLElement | string`
+     *
+     * @defaultValue `"&#x25bc;"` (`▼`)
+     * @group Appearance
+     */
+    openedIcon?: IconElement;
+    /**
+     * How long, in milliseconds, a closed folder has to be hovered during a
+     * drag before it opens. `false` never opens folders while dragging.
+     *
+     * @defaultValue `500`
+     * @group Drag and drop
+     */
+    openFolderDelay: false | number;
+    /**
+     * Mirror the tree for right-to-left languages.
+     *
+     * @defaultValue The element's `data-rtl` attribute, otherwise `false`.
+     * @group Appearance
+     */
+    rtl?: boolean;
+    /**
+     * Remember the open and selected nodes in `localStorage`. A string is used
+     * as the storage key; `true` uses `tree`. See
+     * [Saving state](/guide/saving-state).
+     *
+     * @defaultValue `false`
+     * @group State
+     */
+    saveState: boolean | string;
+    /**
+     * Allow the user to select nodes.
+     *
+     * @defaultValue `true`
+     * @group Selection
+     */
+    selectable: boolean;
+    /**
+     * Render a node with `children: []` as a folder instead of as a leaf.
+     *
+     * @defaultValue `false`
+     * @group Appearance
+     */
+    showEmptyFolder: boolean;
+    /**
+     * Animate opening and closing folders.
+     *
+     * @defaultValue `true`
+     * @group Appearance
+     */
+    slide: boolean;
+    /**
+     * How long, in milliseconds, the mouse has to be held down on a node
+     * before a drag starts.
+     *
+     * @defaultValue `300`
+     * @group Drag and drop
+     */
+    startDndDelay?: number;
+    /**
+     * The `tabindex` of the selected node's title, which is what makes the
+     * tree focusable.
+     *
+     * @defaultValue `0`
+     * @group Selection
+     */
+    tabIndex?: number;
+    /**
+     * The class of the root `ul`.
+     *
+     * @defaultValue The value of `classPrefix`.
+     * @group Appearance
+     */
+    treeClassName?: string;
+    /**
+     * Handle right clicks on a node: the browser menu is suppressed and
+     * [`tree.contextmenu`](/reference/events#tree-contextmenu) is dispatched
+     * instead.
+     *
+     * @defaultValue `true`
+     * @group Selection
+     */
+    useContextMenu: boolean;
+}
+type DataUrlFunction = (node?: Node) => string;
+export {};
+//# sourceMappingURL=options.d.ts.map

package/lib/options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,QAAQ,EAAE,CAAC;AAEvD,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,KAAK,IAAI,CAAC;AAEpE,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,CACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,MAAM,KACjB,OAAO,CAAC;AAEb,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;AAErD,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;AAEpF,MAAM,MAAM,qBAAqB,GAAG,CAAC,MAAM,MAAM,CAAC,GAAG,SAAS,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,cAAc,EAAE,cAAc,CAAC;IAC/B;;;;;;OAMG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;OAMG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;;;;;OASG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,SAAS,EAAE,OAAO,IAAI,CAAC;IACvB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;IAChC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;;;;;OAOG;IACH,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,KAAK,eAAe,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM,CAAC"}

package/lib/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/lib/positionUtils.d.ts

@@ -0,0 +1,8 @@
+interface TopLeftPosition {
+    left: number;
+    top: number;
+}
+export declare const getOffsetTop: (element: HTMLElement) => number;
+export declare const getElementPosition: (element: HTMLElement) => TopLeftPosition;
+export {};
+//# sourceMappingURL=positionUtils.d.ts.map

package/lib/positionUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positionUtils.d.ts","sourceRoot":"","sources":["../src/positionUtils.ts"],"names":[],"mappings":"AAAA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAGD,eAAO,MAAM,YAAY,GAAI,SAAS,WAAW,KAAG,MACnB,CAAC;AAGlC,eAAO,MAAM,kBAAkB,GAAI,SAAS,WAAW,KAAG,eAOzD,CAAC"}

package/lib/positionUtils.js

@@ -0,0 +1,14 @@
+// Get the top position of the HTML element.
+const getOffsetTop = element => getElementPosition(element).top;
+
+// Get the top left position of the HTML element.
+const getElementPosition = element => {
+  const rect = element.getBoundingClientRect();
+  return {
+    left: rect.x + window.scrollX,
+    top: rect.y + window.scrollY
+  };
+};
+
+export { getElementPosition, getOffsetTop };
+//# sourceMappingURL=positionUtils.js.map

package/lib/positionUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"positionUtils.js","sources":["../src/positionUtils.ts"],"sourcesContent":["interface TopLeftPosition {\n  left: number;\n  top: number;\n}\n\n// Get the top position of the HTML element.\nexport const getOffsetTop = (element: HTMLElement): number =>\n  getElementPosition(element).top;\n\n// Get the top left position of the HTML element.\nexport const getElementPosition = (element: HTMLElement): TopLeftPosition => {\n  const rect = element.getBoundingClientRect();\n\n  return {\n    left: rect.x + window.scrollX,\n    top: rect.y + window.scrollY,\n  };\n};\n"],"names":[],"mappings":"AAKA;AACO,MAAM,YAAY,GAAI,OAAoB,IAC/C,kBAAkB,CAAC,OAAO,CAAC,CAAC;;AAE9B;AACO,MAAM,kBAAkB,GAAI,OAAoB,IAAsB;AAC3E,EAAA,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE;EAE5C,OAAO;AACL,IAAA,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO;AAC7B,IAAA,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,MAAM,CAAC;GACtB;AACH;;"}

package/lib/requestUrl.d.ts

@@ -0,0 +1,9 @@
+declare class RequestUrl {
+    private isAbsolute;
+    private url;
+    constructor(inputUrl: string);
+    setSearchParam(key: string, value: string): void;
+    toString(): string;
+}
+export default RequestUrl;
+//# sourceMappingURL=requestUrl.d.ts.map

package/lib/requestUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"requestUrl.d.ts","sourceRoot":"","sources":["../src/requestUrl.ts"],"names":[],"mappings":"AAaA,cAAM,UAAU;IACd,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,GAAG,CAAM;gBAEL,QAAQ,EAAE,MAAM;IAU5B,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAIzC,QAAQ;CAOT;AAED,eAAe,UAAU,CAAC"}

package/lib/requestUrl.js

@@ -0,0 +1,37 @@
+// Url class for absolute and relative urls.
+
+const isAbsoluteUrl = inputUrl => {
+  try {
+    new URL(inputUrl);
+    return true;
+  } catch {
+    return false;
+  }
+};
+const LOCALHOST = "http://localhost";
+class RequestUrl {
+  _isAbsolute;
+  _url;
+  constructor(inputUrl) {
+    if (isAbsoluteUrl(inputUrl)) {
+      this._url = new URL(inputUrl);
+      this._isAbsolute = true;
+    } else {
+      this._url = new URL(inputUrl, LOCALHOST);
+      this._isAbsolute = false;
+    }
+  }
+  setSearchParam(key, value) {
+    this._url.searchParams.set(key, value);
+  }
+  toString() {
+    if (this._isAbsolute) {
+      return this._url.href;
+    } else {
+      return this._url.href.slice(LOCALHOST.length);
+    }
+  }
+}
+
+export { RequestUrl as default };
+//# sourceMappingURL=requestUrl.js.map

package/lib/requestUrl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"requestUrl.js","sources":["../src/requestUrl.ts"],"sourcesContent":["// Url class for absolute and relative urls.\n\nconst isAbsoluteUrl = (inputUrl: string) => {\n  try {\n    new URL(inputUrl);\n    return true;\n  } catch {\n    return false;\n  }\n}\n\nconst LOCALHOST = \"http://localhost\";\n\nclass RequestUrl {\n  private isAbsolute: boolean;\n  private url: URL;\n\n  constructor(inputUrl: string) {\n    if (isAbsoluteUrl(inputUrl)) {\n      this.url = new URL(inputUrl);\n      this.isAbsolute = true;\n    } else {\n      this.url = new URL(inputUrl, LOCALHOST);\n      this.isAbsolute = false;\n    }\n  }\n\n  setSearchParam(key: string, value: string) {\n    this.url.searchParams.set(key, value);\n  }\n\n  toString() {\n    if (this.isAbsolute) {\n      return this.url.href;\n    } else {\n      return this.url.href.slice(LOCALHOST.length);\n    }\n  }\n}\n\nexport default RequestUrl;"],"names":["isAbsolute","url"],"mappings":"AAAA;;AAEA,MAAM,aAAa,GAAI,QAAgB,IAAK;EAC1C,IAAI;IACF,IAAI,GAAG,CAAC,QAAQ,CAAC;AACjB,IAAA,OAAO,IAAI;AACb,EAAA,CAAC,CAAC,MAAM;AACN,IAAA,OAAO,KAAK;AACd,EAAA;AACF,CAAC;AAED,MAAM,SAAS,GAAG,kBAAkB;AAEpC,MAAM,UAAU,CAAC;EACPA,WAAU;EACVC,IAAG;EAEX,WAAW,CAAC,QAAgB,EAAE;AAC5B,IAAA,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE;AAC3B,MAAA,IAAI,CAACA,IAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;MAC5B,IAAI,CAACD,WAAU,GAAG,IAAI;AACxB,IAAA,CAAC,MAAM;MACL,IAAI,CAACC,IAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;MACvC,IAAI,CAACD,WAAU,GAAG,KAAK;AACzB,IAAA;AACF,EAAA;AAEA,EAAA,cAAc,CAAC,GAAW,EAAE,KAAa,EAAE;IACzC,IAAI,CAACC,IAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC;AACvC,EAAA;AAEA,EAAA,QAAQ,GAAG;IACT,IAAI,IAAI,CAACD,WAAU,EAAE;AACnB,MAAA,OAAO,IAAI,CAACC,IAAG,CAAC,IAAI;AACtB,IAAA,CAAC,MAAM;MACL,OAAO,IAAI,CAACA,IAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;AAC9C,IAAA;AACF,EAAA;AACF;;"}

package/lib/saveStateHandler.d.ts

@@ -0,0 +1,46 @@
+import type { AddToSelection, GetNodeById, GetSelectedNodes, GetTree, OpenNode, RefreshElements, RemoveFromSelection } from "./methodTypes.js";
+import type { NodeId } from "./node.js";
+import type { OnGetStateFromStorage, OnSetStateFromStorage } from "./options.js";
+export interface SavedState {
+    open_nodes?: NodeId[];
+    selected_node?: NodeId[];
+}
+interface SaveStateHandlerParams {
+    addToSelection: AddToSelection;
+    getNodeById: GetNodeById;
+    getSelectedNodes: GetSelectedNodes;
+    getTree: GetTree;
+    onGetStateFromStorage?: OnGetStateFromStorage;
+    onSetStateFromStorage?: OnSetStateFromStorage;
+    openNode: OpenNode;
+    refreshElements: RefreshElements;
+    removeFromSelection: RemoveFromSelection;
+    saveState: boolean | string;
+}
+export default class SaveStateHandler {
+    private addToSelection;
+    private getNodeById;
+    private getSelectedNodes;
+    private getTree;
+    private onGetStateFromStorage?;
+    private onSetStateFromStorage?;
+    private openNode;
+    private refreshElements;
+    private removeFromSelection;
+    private saveStateOption;
+    constructor({ addToSelection, getNodeById, getSelectedNodes, getTree, onGetStateFromStorage, onSetStateFromStorage, openNode, refreshElements, removeFromSelection, saveState, }: SaveStateHandlerParams);
+    getNodeIdToBeSelected(): NodeId | null;
+    getState(): SavedState;
+    getStateFromStorage(): null | SavedState;
+    saveState(): void;
+    setInitialState(state: SavedState): boolean;
+    setInitialStateOnDemand(state: SavedState): Promise<void>;
+    private getKeyName;
+    private loadFromStorage;
+    private openInitialNodes;
+    private parseState;
+    private resetSelection;
+    private selectInitialNodes;
+}
+export {};
+//# sourceMappingURL=saveStateHandler.d.ts.map

package/lib/saveStateHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"saveStateHandler.d.ts","sourceRoot":"","sources":["../src/saveStateHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,QAAQ,EACR,eAAe,EACf,mBAAmB,EACtB,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAQ,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAI9E,MAAM,WAAW,UAAU;IACvB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,UAAU,sBAAsB;IAC5B,cAAc,EAAE,cAAc,CAAC;IAC/B,WAAW,EAAE,WAAW,CAAC;IACzB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,eAAe,CAAC;IACjC,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,OAAO,gBAAgB;IACjC,OAAO,CAAC,cAAc,CAAiB;IACvC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,qBAAqB,CAAC,CAAwB;IACtD,OAAO,CAAC,qBAAqB,CAAC,CAAwB;IACtD,OAAO,CAAC,QAAQ,CAAW;IAC3B,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,mBAAmB,CAAsB;IACjD,OAAO,CAAC,eAAe,CAAmB;gBAE9B,EACR,cAAc,EACd,WAAW,EACX,gBAAgB,EAChB,OAAO,EACP,qBAAqB,EACrB,qBAAqB,EACrB,QAAQ,EACR,eAAe,EACf,mBAAmB,EACnB,SAAS,GACZ,EAAE,sBAAsB;IAalB,qBAAqB,IAAI,MAAM,GAAG,IAAI;IActC,QAAQ,IAAI,UAAU;IAgCtB,mBAAmB,IAAI,IAAI,GAAG,UAAU;IAcxC,SAAS,IAAI,IAAI;IAoBjB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO;IAgBrC,uBAAuB,CAChC,KAAK,EAAE,UAAU,GAClB,OAAO,CAAC,IAAI,CAAC;IA2ChB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;CAe7B"}

package/lib/saveStateHandler.js

@@ -0,0 +1,204 @@
+import { isInt } from './util.js';
+
+class SaveStateHandler {
+  _addToSelection;
+  _getNodeById;
+  _getSelectedNodes;
+  _getTree;
+  _onGetStateFromStorage;
+  _onSetStateFromStorage;
+  _openNode;
+  _refreshElements;
+  _removeFromSelection;
+  _saveStateOption;
+  constructor({
+    addToSelection,
+    getNodeById,
+    getSelectedNodes,
+    getTree,
+    onGetStateFromStorage,
+    onSetStateFromStorage,
+    openNode,
+    refreshElements,
+    removeFromSelection,
+    saveState
+  }) {
+    this._addToSelection = addToSelection;
+    this._getNodeById = getNodeById;
+    this._getSelectedNodes = getSelectedNodes;
+    this._getTree = getTree;
+    this._onGetStateFromStorage = onGetStateFromStorage;
+    this._onSetStateFromStorage = onSetStateFromStorage;
+    this._openNode = openNode;
+    this._refreshElements = refreshElements;
+    this._removeFromSelection = removeFromSelection;
+    this._saveStateOption = saveState;
+  }
+  getNodeIdToBeSelected() {
+    if (!this._saveStateOption) {
+      return null;
+    }
+    const state = this.getStateFromStorage();
+    if (state?.selected_node) {
+      return state.selected_node[0] ?? null;
+    } else {
+      return null;
+    }
+  }
+  getState() {
+    const getOpenNodeIds = () => {
+      const openNodes = [];
+      this._getTree()?.iterate(node => {
+        if (node.is_open && node.id && node.hasChildren()) {
+          openNodes.push(node.id);
+        }
+        return true;
+      });
+      return openNodes;
+    };
+    const getSelectedNodeIds = () => {
+      const selectedNodeIds = [];
+      this._getSelectedNodes().forEach(node => {
+        if (node.id != null) {
+          selectedNodeIds.push(node.id);
+        }
+      });
+      return selectedNodeIds;
+    };
+    return {
+      open_nodes: getOpenNodeIds(),
+      selected_node: getSelectedNodeIds()
+    };
+  }
+  getStateFromStorage() {
+    if (!this._saveStateOption) {
+      return null;
+    }
+    const jsonData = this._loadFromStorage();
+    if (jsonData) {
+      return this._parseState(jsonData);
+    } else {
+      return null;
+    }
+  }
+  saveState() {
+    if (!this._saveStateOption) {
+      return;
+    }
+    const state = JSON.stringify(this.getState());
+    if (this._onSetStateFromStorage) {
+      this._onSetStateFromStorage(state);
+    } else {
+      localStorage.setItem(this._getKeyName(), state);
+    }
+  }
+
+  /*
+  Set initial state
+  Don't handle nodes that are loaded on demand
+   result: must load on demand (boolean)
+  */
+  setInitialState(state) {
+    let mustLoadOnDemand = false;
+    if (state.open_nodes) {
+      mustLoadOnDemand = this._openInitialNodes(state.open_nodes);
+    }
+    this._resetSelection();
+    if (state.selected_node) {
+      this._selectInitialNodes(state.selected_node);
+    }
+    return mustLoadOnDemand;
+  }
+  async setInitialStateOnDemand(state) {
+    let nodeIds = state.open_nodes;
+    const openNodes = async () => {
+      if (!nodeIds) {
+        return;
+      }
+      const newNodesIds = [];
+      for (const nodeId of nodeIds) {
+        const node = this._getNodeById(nodeId);
+        if (!node) {
+          newNodesIds.push(nodeId);
+        } else {
+          if (!node.is_loading) {
+            if (node.load_on_demand) {
+              await loadAndOpenNode(node);
+            } else {
+              await this._openNode(node, false);
+            }
+          }
+        }
+      }
+      nodeIds = newNodesIds;
+      if (state.selected_node) {
+        if (this._selectInitialNodes(state.selected_node)) {
+          this._refreshElements(null);
+        }
+      }
+    };
+    const loadAndOpenNode = async node => {
+      await this._openNode(node, false);
+      await openNodes();
+    };
+    await openNodes();
+  }
+  _getKeyName() {
+    if (typeof this._saveStateOption === "string") {
+      return this._saveStateOption;
+    } else {
+      return "tree";
+    }
+  }
+  _loadFromStorage() {
+    if (this._onGetStateFromStorage) {
+      return this._onGetStateFromStorage();
+    } else {
+      return localStorage.getItem(this._getKeyName());
+    }
+  }
+  _openInitialNodes(nodeIds) {
+    let mustLoadOnDemand = false;
+    for (const nodeId of nodeIds) {
+      const node = this._getNodeById(nodeId);
+      if (node) {
+        if (!node.load_on_demand) {
+          node.is_open = true;
+        } else {
+          mustLoadOnDemand = true;
+        }
+      }
+    }
+    return mustLoadOnDemand;
+  }
+  _parseState(jsonData) {
+    const state = JSON.parse(jsonData);
+
+    // Check if selected_node is an int (instead of an array)
+    if (state.selected_node && isInt(state.selected_node)) {
+      // Convert to array
+      state.selected_node = [state.selected_node];
+    }
+    return state;
+  }
+  _resetSelection() {
+    const selectedNodes = this._getSelectedNodes();
+    selectedNodes.forEach(node => {
+      this._removeFromSelection(node);
+    });
+  }
+  _selectInitialNodes(nodeIds) {
+    let selectCount = 0;
+    for (const nodeId of nodeIds) {
+      const node = this._getNodeById(nodeId);
+      if (node) {
+        selectCount += 1;
+        this._addToSelection(node);
+      }
+    }
+    return selectCount !== 0;
+  }
+}
+
+export { SaveStateHandler as default };
+//# sourceMappingURL=saveStateHandler.js.map