@visuallyjs/browser-ui 1.2.0 → 1.2.2

package/types/core/toolkit.d.ts

@@ -63,11 +63,11 @@ export type BeforeStartDetachInterceptor = (source: Vertex, edge: Edge) => Recor
  */
 export interface ModelOptions {
     /**
-     * The name of a property that will exist inside the backing data for nodes/group, and which represents a list of ports pertaining to that node/group. When a node/group is rendered, if this property is set, VisuallyJs will consider the value of this property to be a list of port data object. So this property's value should be of type `Array<ObjectData>`
+     * The name of a property that will exist inside the backing data for nodes/group, and which represents a list of ports pertaining to that node/group. When a node/group is rendered, if this property is set, VisuallyJs will consider the value of this property to be a list of port data objects. So this property's value should be of type `Array<ObjectData>`. Note that this mechanism is fine for models where either all vertex types that have ports have them keyed with the same property, or you only have a single vertex type with ports, but for more advanced setups you should look at the `portExtractor` function.
      */
     portDataProperty?: string;
     /**
-     * The name of a property inside of each port's data that can be used to order the ports. For instance, you might have ports that have a `rank` property, which is a number. VisuallyJs will sort the ports according to the natural ordering of this property.
+     * The name of a property inside of each port's data that can be used to order the ports. For instance, you might have ports that have a `rank` property, which is a number. VisuallyJs will sort the ports according to the natural ordering of this property. Note that this mechanism is fine for models where either all vertex types that have ports have them keyed with the same property, or you only have a single vertex type with ports, but for more advanced setups you should look at the `portUpdated` function.
      */
     portOrderProperty?: string;
     model?: DataModelDefinition;
@@ -235,11 +235,13 @@ export interface ModelOptions {
     /**
      * A function to use to extract an array of ports from the data representing some node/group. Whenever a node/group is rendered, VisuallyJs will use this method, if provided, to determine a list of ports for that node/group. If you use this you probably also want to define a `portUpdater`. Note that if you provide the `portDataProperty` then you do not need to set this.
      */
-    portExtractor?: (o: ObjectData) => Array<ObjectData>;
+    portExtractor?: (o: ObjectData, nodeOrGroup: Node | Group) => Array<ObjectData>;
     /**
-     * A function to use to update a given node/group's list of ports. Note that if you provide the `portDataProperty` then you do not need to set this.
+     * A function to use to update a given node/group's list of ports. This function should return a Javascript object which represents the node/group's backing data. This method is invoked whenever changes to some vertex's ports occur.
+     *
+     * Note that if you provide the `portDataProperty` then you do not need to set this.
      */
-    portUpdater?: Function;
+    portUpdater?: (data: ObjectData, nodeOrGroup: Node | Group, ports: Array<Port>) => ObjectData;
     /**
      * Optional model event mappings to bind
      */
@@ -406,8 +408,8 @@ export declare abstract class VisuallyJsModel extends OptimisticEventGenerator i
     edgeTypeFunction: TypeFunction;
     portIdFunction: IdFunction;
     portTypeFunction: TypeFunction;
-    portExtractor: Function;
-    portUpdater: Function;
+    portExtractor: (o: ObjectData, nodeOrGroup: Node | Group) => Array<ObjectData>;
+    portUpdater: (data: ObjectData, nodeOrGroup: Node | Group, ports: Array<Port>) => ObjectData;
     portDataProperty: string;
     portOrderProperty: string;
     modelTopAttribute: string;

package/types/core/undo-redo/update-action.d.ts

@@ -8,11 +8,14 @@ import { Edge, Group, Port, Node } from "../model/graph";
 export declare class UpdateAction<ReasonType> implements UndoRedoAction {
     obj: Node | Port | Group | Edge;
     protected instance: VisuallyJsModel;
+    protected typeChanged: boolean;
+    protected newType: string;
+    protected previousType: string;
     type: string;
     readonly $nd: any;
     protected readonly $od: any;
     private readonly reason;
-    constructor(obj: Node | Port | Group | Edge, originalData: any, instance: VisuallyJsModel, reason: ReasonType);
+    constructor(obj: Node | Port | Group | Edge, originalData: any, instance: VisuallyJsModel, reason: ReasonType, typeChanged: boolean, newType: string, previousType: string);
     private _do;
     undo(): void;
     redo(): void;

package/types/core/undo-redo/vertex-update-action.d.ts

@@ -7,6 +7,9 @@ import { UpdateAction } from "./update-action";
 export declare class VertexUpdateAction extends UpdateAction<VertexUpdatedReason> {
     obj: Node | Port | Group | Edge;
     protected instance: VisuallyJsModel;
+    protected typeChanged: boolean;
+    protected newType: string;
+    protected previousType: string;
     type: string;
-    constructor(obj: Node | Port | Group | Edge, originalData: any, instance: VisuallyJsModel, reason: VertexUpdatedReason);
+    constructor(obj: Node | Port | Group | Edge, originalData: any, instance: VisuallyJsModel, reason: VertexUpdatedReason, typeChanged: boolean, newType: string, previousType: string);
 }

package/types/core/util.d.ts

@@ -362,6 +362,11 @@ export declare function isDate(o: any): o is Date;
  * @internal
  */
 export declare function isFunction(o: any): o is Function;
+/**
+ * return whether or not the given value is a Class
+ * @param o
+ */
+export declare function isClass(o: any): boolean;
 /**
  * Returns whether or not the given value is of type `Function` and is a named Function.
  * @param o

package/types/ui/core/constants.d.ts

@@ -23,6 +23,13 @@ export declare const ATTRIBUTE_MANAGED = "data-vjs-managed";
  * @context element-dragging
  */
 export declare const ATTRIBUTE_NOT_DRAGGABLE = "data-vjs-not-draggable";
+/**
+ * This attribute can be written onto DOM elements by node/group renderers to instruct VisuallyJs that the given element should not cause mouse events for the given vertex to be fired.
+ * @group Nodes and Groups
+ * @category DOM Attributes
+ * @domAttribute
+ */
+export declare const ATTRIBUTE_SUPPRESS_VERTEX_EVENTS = "data-vjs-no-events";
 /**
  * Written by the Surface when `elementsDraggable` is provided as a constructor option. The value of this attribute will match what you provide for `elementsDraggable`, but it's really only of any use if you set it to `false`, as `true` is the default.
  * @internal

package/types/ui/core/core.d.ts

@@ -211,12 +211,17 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
     /**
      * @internal
      */
-    private _refreshLayoutOnEdgeConnect;
+    private $relayoutOnEdgeConnect;
     /**
      * @internal
      * @private
      */
     protected $relayoutOnResize: boolean;
+    /**
+     * @internal
+     * @protected
+     */
+    protected $relayoutOnVertexRemove: boolean;
     /**
      * @internal
      */
@@ -643,6 +648,10 @@ export declare abstract class UICore<EL, EVT = CoreUIEvent> extends OptimisticEv
      * Gets the current bounds of the UI's viewport.
      */
     abstract getViewportBoundsInfo(): ViewportBounds;
+    /**
+     * If the UI has a fixed viewport (not panning, zooming etc), it can opt to return a value from this method. A background can use this information to place itself.
+     */
+    abstract $getFixedViewportBoundsInfo(): ViewportBounds | null;
     abstract getApparentCanvasLocation(): PointXY;
     abstract toFront(v: string | Vertex | EL, alsoBringAncestorsToFront?: boolean): void;
     abstract toBack(v: string | Vertex | EL, alsoSendAncestorsToBack?: boolean): void;

package/types/ui/core/defaults.d.ts

@@ -189,10 +189,14 @@ export interface UICoreOptions<E, O extends UICoreDefaults> {
      * Whether or not to relayout the UI when an element's size changes as a result of content changes in its element. Defaults to false.
      */
     relayoutOnResize?: boolean;
+    /**
+     * Whether or not to relayout the UI when a vertex is removed. Defaults to false. For some layouts, like the Hierarchy layout, you may wish to switch this on.
+     */
+    relayoutOnVertexRemove?: boolean;
     /**
      * When true, the UI will run a `refresh` of the underlying layout whenever a new edge is established. This defaults to false, but you might want to set this to true if you're using the Hierarchical or Hierarchy layouts, because it has a bearing on the way they paint. However, if your users are able to drag vertices around, you may not wish for the layout to move things that they have placed, which is why this defaults to false.
      */
-    refreshLayoutOnEdgeConnect?: boolean;
+    relayoutOnEdgeConnect?: boolean;
     /**
      * Default options for edges - these will apply to all edge types in the UI.
      */

package/types/ui/core/definitions.d.ts

@@ -102,6 +102,10 @@ export type VertexDragFilter<E> = (p: {
  * @category Definitions
  */
 export type DragConstrainFunction<E> = (desiredLoc: PointXY, dragEl: E, modelObject: Node | Group, size: Size, currentLoc: PointXY, e: MouseEvent) => PointXY;
+/**
+ * Strategy for determining whether something that is moving is considered out of bounds. Options are 'contained', ie the element must be fully contained inside the root bounds, or 'intersecting', ie. the element must intersect the root bounds by some amount. Prior to 1.1.4 the behaviour was 'contained', but a change in 1.1.4 switched this to 'intersecting', which does not necessarily provide the best UX when the canvas is hard up against the edge of the screen, because it isnt always possible to move the mouse far enough that the element is not intersecting, and in those situations panning stops. From 1.2.1 onwards the default is once again `contained`, but you can change that via the `autoPanBoundsStrategy` option on the surface's dragOptions.
+ */
+export type AutoPanBoundsStrategy = "contained" | "intersecting";
 /**
  * Options for element drag
  * @group UI
@@ -136,6 +140,10 @@ export interface DragOptions<E> {
      * When auto-panning, this is the number of pixels that the canvas repositions itself on each tick. Defaults to 5.
      */
     autoPanDelta?: number;
+    /**
+     * When auto-panning, this flag instructs the auto pan how to determine if an element is inside the root bounds or not. A value of "contained" (the default), means the whole element has to be inside the root bounds. A value of "intersecting" means that the element needs to just intersect the root bounds by some amount.
+     */
+    autoPanBoundsStrategy?: AutoPanBoundsStrategy;
     /**
      * 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
@@ -164,6 +172,7 @@ export interface SupportsElementDragging<E> {
     $startPanRepeat: (dirX: 1 | 0 | -1, dirY: 1 | 0 | -1, dx: number, dy: number, interval: number, cb?: (total: PointXY) => any) => void;
     $stopPanRepeat: () => void;
     $provisionallyMagnetize(focus: Vertex, repositionFocus: boolean, knownLocations: Record<string, PointXY>, knownSizes: Record<string, Size>, magnetizerIsAlreadyPrimed: boolean, invertTrackbackPreference: boolean): MagnetizeResult;
+    addVertexDragFilter(f: VertexDragFilter<E>): void;
 }
 /**
  * Payload for the node:move:start event that is fired when a node/group has just begun to be moved.

package/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.2.0";
+export declare const VERSION = "1.2.2";