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

Properties

allowClickToAdd? allowDropOnCanvas? allowDropOnEdge? allowDropOnGroup? allowDropOnNode? canvasSelector? dataGenerator? dragSize? groupIdentifier? ignoreConstrainFunction? ignoreGrid? ignoreZoom? lassoClass? magnetize? mode? onVertexAdded? selector source surface typeGenerator? vertexPreviewGenerator? vertexPreviewUpdater?

Properties

Optional allowClickToAdd

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)

Optional allowDropOnCanvas

allowDropOnCanvas?: boolean

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

Optional allowDropOnEdge

allowDropOnEdge?: boolean

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

Optional allowDropOnGroup

allowDropOnGroup?: boolean

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

Optional allowDropOnNode

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.

Optional canvasSelector

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.

Optional dataGenerator

dataGenerator?: DataGeneratorFunction<T>

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

Optional dragSize

dragSize?: Size

Optional size to use for dragged elements.

Optional groupIdentifier

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.

Optional ignoreConstrainFunction

ignoreConstrainFunction?: boolean

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

Optional ignoreGrid

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.

Optional ignoreZoom

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.

Optional lassoClass

lassoClass?: string

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

Optional magnetize

magnetize?: boolean

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

Optional mode

mode?: DropManagerMode

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

Optional onVertexAdded

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

selector: string

A CSS selector identifying children of source that are draggable

source

source: Element

The element containing things that will be dragged.

surface

surface: Surface

The surface to attach to.

Optional typeGenerator

typeGenerator?: TypeGeneratorFunction<T>

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

Optional vertexPreviewGenerator

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

Optional vertexPreviewUpdater

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

Settings

Member Visibility

Theme

On This Page

allowClickToAddallowDropOnCanvasallowDropOnEdgeallowDropOnGroupallowDropOnNodecanvasSelectordataGeneratordragSizegroupIdentifierignoreConstrainFunctionignoreGridignoreZoomlassoClassmagnetizemodeonVertexAddedselectorsourcesurfacetypeGeneratorvertexPreviewGeneratorvertexPreviewUpdater