@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/components/inspector/definitions.d.ts

@@ -0,0 +1,114 @@
+import { Base, ObjectData } from "../../../core";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * The base options for an inspector - shared by Inspector and VanillaInspector.
+ * @group  Components
+ * @category Inspector
+ */
+export interface BaseInspectorOptions {
+    /**
+     * The element into which the inspector is drawn.
+     */
+    container: HTMLElement;
+    /**
+     * The UI to attach to.
+     */
+    ui: BrowserUI;
+    /**
+     * Optional css class(es) to set on the inspector - a space separated list.
+     */
+    cssClass?: string;
+    /**
+     * Whether or not to support multiple selections. Defaults to true.
+     */
+    multipleSelections?: boolean;
+    /**
+     * Optional callback to invoke after an update has occurred.
+     */
+    afterUpdate?: () => any;
+    /**
+     * Whether or not to auto commit changes on blur/change events. Defaults to true.
+     */
+    autoCommit?: boolean;
+    /**
+     * Optional filter you can use to instruct the inspector to ignore certain items.
+     * @param b The object to test
+     */
+    filter?: (b: Base) => boolean;
+    /**
+     * Defaults to true. With this setting, if an update is made that has one or more blank strings, the strings will only be written to objects that already had some value for the corresponding key. If some object has, say, no value stored against the key `foo`, then the inspector will not write a value of "" for that key into the vertex. The reasoning for this flag is that you cannot get a null value from a text field, so if some text field has no value written in it and then gets a blur event, the UI reports a value of "", ie an empty string. But this is likely not the user's intention, if the field was blank to begin with.
+     */
+    doNotWriteBlankNewValues?: boolean;
+    /**
+     * Defaults to false. When true, the inspector will have a close button in the top right corner, which, when pressed, will
+     * clear the Toolkit's selection.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Optional context to also provide to the templates when rendering. This can be accessed via the `$context` prefix, for
+     * instance `{{$context.myValue}}`
+     */
+    context?: Record<string, any>;
+    /**
+     * Optional callback used to retrieve a value for a specific property when it's not present in the object's data.
+     * @param b The object being inspected.
+     * @param key The property key.
+     */
+    getDefaultValue?: (d: ObjectData, key: string) => any;
+}
+/**
+ * Options for an inspector.
+ * @group  Components
+ * @category Inspector
+ */
+export interface InspectorOptions extends BaseInspectorOptions {
+    /**
+     * Callback invoked when the inspector is cleared.
+     * @private
+     */
+    renderEmptyContainer: () => void;
+    /**
+     * Callback invoked when a new object has started to be edited.
+     * @param obj
+     * @param cb
+     */
+    refresh: (obj: Base, cb: () => any) => void;
+}
+/**
+ * @internal
+ */
+export type FieldInfo = {
+    field: HTMLElement;
+    edited: boolean;
+    common: boolean;
+    commonValue: any;
+    editedValue?: any;
+    attribute: string;
+};
+/**
+ * Options for the VanillaInspector, an instance of Inspector that uses VisuallyJs's default templating mechanism to render elements.
+ * @group  Components
+ * @category Inspector
+ */
+export interface VanillaInspectorOptions extends BaseInspectorOptions {
+    /**
+     * Template to use in the inspector when there is nothing selected. By default an empty `div` element is used.
+     */
+    emptyTemplate?: string;
+    /**
+     * Resolves templates for a given object.
+     * @param obj
+     */
+    templateResolver: (obj: Base) => string;
+    /**
+     * By default the inspector will cache found templates, keyed by the type of the object and its category (there is a separate cache for nodes, groups, edges and ports, and in each cache the key is the object's `type`). In some situations you may not want to cache the template, for instance if your template has dynamic data that depends on the object that is being inspected. If that's the case you can set this to false.
+     */
+    cacheTemplates?: boolean;
+}
+/**
+ * The default key used to store/retrieve recent color list in/from the inspector context
+ * @group Components
+ * @category Inspector
+ * @internal
+ */
+export declare const INSPECTOR_CONTEXT_RECENT_COLORS = "recentColors";

package/types/browser-ui/components/inspector/edge-type-tag.d.ts

