Interface SurfaceDropManagerOptions<T>

Options for the SurfaceDropManager.

interface SurfaceDropManagerOptions<T> {
    allowClickToAdd?: boolean;
    allowDropOnCanvas?: boolean;
    allowDropOnEdge?: boolean;
    allowDropOnGroup?: boolean;
    allowDropOnNode?: boolean;
    canvasSelector?: string;
    dataGenerator?: DataGeneratorFunction<T>;
    dragSize?: Size;
    groupIdentifier?: GroupIdentifierFunction<T>;
    ignoreConstrainFunction?: boolean;
    ignoreGrid?: boolean;
    ignoreZoom?: boolean;
    lassoClass?: string;
    magnetize?: boolean;
    mode?: DropManagerMode;
    onVertexAdded?: ((v, dropTarget?) => any);
    selector: string;
    source: Element;
    surface: Surface;
    typeGenerator?: TypeGeneratorFunction<T>;
    vertexPreviewGenerator?: ((objectType, type, data, p, e) => BrowserElement);
    vertexPreviewUpdater?: ((el, origin, size, data) => any);

Type Parameters

  • T


allowClickToAdd?: boolean

When in tap mode, allow addition of new vertices simply by clicking, instead of requiring a shape be drawn. (When this is true, the drawing method also still works)

allowDropOnCanvas?: boolean

Defaults to true. Allows items to be dropped onto whitespace.

allowDropOnEdge?: boolean

Defaults to true. Allows items to be dropped onto edges in the canvas.

allowDropOnGroup?: boolean

Defaults to true. Allows items to be dropped onto groups in the canvas.

allowDropOnNode?: 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.

canvasSelector?: string

Optional selector specifying what parts of the surface's canvas should be considered whitespace. If you're using a decorator, for instance, you might want to add a selector for that decorator's elements so that items can be dropped onto them.

dataGenerator?: DataGeneratorFunction<T>

Optional function to generate an initial payload from an element that has started to be dragged.

dragSize?: Size

Optional size to use for dragged elements.

groupIdentifier?: GroupIdentifierFunction<T>

Optional function to use to determine if the element being dragged represents a group. If you do not provide this, the default behaviour is to check for the presence of a data-jtk-is-group attribute on the element, with a value of true.

ignoreConstrainFunction?: boolean

If true, the manager will ignore any element constrain function that may be set on the surface

ignoreGrid?: 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.

ignoreZoom?: boolean

By default, the SurfaceDropManager will apply a scale transform to elements that are being dragged so that they appear at the same size as the Surface they're being dragged to. Setting this flag to true will switch off that behaviour.

lassoClass?: string

When in 'tap' mode, you can optionally provide a class to set on the lasso used by the vertex drawing plugin.

magnetize?: boolean

If true, the surface will be instructed to magnetize after dropping a new element.

mode?: DropManagerMode

Mode to operate in - 'drag' or 'tap'. Defaults to 'drag'.

onVertexAdded?: ((v, dropTarget?) => any)

Optional callback that will be invoked after a new vertex has been dropped and added to the dataset.

Type declaration

    • (v, dropTarget?): any
    • Parameters

      • v: Vertex
      • Optional dropTarget: {
            pos: PointXY;
            size: Size;
            vertex: Node | Group;

      Returns any

selector: string

A CSS selector identifying children of source that are draggable

source: Element

The element containing things that will be dragged.

surface: Surface

The surface to attach to.

typeGenerator?: TypeGeneratorFunction<T>

Optional function to determine the type of the data object being dragged from an element that has started to be dragged.

vertexPreviewGenerator?: ((objectType, type, data, p, e) => BrowserElement)

When in tap mode, this function can be used to provide the element shown to the user as a new vertex is being drawn.

Type declaration

    • (objectType, type, data, p, e): BrowserElement
    • Parameters

      • objectType: string

        Group or Node

      • type: string

        The type will map to an item in your view

      • data: T

        The return value from the dataGenerator

      • p: PointXY

        Location on the canvas where the mousedown event occurred.

      • e: MouseEvent

        Mouse down event

      Returns BrowserElement

vertexPreviewUpdater?: ((el, origin, size, data) => any)

When in tap 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.

Type declaration

    • (el, origin, size, data): any
    • Parameters

      • el: BrowserElement

        The element you returned from vertexPreviewGenerator.

      • origin: PointXY

        The canvas location of the new vertex's top/left corner.

      • size: Size

        The current size of the new vertex.

      • data: T

        The return value from the dataGenerator

      Returns any