@visuallyjs/browser-ui 1.0.0

package/types/browser-ui/css-constants.d.ts

@@ -0,0 +1,436 @@
+/**
+ * Assigned to the DOM element a surface is rendered to.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE = "vjs-surface";
+/**
+ * Assigned to the DOM element a surface is rendered to when direct rendering is switched on.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE_DIRECT = "vjs-surface-direct-render";
+/**
+ * Assigned to the Surface's DOM element when VisuallyJs detects the device supports touch events.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE_TOUCH_DEVICE = "vjs-surface-touch-device";
+/**
+ * Assigned to the Surface's DOM element when VisuallyJs detects the device supports pointer events.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE_POINTER_DEVICE = "vjs-surface-pointer-device";
+/**
+ * Assigned to the Surface's DOM element when panning is disabled.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE_NO_PAN = "vjs-surface-nopan";
+/**
+ * Assigned to the canvas element used by a Surface - the DOM element that is the parent of all vertices and edges.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE_CANVAS = "vjs-surface-canvas";
+/**
+ * Assigned to each of the pan buttons added around the surface.
+ * @group Plugins
+ * @category Pan Buttons
+ * @see {@link CLASS_SURFACE_PAN_LEFT}
+ * @see {@link CLASS_SURFACE_PAN_TOP}
+ * @see {@link CLASS_SURFACE_PAN_RIGHT}
+ * @see {@link CLASS_SURFACE_PAN_BOTTOM}
+ * @cssClass
+ * @context pan-buttons
+ */
+export declare const CLASS_SURFACE_PAN = "vjs-surface-pan";
+/**
+ * Assigned to the pan button added on the left edge of the surface.
+ * @group Plugins
+ * @category Pan Buttons
+ * @see {@link CLASS_SURFACE_PAN}
+ * @cssClass
+ * @context pan-buttons
+ */
+export declare const CLASS_SURFACE_PAN_LEFT = "vjs-surface-pan-left";
+/**
+ * Assigned by to the pan button on the top edge of the surface.
+ * @group Plugins
+ * @category Pan Buttons
+ * @see {@link CLASS_SURFACE_PAN}
+ * @cssClass
+ * @context pan-buttons
+ */
+export declare const CLASS_SURFACE_PAN_TOP = "vjs-surface-pan-top";
+/**
+ * Assigned to the pan button on the right edge of the surface.
+ * @group Plugins
+ * @category Pan Buttons
+ * @see {@link CLASS_SURFACE_PAN}
+ * @cssClass
+ * @context pan-buttons
+ */
+export declare const CLASS_SURFACE_PAN_RIGHT = "vjs-surface-pan-right";
+/**
+ * Assigned to the pan button on the bottom edge of the surface.
+ * @group Plugins
+ * @category Pan Buttons
+ * @see {@link CLASS_SURFACE_PAN}
+ * @cssClass
+ * @context pan-buttons
+ */
+export declare const CLASS_SURFACE_PAN_BOTTOM = "vjs-surface-pan-bottom";
+/**
+ * Assigned when the user is pressing a pan button and a pan is in motion.
+ * @group Plugins
+ * @category Pan Buttons
+ * @see {@link CLASS_SURFACE_PAN}
+ * @cssClass
+ * @context pan-buttons
+ */
+export declare const CLASS_SURFACE_PAN_ACTIVE = "vjs-surface-pan-active";
+/**
+ * Assigned by the Surface to the DOM element representing a vertex when it is being flashed to get the user's attention.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE_ELEMENT_FLASH = "vjs-surface-flash";
+/**
+ * The name of the CSS animation that is applied to a vertex when it is being flashed. NOTE: this is not a CSS class; its the name of the animation.
+ * @internal
+ */
+export declare const ANIM_SURFACE_ELEMENT_FLASH = "vjs-flash-vertex";
+/**
+ * Assigned by the Surface to its canvas while the canvas is being panned (either programmatically or via pointer/touch)
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SURFACE_PANNING = "vjs-surface-panning";
+/**
+ * Assigned by the Surface to its container when a node or group is being dragged
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context element-dragging
+ */
+export declare const CLASS_SURFACE_ELEMENT_DRAGGING = "vjs-surface-element-dragging";
+/**
+ * Assigned by the Surface to a vertex element that is being dragged
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context element-dragging
+ */
+export declare const CLASS_ELEMENT_DRAGGING = "vjs-element-dragging";
+/**
+ * Assigned by the Surface to the group parent of a vertex element that is being dragged, if applicable. You can use this class for a couple of things - to show that a child element is being dragged, of course, but also a good idea is to use this class to bump the z-index for any group that has it assigned, to put that group above other groups. This ensures that as you drag a child vertex over to some other group, it appears on top of that group in the UI.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context element-dragging
+ */
+export declare const CLASS_GROUP_CHILD_ELEMENT_DRAGGING = "vjs-group-child-element-dragging";
+/**
+ * Assigned by the Surface to the vertex element(s) that was/were the most recently dragged elements.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context element-dragging
+ */
+export declare const CLASS_MOST_RECENTLY_DRAGGED = "vjs-most-recently-dragged";
+/**
+ * Assigned by the Surface to its root element when an edge is being dragged. This is not assigned to the edge element itself.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context edge-dragging
+ */
+export declare const CLASS_SURFACE_EDGE_DRAGGING = "vjs-surface-edge-dragging";
+/**
+ * Assigned by the Surface to the DOM element representing an edge that is being dragged to relocate its source or target. This class is only added when the edge input handler is in drag mode. It is assigned to the connector element once the mouse starts to move, and removed on mouseup.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context edge-dragging
+ */
+export declare const CLASS_EDGE_RELOCATING = "vjs-edge-relocating";
+/**
+ * Assigned by the Surface to the DOM element representing an edge that is about to be relocated. When the edge input mode is dragging, this class is assigned on mousedown on one of the drag handles, before the mouse moves, and removed when the mouse begins to move (or on mouseup if the user does not move the mouse). When the edge input mode is tap, this class is assigned when the user has tapped on one of the relocate handles, and is removed either when the user clicks on whitespace, cancelling the relocation, or clicks on an active target and effects the relocation.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context edge-dragging
+ */
+export declare const CLASS_EDGE_WILL_RELOCATE = "vjs-edge-will-relocate";
+/**
+ * Assigned to the DOM element representing a lasso
+ * @group Plugins
+ * @category Lasso
+ * @cssClass
+ * @context lasso
+ */
+export declare const CLASS_LASSO = "vjs-lasso";
+/**
+ * Assigned to each DOM element representing part of the lasso mask, when the lasso is inverted mode. The lasso mask consists of four parts, one to the left, right, top and bottom of the area that has been lassoed.
+ * @group Plugins
+ * @category Lasso
+ * @see {@link CLASS_LASSO_MASK_BOTTOM}
+ * @see {@link CLASS_LASSO_MASK_TOP}
+ * @see {@link CLASS_LASSO_MASK_LEFT}
+ * @see {@link CLASS_LASSO_MASK_RIGHT}
+ * @cssClass
+ * @context lasso
+ */
+export declare const CLASS_LASSO_MASK = "vjs-lasso-mask";
+/**
+ * Assigned to the DOM element representing the left part of the lasso mask, when the lasso is inverted mode.
+ * @group Plugins
+ * @category Lasso
+ * @see {@link CLASS_LASSO_MASK}
+ * @cssClass
+ * @context lasso
+ */
+export declare const CLASS_LASSO_MASK_LEFT = "vjs-lasso-mask-left";
+/**
+ * Assigned to the DOM element representing the top part of the lasso mask, when the lasso is inverted mode.
+ * @group Plugins
+ * @category Lasso
+ * @see {@link CLASS_LASSO_MASK}
+ * @cssClass
+ * @context lasso
+ */
+export declare const CLASS_LASSO_MASK_TOP = "vjs-lasso-mask-top";
+/**
+ * Assigned to the DOM element representing the right part of the lasso mask, when the lasso is inverted mode.
+ * @group Plugins
+ * @category Lasso
+ * @see {@link CLASS_LASSO_MASK}
+ * @cssClass
+ * @context lasso
+ */
+export declare const CLASS_LASSO_MASK_RIGHT = "vjs-lasso-mask-right";
+/**
+ * Assigned to the DOM element representing the bottom part of the lasso mask, when the lasso is inverted mode.
+ * @group Plugins
+ * @category Lasso
+ * @see {@link CLASS_LASSO_MASK}
+ * @cssClass
+ * @context lasso
+ */
+export declare const CLASS_LASSO_MASK_BOTTOM = "vjs-lasso-mask-bottom";
+/**
+ * Assigned by the Miniview to the DOM element into which it was rendered.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW = "vjs-miniview";
+/**
+ * Assigned by the Miniview to the DOM element into which is renders vertices.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_CANVAS = "vjs-miniview-canvas";
+/**
+ * Assigned by the Miniview to the DOM element that provides the visual cue showing the user how the viewport of the
+ * miniview relates to the entire dataset, and which the user can drag to pan.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_PANNER = "vjs-miniview-panner";
+/**
+ * Assigned by the Miniview to a DOM element representing a node.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_ELEMENT = "vjs-miniview-element";
+/**
+ * Assigned by the Miniview to a DOM element representing a group.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_GROUP_ELEMENT = "vjs-miniview-group-element";
+/**
+ * Assigned by the Miniview to its canvas when the user is panning it.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ */
+export declare const CLASS_MINIVIEW_PANNING = "vjs-miniview-panning";
+/**
+ * Assigned by the Miniview to the collapse button.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_COLLAPSE = "vjs-miniview-collapse";
+/**
+ * Assigned by the Miniview to its container DOM element when it has been collapsed.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_COLLAPSED = "vjs-miniview-collapsed";
+/**
+ * Assigned by the Miniview to its container DOM element when 'clickToCenter' mode is switched on.
+ * @group Plugins
+ * @category Miniview
+ * @cssClass
+ * @context miniview
+ */
+export declare const CLASS_MINIVIEW_CLICK_TO_CENTER = "vjs-miniview-click-to-center";
+/**
+ * Assigned by the Surface to the document body while the user is dragging a vertex or edge. See visuallyjs.css for the specific rules.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_SELECT_DEFEAT = "vjs-drag-select-defeat";
+/**
+ * Assigned to a node that was rendered by the default renderer, ie. there was no mapping the view to a template/component.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_DEFAULT_NODE = "vjs-default-node";
+/**
+ * Assigned to a group that was rendered by the default renderer, ie. there was no mapping the view to a template/component.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context surface
+ */
+export declare const CLASS_DEFAULT_GROUP = "vjs-default-group";
+/**
+ * The class assigned to the SVG element with which a user can drag to reposition the source of some edge.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context edge-dragging
+ */
+export declare const CLASS_CONNECTOR_SOURCE_DRAG = "vjs-connector-source-drag";
+/**
+ * The class assigned to the SVG element with which a user can drag to reposition the target of some edge.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context edge-dragging
+ */
+export declare const CLASS_CONNECTOR_TARGET_DRAG = "vjs-connector-target-drag";
+/**
+ * Assigned to the temporary DOM element used when relocating an existing edge via the mouse/touch events.
+ * @group Components
+ * @category Surface
+ * @cssClass
+ * @context edge-dragging
+ */
+export declare const CLASS_CONNECTOR_TRANSIENT_DRAG = "vjs-connector-transient-drag";
+/**
+ * Assigned to the currently selected element in a palette when in tap/draw mode.
+ * @group Components
+ * @category Palette
+ * @cssClass
+ * @context palette
+ */
+export declare const CLASS_PALETTE_SELECTED_ELEMENT = "vjs-palette-selected-element";
+/**
+ * Assigned to the surface canvas when a user has tapped an element in a palette in tap mode. this class can be used to show the user that a vertex can be dropped via click or drawn on the canvas
+ * @cssClass
+ * @context palette
+ */
+export declare const CLASS_PALETTE_TAP_MODE_ACTIVE = "vjs-palette-tap-mode-active";
+/**
+ * Assigned to an element when it is being dragged from a palette
+ * @cssClass
+ * @context palette
+ */
+export declare const CLASS_PALETTE_ELEMENT_CURRENT = "vjs-palette-current";
+/**
+ * Assigned to a shape in a ShapePalette that matches the type of the model's currently selected shape.
+ * @cssClass
+ * @context palette
+ */
+export declare const CLASS_PALETTE_CURRENT_SHAPE_TYPE = "vjs-palette-current-shape-type";
+/**
+ * Assigned to all elements that could be the target for some element that is being dragged from a palette
+ * @cssClass
+ * @context palette
+ */
+/**
+ * Assigned to the current drop target for some element that is being dragged from a palette. This may be the surface's canvas itself, or it may be a group.
+ * @cssClass
+ * @context palette
+ */
+/**
+ * Assigned to a vertex or the canvas when an element (either from the palette or having been dragged on the canvas) is hovering over it but drop is not allowed.
+ * @cssClass
+ * @context element-dragging,palette,nodes-and-groups
+ */
+export declare const CLASS_DRAG_HOVER_CANNOT_DROP = "vjs-drag-hover-cannot-drop";
+/**
+ * Assigned to a group element when one of its children is being dragged. This can be useful to help manage z-index: we recommend using this class to set a z-index for the drag parent group above that of the other groups, which will ensure that the element you are dragging will appear on top of other groups.
+ * @cssClass
+ * @context element-dragging
+ */
+export declare const CLASS_DRAG_ORIGINAL_GROUP = "vjs-drag-original-group";
+/**
+ * Assigned to any element that is a candidate drop target for an edge that is being dragged
+ * @cssClass
+ * @context element-dragging,palette,nodes-and-groups
+ */
+export declare const CLASS_DRAG_ACTIVE = "vjs-drag-active";
+/**
+ * Assigned to any element that is the current drop target for an edge that is being dragged
+ * @cssClass
+ * @context element-dragging,palette,nodes-and-groups
+ */
+export declare const CLASS_DRAG_HOVER = "vjs-drag-hover";
+/**
+ * Assigned to the source element of an edge when the mouse is hovering over the edge
+ * @cssClass
+ * @context edges, nodes-and-groups
+ */
+export declare const CLASS_SOURCE_HOVER = "vjs-source-hover";
+/**
+ * Assigned to the target element of an edge when the mouse is hovering over the edge
+ * @cssClass
+ * @context edges, nodes-and-groups
+ */
+export declare const CLASS_TARGET_HOVER = "vjs-target-hover";
+/**
+ * Assigned to the element representing an overlay when the mouse is hovering over the associated edge, and to the edge's connector element.
+ * @cssClass
+ * @context edges, overlays
+ */
+export declare const CLASS_HOVER = "vjs-hover";

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

@@ -0,0 +1,2 @@
+export declare function $$d(): Document;
+export declare const $$ce: (e: string) => BrowserElement;