@@ -0,0 +1,15 @@
+import { VanillaInspector } from "./vanilla-inspector";
+/**
+ * The HTML element identifying the edge type picker.
+ * @group Components
+ * @category Inspector
+ * @constant
+ */
+export declare const EDGE_TYPE_PICKER_ELEMENT = "vjs-edge-type";
+/**
+ * The default key used to retrieve edge mappings from the inspector context. The standard approach is to register property mappings on the UI, and the inspector will resolve from there. But for certain standalone scenarios it can be useful to supply property mappings to the inspector directly (such as if you want to only make available a certain subset to the user).
+ * @group Components
+ * @category Inspector
+ */
+export declare const INSPECTOR_CONTEXT_EDGE_PROPERTY_MAPPINGS = "edgeMappings";
+export declare function registerEdgeTypePickerTag(inspector: VanillaInspector): void;

package/types/browser-ui/components/inspector/index.d.ts

@@ -0,0 +1,6 @@
+export * from './definitions';
+export * from './inspector';
+export * from './vanilla-inspector';
+export * from './color-picker-tag';
+export * from './edge-type-tag';
+export * from './shape-type-inspector';

package/types/browser-ui/components/inspector/inspector.d.ts

@@ -0,0 +1,138 @@
+import { Base, ObjectData } from "../../../core";
+import { EventManager } from "../../event-manager";
+import { VjsContext } from "../../../ui";
+import { FieldInfo, InspectorOptions } from "./definitions";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * Assigned to an Inspector's container when the inspector is active.
+ * @group Components
+ * @category Inspector
+ * @cssClass
+ * @context inspector
+ */
+export declare const CLASS_INSPECTOR_ACTIVE = "vjs-inspector-active";
+/**
+ * Assigned to an Inspector's container when the inspector is inactive.
+ * @group Components
+ * @category Inspector
+ * @cssClass
+ * @context inspector
+ */
+export declare const CLASS_INSPECTOR_INACTIVE = "vjs-inspector-inactive";
+/**
+ * Assigned to an Inspector's container element.
+ * @group Components
+ * @category Inspector
+ * @cssClass
+ * @context inspector
+ */
+export declare const CLASS_INSPECTOR = "vjs-inspector";
+/**
+ * Assigned to the close button that is added when `showCloseButton` is set to true.
+ * @group Components
+ * @category Inspector
+ * @cssClass
+ * @context inspector
+ */
+export declare const CLASS_INSPECTOR_CLOSE = "vjs-inspector-close";
+/**
+ * Fired by an Inspector when its contents have changed.
+ * @group Components
+ * @category Inspector
+ */
+export declare const EVENT_CHANGE = "change";
+/**
+ * @internal
+ */
+export type InspectorValueListener = (key: string, value: any) => void;
+/**
+ * Offers a simple means to inspect and change the values in some object or set of objects.
+ * @group  Components
+ * @category Inspector
+ */
+export declare class Inspector extends VjsContext {
+    container: HTMLElement;
+    $ui: BrowserUI;
+    private model;
+    eventManager: EventManager;
+    private readonly _multipleSelections;
+    private _valueListeners;
+    private _pendingUpdates;
+    private readonly _autoCommit;
+    private readonly _doNotWriteBlankNewValues;
+    private readonly _renderEmptyContainer;
+    private readonly _refresh;
+    private readonly _afterUpdate?;
+    protected _resetting: boolean;
+    protected _fieldMap: Map<string, FieldInfo>;
+    current: Array<Base>;
+    _currentCommonData: ObjectData;
+    _filter: (b: Base) => boolean;
+    readonly $getDefaultValue?: (d: ObjectData, key: string) => any;
+    private readonly _showCloseButton;
+    $eventManager: EventManager;
+    constructor(options: InspectorOptions);
+    private _bindEvents;
+    private $updateObject;
+    protected $_recomputeCommonData(): void;
+    private __filterEmptyStrings;
+    /**
+     * Write the changes to the toolkit.
+     * @param updates
+     * @internal
+     */
+    private _persistChanges;
+    /**
+     * Either write the changes to the toolkit or store them in the list of pending updates, depending on
+     * the autoCommit flag.
+     * @param updates
+     * @internal
+     */
+    private _updateCurrent;
+    reset(doNotRenderEmptyContainer: boolean): void;
+    private _destroy;
+    _remove(obj: Base): void;
+    private _injectCloseButton;
+    private _recomputeAndApply;
+    private _edit;
+    $refresh(): void;
+    /**
+     * @internal
+     * @param v
+     */
+    addValueListener(v: InspectorValueListener): void;
+    /**
+     * For subclasses/wrapper classes to use.
+     * @param key
+     * @param value
+     *
+     */
+    setValue(key: string, value: any, repaintAfterwards?: boolean): void;
+    /**
+     * @internal
+     * @param b
+     * @param key
+     */
+    _getDefaultValue(b: Base, key: string): any;
+    /**
+     * Gets the current value for the given key, may be null.
+     * @param key
+     */
+    getValue(key: string): string;
+    onChange(fn: (data: ObjectData) => any): void;
+    /**
+     * Persist any pending updates to the toolkit, then clear the list of pending updates. Returns the count of
+     * the number of changes made.
+     *
+     */
+    persist(): number;
+    /**
+     * Returns whether or not there are unsaved changes.
+     *
+     */
+    hasPendingChanges(): boolean;
+    /**
+     * Redraw the inspector.
+     */
+    redraw(): void;
+}

