@fps-games/editor 0.2.0-beta.3 → 0.2.1-beta.1

package/node_modules/@playcanvas/pcui/types/components/TreeView/index.d.ts

@@ -0,0 +1,359 @@
+import { Container, ContainerArgs } from '../Container';
+import { Element } from '../Element';
+import { TreeViewItem } from '../TreeViewItem';
+/**
+ * Represents an item that has been reparented in a {@link TreeView} drag operation.
+ */
+interface ReparentedItem {
+    /**
+     * The reparented tree view item.
+     */
+    item: TreeViewItem;
+    /**
+     * The old parent of the item.
+     */
+    oldParent: Element;
+    /**
+     * The new parent of the item.
+     */
+    newParent?: Element;
+    /**
+     * The new child index of the item within its new parent.
+     */
+    newChildIndex?: number;
+}
+/**
+ * The arguments for the {@link TreeView} constructor.
+ */
+interface TreeViewArgs extends ContainerArgs {
+    /**
+     * Whether dragging a {@link TreeViewItem} is allowed. Defaults to `true`.
+     */
+    allowDrag?: boolean;
+    /**
+     * Whether reordering {@link TreeViewItem}s is allowed. Defaults to `true`.
+     */
+    allowReordering?: boolean;
+    /**
+     * Whether renaming {@link TreeViewItem}s is allowed by double clicking on them. Defaults to `false`.
+     */
+    allowRenaming?: boolean;
+    /**
+     * A filter that searches {@link TreeViewItem}s and only shows the ones that are relevant to the filter.
+     */
+    filter?: string;
+    /**
+     * A function to be called when we right click on a {@link TreeViewItem}.
+     */
+    onContextMenu?: (evt: MouseEvent, item: TreeViewItem) => void;
+    /**
+     * A function to be called when we try to reparent tree items. If a function is provided then the
+     * tree items will not be reparented by the {@link TreeView} but instead will rely on the function to
+     * reparent them as it sees fit.
+     */
+    onReparent?: (reparented: ReparentedItem[]) => void;
+    /**
+     * The element to scroll on drag. Defaults to this {@link TreeView}'s element.
+     */
+    dragScrollElement?: Element;
+}
+/**
+ * A container that can show a TreeView like a hierarchy. The TreeView contains
+ * a hierarchy of {@link TreeViewItem}s.
+ */
+declare class TreeView extends Container {
+    /**
+     * Fired when user starts dragging selected TreeViewItems.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const treeView = new TreeView({
+     *     allowDrag: true // this is the default but we're showing it here for clarity
+     * });
+     * treeView.on('dragstart', (items: TreeViewItem[]) => {
+     *     console.log(`Drag started of ${items.length} items`);
+     * });
+     * ```
+     */
+    static readonly EVENT_DRAGSTART = "dragstart";
+    /**
+     * Fired when user stops dragging selected TreeViewItems.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const treeView = new TreeView({
+     *     allowDrag: true // this is the default but we're showing it here for clarity
+     * });
+     * treeView.on('dragend', () => {
+     *     console.log('Drag ended');
+     * });
+     * ```
+     */
+    static readonly EVENT_DRAGEND = "dragend";
+    /**
+     * Fired when user reparents TreeViewItems.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const treeView = new TreeView();
+     * treeView.on('reparent', (reparented: ReparentedItem[]) => {
+     *     console.log(`Reparented ${reparented.length} items`);
+     * });
+     * ```
+     */
+    static readonly EVENT_REPARENT = "reparent";
+    /**
+     * Fired when user selects a TreeViewItem.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const treeView = new TreeView();
+     * treeView.on('select', (item: TreeViewItem) => {
+     *     console.log(`Selected item ${item.text}`);
+     * });
+     * ```
+     */
+    static readonly EVENT_SELECT = "select";
+    /**
+     * Fired when user deselects a TreeViewItem.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const treeView = new TreeView();
+     * treeView.on('deselect', (item: TreeViewItem) => {
+     *     console.log(`Deselected item ${item.text}`);
+     * });
+     * ```
+     */
+    static readonly EVENT_DESELECT = "deselect";
+    /**
+     * Fired when user renames a TreeViewItem.
+     *
+     * @event
+     * @example
+     * ```ts
+     * const treeView = new TreeView();
+     * treeView.on('rename', (item: TreeViewItem, name: string) => {
+     *     console.log(`Renamed item to ${name}`);
+     * });
+     * ```
+     */
+    static readonly EVENT_RENAME = "rename";
+    /**
+     * Determines whether reordering {@link TreeViewItem}s is allowed.
+     */
+    allowReordering: boolean;
+    /**
+     * Determines whether renaming {@link TreeViewItem}s is allowed by double clicking on them.
+     */
+    allowRenaming: boolean;
+    protected _selectedItems: TreeViewItem[];
+    protected _dragItems: TreeViewItem[];
+    protected _allowDrag: boolean;
+    protected _dragging: boolean;
+    protected _dragOverItem: TreeViewItem;
+    protected _dragArea: string;
+    protected _dragScroll: number;
+    protected _dragScrollInterval: number;
+    protected _dragHandle: Element;
+    protected _dragScrollElement: Element;
+    protected _onContextMenu: (evt: MouseEvent, item: TreeViewItem) => void;
+    protected _onReparentFn: ((reparented: ReparentedItem[]) => void) | undefined;
+    protected _pressedCtrl: boolean;
+    protected _pressedShift: boolean;
+    protected _pressedArrow: boolean;
+    protected _filter: string;
+    protected _filterResults: TreeViewItem[];
+    protected _wasDraggingAllowedBeforeFiltering: boolean;
+    protected _activeItem: TreeViewItem;
+    /**
+     * Creates a new TreeView.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args?: Readonly<TreeViewArgs>);
+    destroy(): void;
+    protected _updateModifierKeys: (evt: KeyboardEvent | MouseEvent) => void;
+    protected _onFocusIn: (evt: FocusEvent) => void;
+    protected _setActiveItem(item: TreeViewItem | null): void;
+    /**
+     * Finds the next tree item that is not currently hidden.
+     *
+     * @param currentItem - The current tree item.
+     * @returns The next visible tree item.
+     */
+    protected _findNextVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem;
+    /**
+     * Finds the last visible child tree item of the specified tree item.
+     *
+     * @param currentItem - The current item.
+     * @returns The last child item.
+     */
+    protected _findLastVisibleChildTreeItem(currentItem: TreeViewItem): TreeViewItem;
+    /**
+     * Finds the previous visible tree item of the specified tree item.
+     *
+     * @param currentItem - The current tree item.
+     * @returns The previous item.
+     */
+    protected _findPreviousVisibleTreeItem(currentItem: TreeViewItem): TreeViewItem;
+    /**
+     * Gets the visible tree items between the specified start and end tree items.
+     *
+     * @param startChild - The start tree item.
+     * @param endChild - The end tree item.
+     */
+    protected _getChildrenRange(startChild: TreeViewItem, endChild: TreeViewItem): TreeViewItem[];
+    protected _onAppendChild(element: Element): void;
+    protected _onRemoveChild(element: Element): void;
+    protected _onAppendTreeViewItem(item: TreeViewItem): void;
+    protected _onRemoveTreeViewItem(item: TreeViewItem): void;
+    protected _ensureActiveItem(): void;
+    protected _onChildKeyDown(evt: KeyboardEvent, item: TreeViewItem): void;
+    protected _onChildClick(evt: MouseEvent, item: TreeViewItem): void;
+    /**
+     * Call specified function on every child TreeViewItem by traversing the hierarchy depth first.
+     *
+     * @param fn - The function to call. The function takes the TreeViewItem as an argument.
+     */
+    protected _traverseDepthFirst(fn: (item: TreeViewItem) => void): void;
+    /**
+     * Do a depth first traversal of all tree items
+     * and assign an order to them so that we know which one
+     * is above the other. Performance wise this means it traverses
+     * all tree items every time however seems to be pretty fast even with 15 - 20 K entities.
+     */
+    protected _getTreeOrder(): Map<TreeViewItem, number>;
+    protected _getChildIndex(item: TreeViewItem, parent: Container): number;
+    protected _onChildDragStart(evt: MouseEvent, item: TreeViewItem): void;
+    protected _onChildDragEnd(evt: MouseEvent, item: TreeViewItem): void;
+    protected _onChildDragOver(evt: MouseEvent, item: TreeViewItem): void;
+    protected _onMouseLeave: (evt: MouseEvent) => void;
+    protected _onMouseMove: (evt: MouseEvent) => void;
+    protected _scrollWhileDragging(): void;
+    protected _onDragMove: (evt: MouseEvent) => void;
+    protected _updateDragHandle(dragOverItem?: TreeViewItem, force?: boolean): void;
+    /**
+     * Opens all the parents of the specified item.
+     *
+     * @param endItem - The end tree view item.
+     */
+    protected _openHierarchy(endItem: TreeViewItem): void;
+    /**
+     * Selects a tree view item.
+     *
+     * @param item - The tree view item.
+     */
+    protected _selectSingleItem(item: TreeViewItem): void;
+    /**
+     * Called when a child tree view item is selected.
+     *
+     * @param item - The tree view item.
+     */
+    protected _onChildSelected(item: TreeViewItem): void;
+    /**
+     * Called when a child tree view item is deselected.
+     *
+     * @param item - The tree view item.
+     */
+    protected _onChildDeselected(item: TreeViewItem): void;
+    /**
+     * Called when a child tree view item is renamed.
+     *
+     * @param item - The tree view item.
+     * @param newName - The new name.
+     */
+    protected _onChildRename(item: TreeViewItem, newName: string): void;
+    protected _searchItems(items: TreeViewItem[], filter: string): void;
+    /**
+     * Searches the treeview.
+     *
+     * @param filter - The search filter.
+     */
+    protected _applyFilter(filter: string): void;
+    /**
+     * Clears search filter.
+     */
+    protected _clearFilter(): void;
+    /**
+     * Show the drag handle on the given tree item.
+     *
+     * @param treeItem - The tree item.
+     */
+    showDragHandle(treeItem: TreeViewItem): void;
+    /**
+     * Deselects all selected tree view items.
+     */
+    deselect(): void;
+    /**
+     * Traverses all child {@link TreeViewItem}s using depth first search and calls the supplied
+     * function for each item.
+     *
+     * @param fn - The function to call. The function takes the {@link TreeViewItem} as an argument.
+     * @example
+     * ```ts
+     * treeView.traverse((item: TreeViewItem) => {
+     *     console.log(item.text);
+     * });
+     * ```
+     */
+    traverse(fn: (item: TreeViewItem) => void): void;
+    /**
+     * Expands all tree view items.
+     */
+    expandAll(): void;
+    /**
+     * Collapses all tree view items.
+     */
+    collapseAll(): void;
+    /**
+     * Removes all child tree view items.
+     */
+    clearTreeItems(): void;
+    /**
+     * Sets whether dragging a TreeViewItem is allowed.
+     */
+    set allowDrag(value: boolean);
+    /**
+     * Gets whether dragging a TreeViewItem is allowed.
+     */
+    get allowDrag(): boolean;
+    /**
+     * Sets whether a TreeViewItem is currently being dragged.
+     */
+    set isDragging(value: boolean);
+    /**
+     * Gets whether a TreeViewItem is currently being dragged.
+     */
+    get isDragging(): boolean;
+    /**
+     * Gets all of the currently selected TreeViewItems.
+     */
+    get selected(): Array<TreeViewItem>;
+    /**
+     * Sets the filter that searches TreeViewItems and only shows the ones that are relevant to the filter.
+     */
+    set filter(value: string | null);
+    /**
+     * Gets the filter that searches TreeViewItems and only shows the ones that are relevant to the filter.
+     */
+    get filter(): string | null;
+    /**
+     * Gets whether Ctrl is currently pressed.
+     */
+    get pressedCtrl(): boolean;
+    /**
+     * Gets whether Shift is currently pressed.
+     */
+    get pressedShift(): boolean;
+    /**
+     * Gets whether the selection was triggered by arrow key navigation.
+     */
+    get pressedArrow(): boolean;
+}
+export { TreeView, TreeViewArgs, ReparentedItem };

