@egjs/flicking 4.3.1 → 4.5.0

package/src/renderer/strategy/VirtualRenderingStrategy.ts

@@ -0,0 +1,110 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import Flicking from "../../Flicking";
+import { PanelOptions } from "../../core/panel/Panel";
+import VirtualPanel from "../../core/panel/VirtualPanel";
+import VirtualElementProvider from "../../core/panel/provider/VirtualElementProvider";
+import { parsePanelAlign, range, setSize } from "../../utils";
+
+import RenderingStrategy from "./RenderingStrategy";
+
+class VirtualRenderingStrategy implements RenderingStrategy {
+  public renderPanels(flicking: Flicking) {
+    const virtualManager = flicking.virtual;
+    const visiblePanels = flicking.visiblePanels as VirtualPanel[];
+    const invisibleIndexes = range(flicking.panelsPerView + 1);
+
+    visiblePanels.forEach(panel => {
+      const elementIndex = panel.elementIndex;
+
+      panel.render();
+
+      virtualManager.show(elementIndex);
+      invisibleIndexes[elementIndex] = -1;
+    });
+
+    invisibleIndexes
+      .filter(val => val >= 0)
+      .forEach(idx => {
+        virtualManager.hide(idx);
+      });
+  }
+
+  public getRenderingIndexesByOrder(flicking: Flicking) {
+    const virtualManager = flicking.virtual;
+    const visiblePanels = [...flicking.visiblePanels]
+      .filter(panel => panel.rendered)
+      .sort((panel1, panel2) => {
+        return (panel1.position + panel1.offset) - (panel2.position + panel2.offset);
+      }) as VirtualPanel[];
+
+    if (visiblePanels.length <= 0) return virtualManager.elements.map((_, idx) => idx);
+
+    const visibleIndexes = visiblePanels.map(panel => panel.elementIndex);
+    const invisibleIndexes = virtualManager.elements
+      .map((el, idx) => ({ ...el, idx }))
+      .filter(el => !el.visible)
+      .map(el => el.idx);
+
+    return [...visibleIndexes, ...invisibleIndexes];
+  }
+
+  public getRenderingElementsByOrder(flicking: Flicking) {
+    const virtualManager = flicking.virtual;
+    const elements = virtualManager.elements;
+
+    return this.getRenderingIndexesByOrder(flicking).map(index => elements[index].nativeElement);
+  }
+
+  public updateRenderingPanels(flicking: Flicking) {
+    const panels = flicking.renderer.panels;
+    const camera = flicking.camera;
+
+    const visibleIndexes = camera.visiblePanels.reduce((visibles, panel) => {
+      visibles[panel.index] = true;
+      return visibles;
+    }, {});
+
+    panels.forEach(panel => {
+      if (panel.index in visibleIndexes || panel.loading) {
+        panel.markForShow();
+      } else {
+        panel.markForHide();
+      }
+    });
+
+    camera.updateOffset();
+  }
+
+  public collectPanels(flicking: Flicking) {
+    const align = parsePanelAlign(flicking.renderer.align);
+
+    return range(flicking.virtual.initialPanelCount).map(index => new VirtualPanel({
+      index,
+      elementProvider: new VirtualElementProvider(flicking),
+      align,
+      flicking
+    }));
+  }
+
+  public createPanel(_el: any, options: PanelOptions) {
+    return new VirtualPanel({
+      ...options,
+      elementProvider: new VirtualElementProvider(options.flicking)
+    });
+  }
+
+  public updatePanelSizes(flicking: Flicking, size: Partial<{
+    width: number | string;
+    height: number | string;
+  }>) {
+    flicking.virtual.elements.forEach(el => {
+      setSize(el.nativeElement, size);
+    });
+    flicking.panels.forEach(panel => panel.setSize(size));
+  }
+}
+
+export default VirtualRenderingStrategy;