package/types/browser-ui/components/inspector/shape-type-inspector.d.ts

@@ -0,0 +1,43 @@
+import { ShapePropertyDefinition } from "../../shape-library";
+import { VanillaInspector } from "./vanilla-inspector";
+import { Base } from "../../../core";
+import { VanillaInspectorOptions } from "./definitions";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * Generates an HTML string in the Recado template format for all configurable
+ * properties of a given ShapeType, utilizing `vjs-att` for data binding.
+ *
+ * @param properties The properties to render.
+ * @returns A string representing the Recado template for the inspector.
+ * @internal
+ */
+export declare function generateInspectorTemplate(properties: Array<ShapePropertyDefinition>, noPropertiesMessage: string): string;
+export interface ShapeTypeInspectorOptions extends VanillaInspectorOptions {
+    ui: BrowserUI;
+    properties?: Array<ShapePropertyDefinition>;
+    /**
+     * Specifies how the `properties` option should be used.
+     * - `override`: (default) Use only the properties defined in the inspector options.
+     * - `fallback`: Use shape/set properties if they exist; otherwise, use these properties.
+     */
+    propertyMode?: "override" | "fallback";
+    noPropertiesMessage?: string;
+}
+/**
+ * An inspector that renders to a nominated DOM element, using VisuallyJs's default template renderer. You have to provide `templateResolver` which, for a given object, can return a template in VisuallyJs's default template syntax.
+ * @group  Components
+ * @category Inspector
+ */
+export declare class ShapeTypeInspector extends VanillaInspector {
+    private readonly _shapeLibrary;
+    private readonly _properties;
+    private readonly _propertyMode;
+    private readonly _noPropertiesMessage;
+    /**
+     * Constructor for the diagram inspector.
+     * @param options
+     */
+    constructor(options: ShapeTypeInspectorOptions);
+    private _getResolvedProperties;
+    protected _resolveTemplate(b: Base): string;
+}

package/types/browser-ui/components/inspector/vanilla-inspector.d.ts

@@ -0,0 +1,39 @@
+import { VanillaInspectorOptions } from "./definitions";
+import { Inspector } from "./inspector";
+import { CustomTagOptions } from "../../../core";
+/**
+ * An inspector that renders to a nominated DOM element, using VisuallyJs's default template renderer. You have to provide `templateResolver` which, for a given object, can return a template in VisuallyJs's default template syntax.
+ * @group  Components
+ * @category Inspector
+ */
+export declare class VanillaInspector extends Inspector {
+    private readonly _instance;
+    private readonly _templateRenderer;
+    private readonly _emptyTemplateFn;
+    private readonly _templateResolver;
+    private _vertexTemplateCache;
+    private _edgeTemplateCache;
+    private _portTemplateCache;
+    private readonly _doCacheTemplates;
+    /**
+     * Constructor for the vanilla inspector.
+     * @param options
+     */
+    constructor(options: VanillaInspectorOptions);
+    /**
+     * @internal
+     * @param tagName
+     * @param options
+     */
+    registerTag(tagName: string, options: CustomTagOptions): void;
+    private _getPortTemplate;
+    private _getNodeTemplate;
+    /**
+     * getGroupTemplate uses the same logic as getNodeTemplate
+     * @internal
+     * @param obj
+     */
+    private _getGroupTemplate;
+    private _getEdgeTemplate;
+    private _renderTemplate;
+}

package/types/browser-ui/components/palette/index.d.ts

@@ -0,0 +1,2 @@
+export * from './palette-options';
+export * from './palette';

package/types/browser-ui/components/palette/palette-content-generator.d.ts

