@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/surface-renderer/plugins/miniview/miniview-plugin.d.ts

@@ -0,0 +1,235 @@
+import { Group, Vertex, Node } from "../../../../core";
+import { Surface } from "../../surface";
+import { SurfaceVertexAddedParams } from "../../params";
+import { PointXY, Size, VertexUpdatedReason } from "../../../../core";
+import { GroupResizeResult, Viewport, ViewportElement, ViewportBounds, ViewportGroupElement } from "../../../../ui";
+import { PanZoom } from "../../../pan-zoom";
+import { EventManager } from "../../../event-manager";
+import { BrowserElement } from "../../../util";
+import { VisuallyJSDOMElement } from "../../../element-facade";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
+/**
+ * Options for the {@link MiniviewPlugin}
+ * @group Plugins
+ * @category Miniview
+ */
+export interface MiniviewPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * Element to render into. When using a library integration you do not provide this.
+     */
+    container: BrowserElement;
+    /**
+     * Defaults to false. Whether or not to suspend rendering after load.
+     */
+    suspended?: boolean;
+    /**
+     * Defaults to true, determines whether or not the miniview can be collapsed.
+     */
+    collapsible?: boolean;
+    /**
+     * Optional function to use to derive a type for each rendered node/group. This is written onto
+     * the corresponding element as the value of the `data-vjs-miniview-type` attribute, and can be useful
+     * for styling.
+     * @param v
+     */
+    typeFunction?: (v: Node | Group) => string;
+    /**
+     * Optional overide for how sensitive the wheel zoom should be.
+     */
+    wheelSensitivity?: number;
+    /**
+     * Optional filter for elements to display. Defaults to undefined - all elements displayed.
+     * @param v
+     */
+    elementFilter?: (v: Vertex) => boolean;
+    /**
+     * Defauts to true, Whether or not to enable the wheel zoom.
+     */
+    enableWheelZoom?: boolean;
+    /**
+     * Defaults to true. Whether or not the miniview is initially visible.
+     */
+    visible?: boolean;
+    /**
+     * Defaults to false. Whether or not to reverse the zoom direction in response to a wheel event.
+     */
+    wheelReverse?: boolean;
+    /**
+     * Defaults to true, meaning the miniview actively updates as nodes/groups are dragged on the related surface. If this is set
+     * to false, the miniview only updates after mouseup.
+     */
+    activeTracking?: boolean;
+    /**
+     * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
+     */
+    clickToCenter?: boolean;
+}
+interface MiniviewDOMElement extends VisuallyJSDOMElement {
+    vertex: Vertex;
+    viewportEntry: ViewportElement<BrowserElement>;
+}
+/**
+ * Written onto elements rendering nodes in a miniview
+ * @group Plugins
+ * @category Miniview
+ */
+export declare const ATTRIBUTE_VJS_NODE_ID = "vjs-node-id";
+/**
+ * Written onto elements rendering nodes/groups in a miniview, if you supply a type function to the miniview.
+ * @group Plugins
+ * @category Miniview
+ * @domAttribute
+ * @context miniview
+ */
+export declare const ATTRIBUTE_VJS_MINIVIEW_TYPE = "vjs-miniview-type";
+/**
+ * Miniview plugin for Surface.
+ * @group Plugins
+ * @category Miniview
+ */
+export declare class MiniviewPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<MiniviewPluginOptions> {
+    static type: string;
+    id: "miniview";
+    ui: Surface;
+    panzoom: PanZoom;
+    containerElement: BrowserElement;
+    canvasElement: BrowserElement;
+    pannerElement: BrowserElement;
+    uiBounds: ViewportBounds;
+    suspended: boolean;
+    _collapsible: boolean;
+    typeFunction: (v: Node | Group) => string;
+    _collapser: any;
+    _collapsed: boolean;
+    wheelSensitivity: number;
+    wheelReverse: boolean;
+    panning: boolean;
+    downAt: PointXY;
+    pannerAtMouseDown: PointXY;
+    zoomingWithWheel: boolean;
+    elementFilter: (vertex: Node | Group) => boolean;
+    visible: boolean;
+    pannerPos: PointXY;
+    /**
+     * When true, which is the default, miniview elements move at the same time as their related element in the surface is being dragged.
+     */
+    activeTracking: boolean;
+    /**
+     * Defaults to true, meaning a click on a node/group in the miniview will cause that node/group to be centered in the related surface.
+     */
+    clickToCenter: boolean;
+    vertexMap: Record<string, MiniviewDOMElement>;
+    enableWheelZoom: boolean;
+    eventManager: EventManager;
+    _dataLoadEnd: (a: any, e?: any) => any;
+    uiBindings: Array<[string, Function]>;
+    _doToggleCollapse: Function;
+    viewport: Viewport<any>;
+    private _doWheelZoom;
+    private _downListener;
+    private _moveListener;
+    private _upListener;
+    private _onWindowResize;
+    destroy(): void;
+    private __elasticFrameResized;
+    private __elasticFrameRemoved;
+    private _bindToSurface;
+    initialise(surface: Surface, options: MiniviewPluginOptions): boolean;
+    reset(): void;
+    private _getGroupAdjustedPosition;
+    private _loadInitialData;
+    private _onGroupAdded;
+    $groupCollapsed(element: ViewportGroupElement<BrowserElement>): void;
+    $groupExpanded(element: ViewportGroupElement<BrowserElement>): void;
+    $vertexRotated(element: ViewportElement<BrowserElement>, rotation: number): void;
+    $vertexResized(element: ViewportElement<BrowserElement>, width: number, height: number): void;
+    $vertexUpdated(element: ViewportElement<BrowserElement>, reason: VertexUpdatedReason): void;
+    private downListener;
+    private moveListener;
+    private upListener;
+    private wheelZoom;
+    /**
+     * Toggle the collapsed state of the miniview - which means that it toggles the class {@link CLASS_MINIVIEW_COLLAPSED} on the miniview element.
+     */
+    toggleCollapsed(): void;
+    private __zoomToFit;
+    private _vertexMoved;
+    private _groupRelayout;
+    private _afterRelayout;
+    private _migrateGroupMembersToGroupElement;
+    _nodeAdded(params: SurfaceVertexAddedParams, extraClasses?: any): void;
+    /**
+     * Sets whether or not the miniview is visible. Strictly speaking you don't need to use this method
+     * you can just control the miniview's container via your own CSS or whatever. But the Surface uses this
+     * occasionally, and there is also the concept of having the miniview initially invisible until the
+     * related surface contains some data.
+     */
+    setVisible(v: boolean): void;
+    getPan(): PointXY;
+    _showGroupMembers(group: Group, state: boolean): void;
+    private $__getSize;
+    _objectRepainted(info: {
+        id: string;
+        obj?: Node | Group;
+        size?: Size;
+    }): void;
+    invalidate(id?: string): void;
+    setSuspended(s: boolean, updateAfterwards?: boolean): void;
+    private _vertexRemoved;
+    /**
+     * @internal
+     * @param entry
+     * @private
+     */
+    $nodeRemoved(entry: ViewportElement<BrowserElement>): void;
+    /**
+     * @internal
+     * @param params
+     * @private
+     */
+    $groupRemoved(element: ViewportGroupElement<BrowserElement>): void;
+    /**
+     * Notification from the UI that a group has been resized. We resize our matching element
+     * and update the panner.
+     * @param params
+     * @private
+     * @internal
+     */
+    $groupResized(params: GroupResizeResult<BrowserElement>): void;
+    /**
+     * Sets the appropriate position in the DOM for the miniview element
+     * representing `element`. Takes into account whether or not the
+     * element is inside a group, adjusting the offset for the group's
+     * viewport offset if so
+     * @internal
+     * @param element
+     * @private
+     */
+    private __updateElementPosition;
+    /**
+     * Notification from the UI that a group member has been removed. We remove our matching element.
+     * @param element
+     * @private
+     * @internal
+     */
+    $groupMemberRemoved(element: ViewportElement<BrowserElement>): void;
+    /**
+     * Notification from the UI that a group member has been added. We move our matching element
+     * into the group's element.
+     * @param element
+     * @private
+     * @internal
+     */
+    $groupMemberAdded(element: ViewportElement<BrowserElement>): void;
+    private _removeAllNodes;
+    private __nodeVisibility;
+    private __updatePanner;
+    private __updateSurface;
+    /**
+     * @deprecated
+     * @param vertexId
+     */
+    getRenderedVertex(vertexId: string): any;
+    getRenderedElement(vertexId: string): any;
+}
+export {};