package/src/renderer/strategy/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2015 NAVER Corp.
+ * egjs projects are licensed under the MIT license
+ */
+import RenderingStrategy from "./RenderingStrategy";
+import NormalRenderingStrategy, { NormalRenderingStrategyOptions } from "./NormalRenderingStrategy";
+import VirtualRenderingStrategy from "./VirtualRenderingStrategy";
+
+export {
+  NormalRenderingStrategy,
+  VirtualRenderingStrategy
+};
+
+export type {
+  RenderingStrategy,
+  NormalRenderingStrategyOptions
+};

package/src/utils.ts

@@ -49,9 +49,9 @@ export const checkExistence = (value: any, nameOnErrMsg: string) => {
 
 export const clamp = (x: number, min: number, max: number) => Math.max(Math.min(x, max), min);
 
-export const getFlickingAttached = (val: Flicking | null, nameToThrowOnError: string): Flicking => {
+export const getFlickingAttached = (val: Flicking | null): Flicking => {
   if (!val) {
-    throw new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING(nameToThrowOnError), ERROR.CODE.NOT_ATTACHED_TO_FLICKING);
+    throw new FlickingError(ERROR.MESSAGE.NOT_ATTACHED_TO_FLICKING, ERROR.CODE.NOT_ATTACHED_TO_FLICKING);
   }
 
   return val;
@@ -163,6 +163,10 @@ export const parseArithmeticExpression = (cssValue: number | string): { percenta
 
 export const parseCSSSizeValue = (val: string | number): string => isString(val) ? val : `${val}px`;
 
+export const parsePanelAlign = (align: FlickingOptions["align"]) => typeof align === "object"
+  ? (align as { panel: string | number }).panel
+  : align;
+
 export const getDirection = (start: number, end: number): ValueOf<typeof DIRECTION> => {
   if (start === end) return DIRECTION.NONE;
   return start < end ? DIRECTION.NEXT : DIRECTION.PREV;
@@ -254,6 +258,26 @@ export const getProgress = (pos: number, prev: number, next: number) => (pos - p
 // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
 export const getStyle = (el: HTMLElement): CSSStyleDeclaration => window.getComputedStyle(el) || (el as any).currentStyle as CSSStyleDeclaration;
 
+export const setSize = (el: HTMLElement, { width, height }: Partial<{
+  width: number | string;
+  height: number | string;
+}>) => {
+  if (width != null) {
+    if (isString(width)) {
+      el.style.width = width;
+    } else {
+      el.style.width = `${width}px`;
+    }
+  }
+  if (height != null) {
+    if (isString(height)) {
+      el.style.height = height;
+    } else {
+      el.style.height = `${height}px`;
+    }
+  }
+};
+
 export const isBetween = (val: number, min: number, max: number) => val >= min && val <= max;
 
 export const circulateIndex = (index: number, max: number): number => {
@@ -266,6 +290,16 @@ export const circulateIndex = (index: number, max: number): number => {
   }
 };
 
+export const range = (end: number): number[] => {
+  const arr = new Array(end);
+
+  for (let i = 0; i < end; i++) {
+    arr[i] = i;
+  }
+
+  return arr;
+};
+
 export const setPrototypeOf = Object.setPrototypeOf || ((obj, proto) => {
   obj.__proto__ = proto;
   return obj;

package/declaration/camera/BoundCamera.d.ts

@@ -1,9 +0,0 @@
-import AnchorPoint from "../core/AnchorPoint";
-import Camera from "./Camera";
-declare class BoundCamera extends Camera {
-    updateRange(): this;
-    updateAnchors(): this;
-    findAnchorIncludePosition(position: number): AnchorPoint | null;
-    private _findNearestPanel;
-}
-export default BoundCamera;

package/declaration/camera/CircularCamera.d.ts

@@ -1,36 +0,0 @@
-import Panel from "../core/panel/Panel";
-import AnchorPoint from "../core/AnchorPoint";
-import { DIRECTION } from "../const/external";
-import { ValueOf } from "../type/internal";
-import Camera from "./Camera";
-export interface TogglePoint {
-    panel: Panel;
-    direction: ValueOf<typeof DIRECTION>;
-    toggled: boolean;
-}
-declare class CircularCamera extends Camera {
-    private _circularOffset;
-    private _circularEnabled;
-    get offset(): number;
-    get controlParams(): {
-        range: {
-            min: number;
-            max: number;
-        };
-        position: number;
-        circular: boolean;
-    };
-    getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null;
-    getNextAnchor(anchor: AnchorPoint): AnchorPoint | null;
-    findAnchorIncludePosition(position: number): AnchorPoint | null;
-    clampToReachablePosition(position: number): number;
-    canReach(panel: Panel): boolean;
-    canSee(panel: Panel): boolean;
-    updateRange(): this;
-    lookAt(pos: number): void;
-    protected _applyTransform(): void;
-    protected _resetInternalValues(): void;
-    private _calcPanelAreaSum;
-    private _updateCircularOffset;
-}
-export default CircularCamera;

package/declaration/camera/LinearCamera.d.ts

@@ -1,5 +0,0 @@
-import Camera from "./Camera";
-declare class LinearCamera extends Camera {
-    updateRange(): this;
-}
-export default LinearCamera;

package/declaration/core/panel/ElementPanel.d.ts

@@ -1,14 +0,0 @@
-import Panel, { PanelOptions } from "./Panel";
-export interface ElementPanelOptions extends PanelOptions {
-    el: HTMLElement;
-}
-declare class ElementPanel extends Panel {
-    private _el;
-    private _rendered;
-    get element(): HTMLElement;
-    get rendered(): boolean;
-    constructor(options: ElementPanelOptions);
-    markForShow(): void;
-    markForHide(): void;
-}
-export default ElementPanel;

package/declaration/core/panel/ExternalPanel.d.ts

@@ -1,9 +0,0 @@
-import Panel, { PanelOptions } from "./Panel";
-export interface ExternalPanelOptions<T> extends PanelOptions {
-    externalComponent: T;
-}
-declare abstract class ExternalPanel<T = any> extends Panel {
-    protected _externalComponent: T;
-    constructor(options: ExternalPanelOptions<T>);
-}
-export default ExternalPanel;

package/declaration/exports.d.ts

@@ -1,10 +0,0 @@
-import type { FlickingOptions, FlickingEvents } from "./Flicking";
-export * from "./core";
-export * from "./camera";
-export * from "./control";
-export * from "./renderer";
-export * from "./const/external";
-export * from "./type/event";
-export * from "./type/external";
-export * from "./cfc";
-export type { FlickingOptions, FlickingEvents };

package/src/camera/CircularCamera.ts

@@ -1,269 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import Panel from "../core/panel/Panel";
-import AnchorPoint from "../core/AnchorPoint";
-import { DIRECTION } from "../const/external";
-import { circulatePosition, getFlickingAttached } from "../utils";
-import { ValueOf } from "../type/internal";
-
-import Camera from "./Camera";
-
-/**
- * A data of the position that changes order of the panel elements
- * @ko 패널 엘리먼트 순서가 변경되는 좌표의 데이터
- * @interface
- * @property {Panel} panel Toggling panel<ko>순서를 변경할 패널</ko>
- * @property {DIRECTION} direction Toggling position<ko>순서를 변경할 방향</ko>
- * @property {boolean} toggled Whether the panel has toggled its position to `direction`<ko>`direction` 방향으로 패널 위치를 변경했는지 여부를 나타내는 값</ko>
- */
-export interface TogglePoint {
-  panel: Panel;
-  direction: ValueOf<typeof DIRECTION>;
-  toggled: boolean;
-}
-
-/**
- * A {@link Camera} that connects the last panel and the first panel, enabling continuous loop
- * @ko 첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 {@link Camera}
- */
-class CircularCamera extends Camera {
-  private _circularOffset: number = 0;
-  private _circularEnabled: boolean = false;
-
-  public get offset() { return this._offset - this._circularOffset; }
-  public get controlParams() { return { range: this._range, position: this._position, circular: this._circularEnabled }; }
-
-  public getPrevAnchor(anchor: AnchorPoint): AnchorPoint | null {
-    if (!this._circularEnabled || anchor.index !== 0) return super.getPrevAnchor(anchor);
-
-    const anchors = this._anchors;
-    const rangeDiff = this.rangeDiff;
-    const lastAnchor = anchors[anchors.length - 1];
-
-    return new AnchorPoint({
-      index: lastAnchor.index,
-      position: lastAnchor.position - rangeDiff,
-      panel: lastAnchor.panel
-    });
-  }
-
-  public getNextAnchor(anchor: AnchorPoint): AnchorPoint | null {
-    const anchors = this._anchors;
-
-    if (!this._circularEnabled || anchor.index !== anchors.length - 1) return super.getNextAnchor(anchor);
-
-    const rangeDiff = this.rangeDiff;
-    const firstAnchor = anchors[0];
-
-    return new AnchorPoint({
-      index: firstAnchor.index,
-      position: firstAnchor.position + rangeDiff,
-      panel: firstAnchor.panel
-    });
-  }
-
-  public findAnchorIncludePosition(position: number): AnchorPoint | null {
-    if (!this._circularEnabled) return super.findAnchorIncludePosition(position);
-
-    const range = this._range;
-    const anchors = this._anchors;
-    const rangeDiff = this.rangeDiff;
-    const anchorCount = anchors.length;
-    const positionInRange = circulatePosition(position, range.min, range.max);
-
-    let anchorInRange: AnchorPoint | null = super.findAnchorIncludePosition(positionInRange);
-
-    if (anchorCount > 0 && (position === range.min || position === range.max)) {
-      const possibleAnchors = [
-        anchorInRange,
-        new AnchorPoint({
-          index: 0,
-          position: anchors[0].position + rangeDiff,
-          panel: anchors[0].panel
-        }),
-        new AnchorPoint({
-          index: anchorCount - 1,
-          position: anchors[anchorCount - 1].position - rangeDiff,
-          panel: anchors[anchorCount - 1].panel
-        })
-      ].filter(anchor => !!anchor) as AnchorPoint[];
-
-      anchorInRange = possibleAnchors.reduce((nearest: AnchorPoint | null, anchor) => {
-        if (!nearest) return anchor;
-
-        return Math.abs(nearest.position - position) < Math.abs(anchor.position - position)
-          ? nearest
-          : anchor;
-      }, null);
-    }
-
-    if (!anchorInRange) return null;
-
-    if (position < range.min) {
-      const loopCount = -Math.floor((range.min - position) / rangeDiff) - 1;
-
-      return new AnchorPoint({
-        index: anchorInRange.index,
-        position: anchorInRange.position + rangeDiff * loopCount,
-        panel: anchorInRange.panel
-      });
-    } else if (position > range.max) {
-      const loopCount = Math.floor((position - range.max) / rangeDiff) + 1;
-
-      return new AnchorPoint({
-        index: anchorInRange.index,
-        position: anchorInRange.position + rangeDiff * loopCount,
-        panel: anchorInRange.panel
-      });
-    }
-
-    return anchorInRange;
-  }
-
-  public clampToReachablePosition(position: number): number {
-    // Basically all position is reachable for circular camera
-    return this._circularEnabled
-      ? position
-      : super.clampToReachablePosition(position);
-  }
-
-  public canReach(panel: Panel): boolean {
-    if (panel.removed) return false;
-
-    return this._circularEnabled
-      // Always reachable on circular mode
-      ? true
-      : super.canReach(panel);
-  }
-
-  public canSee(panel: Panel): boolean {
-    const range = this._range;
-    const rangeDiff = this.rangeDiff;
-    const visibleRange = this.visibleRange;
-    const visibleInCurrentRange = super.canSee(panel);
-
-    if (!this._circularEnabled) {
-      return visibleInCurrentRange;
-    }
-
-    // Check looped visible area for circular case
-    if (visibleRange.min < range.min) {
-      return visibleInCurrentRange || panel.includeRange(visibleRange.min + rangeDiff, visibleRange.max + rangeDiff, false);
-    } else if (visibleRange.max > range.max) {
-      return visibleInCurrentRange || panel.includeRange(visibleRange.min - rangeDiff, visibleRange.max - rangeDiff, false);
-    }
-
-    return visibleInCurrentRange;
-  }
-
-  /**
-   * Update {@link Camera#range range} of Camera
-   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-   * @chainable
-   * @throws {FlickingError}
-   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-   * @return {this}
-   */
-  public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const renderer = flicking.renderer;
-
-    const panels = renderer.panels;
-    if (panels.length <= 0) {
-      this._resetInternalValues();
-      return this;
-    }
-
-    const firstPanel = panels[0]!;
-    const lastPanel = panels[panels.length - 1]!;
-    const firstPanelPrev = firstPanel.range.min - firstPanel.margin.prev;
-    const lastPanelNext = lastPanel.range.max + lastPanel.margin.next;
-
-    const visibleSize = this.size;
-    const panelSizeSum = lastPanelNext - firstPanelPrev;
-
-    const canSetCircularMode = panels
-      .every(panel => panelSizeSum - panel.size >= visibleSize);
-    this._circularEnabled = canSetCircularMode;
-
-    if (canSetCircularMode) {
-      this._range = { min: firstPanelPrev, max: lastPanelNext };
-
-      panels.forEach(panel => panel.updateCircularToggleDirection());
-    } else {
-      this._range = { min: firstPanel.position, max: lastPanel.position };
-    }
-
-    this._updateCircularOffset();
-
-    return this;
-  }
-
-  public lookAt(pos: number) {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const prevPos = this._position;
-
-    if (pos === prevPos) return super.lookAt(pos);
-
-    const panels = flicking.renderer.panels;
-    const toggled = panels.map(panel => panel.toggle(prevPos, pos));
-
-    this._position = pos;
-
-    if (toggled.some(isToggled => isToggled)) {
-      this._updateCircularOffset();
-      void flicking.renderer.render();
-    }
-
-    return super.lookAt(pos);
-  }
-
-  protected _applyTransform(): void {
-    const el = this._el;
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-
-    const actualPosition = this._position - this._alignPos - this._offset + this._circularOffset;
-
-    el.style[this._transform] = flicking.horizontal
-      ? `translate(${-actualPosition}px)`
-      : `translate(0, ${-actualPosition}px)`;
-  }
-
-  protected _resetInternalValues() {
-    super._resetInternalValues();
-    this._circularOffset = 0;
-    this._circularEnabled = false;
-  }
-
-  private _calcPanelAreaSum(panels: Panel[]) {
-    return panels.reduce((sum: number, panel: Panel) => sum + panel.sizeIncludingMargin, 0);
-  }
-
-  private _updateCircularOffset() {
-    if (!this._circularEnabled) {
-      this._circularOffset = 0;
-      return;
-    }
-
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const toggledPrev: Panel[] = [];
-    const toggledNext: Panel[] = [];
-
-    flicking.panels
-      .filter(panel => panel.toggled)
-      .forEach(panel => {
-        if (panel.toggleDirection === DIRECTION.PREV) {
-          toggledPrev.push(panel);
-        } else {
-          toggledNext.push(panel);
-        }
-      });
-
-    this._circularOffset = this._calcPanelAreaSum(toggledPrev) - this._calcPanelAreaSum(toggledNext);
-  }
-}
-
-export default CircularCamera;

package/src/camera/LinearCamera.ts

@@ -1,35 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import { getFlickingAttached } from "../utils";
-
-import Camera from "./Camera";
-
-/**
- * A {@link Camera} that can move from the position of the first panel to the position of the last panel
- * @ko 첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 {@link Camera}
- */
-class LinearCamera extends Camera {
-  /**
-   * Update {@link Camera#range range} of Camera
-   * @ko Camera의 {@link Camera#range range}를 업데이트합니다
-   * @chainable
-   * @throws {FlickingError}
-   * {@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} When {@link Camera#init init} is not called before
-   * <ko>{@link ERROR_CODE NOT_ATTACHED_TO_FLICKING} {@link Camera#init init}이 이전에 호출되지 않은 경우</ko>
-   * @return {this}
-   */
-  public updateRange() {
-    const flicking = getFlickingAttached(this._flicking, "Camera");
-    const renderer = flicking.renderer;
-
-    const firstPanel = renderer.getPanel(0);
-    const lastPanel = renderer.getPanel(renderer.panelCount - 1);
-
-    this._range = { min: firstPanel?.position ?? 0, max: lastPanel?.position ?? 0 };
-    return this;
-  }
-}
-
-export default LinearCamera;

package/src/core/panel/ElementPanel.ts

@@ -1,52 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import Panel, { PanelOptions } from "./Panel";
-
-export interface ElementPanelOptions extends PanelOptions {
-  el: HTMLElement;
-}
-
-/**
- * An slide data component that holds information of a single HTMLElement
- * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
- */
-class ElementPanel extends Panel {
-  private _el: HTMLElement;
-  private _rendered: boolean;
-
-  /**
-   * `HTMLElement` that panel's referencing
-   * @ko 패널이 참조하고 있는 `HTMLElement`
-   * @type {HTMLElement}
-   * @readonly
-   */
-  public get element() { return this._el; }
-
-  public get rendered() { return this._rendered; }
-
-  /**
-   * @param {object} options An options object<ko>옵션 오브젝트</ko>
-   * @param {HTMLElement} [options.el] A `HTMLElement` panel's referencing<ko>패널이 참조하는 `HTMLElement`</ko>
-   * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
-   * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
-   * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
-   */
-  public constructor(options: ElementPanelOptions) {
-    super(options);
-
-    this._el = options.el;
-    this._rendered = true;
-  }
-
-  public markForShow() {
-    this._rendered = true;
-  }
-
-  public markForHide() {
-    this._rendered = false;
-  }
-}
-
-export default ElementPanel;

package/src/core/panel/ExternalPanel.ts

@@ -1,32 +0,0 @@
-/*
- * Copyright (c) 2015 NAVER Corp.
- * egjs projects are licensed under the MIT license
- */
-import Panel, { PanelOptions } from "./Panel";
-
-export interface ExternalPanelOptions<T> extends PanelOptions {
-  externalComponent: T;
-}
-
-/**
- * An slide data component that holds information of a single HTMLElement
- * @ko 슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다
- */
-abstract class ExternalPanel<T = any> extends Panel {
-  protected _externalComponent: T;
-
-  /**
-   * @param {object} options An options object<ko>옵션 오브젝트</ko>
-   * @param {HTMLElement} [options.el] A `HTMLElement` panel's referencing<ko>패널이 참조하는 `HTMLElement`</ko>
-   * @param {number} [options.index] An initial index of the panel<ko>패널의 초기 인덱스</ko>
-   * @param {Constants.ALIGN | string | number} [options.align] An initial {@link Flicking#align align} value of the panel<ko>패널의 초기 {@link Flicking#align align}값</ko>
-   * @param {Flicking} [options.flicking] A Flicking instance panel's referencing<ko>패널이 참조하는 {@link Flicking} 인스턴스</ko>
-   */
-  public constructor(options: ExternalPanelOptions<T>) {
-    super(options);
-
-    this._externalComponent = options.externalComponent;
-  }
-}
-
-export default ExternalPanel;