@@ -0,0 +1,14 @@
+import { ObjectData } from "../../../core";
+import { BrowserUiRecado } from "../../templating";
+import { BrowserElement } from "../../util";
+/**
+ * Helper class for Palette - takes a template and some data and generates content, then appends to the given container.
+ * @internal
+ */
+export declare class PaletteContentGenerator {
+    private container;
+    templateRenderer: BrowserUiRecado;
+    constructor(container: BrowserElement, template: string);
+    private _init;
+    setData(d: ObjectData, newTemplate?: string): void;
+}

package/types/browser-ui/components/palette/palette-options.d.ts

@@ -0,0 +1,159 @@
+import { BrowserElement } from "../../util";
+import { CanvasDropFilter, DataGeneratorFunction, DragFunction, GroupIdentifierFunction, OnVertexAddedCallback, TypeGeneratorFunction } from "../../definitions";
+import { ObjectData, PointXY, Size, Node, Group } from "../../../core";
+export declare const PALETTE_MODE_DRAG = "drag";
+export declare const PALETTE_MODE_TAP = "tap";
+export declare const PALETTE_MODE_DRAW = "draw";
+export type PaletteMode = typeof PALETTE_MODE_TAP | typeof PALETTE_MODE_DRAG | typeof PALETTE_MODE_DRAW;
+/**
+ * Options for a Palette
+ * @group Components
+ * @category Palette
+ */
+export interface PaletteOptions<T> {
+    /**
+     * The element containing things that will be dragged/tapped.
+     */
+    source: BrowserElement;
+    /**
+     * A CSS selector identifying children of `source` that are draggable/can be tapped. If not provided, the Palette will use `[data-vjs-type]`.
+     */
+    selector?: string;
+    /**
+     * Optional function to generate the size to use for some object that is being dragged.
+     */
+    dragSizeGenerator?: (payload: T, el: BrowserElement) => Size;
+    /**
+     * Optional function to generate an initial payload from an element that has started to be dragged/has been tapped.
+     */
+    dataGenerator?: DataGeneratorFunction<T>;
+    /**
+     * Optional function to determine the type of the data object from an element that is being dragged (in drag mode) or has been tapped (in draw/tap mode)
+     */
+    typeGenerator?: TypeGeneratorFunction<T>;
+    /**
+     * Optional function to use to determine if the element being dragged/has been tapped represents a group. If you do not provide this, the default behaviour is to check for the presence of a `data-vjs-is-group` attribute on the element, with a value of `true`.
+     */
+    groupIdentifier?: GroupIdentifierFunction<T>;
+    /**
+     * Defaults to false. Allows items to be dropped onto edges in the canvas. A drop on an edge causes that edge to be split, with one edge having the new vertex as a target, and another edge with the new vertex as source.
+     */
+    allowDropOnEdge?: boolean;
+    /**
+     * Defaults to true. Allows items to be dropped onto groups in the canvas.
+     */
+    allowDropOnGroup?: boolean;
+    /**
+     * Defaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace. Note that when this is false and the user has dragged something over a node, the drag item is still not considered to be over the canvas, and releasing the mouse button at that time will not cause a new node to be added. Use `ignoreDropOnNode` if that's the behaviour you want.
+     */
+    allowDropOnNode?: boolean;
+    /**
+     * Defaults to false. When true, the palette treats nodes as if they are part of the canvas - a user can drag new items on top of existing nodes and the new item will be added to the canvas. If you want to force your users to drop on canvas whitespace, don't set this.  Note that this flag will force `allowDropOnNode` to `false`.
+     */
+    ignoreDropOnNode?: boolean;
+    /**
+     * Defaults to true. Allows items to be dropped onto whitespace.
+     */
+    allowDropOnCanvas?: boolean;
+    /**
+     * Optional function that is invoked at the start of a drag, and which identifies allowed drop targets. Each target - the canvas, nodes and groups - is passed in turn to this method; returning false indicates that the given target is not valid for that drag.
+     * @param candidate
+     * @param target
+     * @param onCanvas
+     */
+    canDrop?: (candidate: Node | Group, target?: Node | Group, onCanvas?: boolean) => boolean;
+    /**
+     * Defaults to false. By default this class will conform to any grid in place in the surface to which it is attached when dragging items around.
+     */
+    ignoreGrid?: boolean;
+    /**
+     * Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.
+     * @param v
+     */
+    onVertexAdded?: OnVertexAddedCallback;
+    /**
+     * Defaults to false. When true, a newly added vertex is set as the model's current selection.
+     */
+    selectAfterAdd?: boolean;
+    /**
+     * Optional function you can provide which will be used to generate an element to use for dragging. The default behaviour is to use a clone of the element the user began dragging, but if you provide this method you can customise that.
+     */
+    elementGenerator?: (el: BrowserElement, e: MouseEvent) => BrowserElement;
+    /**
+     * Optional size to use for elements dragged from the palette; used in drag mode only.
+     */
+    dragSize?: Size;
+    /**
+     * Optional function that you can use to inform the Palette that drop should be aborted. This method is invoked at the start of a drag (in drag mode) or when an item is tapped (in tap/draw mode) and is passed the candidate drag object's data.
+     */
+    canvasDropFilter?: CanvasDropFilter<T>;
+    /**
+     * Mode to operate in - 'drag', 'tap' or 'draw'. Defaults to 'drag'.
+     */
+    mode?: PaletteMode;
+    /**
+     * When in draw mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drag to draw functionality also still works)
+     */
+    allowClickToAdd?: boolean;
+    /**
+     * This flag relates to "draw" mode, and defaults to false. When true, the palette only supports click to draw new vertices, not drag. This flag is forced to true if the associated UI does not have `useModelForSizes` set, since there is no point in allowing a user to drag a vertex to some size if its not going to be honoured. When you set this flag and associated UI does have `useModelForSizes` set, the palette will use default sizes for new nodes/groups.
+     */
+    clickToAddOnly?: boolean;
+    /**
+     * When in draw mode, this function can be used to provide the element shown to the user as a new vertex is being drawn.
+     * @param objectType Group or Node
+     * @param type The type will map to an item in your view
+     * @param data The return value from the dataGenerator
+     * @param p Location on the canvas where the mousedown event occurred.
+     * @param e Mouse down event
+     */
+    vertexPreviewGenerator?: (objectType: string, type: string, data: T, p: PointXY, e: MouseEvent) => BrowserElement;
+    /**
+     * When in draw mode this function is repeatedly called as the mouse is dragging a new shape. It provides a hook for you to update the element's appearance. This is only called if you provided a vertexPreviewGenerator and it has returned a valid DOM element at the start of a drag.
+     * @param el The element you returned from vertexPreviewGenerator.
+     * @param origin The canvas location of the new vertex's top/left corner.
+     * @param size The current size of the new vertex.
+     * @param data The return value from the dataGenerator
+     */
+    vertexPreviewUpdater?: (el: BrowserElement, origin: PointXY, size: Size, data: T) => any;
+    /**
+     * When in 'draw' mode, you can optionally provide a class to set on the lasso used by the vertex drawing plugin.
+     */
+    lassoClass?: string;
+    /**
+     * By default, the Palette will apply a `scale` transform to elements that are being dragged so that they appear at the same size as the UI they're being dragged to. Setting this flag to true will switch off that behaviour.
+     */
+    ignoreZoom?: boolean;
+    /**
+     * Defaults to true. Set to false if you wish to instantiate the Palette in a disabled state
+     */
+    enabled?: boolean;
+    /**
+     * Class to set on the UI canvas and any other drop targets when a new element is being dragged
+     */
+    dragActiveClass?: string;
+    /**
+     * Class to set on the UI canvas and any other drop targets when a drag element is hovering over it.
+     */
+    dragHoverClass?: string;
+    /**
+     * Class to set on the UI canvas and any other drop targets when a drag element is hovering over it but drop is not allowed.s
+     */
+    dragHoverCannotDropClass?: string;
+    /**
+     * Class to set on an element being dragged.
+     */
+    dragElementClass?: string;
+    /**
+     * Optional function to invoke as the user is dragging a new element, or has tapped an element and is moving the mouse over the canvas.
+     */
+    onDrag?: DragFunction<T>;
+    /**
+     * Optional template that will be used in conjunction with `data` to generate the HTML content of the palette. The template can return any number of elements (ie. you're not limited to just a single root node)
+     */
+    contentTemplate?: string;
+    /**
+     * Optional data that will be used in conjunction with `contentTemplate` to generate the HTML content of the palette.
+     */
+    data?: ObjectData;
+}

