flexlayout-react 0.5.18 → 0.5.19

package/src/view/BorderTabSet.tsx

@@ -10,6 +10,7 @@ import { I18nLabel } from "../I18nLabel";
 import { useTabOverflow } from "./TabOverflowHook";
 import Orientation from "../Orientation";
 import { CLASSES } from "../Types";
+import { isAuxMouseEvent } from "./TabSet";
 
 /** @hidden @internal */
 export interface IBorderTabSetProps {
@@ -30,13 +31,24 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
 
     const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel } = useTabOverflow(border, Orientation.flip(border.getOrientation()), toolbarRef, stickyButtonsRef);
 
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(border, event);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(border, event);
+    };
+
     const onInterceptMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent<HTMLButtonElement>) => {
         event.stopPropagation();
     };
 
-    const onOverflowClick = () => {
+    const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
         showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        event.stopPropagation();
     };
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
@@ -44,11 +56,12 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
         userControlledLeft.current = false;
     };
 
-    const onFloatTab = () => {
+    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const selectedTabNode = border.getChildren()[border.getSelected()] as TabNode;
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
         }
+        event.stopPropagation();
     };
 
     const cm = layout.getClassName;
@@ -97,7 +110,7 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
             <button
                 key="overflowbutton"
                 ref={overflowbuttonRef}
-                className={cm("flexlayout__border_toolbar_button_overflow") + " " + cm("flexlayout__border_toolbar_button_overflow_" + border.getLocation().getName())}
+                className={cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_TOOLBAR_BUTTON_OVERFLOW_ + border.getLocation().getName())}
                 title={overflowTitle}
                 onClick={onOverflowClick}
                 onMouseDown={onInterceptMouseDown}
@@ -145,7 +158,11 @@ export const BorderTabSet = (props: IBorderTabSetProps) => {
     }
 
     return (
-        <div ref={selfRef} style={style} className={borderClasses} onWheel={onMouseWheel}>
+        <div ref={selfRef} dir="ltr" style={style} className={borderClasses} 
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
+            onWheel={onMouseWheel}>
             <div style={{ height: borderHeight }} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_ + border.getLocation().getName())}>
                 <div style={innerStyle} className={cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER) + " " + cm(CLASSES.FLEXLAYOUT__BORDER_INNER_TAB_CONTAINER_ + border.getLocation().getName())}>
                     {tabs}

package/src/view/Layout.tsx

@@ -28,6 +28,8 @@ import { IJsonTabNode } from "../model/IJsonModel";
 
 export type CustomDragCallback = (dragging: TabNode | IJsonTabNode, over: TabNode, x: number, y: number, location: DockLocation) => void;
 export type DragRectRenderCallback = (text: String, node?: Node, json?: IJsonTabNode) => React.ReactElement | undefined;
