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.4 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 */ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("dockview-core"); /** * dockview-modules * @version 7.0.2 * @link https://github.com/mathuo/dockview * @license MIT */class t{constructor(e){this._host=e}attachToGroup(t){return new e.DockviewCompositeDisposable(t.model.onDidCreateTabGroup(e=>{this._host.fireDidCreateTabGroup(e)}),t.model.onDidDestroyTabGroup(e=>{this._host.fireDidDestroyTabGroup(e)}),t.model.onDidAddPanelToTabGroup(e=>{this._host.fireDidAddPanelToTabGroup(e)}),t.model.onDidRemovePanelFromTabGroup(e=>{this._host.fireDidRemovePanelFromTabGroup(e)}),t.model.onDidTabGroupChange(e=>{this._host.fireDidTabGroupChange(e)}),t.model.onDidTabGroupCollapsedChange(e=>{this._host.fireDidTabGroupCollapsedChange(e)}))}dispose(){}}const o=e.defineModule({name:"TabGroupChips",serviceKey:"tabGroupChipsService",create:e=>new t(e),init:(t,o)=>{const s=new Map;return new e.DockviewCompositeDisposable(t.onDidAddGroup(e=>{s.set(e,o.attachToGroup(e))}),t.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 s(t){if(!(t instanceof HTMLElement))return;const o=e.findRelativeZIndexParent(t);return(null==o?void 0:o.style.zIndex)?`calc(${o.style.zIndex} * 2)`:void 0}let n=0;const i=()=>"dv-ctx-menu-item-"+n++;function r(e){return"object"==typeof e}function a(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 c(){const e=document.createElement("div");return e.className="dv-context-menu-separator",e.setAttribute("role","separator"),e}function l(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 u(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 d{constructor(e){this.accessor=e}show(e,t,o){var n,l;if(!this.accessor.options.getTabContextMenuItems)return;const u=this.accessor.options.getTabContextMenuItems({panel:e,group:t,api:this.accessor.api,event:o});if(0===u.length)return;o.preventDefault();const d=this.accessor.getPopupServiceForGroup(t),p=()=>d.close(),h=document.createElement("div");h.className="dv-context-menu",h.setAttribute("role","menu");for(const o of u)if("separator"===o)h.appendChild(c());else if("close"===o)h.appendChild(a("Close",p,()=>e.api.close()));else if("closeOthers"===o)h.appendChild(a("Close Others",p,()=>{t.panels.filter(t=>t!==e).forEach(e=>e.api.close())}));else if("closeAll"===o)h.appendChild(a("Close All",p,()=>{[...t.panels].forEach(e=>e.api.close())}));else if(r(o)&&o.element)h.appendChild(o.element);else if(r(o)&&o.component){const s=null===(l=(n=this.accessor.options).createContextMenuItemComponent)||void 0===l?void 0:l.call(n,{id:i(),component:o.component});s&&(s.init({panel:e,group:t,api:this.accessor.api,close:p,componentProps:o.componentProps}),h.appendChild(s.element))}else r(o)&&o.label&&h.appendChild(a(o.label,p,()=>{var e;return null===(e=o.action)||void 0===e?void 0:e.call(o)},o.disabled));d.openPopover(h,{x:o.clientX,y:o.clientY,zIndex:s(o.target)})}showForChip(e,t,o){if(!this.accessor.options.getTabGroupChipContextMenuItems)return;const n=this.accessor.options.getTabGroupChipContextMenuItems({tabGroup:e,group:t,api:this.accessor.api,event:o});if(0===n.length)return;o.preventDefault();const i=this.accessor.getPopupServiceForGroup(t),d=()=>i.close(),p=document.createElement("div");p.className="dv-context-menu",p.setAttribute("role","menu");for(const t of n)"separator"===t?p.appendChild(c()):"rename"===t?p.appendChild(l(e)):"colorPicker"===t?p.appendChild(u(e,this.accessor.tabGroupColorPalette)):r(t)&&t.element?p.appendChild(t.element):r(t)&&t.label&&p.appendChild(a(t.label,d,()=>{var e;return null===(e=t.action)||void 0===e?void 0:e.call(t)},t.disabled));i.openPopover(p,{x:o.clientX,y:o.clientY,zIndex:s(o.target)})}}const p=e.defineModule({name:"ContextMenu",serviceKey:"contextMenuService",create:e=>new d(e)});class h{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(t,o){const s=t.model.contentDropTarget;return s.showOverlay(o),e.DockviewDisposable.from(()=>s.clearOverlay())}dispose(){}}const v=e.defineModule({name:"AdvancedDnD",serviceKey:"advancedDnDService",create:e=>new h(e)}),m="data-dv-kbd-moving";function f(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 _(e){const t=e.keyboardNavigation;if(t)return!0===t?{}:t}const g={nextTab:"ctrl+]",prevTab:"ctrl+[",focusNextGroup:"f6",focusPrevGroup:"shift+f6",focusTabs:"ctrl+shift+\\"};class b extends e.DockviewCompositeDisposable{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(m)}_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 _(this.host.options)}get _keymap(){var e;return Object.assign(Object.assign({},g),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;f(e,t.nextTab)?(this._consume(e),this._switchTab(!1)):f(e,t.prevTab)?(this._consume(e),this._switchTab(!0)):f(e,t.focusNextGroup)?(this._consume(e),this._cycleGroup(!1)):f(e,t.focusPrevGroup)?(this._consume(e),this._cycleGroup(!0)):f(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 y=e.defineModule({name:"Accessibility",serviceKey:"accessibilityService",create:e=>new b(e)}),w={ArrowLeft:"left",ArrowRight:"right",ArrowUp:"top",ArrowDown:"bottom"},D="ctrl+shift+arrowleft",G="ctrl+shift+arrowright",C="ctrl+shift+arrowup",k="ctrl+shift+arrowdown",x="ctrl+m";class E extends e.DockviewCompositeDisposable{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!!_(this.host.options)}get _keymap(){var e,t,o,s,n,i,r;const a=null!==(t=null===(e=_(this.host.options))||void 0===e?void 0:e.keymap)&&void 0!==t?t:{};return{focusGroupLeft:null!==(o=a.focusGroupLeft)&&void 0!==o?o:D,focusGroupRight:null!==(s=a.focusGroupRight)&&void 0!==s?s:G,focusGroupUp:null!==(n=a.focusGroupUp)&&void 0!==n?n:C,focusGroupDown:null!==(i=a.focusGroupDown)&&void 0!==i?i:k,dock:null!==(r=a.dock)&&void 0!==r?r:x}}get _messages(){return e.resolveMessages(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;f(e,t.dock)?this._enterMoveMode(e):f(e,t.focusGroupLeft)?(this._consume(e),this._focusGroupInDirection("left")):f(e,t.focusGroupRight)?(this._consume(e),this._focusGroupInDirection("right")):f(e,t.focusGroupUp)?(this._consume(e),this._focusGroupInDirection("up")):f(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(m,""),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=w[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(m)}_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.defineModule({name:"KeyboardDocking",serviceKey:"keyboardDockingService",create:e=>new E(e),dependsOn:[v,e.LiveRegionModule]});const T=[o,p,v,y];e.registerModules(T),e.markDockviewPackageLoaded(),Object.keys(e).forEach(function(t){"default"===t||Object.prototype.hasOwnProperty.call(exports,t)||Object.defineProperty(exports,t,{enumerable:!0,get:function(){return e[t]}})});