Module: DragAndDropClient

Deprecated: Drag and Drop Client (Finsemble Workspaces)

The Drag and Drop Client has been DEPRECATED.

The Drag and Drop Client acts as an API to share data between components via a user action i.e., drag and drop. As an example, consider a user wanting to share a chart inside a chat - they can do so using the Drag and Drop Service.

A component that shares data needs to publish the data types it can share by calling setEmitters. The Window Manager automatically adds a draggable share icon to any component that calls setEmitters. Similarly, a component that can receive data needs to publish that using addReceivers. Since it is possible to have multiple components on a page receiving the data, you can add multiple receivers for the same data type.

The Drag and Drop Client overlays a scrim on all windows once the user starts dragging a sharable item. The scrim displays which windows can and cannot receive that data. However, this doesn't always work well, especially with complex third party components. You may need to add your own drop zone to the component and use drop as the handler.

The Drag and Drop Client can also make use of the Linker Client to share data between linked windows using openSharedData.

For more information, see the Drag and Drop tutorial.

deprecated The DragAndDropClient is deprecated

Type Aliases

emitter

Ƭ emitter: Object

Type declaration

Name	Type
data	any
type	string

---

receiver

Ƭ receiver: Object

Type declaration

Name	Type
handler	Function
type	string

---

receiverUpdate

Ƭ receiverUpdate: Object

Type declaration

Name	Type
handler	Function
oldHandler	Function
type	string

Methods

addReceivers

▸ addReceivers(params): void

deprecated The DragAndDropClient is deprecated

Adds receivers for the data that can be received by the component. There can be any number of receivers for each data type. You can also use regular expressions to specify the data that can be received.

FSBL.Clients.DragAndDropClient.addReceivers({
    receivers: [
        {
            type: "symbol",
            handler: changeSymbol
        }, {
            type: "chartiq.chart",
            handler: openChart
        }
])
FSBL.Clients.DragAndDropClient.addReceivers({
    receivers: [
        {
            type: /.*/,
            handler: getEverythingAComponentCanEmit
        }
    ]
})

Parameters

Name	Type	Description
params	Object	-
params.receivers	receiver[]	This is a list of objects ({ type: string, handler: function }), each containing a type and a handler function to call with the data once received. The receiver can take a regular expression as its type to provide the ability to receive multiple data types. Each type can have multiple handlers so you can use the same type multiple times in your call.

Returns

void

---

dragStart

▸ dragStart(event): void

deprecated The DragAndDropClient is deprecated

This is a drag event handler for an element that can be dragged to share data. Our sample Window Title Bar component uses this internally when the share icon is dragged. This can be attached to any element that needs to be draggable. The data from all emitters that match receivers in the drop component is automatically shared.

Parameters

Name	Type	Description
event	any	The DragEvent fired from the native browser event.

Returns

void

---

dragStartWithData

▸ dragStartWithData(event, data): void

deprecated The DragAndDropClient is deprecated

This is a drag event handler to enable dragging specific data that is not tied to an emitter. For example, an item in a list.

element.draggable = true;

element.addEventListener('dragstart', function(event) {
        var data = {
            'rsrchx.report': {
                url: event.target.href,
            }
        };
        FSBL.Clients.DragAndDropClient.dragStartWithData(event, data);
})

Parameters

Name	Type	Description
event	any	The DragEvent fired from the native browser event.
data	any	The data you wish to be transferred with the event.

Returns

void

---

drop

▸ drop(event): void

deprecated The DragAndDropClient is deprecated

This is a drop event handler that can be attached to any element that you want to be a drop zone for the Drag and Drop Client. It automatically requests data for all the data elements that are common between the receiver and the emitter.

Parameters

Name	Type	Description
event	any	The DragEvent fired from the native browser event.

Returns

void

---

getFinsembleWindow

• Private getFinsembleWindow:

---

openSharedData

▸ openSharedData(params, cb): void

deprecated The DragAndDropClient is deprecated

This will either open a component with the shared data or publish the shared data using the Linker Client if the window is linked.

Parameters

Name	Type	Description
params	Object	-
params.data?	any	Data to pass to the opened component.
params.multipleOpenerHandler?	Function	Optional. This function is called with on object that contains a map of componentTypes to the data types they can open. It must return a list of components to be opened. If no handler is provided, the first found component will be chosen. It is possible that the component opened may not handle all the data provided.
params.publishOnly?	boolean	if the component is linked, this will only publish the data, not force open a window if it does not exist. If the component is not linked, this is ignored.
cb	StandardCallback<StandardError, any>	Callback invoked with action taken.

Returns

void

---

removeReceivers

▸ Private removeReceivers(params): void

deprecated The DragAndDropClient is deprecated

removeReceivers removes the handlers for the data that can be received by the component.

DragAndDropClient.removeReceivers({
    receivers: [
        {
            type: "symbol",
            handler: changeSymbol
        }, {
            type: "chartiq.chart",
            handler: openChart
        }
    ])
DragAndDropClient.removeReceivers({
    receivers: [
        {
            type: /.*/,
            oldHandler: getEverythingAComponentCanEmit
        }
    ])

Parameters

Name	Type	Description
params	Object	-
params.receivers	receiver[]	This is a list of objects, each containing a type and the handler that needs to be removed.

Returns

void

---

setEmitters

▸ setEmitters(params): void

This sets all the data that can be shared by the component. There can only be one emitter for each data type.

FSBL.Clients.DragAndDropClient.setEmitters({
    emitters: [
        {
            type: "symbol",
            data: getSymbol
        },
        {
            type: "chartiq.chart",
            data: getChart
        }
    ]
})

deprecated The DragAndDropClient is deprecated

Parameters

Name	Type	Description
params	Object	-
params.emitters	emitter[]	This is a list of objects ({ type: string, data: function }) which contain a type and a function to get the data.

Returns

void

---

updateReceivers

▸ Private updateReceivers(params): void

deprecated The DragAndDropClient is deprecated

updateReceivers updates the handlers for the data that can be received by the component.

DragAndDropClient.updateReceivers({
    receivers: [
        {
            type: "symbol",
            oldHandler: updateSymbol,
            handler: changeSymbol
        }, {
            type: "chartiq.chart",
            oldHandler: openChart_old,
            handler: openChart_new
        }
    ])
DragAndDropClient.updateReceivers({
    receivers: [
        {
            type: /.*/,
            oldHandler: getEverythingAComponentCanEmit,
            handler: doSomethingWithAllThisData
        }
    ])

Parameters

Name	Type	Description
params	Object	-
params.receivers	receiverUpdate[]	This is a list of objects ({ type: string, handler: Function, oldHandler: Function }), each containing a type, the existing handler (oldHandler) and a handler function to replace the old handler with.

Returns

void