+export type FloatingTabPlaceholderRenderCallback = (dockPopout: () => void, showPopout: () => void) => React.ReactElement | undefined;
+export type NodeMouseEvent = (node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
 
 export interface ILayoutProps {
     model: Model;
@@ -41,11 +43,11 @@ export interface ILayoutProps {
     onAction?: (action: Action) => Action | undefined;
     onRenderTab?: (
         node: TabNode,
-        renderValues: ITabRenderValues,
+        renderValues: ITabRenderValues, // change the values in this object as required
     ) => void;
     onRenderTabSet?: (
         tabSetNode: TabSetNode | BorderNode,
-        renderValues: ITabSetRenderValues,
+        renderValues: ITabSetRenderValues, // change the values in this object as required
     ) => void;
     onModelChange?: (model: Model) => void;
     onExternalDrag?: (event: React.DragEvent<HTMLDivElement>) => undefined | {
@@ -69,6 +71,9 @@ export interface ILayoutProps {
         cursor?: string | undefined
     };
     onRenderDragRect?: DragRectRenderCallback;
+    onRenderFloatingTabPlaceholder?: FloatingTabPlaceholderRenderCallback;
+    onContextMenu?: NodeMouseEvent;
+    onAuxMouseClick?: NodeMouseEvent;
 }
 export interface IFontValues {
     size?: string;
@@ -157,7 +162,9 @@ export interface ILayoutCallbacks {
     styleFont: (style: Record<string, string>) => Record<string, string>;
     setEditingTab(tabNode?: TabNode): void;
     getEditingTab(): TabNode | undefined;
-
+    getOnRenderFloatingTabPlaceholder(): FloatingTabPlaceholderRenderCallback | undefined;
+    showContextMenu(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) : void;
+    auxMouseClick(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) : void;
 }
 
 // Popout windows work in latest browsers based on webkit (Chrome, Opera, Safari, latest Edge) and Firefox. They do
@@ -683,7 +690,7 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
         this.dragDivText = dragText;
         this.dragDiv = this.currentDocument!.createElement("div");
-        this.dragDiv.className = this.getClassName("flexlayout__drag_rect");
+        this.dragDiv.className = this.getClassName(CLASSES.FLEXLAYOUT__DRAG_RECT);
         this.dragDiv.addEventListener("mousedown", this.onDragDivMouseDown);
         this.dragDiv.addEventListener("touchstart", this.onDragDivMouseDown);
 
@@ -867,62 +874,13 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
 
         let dropInfo = this.props.model._findDropTargetNode(this.dragNode!, pos.x, pos.y);
         if (dropInfo) {
-            let invalidated = this.customDrop?.invalidated;
-            const currentCallback = this.customDrop?.callback;
-            this.customDrop = undefined;
-
-            const dragging = this.newTabJson || (this.dragNode instanceof TabNode ? this.dragNode : undefined);
-            if (dragging && (dropInfo.node instanceof TabSetNode || dropInfo.node instanceof BorderNode) && dropInfo.index === -1) {
-                const selected = dropInfo.node.getSelectedNode() as TabNode | undefined;
-                const tabRect = selected?.getRect()
-
-                if (selected && tabRect?.contains(pos.x, pos.y)) {
-                    let customDrop: ICustomDropDestination | undefined = undefined;
-
-                    try {
-                        const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));
-
-                        if (dest) {
-                            customDrop = {
-                                rect: new Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
-                                callback: dest.callback,
-                                invalidated: dest.invalidated,
-                                dragging: dragging,
-                                over: selected,
-                                x: pos.x - tabRect.x,
-                                y: pos.y - tabRect.y,
-                                location: dropInfo.location,
-                                cursor: dest.cursor
-                            };
-                        }
-                    } catch (e) {
-                        console.error(e)
-                    }
-
-                    if (customDrop?.callback === currentCallback) {
-                        invalidated = undefined;
-                    }
-
-                    this.customDrop = customDrop;
-                }
-            }
-
-            this.dropInfo = dropInfo;
-            this.outlineDiv!.className = this.getClassName(this.customDrop ? "flexlayout__outline_rect" : dropInfo.className);
-
-            if (this.customDrop) {
-                this.customDrop.rect.positionElement(this.outlineDiv!);
+            if (this.props.onTabDrag) {
+                this.handleCustomTabDrag(dropInfo, pos, event);
             } else {
+                this.dropInfo = dropInfo;
+                this.outlineDiv!.className = this.getClassName(dropInfo.className);
                 dropInfo.rect.positionElement(this.outlineDiv!);
-            }
-
-            DragDrop.instance.setGlassCursorOverride(this.customDrop?.cursor);
-            this.outlineDiv!.style.visibility = "visible";
-
-            try {
-                invalidated?.();
-            } catch (e) {
-                console.error(e);
+                this.outlineDiv!.style.visibility = "visible";
             }
         }
     };
@@ -943,6 +901,10 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
                 try {
                     const { callback, dragging, over, x, y, location } = this.customDrop;
                     callback(dragging, over, x, y, location);
+                    if (this.fnNewNodeDropped != null) {
+                        this.fnNewNodeDropped();
+                        this.fnNewNodeDropped = undefined;
+                    }
                 } catch (e) {
                     console.error(e)
                 }
@@ -961,6 +923,67 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         this.setState({ showHiddenBorder: DockLocation.CENTER });
     };
 
+    /** @hidden @internal */
+    private handleCustomTabDrag(dropInfo: DropInfo, pos: { x: number; y: number; }, event: React.MouseEvent<Element, MouseEvent>) {
+        let invalidated = this.customDrop?.invalidated;
+        const currentCallback = this.customDrop?.callback;
+        this.customDrop = undefined;
+
+        const dragging = this.newTabJson || (this.dragNode instanceof TabNode ? this.dragNode : undefined);
+        if (dragging && (dropInfo.node instanceof TabSetNode || dropInfo.node instanceof BorderNode) && dropInfo.index === -1) {
+            const selected = dropInfo.node.getSelectedNode() as TabNode | undefined;
+            const tabRect = selected?.getRect();
+
+            if (selected && tabRect?.contains(pos.x, pos.y)) {
+                let customDrop: ICustomDropDestination | undefined = undefined;
+
+                try {
+                    const dest = this.onTabDrag(dragging, selected, pos.x - tabRect.x, pos.y - tabRect.y, dropInfo.location, () => this.onDragMove(event));
+
+                    if (dest) {
+                        customDrop = {
+                            rect: new Rect(dest.x + tabRect.x, dest.y + tabRect.y, dest.width, dest.height),
+                            callback: dest.callback,
+                            invalidated: dest.invalidated,
+                            dragging: dragging,
+                            over: selected,
+                            x: pos.x - tabRect.x,
+                            y: pos.y - tabRect.y,
+                            location: dropInfo.location,
+                            cursor: dest.cursor
+                        };
+                    }
+                } catch (e) {
+                    console.error(e);
+                }
+
+                if (customDrop?.callback === currentCallback) {
+                    invalidated = undefined;
+                }
+
+                this.customDrop = customDrop;
+            }
+        }
+
+        this.dropInfo = dropInfo;
+        this.outlineDiv!.className = this.getClassName(this.customDrop ? CLASSES.FLEXLAYOUT__OUTLINE_RECT : dropInfo.className);
+
+        if (this.customDrop) {
+            this.customDrop.rect.positionElement(this.outlineDiv!);
+        } else {
+            dropInfo.rect.positionElement(this.outlineDiv!);
+        }
+
+        DragDrop.instance.setGlassCursorOverride(this.customDrop?.cursor);
+        this.outlineDiv!.style.visibility = "visible";
+
+        try {
+            invalidated?.();
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     /** @hidden @internal */
     onDragEnter(event: React.DragEvent<HTMLDivElement>) {
         // DragDrop keeps track of number of dragenters minus the number of
@@ -1125,6 +1148,25 @@ export class Layout extends React.Component<ILayoutProps, ILayoutState> {
         }
         return message;
     }
+
+    /** @hidden @internal */
+    getOnRenderFloatingTabPlaceholder() {
+        return this.props.onRenderFloatingTabPlaceholder;
+    }
+
+    /** @hidden @internal */
+    showContextMenu(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) {
+        if (this.props.onContextMenu) {
+            this.props.onContextMenu(node, event);
+        }
+    }
+
+    /** @hidden @internal */
+    auxMouseClick(node: TabNode | TabSetNode | BorderNode, event: React.MouseEvent<HTMLElement, MouseEvent>) {
+        if (this.props.onAuxMouseClick) {
+            this.props.onAuxMouseClick(node, event);
+        }
+    }
 }
 
 // wrapper round the drag rect renderer that can call

package/src/view/TabButton.tsx

@@ -7,6 +7,7 @@ import Rect from "../Rect";
 import { IIcons, ILayoutCallbacks, ITitleObject } from "./Layout";
 import { ICloseType } from "../model/ICloseType";
 import { CLASSES } from "../Types";
+import { isAuxMouseEvent } from "./TabSet";
 
 /** @hidden @internal */
 export interface ITabButtonProps {
@@ -28,12 +29,23 @@ export const TabButton = (props: ITabButtonProps) => {
     const contentWidth = React.useRef<number>(0);
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        if (!layout.getEditingTab()) {
+
+        if (!isAuxMouseEvent(event) && !layout.getEditingTab()) {
             const message = layout.i18nName(I18nLabel.Move_Tab, node.getName());
             layout.dragStart(event, message, node, node.isEnableDrag(), onClick, onDoubleClick);
         }
     };
 
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(node, event);
+        }
+    };
+
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(node, event);
+    };
+
     const onClick = () => {
         layout.doAction(Actions.selectTab(node.getId()));
     };
@@ -211,6 +223,9 @@ export const TabButton = (props: ITabButtonProps) => {
             }}
             className={classNames}
             onMouseDown={onMouseDown}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onContextMenu={onContextMenu}
             onTouchStart={onMouseDown}
             title={node.getHelpText()}
         >