package/types/browser-ui/components/palette/palette.d.ts

@@ -0,0 +1,126 @@
+import { PaletteOptions } from "./palette-options";
+import { BrowserElement } from "../../util";
+import { ObjectData } from "../../../core";
+import { BrowserUI } from "../../browser-visuallyjs-instance";
+/**
+ * Default data generator for palettes. Extract `data-vjs-***` attributes from element.
+ * @param el
+ */
+export declare function defaultDataGenerator<T = any>(el: BrowserElement): T;
+/**
+ * The default CSS selector used with the Palette and the library integration wrappers around it
+ * @group Components
+ * @category Palette
+ * @internal
+ */
+export declare const DEFAULT_PALETTE_SELECTOR = "[data-vjs-type]";
+/**
+ * This component allows you to configure elements to drag and drop onto a surface.
+ *
+ * @group Components
+ * @category Palette
+ */
+export declare class Palette<T> {
+    private readonly ui;
+    private readonly _$_mode;
+    readonly source: BrowserElement;
+    private readonly _selector;
+    private readonly _ignoreGrid;
+    private readonly _dragActiveClass;
+    private readonly _dragHoverClass;
+    private readonly _dragElementClass;
+    private readonly _dragHoverCannotDropClass;
+    private readonly _dataGenerator;
+    private readonly _dragSizeGenerator;
+    private readonly _typeGenerator;
+    private readonly _groupIdentifier;
+    private readonly _canvasDropFilter;
+    private readonly onDrag;
+    private readonly _ignoreZoom;
+    private readonly _elementGenerator;
+    private _enabled;
+    private readonly _onVertexAddedCallback;
+    private readonly _selectAfterAdd;
+    private _$_dragBeginListener;
+    private _$_dragUpListener;
+    private _$_dragMoveListener;
+    /**
+     * The bounding rect of the current visible viewport.
+     */
+    private _$_viewportBoundingClientRect;
+    private _$_isOverCanvas;
+    private _$_canDropOnCanvas;
+    private _visibleContentArea;
+    private _$_eventManager;
+    private _currentNodeList;
+    private _currentGroupList;
+    private _currentEdgeList;
+    private _candidateData;
+    private _dropCandidate;
+    private _candidateVertex;
+    /**
+     * the current canvas coords of the item being dragged.
+     * @private
+     */
+    private _dragObjectCanvasCoordinates;
+    /**
+     * current element being dragged
+     * @internal
+     */
+    private _$_dragElement;
+    /**
+     * Size to use for the current drag element. This is set if there was a dragSizeGenerator function  supplied, and that returned something on drag start, or if a class-wide drag size was set in the constructor.
+     * @internal
+     */
+    private _$_dragSizeToUse;
+    private _dragElementType;
+    /**
+     * current effective zoom of the related UI
+     * @internal
+     */
+    private _$_effectiveZoom;
+    private readonly _$_allowDropOnCanvas;
+    private readonly _$_allowDropOnNodes;
+    private readonly _$_ignoreDropOnNodes;
+    private readonly _$_allowDropOnGroups;
+    private readonly _$_allowDropOnEdges;
+    private readonly _canDrop?;
+    private readonly _$_dragSize;
+    private _$_candidateTapObject;
+    private _$_previousCandidateTapObject;
+    private _contentGenerator;
+    private readonly _keyListener;
+    constructor(ui: BrowserUI, options: PaletteOptions<T>);
+    /**
+     * Sets the enabled state of the palette
+     *
+     * @param enabled
+     */
+    setEnabled(enabled: boolean): void;
+    /**
+     * Sets the data used to render the palette. This is really only intended for use with Vanilla Visually Js
+     * @param d New data to draw.
+     * @param newTemplate optional new template to use with this data.
+     */
+    setData(d: ObjectData, newTemplate?: string): void;
+    /**
+     * Set some element to be the current selected tap target. This method cleans up any existing tap target, then gets a payload for the current tap target via the `dataGenerator` function, and stashes that payload along with the objectType (node or group) and the DOM element. It then adds a CSS class to the selected element and sets the surface to vertex drawing mode.
+     * @param el
+     * @internal
+     */
+    private _setTapElement;
+    private _$_initDragBeginListener;
+    private _cleanupDrag;
+    private _$_initDragEndListener;
+    private _$_initDragMoveListener;
+    private _$_initDragMode;
+    private _$_initTapMode;
+    private _dropOnEdge;
+    private _dropOnGroup;
+    private _dropOnWhitespace;
+    private _mapToPositionAttributes;
+    private _addNewVertexToCanvas;
+    private _onVertexAdded;
+    private _reset;
+    private _$_initDrawMode;
+}