UNPKG

dockview

Version:

Docking layout manager — tabs, groups, grids, splitviews, drag and drop, floating panels

github.com/mathuo/dockview

mathuo/dockview

14 lines (13 loc) • 14.1 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/** * dockview * @version 7.0.2 * @link https://github.com/mathuo/dockview * @license MIT */ import{defineModule as e,DockviewCompositeDisposable as t,DockviewDisposable as o,findRelativeZIndexParent as s,LiveRegionModule as n,resolveMessages as i,registerModules as r,markDockviewPackageLoaded as a}from"dockview-core";export*from"dockview-core"; /** * dockview-modules * @version 7.0.2 * @link https://github.com/mathuo/dockview * @license MIT */class c{constructor(e){this._host=e}attachToGroup(e){return new t(e.model.onDidCreateTabGroup(e=>{this._host.fireDidCreateTabGroup(e)}),e.model.onDidDestroyTabGroup(e=>{this._host.fireDidDestroyTabGroup(e)}),e.model.onDidAddPanelToTabGroup(e=>{this._host.fireDidAddPanelToTabGroup(e)}),e.model.onDidRemovePanelFromTabGroup(e=>{this._host.fireDidRemovePanelFromTabGroup(e)}),e.model.onDidTabGroupChange(e=>{this._host.fireDidTabGroupChange(e)}),e.model.onDidTabGroupCollapsedChange(e=>{this._host.fireDidTabGroupCollapsedChange(e)}))}dispose(){}}const l=e({name:"TabGroupChips",serviceKey:"tabGroupChipsService",create:e=>new c(e),init:(e,o)=>{const s=new Map;return new t(e.onDidAddGroup(e=>{s.set(e,o.attachToGroup(e))}),e.onDidRemoveGroup(e=>{var t;null===(t=s.get(e))||void 0===t||t.dispose(),s.delete(e)}),{dispose:()=>{for(const e of s.values())e.dispose();s.clear()}})}});function u(e){if(!(e instanceof HTMLElement))return;const t=s(e);return(null==t?void 0:t.style.zIndex)?`calc(${t.style.zIndex} * 2)`:void 0}let d=0;const h=()=>"dv-ctx-menu-item-"+d++;function p(e){return"object"==typeof e}function v(e,t,o,s){const n=document.createElement("div");return n.className="dv-context-menu-item",n.setAttribute("role","menuitem"),s&&(n.classList.add("dv-context-menu-item--disabled"),n.setAttribute("aria-disabled","true")),n.textContent=e,s||n.addEventListener("click",()=>{o(),t()}),n}function m(){const e=document.createElement("div");return e.className="dv-context-menu-separator",e.setAttribute("role","separator"),e}function f(e){const t=document.createElement("div");t.className="dv-context-menu-rename";const o=document.createElement("input");return o.className="dv-context-menu-rename-input",o.type="text",o.placeholder="Name This Group",o.value=e.label,o.addEventListener("input",()=>{e.setLabel(o.value)}),o.addEventListener("keydown",e=>{"Escape"!==e.key&&"Enter"!==e.key&&e.stopPropagation()}),o.addEventListener("click",e=>{e.stopPropagation()}),t.appendChild(o),function(){if("undefined"==typeof window||!window.matchMedia)return!1;const e=window.matchMedia("(pointer: coarse)").matches,t=window.matchMedia("(pointer: fine)").matches;return e&&!t}()||requestAnimationFrame(()=>{o.focus(),o.select()}),t}function _(e,t){const o=document.createElement("div");if(o.className="dv-context-menu-color-picker",!t.enabled)return o;for(const s of t.entries()){const t=document.createElement("div");t.className="dv-context-menu-color-swatch",t.style.setProperty("--dv-tab-group-color",s.value),s.label&&(t.title=s.label),e.color===s.id&&t.classList.add("dv-context-menu-color-swatch--selected"),t.addEventListener("click",()=>{e.setColor(s.id)}),o.appendChild(t)}return o}class g{constructor(e){this.accessor=e}show(e,t,o){var s,n;if(!this.accessor.options.getTabContextMenuItems)return;const i=this.accessor.options.getTabContextMenuItems({panel:e,group:t,api:this.accessor.api,event:o});if(0===i.length)return;o.preventDefault();const r=this.accessor.getPopupServiceForGroup(t),a=()=>r.close(),c=document.createElement("div");c.className="dv-context-menu",c.setAttribute("role","menu");for(const o of i)if("separator"===o)c.appendChild(m());else if("close"===o)c.appendChild(v("Close",a,()=>e.api.close()));else if("closeOthers"===o)c.appendChild(v("Close Others",a,()=>{t.panels.filter(t=>t!==e).forEach(e=>e.api.close())}));else if("closeAll"===o)c.appendChild(v("Close All",a,()=>{[...t.panels].forEach(e=>e.api.close())}));else if(p(o)&&o.element)c.appendChild(o.element);else if(p(o)&&o.component){const i=null===(n=(s=this.accessor.options).createContextMenuItemComponent)||void 0===n?void 0:n.call(s,{id:h(),component:o.component});i&&(i.init({panel:e,group:t,api:this.accessor.api,close:a,componentProps:o.componentProps}),c.appendChild(i.element))}else p(o)&&o.label&&c.appendChild(v(o.label,a,()=>{var e;return null===(e=o.action)||void 0===e?void 0:e.call(o)},o.disabled));r.openPopover(c,{x:o.clientX,y:o.clientY,zIndex:u(o.target)})}showForChip(e,t,o){if(!this.accessor.options.getTabGroupChipContextMenuItems)return;const s=this.accessor.options.getTabGroupChipContextMenuItems({tabGroup:e,group:t,api:this.accessor.api,event:o});if(0===s.length)return;o.preventDefault();const n=this.accessor.getPopupServiceForGroup(t),i=()=>n.close(),r=document.createElement("div");r.className="dv-context-menu",r.setAttribute("role","menu");for(const t of s)"separator"===t?r.appendChild(m()):"rename"===t?r.appendChild(f(e)):"colorPicker"===t?r.appendChild(_(e,this.accessor.tabGroupColorPalette)):p(t)&&t.element?r.appendChild(t.element):p(t)&&t.label&&r.appendChild(v(t.label,i,()=>{var e;return null===(e=t.action)||void 0===e?void 0:e.call(t)},t.disabled));n.openPopover(r,{x:o.clientX,y:o.clientY,zIndex:u(o.target)})}}const b=e({name:"ContextMenu",serviceKey:"contextMenuService",create:e=>new g(e)});class y{constructor(e){this.host=e}dispatchWillDragPanel(e){this.host.fireWillDragPanel(e)}dispatchWillDragGroup(e){this.host.fireWillDragGroup(e)}dispatchWillDrop(e){this.host.fireWillDrop(e)}dispatchWillShowOverlay(e){this.host.fireWillShowOverlay(e)}buildGroupDragGhost(e){const t=this.host.options.createGroupDragGhostComponent;if(!t)return;const o=t(e);return o.init({group:e,api:this.host.api}),{element:o.element,offsetX:30,offsetY:-10,dispose:o.dispose?()=>{var e;return null===(e=o.dispose)||void 0===e?void 0:e.call(o)}:void 0}}resolveOverlayModel(e,t){var o,s;return null===(s=(o=this.host.options).dropOverlayModel)||void 0===s?void 0:s.call(o,{location:e,group:t})}showPreviewOverlay(e,t){const s=e.model.contentDropTarget;return s.showOverlay(t),o.from(()=>s.clearOverlay())}dispose(){}}const w=e({name:"AdvancedDnD",serviceKey:"advancedDnDService",create:e=>new y(e)}),G="data-dv-kbd-moving";function D(e,t){const o=t.toLowerCase().split("+"),s=o[o.length-1],n=o.slice(0,-1);return e.ctrlKey===n.includes("ctrl")&&e.shiftKey===n.includes("shift")&&e.altKey===n.includes("alt")&&e.metaKey===(n.includes("meta")||n.includes("cmd"))&&e.key.toLowerCase()===s}function C(e){const t=e.keyboardNavigation;if(t)return!0===t?{}:t}const x={nextTab:"ctrl+]",prevTab:"ctrl+[",focusNextGroup:"f6",focusPrevGroup:"shift+f6",focusTabs:"ctrl+shift+\\"};class E extends t{constructor(e){super(),this.host=e,this._focusWasInside=!1;const t=e.rootElement.ownerDocument,o=e=>this._onKeyDown(e);t.addEventListener("keydown",o,!0);const s=e=>{const t=e.target;t instanceof HTMLElement&&this.host.rootElement.contains(t)&&!t.closest('[role="dialog"]')&&(this._lastNonFloatFocus=t)};t.addEventListener("focusin",s,!0);const n=e=>this._onFloatingEscape(e);t.addEventListener("keydown",n,!1),this.addDisposables({dispose:()=>t.removeEventListener("keydown",o,!0)},{dispose:()=>t.removeEventListener("focusin",s,!0)},{dispose:()=>t.removeEventListener("keydown",n,!1)},e.onWillMutateLayout(e=>{"remove"===e.kind&&this._nav&&(this._focusWasInside=this._isFocusInside())}),e.onDidMutateLayout(e=>{"remove"===e.kind&&this._nav&&this._focusWasInside&&!this._isFocusInside()&&this._restoreFocus()}))}get _moveActive(){return this.host.rootElement.hasAttribute(G)}_isFocusInside(){const e=this.host.rootElement.ownerDocument.activeElement;return e instanceof Node&&this.host.rootElement.contains(e)}_onFloatingEscape(e){if(!this._nav||this._moveActive||e.defaultPrevented||"Escape"!==e.key)return;const t=e.target;if(!(t instanceof Element))return;const o=t.closest('[role="dialog"]');o&&this.host.rootElement.contains(o)&&(e.preventDefault(),e.stopPropagation(),this._returnFocusFromFloat())}_trapFloatTab(e){const t=e.target;if(!(t instanceof Element))return!1;const o=t.closest('[role="dialog"]');if(!o||!this.host.rootElement.contains(o))return!1;e.preventDefault();const s=this._tabbables(o);if(0===s.length)return!0;const n=o.ownerDocument.activeElement,i=n instanceof HTMLElement?s.indexOf(n):-1,r=s.length;return s[-1===i?e.shiftKey?r-1:0:(i+(e.shiftKey?-1:1)+r)%r].focus(),!0}_tabbables(e){const t=e.querySelectorAll("a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]");return Array.from(t).filter(e=>e.tabIndex>=0)}_returnFocusFromFloat(){var e;const t=this._lastNonFloatFocus;t&&t.isConnected&&this.host.rootElement.contains(t)&&!t.closest('[role="dialog"]')?t.focus():null===(e=this.host.groups.find(e=>"grid"===e.api.location.type))||void 0===e||e.model.focusContent()}get _nav(){return C(this.host.options)}get _keymap(){var e;return Object.assign(Object.assign({},x),null===(e=this._nav)||void 0===e?void 0:e.keymap)}_onKeyDown(e){if(!this._nav)return;if(this._moveActive)return;if(!(e.target instanceof Node&&this.host.rootElement.contains(e.target)))return;if("Tab"===e.key&&this._trapFloatTab(e))return;const t=this._keymap;D(e,t.nextTab)?(this._consume(e),this._switchTab(!1)):D(e,t.prevTab)?(this._consume(e),this._switchTab(!0)):D(e,t.focusNextGroup)?(this._consume(e),this._cycleGroup(!1)):D(e,t.focusPrevGroup)?(this._consume(e),this._cycleGroup(!0)):D(e,t.focusTabs)&&(this._consume(e),this._focusTabs())}_focusTabs(){var e;null===(e=this.host.activeGroup)||void 0===e||e.model.focusActiveTab()}_switchTab(e){const t=this.host.activeGroup;t&&(e?t.model.moveToPrevious():t.model.moveToNext(),t.model.focusContent())}_cycleGroup(e){const t=this.host.activeGroup,o=t?this.host.adjacentGroup(t,e):this.host.groups[0];this._focusGroup(o)}_focusGroup(e){e&&(e.api.setActive(),e.model.focusContent())}_restoreFocus(){var e;null===(e=this.host.activeGroup)||void 0===e||e.model.focusContent()}_consume(e){e.preventDefault(),e.stopPropagation()}}const k=e({name:"Accessibility",serviceKey:"accessibilityService",create:e=>new E(e)}),T={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"top",ArrowDown:"bottom"},P="ctrl+shift+arrowleft",A="ctrl+shift+arrowright",I="ctrl+shift+arrowup",F="ctrl+shift+arrowdown",L="ctrl+m";class M extends t{constructor(e){super(),this.host=e,this._move=null;const t=e.rootElement.ownerDocument,o=e=>this._onKeyDown(e);t.addEventListener("keydown",o,!0),this.addDisposables({dispose:()=>this._exit()},{dispose:()=>t.removeEventListener("keydown",o,!0)})}get _enabled(){return!!C(this.host.options)}get _keymap(){var e,t,o,s,n,i,r;const a=null!==(t=null===(e=C(this.host.options))||void 0===e?void 0:e.keymap)&&void 0!==t?t:{};return{focusGroupLeft:null!==(o=a.focusGroupLeft)&&void 0!==o?o:P,focusGroupRight:null!==(s=a.focusGroupRight)&&void 0!==s?s:A,focusGroupUp:null!==(n=a.focusGroupUp)&&void 0!==n?n:I,focusGroupDown:null!==(i=a.focusGroupDown)&&void 0!==i?i:F,dock:null!==(r=a.dock)&&void 0!==r?r:L}}get _messages(){return i(this.host.options.messages)}_onKeyDown(e){if(!this._enabled)return;if(this._move)return void this._onMoveKey(e);if(!(e.target instanceof Node&&this.host.rootElement.contains(e.target)))return;const t=this._keymap;D(e,t.dock)?this._enterMoveMode(e):D(e,t.focusGroupLeft)?(this._consume(e),this._focusGroupInDirection("left")):D(e,t.focusGroupRight)?(this._consume(e),this._focusGroupInDirection("right")):D(e,t.focusGroupUp)?(this._consume(e),this._focusGroupInDirection("up")):D(e,t.focusGroupDown)&&(this._consume(e),this._focusGroupInDirection("down"))}_focusGroupInDirection(e){const t=this.host.activeGroup;t&&this._focusGroup(this.host.adjacentGroupInDirection(t,e))}_focusGroup(e){e&&(e.api.setActive(),e.model.focusContent())}_restoreFocus(){var e;null===(e=this.host.activeGroup)||void 0===e||e.model.focusContent()}_enterMoveMode(e){const t=this.host.activePanel,o=this.host.groups;if(!t||0===o.length)return;e.preventDefault(),e.stopPropagation();const s=Math.max(0,o.indexOf(t.group));this._move={source:t,groups:o,groupIndex:s,phase:"target",position:"center"},this.host.rootElement.setAttribute(G,""),this._render()}_onMoveKey(e){const t=this._move;if("Escape"===e.key)return this._consume(e),void("edge"===t.phase?(t.phase="target",t.position="center",this._render()):(this._exit(),this.host.announce(this._messages.moveCancelled()),this._restoreFocus()));if("Enter"===e.key)return this._consume(e),void("target"===t.phase?(t.phase="edge",t.position="center",this._render()):this._commit());if("target"===t.phase){const o=t.groups.length;return void("ArrowRight"===e.key||"ArrowDown"===e.key?(this._consume(e),t.groupIndex=(t.groupIndex+1)%o,this._render()):"ArrowLeft"!==e.key&&"ArrowUp"!==e.key||(this._consume(e),t.groupIndex=(t.groupIndex-1+o)%o,this._render()))}const o=T[e.key];o?(this._consume(e),t.position=o,this._render()):" "!==e.key&&"c"!==e.key&&"C"!==e.key||(this._consume(e),t.position="center",this._render())}_render(){var e,t;const o=this._move,s=o.groups[o.groupIndex];this._clearPreview(),this._preview=this.host.showDropPreview(s,o.position);const n=null!==(t=null===(e=s.activePanel)||void 0===e?void 0:e.title)&&void 0!==t?t:s.id,i=this._messages;"target"===o.phase?this.host.announce(i.movePickTarget(this._label(o.source),n,o.groupIndex+1,o.groups.length)):this.host.announce(i.movePickEdge(o.position,n))}_commit(){var e,t;const o=this._move,s=o.groups[o.groupIndex],n=o.position,i=o.source,r=null!==(t=null===(e=s.activePanel)||void 0===e?void 0:e.title)&&void 0!==t?t:s.id,a=this._messages;this._exit();try{this.host.dockPanel(i,s,n),this.host.announce(a.moveCommitted(this._label(i),r,n))}catch(e){this.host.announce(a.moveNotAllowed())}this._restoreFocus()}_exit(){this._clearPreview(),this._move=null,this.host.rootElement.removeAttribute(G)}_clearPreview(){var e;null===(e=this._preview)||void 0===e||e.dispose(),this._preview=void 0}_consume(e){e.preventDefault(),e.stopPropagation()}_label(e){var t;return null!==(t=e.title)&&void 0!==t?t:e.id}}e({name:"KeyboardDocking",serviceKey:"keyboardDockingService",create:e=>new M(e),dependsOn:[w,n]});r([l,b,w,k]),a();