package/src/view/TabFloating.tsx

@@ -17,6 +17,16 @@ export interface ITabFloatingProps {
 export const TabFloating = (props: ITabFloatingProps) => {
     const { layout, selected, node } = props;
 
+    const showPopout = () => {
+        if (node.getWindow()) {
+            node.getWindow()!.focus();
+        }
+    }
+
+    const dockPopout = () => {
+        layout.doAction(Actions.unFloatTab(node.getId()));
+    }
+
     const onMouseDown = () => {
         const parent = node.getParent() as TabSetNode;
         if (parent.getType() === TabSetNode.TYPE) {
@@ -28,14 +38,12 @@ export const TabFloating = (props: ITabFloatingProps) => {
 
     const onClickFocus = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         event.preventDefault();
-        if (node.getWindow()) {
-            node.getWindow()!.focus();
-        }
+        showPopout();
     };
 
     const onClickDock = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         event.preventDefault();
-        layout.doAction(Actions.unFloatTab(node.getId()));
+        dockPopout();
     };
 
     const cm = layout.getClassName;
@@ -48,21 +56,30 @@ export const TabFloating = (props: ITabFloatingProps) => {
     const showMessage = layout.i18nName(I18nLabel.Floating_Window_Show_Window);
     const dockMessage = layout.i18nName(I18nLabel.Floating_Window_Dock_Window);
 
-    return (
-        <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
-            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
-                <div>{message}</div>
-                <div>
-                    <a href="#" onClick={onClickFocus}>
-                        {showMessage}
-                    </a>
-                </div>
-                <div>
-                    <a href="#" onClick={onClickDock}>
-                        {dockMessage}
-                    </a>
+    const customRenderCallback = layout.getOnRenderFloatingTabPlaceholder();
+    if (customRenderCallback) {
+        return (
+            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
+                {customRenderCallback(dockPopout, showPopout)}
+            </div>
+        );
+    } else {
+        return (
+            <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING)} onMouseDown={onMouseDown} onTouchStart={onMouseDown} style={style}>
+                <div className={cm(CLASSES.FLEXLAYOUT__TAB_FLOATING_INNER)}>
+                    <div>{message}</div>
+                    <div>
+                        <a href="#" onClick={onClickFocus}>
+                            {showMessage}
+                        </a>
+                    </div>
+                    <div>
+                        <a href="#" onClick={onClickDock}>
+                            {dockMessage}
+                        </a>
+                    </div>
                 </div>
             </div>
-        </div>
-    );
+        );
+    }
 };

package/src/view/TabSet.tsx

@@ -17,7 +17,7 @@ export interface ITabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     icons?: IIcons;
-    editingTab?: TabNode; 
+    editingTab?: TabNode;
 }
 
 /** @hidden @internal */
