@datagrok-libraries/dock-spawn-dg 0.0.1

package/css/dock-manager.css

@@ -0,0 +1,411 @@
+/************* Panel with title bar ************/
+.panel-base {
+	pointer-events: none;
+}
+
+.panel-base:focus {
+	outline: 0;
+}
+
+.panel-titlebar {
+	width: 100%;
+	overflow: hidden;
+	height: 25px;
+	pointer-events: auto;
+}
+
+.panel-titlebar-icon {
+	height: 16px;
+	margin-right: 3px;
+}
+
+.panel-titlebar-text {
+	float: left;
+	padding-left: 10px;
+	padding-top: 5px;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	width: calc(100% - 30px);
+	white-space: nowrap;
+}
+
+.panel-titlebar-text > span {
+	vertical-align: top;
+}
+
+.panel-titlebar-button-close {
+	display: flex;
+    justify-content: flex-end;
+    align-items: center;
+	width: 25px;
+    height: 25px;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.panel-titlebar-button-close::after {
+	float: right;
+	cursor: pointer;
+	padding-right: 8px;
+	content: 'x';
+	font-weight: normal;
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	display: flex;
+	height: 100%;
+	align-items: center;
+}
+
+.panel-titlebar-button-close:hover {
+	color: black;
+}
+
+.panel-content {
+	width: 100%;
+	overflow: hidden;
+}
+
+.panel-content * {
+	/* margin: 0px; */
+}
+
+.panel-content-wrapper {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.panel-grayout {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgb(0 0 0 / 50%);
+	z-index: 10;
+	pointer-events: all;
+}
+
+.panel-has-changes {
+    font-style: italic;
+}
+
+.panel-has-changes::before {
+    content: '* ';
+}
+
+/***************** Floating dialog box ****************/
+
+.dialog-floating {
+	position: absolute;
+}
+
+.dialog-floating:focus {
+	outline: 0;
+}
+
+/************ Resize decorator ************/
+
+.resize-handle {
+	position: absolute;
+	width: 6px;
+	height: 6px;
+	z-index: 10;
+}
+
+.resize-handle-corner {
+	position: absolute;
+	width: 12px;
+	height: 12px;
+	z-index: 10;
+}
+
+.resize-handle-e {
+	cursor: e-resize;
+}
+
+.resize-handle-w {
+	cursor: w-resize;
+}
+
+.resize-handle-s {
+	cursor: s-resize;
+}
+
+.resize-handle-n {
+	cursor: n-resize;
+}
+
+.resize-handle-ne {
+	cursor: ne-resize;
+}
+
+.resize-handle-nw {
+	cursor: nw-resize;
+}
+
+.resize-handle-se {
+	cursor: se-resize;
+}
+
+.resize-handle-sw {
+	cursor: sw-resize;
+}
+
+/******************* Dock Manager ********************/
+
+.dock-container {
+	position: relative;
+}
+
+.dock-container-fill {}
+
+/******************* Document Manager ********************/
+
+.document-manager {}
+
+/******************* Dock Wheel ********************/
+
+.dock-wheel-base {
+	position: absolute;
+}
+
+.dock-wheel-item {
+	position: absolute;
+	width: 32px;
+	height: 32px;
+}
+
+.dock-wheel-fill {
+	margin-left: -16px;
+	margin-top: -16px;
+}
+
+.dock-wheel-left {
+	margin-left: -48px;
+	margin-top: -16px;
+}
+
+.dock-wheel-right {
+	margin-left: 16px;
+	margin-top: -16px;
+}
+
+.dock-wheel-top {
+	margin-left: -16px;
+	margin-top: -48px;
+}
+
+.dock-wheel-down {
+	margin-left: -16px;
+	margin-top: 16px;
+}
+
+.dock-wheel-panel-preview {
+	position: absolute;
+	background-color: rgba(128, 128, 255, 0.5);
+}
+
+.dock-wheel-fill-icon {
+	background: url(../images/dock_fill.png) 0 0;
+}
+
+.dock-wheel-left-icon {
+	background: url(../images/dock_left.png) 0 0;
+}
+
+.dock-wheel-right-icon {
+	background: url(../images/dock_right.png) 0 0;
+}
+
+.dock-wheel-top-icon {
+	background: url(../images/dock_top.png) 0 0;
+}
+
+.dock-wheel-down-icon {
+	background: url(../images/dock_bottom.png) 0 0;
+}
+
+.dock-wheel-fill-icon-hover {
+	background: url(../images/dock_fill_sel.png) 0 0;
+}
+
+.dock-wheel-left-icon-hover {
+	background: url(../images/dock_left_sel.png) 0 0;
+}
+
+.dock-wheel-right-icon-hover {
+	background: url(../images/dock_right_sel.png) 0 0;
+}
+
+.dock-wheel-top-icon-hover {
+	background: url(../images/dock_top_sel.png) 0 0;
+}
+
+.dock-wheel-down-icon-hover {
+	background: url(../images/dock_bottom_sel.png) 0 0;
+}
+
+/**************************** Splitter *********************************/
+
+.splitter-container-horizontal {
+	float: left;
+	position: relative;
+	pointer-events: none;
+}
+
+.splitter-container-vertical {
+	position: relative;
+	pointer-events: none;
+}
+
+.splitbar-horizontal {
+	width: 100%;
+	height: 5px;
+	cursor: n-resize;
+	position: relative;
+	pointer-events: auto;
+}
+
+.splitbar-vertical {
+	width: 5px;
+	height: 100%;
+	float: left;
+	cursor: e-resize;
+	position: relative;
+	pointer-events: auto;
+}
+
+.splitbar-horizontal-ghoust {
+	width: 100%;
+	height: 5px;
+	cursor: n-resize;
+	position: absolute;
+}
+
+.splitbar-vertical-ghoust {
+	width: 5px;
+	height: 100%;
+	position: absolute;
+	cursor: e-resize;
+}
+
+/*************************** Tab Host ********************************/
+
+.dockspan-tab-host {
+	display: inline-block;
+	position: absolute;
+}
+
+.dockspan-tab-content {
+	position: relative;
+}
+
+.dockspan-tab-content:focus {
+	outline: 0;
+}
+
+.dockspan-tab-content * {}
+
+.dockspan-tab-handle {
+	position: relative;
+	height: 22px;
+	float: left;
+	overflow: hidden;
+	cursor: pointer;
+	padding-right: 16px;
+}
+
+.dockspan-tab-handle:hover {
+	cursor: pointer;
+}
+
+.dockspan-tab-handle-selected {}
+
+.dockspan-tab-handle-text {
+	margin-top: 3px;
+	margin-left: 6px;
+	margin-right: 6px;
+	white-space: nowrap;
+	overflow: hidden;
+	float: left;
+	text-overflow: ellipsis;
+	width: calc(100% - 3px);
+	display: block;
+}
+
+.dockspan-tab-handle-text > span {
+	vertical-align: top;
+}
+
+.dockspan-tab-handle-close-button {}
+
+.dockspan-tab-handle-close-button::after {
+	margin-right: 5px;
+	float: right;
+	position: absolute;
+	right: 0;
+	content: 'x';
+	font-weight: normal;
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	cursor: pointer;
+	display: flex;
+	height: 100%;
+	align-items: center;
+}
+
+.dockspan-tab-handle-close-button:hover {
+	color: black;
+}
+
+.dockspan-tab-handle-list-container {
+	height: 22px;
+	overflow: hidden;
+	display: none;
+	pointer-events: auto;
+}
+
+.dockspan-tab-handle-list-container-visible {
+	display: flex;
+}
+
+.dockspan-tab-handle-content-seperator {
+	height: 4px;
+	display: none;
+}
+
+.dockspan-tab-handle-content-seperator-visible {
+	display: block;
+}
+
+.dockspan-tab-handle-content-seperator-selected {}
+
+.dockspab-tab-handle-context-menu {
+	position: absolute;
+	z-index: 10000000;
+	background-color: white;
+	border: white;
+	border: black solid 2px;
+	padding: 5px;
+}
+
+.dockspab-tab-handle-context-menu>div {
+	cursor: pointer;
+	padding: 2px;
+}
+
+.dockspab-tab-handle-context-menu>div:hover {
+	background-color: gray;
+	cursor: pointer;
+	padding: 2px;
+}
+
+/*************************** Text Selection **************************/
+
+.disable-selection {
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	cursor: default;
+}

package/images/close.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g id="close">
+        <path id="x" d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"/>
+    </g>
+</svg>

package/index.ts

@@ -0,0 +1,32 @@
+export * from './src/ContainerType';
+export * from './src/Dialog';
+export * from './src/DockConfig';
+export * from './src/DockGraphSerializer';
+export * from './src/DockLayoutEngine';
+export * from './src/DockManager';
+export * from './src/DockManagerContext';
+export * from './src/DockModel';
+export * from './src/DockNode';
+export * from './src/DockWheel';
+export * from './src/DockWheelItem';
+export * from './src/DocumentManagerContainer';
+export * from './src/DocumentTabPage';
+export * from './src/DraggableContainer';
+export * from './src/EventHandler';
+export * from './src/FillDockContainer';
+export * from './src/HorizontalDockContainer';
+export * from './src/PanelContainer';
+export * from './src/Point';
+export * from './src/ResizableContainer';
+export * from './src/ResizeHandle';
+export * from './src/SplitterBar';
+export * from './src/SplitterDockContainer';
+export * from './src/SplitterPanel';
+export * from './src/TabHandle';
+export * from './src/TabHost';
+export * from './src/TabPage';
+export * from './src/UndockInitiator';
+export * from './src/Utils';
+export * from './src/VerticalDockContainer';
+export * from './src/i18n/Localizer';
+export * from './src/webcomponent/DockSpawnTsWebcomponent';

package/lib/BrowserDialogHelper.d.ts

@@ -0,0 +1,8 @@
+export declare function moveElementToNewBrowserWindow(element: HTMLElement, params: {
+    title?: string;
+    closeCallback?: () => void;
+    newWindowClosedCallback?: () => void;
+    focused: (e: FocusEvent) => void;
+    blured: (e: FocusEvent) => void;
+}): void;
+//# sourceMappingURL=BrowserDialogHelper.d.ts.map

package/lib/BrowserDialogHelper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserDialogHelper.d.ts","sourceRoot":"","sources":["../src/BrowserDialogHelper.ts"],"names":[],"mappings":"AAAA,wBAAgB,6BAA6B,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC,QAqDA"}

package/lib/BrowserDialogHelper.js

@@ -0,0 +1,60 @@
+export function moveElementToNewBrowserWindow(element, params) {
+    const rect = element.getBoundingClientRect();
+    const newWindowBounds = { x: rect.x + 24, y: rect.y + 60, width: rect.width, height: rect.height };
+    const win = window.open('about:blank', undefined, `popup=yes,left=${newWindowBounds.x},top=${newWindowBounds.y},width=${newWindowBounds.width},height=${newWindowBounds.height}`);
+    win.onfocus = (e) => params.focused(e);
+    win.onblur = (e) => params.blured(e);
+    const styles = [...document.head.querySelectorAll('link')].map((x) => x.cloneNode());
+    for (const s of styles)
+        win.document.head.appendChild(win.document.adoptNode(s));
+    const st = win.document.createElement('style');
+    st.innerText = `
+    html {
+        overflow: hidden;
+        position: fixed;
+        width: 100%;
+        height: 100%;
+    }
+    body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+    }
+    `;
+    win.document.head.appendChild(st);
+    const titleEl = win.document.createElement('title');
+    titleEl.innerText = params.title;
+    win.document.head.appendChild(titleEl);
+    win.onunload = () => params.newWindowClosedCallback();
+    const cache = new Map();
+    const listSs = new Map();
+    function backupSs(el) {
+        if (el.shadowRoot) {
+            if (el.shadowRoot.adoptedStyleSheets.length > 0)
+                listSs.set(el, [...el.shadowRoot.adoptedStyleSheets.map((x) => cloneStyleSheet(win, x, cache))]);
+            for (const e of el.shadowRoot.querySelectorAll('*'))
+                backupSs(e);
+        }
+    }
+    backupSs(element);
+    for (const e of element.querySelectorAll('*'))
+        backupSs(e);
+    win.document.body.appendChild(win.document.adoptNode(element));
+    for (const e of listSs)
+        e[0].shadowRoot.adoptedStyleSheets = e[1];
+    params.closeCallback();
+}
+function cloneStyleSheet(window, stylesheet, cache) {
+    const existingCopy = cache.get(stylesheet);
+    if (existingCopy)
+        return existingCopy;
+    let payload = '';
+    const rules = stylesheet.cssRules;
+    for (let i = 0; i < rules.length; i++)
+        payload += rules[i].cssText + '\n';
+    //@ts-ignore
+    const newStylesheet = new window.CSSStyleSheet();
+    cache.set(stylesheet, newStylesheet);
+    newStylesheet.replaceSync(payload);
+    return newStylesheet;
+}

package/lib/ContainerType.d.ts

@@ -0,0 +1,7 @@
+export declare enum ContainerType {
+    horizontal = "horizontal",
+    vertical = "vertical",
+    fill = "fill",
+    panel = "panel"
+}
+//# sourceMappingURL=ContainerType.d.ts.map

package/lib/ContainerType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContainerType.d.ts","sourceRoot":"","sources":["../src/ContainerType.ts"],"names":[],"mappings":"AAAA,oBAAY,aAAa;IACrB,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,IAAI,SAAS;IACb,KAAK,UAAU;CAClB"}

package/lib/ContainerType.js

@@ -0,0 +1,7 @@
+export var ContainerType;
+(function (ContainerType) {
+    ContainerType["horizontal"] = "horizontal";
+    ContainerType["vertical"] = "vertical";
+    ContainerType["fill"] = "fill";
+    ContainerType["panel"] = "panel";
+})(ContainerType || (ContainerType = {}));

package/lib/Dialog.d.ts

@@ -0,0 +1,51 @@
+import { DockManager } from './DockManager.js';
+import { Point } from './Point.js';
+import { PanelContainer } from './PanelContainer.js';
+import { DraggableContainer } from './DraggableContainer.js';
+import { ResizableContainer } from './ResizableContainer.js';
+import { EventHandler } from './EventHandler.js';
+import { DockNode } from './DockNode.js';
+export declare class Dialog {
+    elementDialog: HTMLDivElement & {
+        floatingDialog: Dialog;
+    };
+    draggable: DraggableContainer;
+    panel: PanelContainer;
+    dockManager: DockManager;
+    eventListener: DockManager;
+    position: Point;
+    resizable: ResizableContainer;
+    disableResize: boolean;
+    mouseDownHandler: any;
+    onKeyPressBound: any;
+    noDocking: boolean;
+    isHidden: boolean;
+    keyPressHandler: EventHandler;
+    focusHandler: EventHandler;
+    grayoutParent: PanelContainer;
+    contextmenuHandler: EventHandler;
+    _ctxMenu: HTMLDivElement;
+    _windowsContextMenuCloseBound: any;
+    constructor(panel: PanelContainer, dockManager: DockManager, grayoutParent?: PanelContainer, disableResize?: boolean);
+    saveState(x: number, y: number): void;
+    static fromElement(id: string, dockManager: DockManager): Dialog;
+    _initialize(): void;
+    setPosition(x: number, y: number): void;
+    getPosition(): Point;
+    onFocus(): void;
+    onMouseDown(e: PointerEvent): void;
+    destroy(): void;
+    resize(width: number, height: number): void;
+    setTitle(title: string): void;
+    setTitleIcon(iconName: string): void;
+    bringToFront(): void;
+    hide(): void;
+    close(): void;
+    remove(): void;
+    show(): void;
+    static createContextMenuContentCallback: (dialog: Dialog, documentMangerNodes: DockNode[]) => Node[];
+    oncontextMenuClicked(e: MouseEvent): void;
+    closeContextMenu(): void;
+    windowsContextMenuClose(e: Event): void;
+}
+//# sourceMappingURL=Dialog.d.ts.map

package/lib/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../src/Dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAC;AACjC,OAAO,EAAC,cAAc,EAAC,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAC,kBAAkB,EAAC,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAC,kBAAkB,EAAC,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC,qBAAa,MAAM;IACjB,aAAa,EAAE,cAAc,GAAG;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3D,SAAS,EAAE,kBAAkB,CAAC;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,WAAW,CAAC;IACzB,aAAa,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC;IAChB,SAAS,EAAE,kBAAkB,CAAC;IAC9B,aAAa,EAAE,OAAO,CAAC;IACvB,gBAAgB,EAAE,GAAG,CAAC;IACtB,eAAe,EAAE,GAAG,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,YAAY,CAAC;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,aAAa,EAAE,cAAc,CAAC;IAC9B,kBAAkB,EAAE,YAAY,CAAC;IACjC,QAAQ,EAAE,cAAc,CAAC;IACzB,6BAA6B,EAAE,GAAG,CAAC;gBAEvB,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC,EAAE,cAAc,EAAE,aAAa,CAAC,EAAE,OAAO;IAapH,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAK9B,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,WAAW;IAIvD,WAAW;IAyBX,WAAW,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAShC,WAAW,IAAI,KAAK;IAIpB,OAAO;IAKP,WAAW,CAAC,CAAC,EAAE,YAAY;IAK3B,OAAO;IA6BP,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAIpC,QAAQ,CAAC,KAAK,EAAE,MAAM;IAItB,YAAY,CAAC,QAAQ,EAAE,MAAM;IAI7B,YAAY;IAMZ,IAAI;IAYJ,KAAK;IAOL,MAAM;IAIN,IAAI;IAUJ,MAAM,CAAC,gCAAgC,WAAY,MAAM,uBAAuB,QAAQ,EAAE,KAAG,IAAI,EAAE,CA4BjG;IAEF,oBAAoB,CAAC,CAAC,EAAE,UAAU;IAyBlC,gBAAgB;IAQhB,uBAAuB,CAAC,CAAC,EAAE,KAAK;CASjC"}