package/node_modules/@playcanvas/pcui/types/components/TreeViewItem/index.d.ts

@@ -0,0 +1,224 @@
+import { Container, ContainerArgs } from '../Container';
+import { Element } from '../Element';
+import { Label } from '../Label';
+import type { TreeView } from '../TreeView';
+/**
+ * The arguments for the {@link TreeViewItem} constructor.
+ */
+interface TreeViewItemArgs extends ContainerArgs {
+    /**
+     * Whether the item is selected.
+     */
+    selected?: boolean;
+    /**
+     * Whether the item can be selected. Defaults to `true`.
+     */
+    allowSelect?: boolean;
+    /**
+     * Whether the item is open (showing its children). Defaults to `false`.
+     */
+    open?: boolean;
+    /**
+     * Whether this {@link TreeViewItem} can be dragged. Only considered if the parent {@link TreeView}
+     * has `allowDrag` set to `true`. Defaults to `true`.
+     */
+    allowDrag?: boolean;
+    /**
+     * Whether dropping is allowed on the {@link TreeViewItem}. Defaults to `true`.
+     */
+    allowDrop?: boolean;
+    /**
+     * The text shown by the {@link TreeViewItem}.
+     */
+    text?: string;
+    /**
+     * The icon shown before the text in the {@link TreeViewItem}. Defaults to 'E360'.
+     */
+    icon?: string;
+    /**
+     * Method to be called when the {@link TreeViewItem} is selected.
+     */
+    onSelect?: (deselect: () => void) => void;
+    /**
+     * Method to be called when the {@link TreeViewItem} is deselected.
+     */
+    onDeselect?: () => void;
+}
+/**
+ * A TreeViewItem is a single node in a hierarchical {@link TreeView} control.
+ */
+declare class TreeViewItem extends Container {
+    /**
+     * Fired when user selects the TreeViewItem.
+     *
+     * @event
+     * @example
+     * ```ts
+     * treeViewItem.on('select', (item: TreeViewItem) => {
+     *     console.log('TreeViewItem selected', item);
+     * });
+     * ```
+     */
+    static readonly EVENT_SELECT = "select";
+    /**
+     * Fired when user deselects the TreeViewItem.
+     *
+     * @event
+     * @example
+     * ```ts
+     * treeViewItem.on('deselect', (item: TreeViewItem) => {
+     *     console.log('TreeViewItem deselected', item);
+     * });
+     * ```
+     */
+    static readonly EVENT_DESELECT = "deselect";
+    /**
+     * Fired when user opens the TreeViewItem.
+     *
+     * @event
+     * @example
+     * ```ts
+     * treeViewItem.on('open', (item: TreeViewItem) => {
+     *     console.log('TreeViewItem opened', item);
+     * });
+     * ```
+     */
+    static readonly EVENT_OPEN = "open";
+    /**
+     * Fired when user closes the TreeViewItem.
+     *
+     * @event
+     * @example
+     * ```ts
+     * treeViewItem.on('close', (item: TreeViewItem) => {
+     *     console.log('TreeViewItem closed', item);
+     * });
+     * ```
+     */
+    static readonly EVENT_CLOSE = "close";
+    /**
+     * Determines whether dropping is allowed on the tree item.
+     */
+    allowDrop: boolean;
+    /**
+     * Determines whether this tree item can be dragged. Only considered if the parent
+     * {@link TreeView} has {@link TreeView#allowDrag} set to `true`.
+     */
+    allowDrag: boolean;
+    /**
+     * Determines whether the item can be selected.
+     */
+    allowSelect: boolean;
+    protected _containerContents: Container;
+    protected _labelIcon: Label;
+    protected _labelText: Label;
+    protected _numChildren: number;
+    protected _treeView: any;
+    protected _icon: string;
+    protected _open: boolean;
+    /**
+     * Creates a new TreeViewItem.
+     *
+     * @param args - The arguments.
+     */
+    constructor(args?: Readonly<TreeViewItemArgs>);
+    destroy(): void;
+    protected _onAppendChild(element: Element): void;
+    protected _onRemoveChild(element: Element): void;
+    protected _onContentKeyDown: (evt: KeyboardEvent) => void;
+    protected _onContentMouseDown: (evt: MouseEvent) => void;
+    protected _onContentMouseUp: (evt: MouseEvent) => void;
+    protected _onContentMouseOver: (evt: MouseEvent) => void;
+    protected _onContentDragStart: (evt: DragEvent) => void;
+    protected _onContentClick: (evt: MouseEvent) => void;
+    protected _dfs(fn: (item: TreeViewItem) => void): void;
+    protected _onContentDblClick: (evt: MouseEvent) => void;
+    protected _onContentContextMenu: (evt: MouseEvent) => void;
+    protected _onContentFocus: (evt: FocusEvent) => void;
+    protected _onContentBlur: (evt: FocusEvent) => void;
+    rename(): void;
+    focus(): void;
+    blur(): void;
+    /**
+     * Sets whether the item is selected.
+     */
+    set selected(value: boolean);
+    /**
+     * Gets whether the item is selected.
+     */
+    get selected(): boolean;
+    /**
+     * Sets the text shown by the TreeViewItem.
+     */
+    set text(value: string);
+    /**
+     * Gets the text shown by the TreeViewItem.
+     */
+    get text(): string;
+    /**
+     * Gets the internal label that shows the text.
+     */
+    get textLabel(): Label;
+    /**
+     * Gets the internal label that shows the icon.
+     */
+    get iconLabel(): Label;
+    /**
+     * Gets the container that holds the icon and text for this tree view item. Useful for
+     * positioning calculations or appending custom content alongside the item row.
+     */
+    get content(): Container;
+    /**
+     * Sets whether the item is expanded and showing its children.
+     */
+    set open(value: boolean);
+    /**
+     * Gets whether the item is expanded and showing its children.
+     */
+    get open(): boolean;
+    /**
+     * Sets whether the ancestors of the item are open or closed.
+     */
+    set parentsOpen(value: boolean);
+    /**
+     * Gets whether the ancestors of the item are open or closed.
+     */
+    get parentsOpen(): boolean;
+    /**
+     * Sets the parent {@link TreeView}.
+     */
+    set treeView(value: TreeView | null);
+    /**
+     * Gets the parent {@link TreeView}.
+     */
+    get treeView(): TreeView | null;
+    /**
+     * Gets the number of direct children.
+     */
+    get numChildren(): number;
+    /**
+     * Gets the first child item.
+     */
+    get firstChild(): TreeViewItem;
+    /**
+     * Gets the last child item.
+     */
+    get lastChild(): TreeViewItem;
+    /**
+     * Gets the next sibling item.
+     */
+    get nextSibling(): TreeViewItem;
+    /**
+     * Gets the previous sibling item.
+     */
+    get previousSibling(): TreeViewItem;
+    /**
+     * Sets the icon shown before the text in the TreeViewItem.
+     */
+    set icon(value: string);
+    /**
+     * Gets the icon shown before the text in the TreeViewItem.
+     */
+    get icon(): string;
+}
+export { TreeViewItem, TreeViewItemArgs };