@@ -31,9 +31,10 @@ export const TabSet = (props: ITabSetProps) => {
 
     const { selfRef, position, userControlledLeft, hiddenTabs, onMouseWheel, tabsTruncated } = useTabOverflow(node, Orientation.HORZ, toolbarRef, stickyButtonsRef);
 
-    const onOverflowClick = () => {
+    const onOverflowClick = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         const element = overflowbuttonRef.current!;
         showPopup(layout.getRootDiv(), element, hiddenTabs, onOverflowItemSelect, layout.getClassName);
+        event.stopPropagation();
     };
 
     const onOverflowItemSelect = (item: { node: TabNode; index: number }) => {
@@ -42,37 +43,53 @@ export const TabSet = (props: ITabSetProps) => {
     };
 
     const onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
-        let name = node.getName();
-        if (name === undefined) {
-            name = "";
-        } else {
-            name = ": " + name;
+        
+        if (!isAuxMouseEvent(event)) {
+            let name = node.getName();
+            if (name === undefined) {
+                name = "";
+            } else {
+                name = ": " + name;
+            }
+            layout.doAction(Actions.setActiveTabset(node.getId()));
+            if (!layout.getEditingTab()) {
+                const message = layout.i18nName(I18nLabel.Move_Tabset, name);
+                layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+            }
         }
-        layout.doAction(Actions.setActiveTabset(node.getId()));
-        if (!layout.getEditingTab()) {
-            const message = layout.i18nName(I18nLabel.Move_Tabset, name);
-            layout.dragStart(event, message, node, node.isEnableDrag(), (event2: Event) => undefined, onDoubleClick);
+    };
+
+    const onAuxMouseClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        if (isAuxMouseEvent(event)) {
+            layout.auxMouseClick(node, event);
         }
     };
 
+    const onContextMenu = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        layout.showContextMenu(node, event);
+    };
+
     const onInterceptMouseDown = (event: React.MouseEvent | React.TouchEvent) => {
         event.stopPropagation();
     };
 
-    const onMaximizeToggle = () => {
+    const onMaximizeToggle = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (node.canMaximize()) {
             layout.maximize(node);
         }
+        event.stopPropagation();
     };
 
-    const onClose = () => {
+    const onClose = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         layout.doAction(Actions.deleteTabset(node.getId()));
+        event.stopPropagation();
     };
 
-    const onFloatTab = () => {
+    const onFloatTab = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
         if (selectedTabNode !== undefined) {
             layout.doAction(Actions.floatTab(selectedTabNode.getId()));
         }
+        event.stopPropagation();
     };
 
     const onDoubleClick = (event: Event) => {
@@ -269,7 +286,12 @@ export const TabSet = (props: ITabSetProps) => {
         }
 
         header = (
-            <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+            <div className={tabHeaderClasses} style={{ height: node.getHeaderHeight() + "px" }}
+                onMouseDown={onMouseDown}
+                onContextMenu={onContextMenu}
+                onClick={onAuxMouseClick}
+                onAuxClick={onAuxMouseClick}
+                onTouchStart={onMouseDown}>
                 <div className={cm(CLASSES.FLEXLAYOUT__TABSET_HEADER_CONTENT)}>{headerContent}</div>
                 {headerToolbar}
             </div>
@@ -284,7 +306,12 @@ export const TabSet = (props: ITabSetProps) => {
         tabStripStyle["bottom"] = "0px";
     }
     tabStrip = (
-        <div className={tabStripClasses} style={tabStripStyle} onMouseDown={onMouseDown} onTouchStart={onMouseDown}>
+        <div className={tabStripClasses} style={tabStripStyle}
+            onMouseDown={onMouseDown}
+            onContextMenu={onContextMenu}
+            onClick={onAuxMouseClick}
+            onAuxClick={onAuxMouseClick}
+            onTouchStart={onMouseDown}>
             <div ref={tabbarInnerRef} className={cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER) + " " + cm(CLASSES.FLEXLAYOUT__TABSET_TABBAR_INNER_ + node.getTabLocation())}>
                 <div
                     style={{ left: position }}
@@ -300,9 +327,21 @@ export const TabSet = (props: ITabSetProps) => {
     style = layout.styleFont(style);
 
     return (
-        <div ref={selfRef} style={style} className={cm(CLASSES.FLEXLAYOUT__TABSET)} onWheel={onMouseWheel}>
+        <div ref={selfRef} dir="ltr" style={style} className={cm(CLASSES.FLEXLAYOUT__TABSET)} onWheel={onMouseWheel}>
             {header}
             {tabStrip}
         </div>
     );
 };
+
+/** @hidden @internal */
+export function isAuxMouseEvent(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) {
+    let auxEvent = false;
+    if (event.nativeEvent instanceof MouseEvent) {
+        if (event.nativeEvent.button !== 0 || event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+            auxEvent = true; 
+        }
+    }
+    return auxEvent;
+}
+