package/types/browser-ui/surface-renderer/plugins/palette/index.d.ts

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

package/types/browser-ui/surface-renderer/plugins/palette/palette-plugin.d.ts

@@ -0,0 +1,17 @@
+import { BaseBrowserUIPlugin, BrowserUIPlugin } from "../../../plugins";
+import { PaletteOptions } from "../../../components";
+import { BrowserElement } from "../../../util";
+import { BrowserUI } from "../../../browser-visuallyjs-instance";
+/**
+ * Options for the palette plugin
+ */
+export interface PalettePluginOptions extends PaletteOptions<BrowserElement> {
+}
+export declare class PalettePlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<PalettePluginOptions> {
+    static type: string;
+    id: "palette";
+    private $palette;
+    destroy(): void;
+    initialise(ui: BrowserUI, options: PalettePluginOptions): boolean;
+    reset(): void;
+}

package/types/browser-ui/surface-renderer/plugins/pan-buttons/index.d.ts

@@ -0,0 +1 @@
+export * from "./pan-buttons-plugin";

package/types/browser-ui/surface-renderer/plugins/pan-buttons/pan-buttons-plugin.d.ts

@@ -0,0 +1,55 @@
+import { Surface } from "../../surface";
+import { PanZoom } from "../../../pan-zoom";
+import { BaseBrowserUIPlugin, BrowserUIPlugin, BrowserUIPluginOptions } from "../../../plugins";
+/**
+ * Options for the pan buttons plugin.
+ * @group Plugins
+ * @category Pan Buttons
+ */
+export interface PanButtonsPluginOptions extends BrowserUIPluginOptions {
+    /**
+     * Time in milliseconds after the mouse button is pressed before panning should start. Defaults to 150.
+     */
+    startPanTimeout?: number;
+    /**
+     * Time in milliseconds between successive adjustment to the pan. Defaults to 60.
+     */
+    panRepeatInterval?: number;
+    /**
+     * Amount in pixels to adjust pan by each time the timer fires. Defaults to 10.
+     */
+    panRepeatDistance?: number;
+    /**
+     * Amount in pixels to pan the surface by when one of the buttons is pressed and released. Defaults to 50.
+     */
+    panDistance?: number;
+}
+/**
+ * This is a Surface plugin that adds buttons around the perimeter of the surface canvas, which users can click on the nudge the pan
+ * in a certain direction. Click and hold auto-pans the surface canvas.
+ * @group Plugins
+ * @category Pan Buttons
+ */
+export declare class PanButtonsPlugin extends BaseBrowserUIPlugin implements BrowserUIPlugin<PanButtonsPluginOptions> {
+    static type: string;
+    id: "panButtons";
+    startPanTimeout: number;
+    panRepeatInterval: number;
+    panRepeatDistance: number;
+    _panButtons: Array<HTMLDivElement>;
+    _startTimer: number;
+    currentPanButton: any;
+    surface: Surface;
+    panZoom: PanZoom;
+    panDistance: number;
+    eventManager: any;
+    private _justPanned;
+    private _clearPanTimer;
+    private _endPanRepeat;
+    initialise(surface: Surface, options: PanButtonsPluginOptions): boolean;
+    private curryPanButton;
+    private startPanTimer;
+    private makePanButton;
+    destroy(): void;
+    reset(): void;
+}

package/types/browser-ui/surface-renderer/plugins/resizing-tools/border-drag-handlers.d.ts

@@ -0,0 +1,3 @@
+import { ResizingToolsPlugin } from "./resizing-tools-plugin";
+import { ResizeHandler } from "./definitions";
+export declare function createBorderDragHandlers(p: ResizingToolsPlugin): Record<string, ResizeHandler>;