dockview-core 2.1.3 → 3.0.0

package/dist/dockview-core.amd.js

@@ -1,6 +1,6 @@
 /**
  * dockview-core
- * @version 2.1.3
+ * @version 3.0.0
  * @link https://github.com/mathuo/dockview
  * @license MIT
  */
@@ -129,6 +129,17 @@ define(['exports'], (function (exports) { 'use strict';
           this._defaultPrevented = true;
       }
   }
+  class AcceptableEvent {
+      constructor() {
+          this._isAccepted = false;
+      }
+      get isAccepted() {
+          return this._isAccepted;
+      }
+      accept() {
+          this._isAccepted = true;
+      }
+  }
   class LeakageMonitor {
       constructor() {
           this.events = new Map();
@@ -1520,6 +1531,23 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
+  const PROPERTY_KEYS_SPLITVIEW = (() => {
+      /**
+       * by readong the keys from an empty value object TypeScript will error
+       * when we add or remove new properties to `DockviewOptions`
+       */
+      const properties = {
+          orientation: undefined,
+          descriptor: undefined,
+          proportionalLayout: undefined,
+          styles: undefined,
+          margin: undefined,
+          disableAutoResizing: undefined,
+          className: undefined,
+      };
+      return Object.keys(properties);
+  })();
+
   class Paneview extends CompositeDisposable {
       get onDidAddView() {
           return this.splitview.onDidAddView;
@@ -2649,6 +2677,21 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
+  const PROPERTY_KEYS_GRIDVIEW = (() => {
+      /**
+       * by readong the keys from an empty value object TypeScript will error
+       * when we add or remove new properties to `DockviewOptions`
+       */
+      const properties = {
+          disableAutoResizing: undefined,
+          proportionalLayout: undefined,
+          orientation: undefined,
+          hideBorders: undefined,
+          className: undefined,
+      };
+      return Object.keys(properties);
+  })();
+
   class Resizable extends CompositeDisposable {
       get element() {
           return this._element;
@@ -3126,15 +3169,10 @@ define(['exports'], (function (exports) { 'use strict';
        * Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
        */
       get onDidDrop() {
-          const emitter = new Emitter();
-          const disposable = this.component.onDidDrop((e) => {
-              emitter.fire(Object.assign(Object.assign({}, e), { api: this }));
-          });
-          emitter.dispose = () => {
-              disposable.dispose();
-              emitter.dispose();
-          };
-          return emitter.event;
+          return this.component.onDidDrop;
+      }
+      get onUnhandledDragOverEvent() {
+          return this.component.onUnhandledDragOverEvent;
       }
       constructor(component) {
           this.component = component;
@@ -4061,6 +4099,28 @@ define(['exports'], (function (exports) { 'use strict';
       return 'center';
   }
 
+  const PROPERTY_KEYS_PANEVIEW = (() => {
+      /**
+       * by readong the keys from an empty value object TypeScript will error
+       * when we add or remove new properties to `DockviewOptions`
+       */
+      const properties = {
+          disableAutoResizing: undefined,
+          disableDnd: undefined,
+          className: undefined,
+      };
+      return Object.keys(properties);
+  })();
+  class PaneviewUnhandledDragOverEvent extends AcceptableEvent {
+      constructor(nativeEvent, position, getData, panel) {
+          super();
+          this.nativeEvent = nativeEvent;
+          this.position = position;
+          this.getData = getData;
+          this.panel = panel;
+      }
+  }
+
   class WillFocusEvent extends DockviewEvent {
       constructor() {
           super();
@@ -4484,6 +4544,9 @@ define(['exports'], (function (exports) { 'use strict';
           this.accessor = accessor;
           this._onDidDrop = new Emitter();
           this.onDidDrop = this._onDidDrop.event;
+          this._onUnhandledDragOverEvent = new Emitter();
+          this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+          this.addDisposables(this._onDidDrop, this._onUnhandledDragOverEvent);
           if (!disableDnd) {
               this.initDragFeatures();
           }
@@ -4510,7 +4573,7 @@ define(['exports'], (function (exports) { 'use strict';
               overlayModel: {
                   activationSize: { type: 'percentage', value: 50 },
               },
-              canDisplayOverlay: (event) => {
+              canDisplayOverlay: (event, position) => {
                   const data = getPaneData();
                   if (data) {
                       if (data.paneId !== this.id &&
@@ -4518,14 +4581,9 @@ define(['exports'], (function (exports) { 'use strict';
                           return true;
                       }
                   }
-                  if (this.accessor.options.showDndOverlay) {
-                      return this.accessor.options.showDndOverlay({
-                          nativeEvent: event,
-                          getData: getPaneData,
-                          panel: this,
-                      });
-                  }
-                  return false;
+                  const firedEvent = new PaneviewUnhandledDragOverEvent(event, position, getPaneData, this);
+                  this._onUnhandledDragOverEvent.fire(firedEvent);
+                  return firedEvent.isAccepted;
               },
           });
           this.addDisposables(this._onDidDrop, this.handler, this.target, this.target.onDrop((event) => {
@@ -4980,15 +5038,7 @@ define(['exports'], (function (exports) { 'use strict';
           this._element.appendChild(this.leftActionsContainer);
           this._element.appendChild(this.voidContainer.element);
           this._element.appendChild(this.rightActionsContainer);
-          this.addDisposables(this.accessor.onDidAddPanel((e) => {
-              if (e.api.group === this.group) {
-                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
-              }
-          }), this.accessor.onDidRemovePanel((e) => {
-              if (e.api.group === this.group) {
-                  toggleClass(this._element, 'dv-single-tab', this.size === 1);
-              }
-          }), this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
+          this.addDisposables(this._onWillShowOverlay, this._onDrop, this._onTabDragStart, this._onGroupDragStart, this.voidContainer, this.voidContainer.onDragStart((event) => {
               this._onGroupDragStart.fire({
                   nativeEvent: event,
                   group: this.group,
@@ -5033,20 +5083,6 @@ define(['exports'], (function (exports) { 'use strict';
       setActive(_isGroupActive) {
           // noop
       }
-      addTab(tab, index = this.tabs.length) {
-          if (index < 0 || index > this.tabs.length) {
-              throw new Error('invalid location');
-          }
-          this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
-          this.tabs = [
-              ...this.tabs.slice(0, index),
-              tab,
-              ...this.tabs.slice(index),
-          ];
-          if (this.selectedIndex < 0) {
-              this.selectedIndex = index;
-          }
-      }
       delete(id) {
           const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
           const tabToRemove = this.tabs.splice(index, 1)[0];
@@ -5054,6 +5090,7 @@ define(['exports'], (function (exports) { 'use strict';
           disposable.dispose();
           value.dispose();
           value.element.remove();
+          this.updateClassnames();
       }
       setActivePanel(panel) {
           this.tabs.forEach((tab) => {
@@ -5122,25 +5159,37 @@ define(['exports'], (function (exports) { 'use strict';
           }
           this.tabs = [];
       }
+      addTab(tab, index = this.tabs.length) {
+          if (index < 0 || index > this.tabs.length) {
+              throw new Error('invalid location');
+          }
+          this.tabContainer.insertBefore(tab.value.element, this.tabContainer.children[index]);
+          this.tabs = [
+              ...this.tabs.slice(0, index),
+              tab,
+              ...this.tabs.slice(index),
+          ];
+          if (this.selectedIndex < 0) {
+              this.selectedIndex = index;
+          }
+          this.updateClassnames();
+      }
+      updateClassnames() {
+          toggleClass(this._element, 'dv-single-tab', this.size === 1);
+      }
   }
 
-  class DockviewUnhandledDragOverEvent {
-      get isAccepted() {
-          return this._isAccepted;
-      }
+  class DockviewUnhandledDragOverEvent extends AcceptableEvent {
       constructor(nativeEvent, target, position, getData, group) {
+          super();
           this.nativeEvent = nativeEvent;
           this.target = target;
           this.position = position;
           this.getData = getData;
           this.group = group;
-          this._isAccepted = false;
-      }
-      accept() {
-          this._isAccepted = true;
       }
   }
-  const PROPERTY_KEYS = (() => {
+  const PROPERTY_KEYS_DOCKVIEW = (() => {
       /**
        * by readong the keys from an empty value object TypeScript will error
        * when we add or remove new properties to `DockviewOptions`
@@ -7663,10 +7712,6 @@ define(['exports'], (function (exports) { 'use strict';
           this._api = new DockviewApi(this);
           this.updateWatermark();
       }
-      dispose() {
-          this.clear(); // explicitly clear the layout before cleaning up
-          super.dispose();
-      }
       setVisible(panel, visible) {
           switch (panel.api.location.type) {
               case 'grid':
@@ -7850,30 +7895,29 @@ define(['exports'], (function (exports) { 'use strict';
                       }
                   }
                   else if (this.getPanel(group.id)) {
-                      const removedGroup = group;
+                      group.model.renderContainer =
+                          this.overlayRenderContainer;
+                      returnedGroup = group;
                       if (floatingBox) {
-                          this.addFloatingGroup(removedGroup, {
+                          this.addFloatingGroup(group, {
                               height: floatingBox.height,
                               width: floatingBox.width,
                               position: floatingBox,
                           });
                       }
                       else {
-                          this.doRemoveGroup(removedGroup, {
+                          this.doRemoveGroup(group, {
                               skipDispose: true,
                               skipActive: true,
                               skipPopoutReturn: true,
                           });
-                          removedGroup.model.renderContainer =
-                              this.overlayRenderContainer;
-                          removedGroup.model.location = { type: 'grid' };
-                          returnedGroup = removedGroup;
+                          group.model.location = { type: 'grid' };
                           this.movingLock(() => {
                               // suppress group add events since the group already exists
-                              this.doAddGroup(removedGroup, [0]);
+                              this.doAddGroup(group, [0]);
                           });
                       }
-                      this.doSetGroupAndPanelActive(removedGroup);
+                      this.doSetGroupAndPanelActive(group);
                   }
               }));
               this._popoutGroups.push(value);
@@ -9014,31 +9058,6 @@ define(['exports'], (function (exports) { 'use strict';
       }
   }
 
-  function createComponent(id, componentName, components = {}, frameworkComponents = {}, createFrameworkComponent, fallback) {
-      const Component = typeof componentName === 'string'
-          ? components[componentName]
-          : undefined;
-      const FrameworkComponent = typeof componentName === 'string'
-          ? frameworkComponents[componentName]
-          : undefined;
-      if (Component && FrameworkComponent) {
-          throw new Error(`Cannot create '${id}'. component '${componentName}' registered as both a component and frameworkComponent`);
-      }
-      if (FrameworkComponent) {
-          if (!createFrameworkComponent) {
-              throw new Error(`Cannot create '${id}' for framework component '${componentName}'. you must register a frameworkPanelWrapper to use framework components`);
-          }
-          return createFrameworkComponent.createComponent(id, componentName, FrameworkComponent);
-      }
-      if (!Component) {
-          if (fallback) {
-              return fallback();
-          }
-          throw new Error(`Cannot create '${id}', no component '${componentName}' provided`);
-      }
-      return new Component(id, componentName);
-  }
-
   class GridviewComponent extends BaseGrid {
       get orientation() {
           return this.gridview.orientation;
@@ -9056,10 +9075,13 @@ define(['exports'], (function (exports) { 'use strict';
           this._deserializer = value;
       }
       constructor(parentElement, options) {
+          var _a;
           super(parentElement, {
-              proportionalLayout: options.proportionalLayout,
+              proportionalLayout: (_a = options.proportionalLayout) !== null && _a !== void 0 ? _a : true,
               orientation: options.orientation,
-              styles: options.styles,
+              styles: options.hideBorders
+                  ? { separatorBorder: 'transparent' }
+                  : undefined,
               disableAutoResizing: options.disableAutoResizing,
               className: options.className,
           });
@@ -9079,12 +9101,6 @@ define(['exports'], (function (exports) { 'use strict';
           }), this.onDidActiveChange((event) => {
               this._onDidActiveGroupChange.fire(event);
           }));
-          if (!this.options.components) {
-              this.options.components = {};
-          }
-          if (!this.options.frameworkComponents) {
-              this.options.frameworkComponents = {};
-          }
       }
       updateOptions(options) {
           super.updateOptions(options);
@@ -9134,14 +9150,11 @@ define(['exports'], (function (exports) { 'use strict';
               const height = this.height;
               this.gridview.deserialize(grid, {
                   fromJSON: (node) => {
-                      var _a, _b;
                       const { data } = node;
-                      const view = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkComponentFactory
-                          ? {
-                              createComponent: this.options.frameworkComponentFactory
-                                  .createComponent,
-                          }
-                          : undefined);
+                      const view = this.options.createComponent({
+                          id: data.id,
+                          name: data.component,
+                      });
                       queue.push(() => view.init({
                           params: data.params,
                           minimumWidth: data.minimumWidth,
@@ -9219,7 +9232,7 @@ define(['exports'], (function (exports) { 'use strict';
           this.doAddGroup(removedPanel, relativeLocation, options.size);
       }
       addPanel(options) {
-          var _a, _b, _c, _d, _e, _f;
+          var _a, _b, _c, _d;
           let relativeLocation = (_a = options.location) !== null && _a !== void 0 ? _a : [0];
           if ((_b = options.position) === null || _b === void 0 ? void 0 : _b.referencePanel) {
               const referenceGroup = (_c = this._groups.get(options.position.referencePanel)) === null || _c === void 0 ? void 0 : _c.value;
@@ -9235,14 +9248,12 @@ define(['exports'], (function (exports) { 'use strict';
                   relativeLocation = getRelativeLocation(this.gridview.orientation, location, target);
               }
           }
-          const view = createComponent(options.id, options.component, (_d = this.options.components) !== null && _d !== void 0 ? _d : {}, (_e = this.options.frameworkComponents) !== null && _e !== void 0 ? _e : {}, this.options.frameworkComponentFactory
-              ? {
-                  createComponent: this.options.frameworkComponentFactory
-                      .createComponent,
-              }
-              : undefined);
+          const view = this.options.createComponent({
+              id: options.id,
+              name: options.component,
+          });
           view.init({
-              params: (_f = options.params) !== null && _f !== void 0 ? _f : {},
+              params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
               minimumWidth: options.minimumWidth,
               maximumWidth: options.maximumWidth,
               minimumHeight: options.minimumHeight,
@@ -9370,12 +9381,6 @@ define(['exports'], (function (exports) { 'use strict';
           this._classNames = new Classnames(this.element);
           this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
           this._options = options;
-          if (!options.components) {
-              options.components = {};
-          }
-          if (!options.frameworkComponents) {
-              options.frameworkComponents = {};
-          }
           this.splitview = new Splitview(this.element, options);
           this.addDisposables(this._onDidAddView, this._onDidLayoutfromJSON, this._onDidRemoveView, this._onDidLayoutChange);
       }
@@ -9438,18 +9443,17 @@ define(['exports'], (function (exports) { 'use strict';
           return this.panels.find((view) => view.id === id);
       }
       addPanel(options) {
-          var _a, _b, _c;
+          var _a;
           if (this._panels.has(options.id)) {
               throw new Error(`panel ${options.id} already exists`);
           }
-          const view = createComponent(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-              ? {
-                  createComponent: this.options.frameworkWrapper.createComponent,
-              }
-              : undefined);
+          const view = this.options.createComponent({
+              id: options.id,
+              name: options.component,
+          });
           view.orientation = this.splitview.orientation;
           view.init({
-              params: (_c = options.params) !== null && _c !== void 0 ? _c : {},
+              params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
               minimumSize: options.minimumSize,
               maximumSize: options.maximumSize,
               snap: options.snap,
@@ -9511,17 +9515,14 @@ define(['exports'], (function (exports) { 'use strict';
               descriptor: {
                   size,
                   views: views.map((view) => {
-                      var _a, _b;
                       const data = view.data;
                       if (this._panels.has(data.id)) {
                           throw new Error(`panel ${data.id} already exists`);
                       }
-                      const panel = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-                          ? {
-                              createComponent: this.options.frameworkWrapper
-                                  .createComponent,
-                          }
-                          : undefined);
+                      const panel = this.options.createComponent({
+                          id: data.id,
+                          name: data.component,
+                      });
                       queue.push(() => {
                           var _a;
                           panel.init({
@@ -9704,16 +9705,12 @@ define(['exports'], (function (exports) { 'use strict';
           this.onDidAddView = this._onDidAddView.event;
           this._onDidRemoveView = new Emitter();
           this.onDidRemoveView = this._onDidRemoveView.event;
-          this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView);
+          this._onUnhandledDragOverEvent = new Emitter();
+          this.onUnhandledDragOverEvent = this._onUnhandledDragOverEvent.event;
+          this.addDisposables(this._onDidLayoutChange, this._onDidLayoutfromJSON, this._onDidDrop, this._onDidAddView, this._onDidRemoveView, this._onUnhandledDragOverEvent);
           this._classNames = new Classnames(this.element);
           this._classNames.setClassNames((_a = options.className) !== null && _a !== void 0 ? _a : '');
           this._options = options;
-          if (!options.components) {
-              options.components = {};
-          }
-          if (!options.frameworkComponents) {
-              options.frameworkComponents = {};
-          }
           this.paneview = new Paneview(this.element, {
               // only allow paneview in the vertical orientation for now
               orientation: exports.Orientation.VERTICAL,
@@ -9738,22 +9735,19 @@ define(['exports'], (function (exports) { 'use strict';
           this._options = Object.assign(Object.assign({}, this.options), options);
       }
       addPanel(options) {
-          var _a, _b, _c, _d;
-          const body = createComponent(options.id, options.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-              ? {
-                  createComponent: this.options.frameworkWrapper.body.createComponent,
-              }
-              : undefined);
+          var _a;
+          const body = this.options.createComponent({
+              id: options.id,
+              name: options.component,
+          });
           let header;
-          if (options.headerComponent) {
-              header = createComponent(options.id, options.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, this.options.headerframeworkComponents, this.options.frameworkWrapper
-                  ? {
-                      createComponent: this.options.frameworkWrapper.header
-                          .createComponent,
-                  }
-                  : undefined);
+          if (options.headerComponent && this.options.createHeaderComponent) {
+              header = this.options.createHeaderComponent({
+                  id: options.id,
+                  name: options.headerComponent,
+              });
           }
-          else {
+          if (!header) {
               header = new DefaultHeader();
           }
           const view = new PaneFramework({
@@ -9771,7 +9765,7 @@ define(['exports'], (function (exports) { 'use strict';
           const size = typeof options.size === 'number' ? options.size : exports.Sizing.Distribute;
           const index = typeof options.index === 'number' ? options.index : undefined;
           view.init({
-              params: (_d = options.params) !== null && _d !== void 0 ? _d : {},
+              params: (_a = options.params) !== null && _a !== void 0 ? _a : {},
               minimumBodySize: options.minimumBodySize,
               maximumBodySize: options.maximumBodySize,
               isExpanded: options.isExpanded,
@@ -9836,24 +9830,20 @@ define(['exports'], (function (exports) { 'use strict';
               descriptor: {
                   size,
                   views: views.map((view) => {
-                      var _a, _b, _c, _d;
                       const data = view.data;
-                      const body = createComponent(data.id, data.component, (_a = this.options.components) !== null && _a !== void 0 ? _a : {}, (_b = this.options.frameworkComponents) !== null && _b !== void 0 ? _b : {}, this.options.frameworkWrapper
-                          ? {
-                              createComponent: this.options.frameworkWrapper.body
-                                  .createComponent,
-                          }
-                          : undefined);
+                      const body = this.options.createComponent({
+                          id: data.id,
+                          name: data.component,
+                      });
                       let header;
-                      if (data.headerComponent) {
-                          header = createComponent(data.id, data.headerComponent, (_c = this.options.headerComponents) !== null && _c !== void 0 ? _c : {}, (_d = this.options.headerframeworkComponents) !== null && _d !== void 0 ? _d : {}, this.options.frameworkWrapper
-                              ? {
-                                  createComponent: this.options.frameworkWrapper.header
-                                      .createComponent,
-                              }
-                              : undefined);
+                      if (data.headerComponent &&
+                          this.options.createHeaderComponent) {
+                          header = this.options.createHeaderComponent({
+                              id: data.id,
+                              name: data.headerComponent,
+                          });
                       }
-                      else {
+                      if (!header) {
                           header = new DefaultHeader();
                       }
                       const panel = new PaneFramework({
@@ -9901,9 +9891,11 @@ define(['exports'], (function (exports) { 'use strict';
           this.paneview.dispose();
       }
       doAddPanel(panel) {
-          const disposable = panel.onDidDrop((event) => {
+          const disposable = new CompositeDisposable(panel.onDidDrop((event) => {
               this._onDidDrop.fire(event);
-          });
+          }), panel.onUnhandledDragOverEvent((event) => {
+              this._onUnhandledDragOverEvent.fire(event);
+          }));
           this._viewDisposables.set(panel.id, disposable);
       }
       doRemovePanel(panel) {
@@ -10065,7 +10057,10 @@ define(['exports'], (function (exports) { 'use strict';
   exports.GridviewApi = GridviewApi;
   exports.GridviewComponent = GridviewComponent;
   exports.GridviewPanel = GridviewPanel;
-  exports.PROPERTY_KEYS = PROPERTY_KEYS;
+  exports.PROPERTY_KEYS_DOCKVIEW = PROPERTY_KEYS_DOCKVIEW;
+  exports.PROPERTY_KEYS_GRIDVIEW = PROPERTY_KEYS_GRIDVIEW;
+  exports.PROPERTY_KEYS_PANEVIEW = PROPERTY_KEYS_PANEVIEW;
+  exports.PROPERTY_KEYS_SPLITVIEW = PROPERTY_KEYS_SPLITVIEW;
   exports.PaneFramework = PaneFramework;
   exports.PaneTransfer = PaneTransfer;
   exports.PanelTransfer = PanelTransfer;
@@ -10073,6 +10068,7 @@ define(['exports'], (function (exports) { 'use strict';
   exports.PaneviewApi = PaneviewApi;
   exports.PaneviewComponent = PaneviewComponent;
   exports.PaneviewPanel = PaneviewPanel;
+  exports.PaneviewUnhandledDragOverEvent = PaneviewUnhandledDragOverEvent;
   exports.Splitview = Splitview;
   exports.SplitviewApi = SplitviewApi;
   exports.SplitviewComponent = SplitviewComponent;