@equinor/esv-intersection 3.0.4 → 3.0.6

package/src/layers/base/PixiLayer.ts

@@ -0,0 +1,190 @@
+import { IRenderer, Application, autoDetectRenderer, Container, DisplayObject, IRendererOptionsAuto, Renderer, RENDERER_TYPE } from 'pixi.js';
+import { Layer, LayerOptions } from './Layer';
+import { OnMountEvent, OnRescaleEvent, OnResizeEvent, OnUnmountEvent } from '../../interfaces';
+import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
+
+// PixiRenderApplication has many similarities with PIXI.Application,
+// but an important distinction is that it does not run the TickerPlugin.
+// We only want to re-render on data changes
+// The plugin we are trying to avoid:
+// https://github.com/pixijs/pixijs/blob/dev/packages/ticker/src/TickerPlugin.ts
+export class PixiRenderApplication {
+  stage: Container;
+
+  renderer: IRenderer<HTMLCanvasElement>;
+
+  constructor(pixiRenderOptions?: IRendererOptionsAuto) {
+    const options = {
+      width: DEFAULT_LAYER_WIDTH,
+      height: DEFAULT_LAYER_HEIGHT,
+      antialias: true,
+      backgroundAlpha: 0,
+      clearBeforeRender: true,
+      // autoResize: true,
+      preserveDrawingBuffer: true,
+      ...pixiRenderOptions,
+    };
+    this.renderer = autoDetectRenderer<HTMLCanvasElement>(options);
+    this.stage = new Container();
+  }
+
+  destroy() {
+    this.stage.destroy({
+      children: true,
+      texture: true,
+      baseTexture: true,
+    });
+    this.stage = null;
+
+    // Get renderType and clContext before we destroy the renderer
+    const renderType = this.renderer.type;
+    const glContext = this.renderer instanceof Renderer ? this.renderer?.gl : undefined;
+
+    /**
+     * WebGL v2 does supposedly not have WEBGL_lose_context
+     * so Pixi.js does not use it to "clean up" on v2.
+     *
+     * Cleaning up our self since it still seems to work and fix issue with lingering context
+     */
+    if (renderType === RENDERER_TYPE.WEBGL && glContext) {
+      glContext?.getExtension('WEBGL_lose_context')?.loseContext();
+    }
+
+    this.renderer.destroy(true);
+    this.renderer = null;
+  }
+
+  get view() {
+    return this.renderer.view;
+  }
+
+  render() {
+    this.renderer.render(this.stage);
+  }
+}
+
+export abstract class PixiLayer<T> extends Layer<T> {
+  private pixiViewContainer: HTMLElement;
+  private ctx: PixiRenderApplication;
+  private container: Container;
+
+  constructor(ctx: Application<HTMLCanvasElement> | PixiRenderApplication, id?: string, options?: LayerOptions<T>) {
+    super(id, options);
+
+    this.ctx = ctx;
+
+    this.container = new Container();
+    this.ctx.stage.addChild(this.container);
+  }
+
+  render(): void {
+    this.ctx.render();
+  }
+
+  addChild(child: DisplayObject) {
+    this.container.addChild(child);
+  }
+
+  clearLayer() {
+    const children = this.container.removeChildren();
+    children.forEach((child) => {
+      child.destroy();
+    });
+  }
+
+  override onMount(event: OnMountEvent) {
+    super.onMount(event);
+
+    this.pixiViewContainer = this.element.querySelector('#webgl-layer');
+
+    if (!this.pixiViewContainer) {
+      this.pixiViewContainer = document.createElement('div');
+      this.pixiViewContainer.setAttribute('id', `${this.id}`);
+      this.pixiViewContainer.setAttribute('class', 'webgl-layer');
+
+      this.pixiViewContainer.appendChild(this.ctx.view);
+
+      this.element.appendChild(this.pixiViewContainer);
+
+      this.updateStyle();
+    }
+  }
+
+  override onUnmount(event?: OnUnmountEvent) {
+    super.onUnmount(event);
+
+    this.clearLayer();
+    this.ctx.stage.removeChild(this.container);
+    this.container.destroy();
+    this.pixiViewContainer.remove();
+    this.pixiViewContainer = undefined;
+  }
+
+  override onResize(event: OnResizeEvent): void {
+    super.onResize(event);
+    this.ctx.renderer.resize(event.width, event.height);
+  }
+
+  override onRescale(event: OnRescaleEvent): void {
+    super.onRescale(event);
+
+    const flippedX = event.xBounds[0] > event.xBounds[1];
+    const flippedY = event.yBounds[0] > event.yBounds[1];
+    this.setContainerPosition(event.xScale(0), event.yScale(0));
+    this.setContainerScale(event.xRatio * (flippedX ? -1 : 1), event.yRatio * (flippedY ? -1 : 1));
+  }
+
+  protected setContainerPosition(x?: number, y?: number) {
+    this.container.position.set(x, y);
+  }
+
+  protected setContainerScale(x?: number, y?: number) {
+    this.container.scale.set(x, y);
+  }
+
+  updateStyle(visible?: boolean): void {
+    const isVisible = visible || this.isVisible;
+    const interactive = this.interactive ? 'auto' : 'none';
+    this.container.visible = isVisible;
+
+    const styles = [
+      ['position', 'absolute'],
+      ['pointer-events', `${interactive}`],
+      ['z-index', `${this.order}`],
+      ['opacity', `${this.opacity}`],
+    ]
+      .map((pair) => pair.join(':'))
+      .join(';');
+
+    this.pixiViewContainer.setAttribute('style', styles);
+  }
+
+  override setVisibility(visible: boolean, layerId?: string): void {
+    super.setVisibility(visible, layerId);
+    if (this.pixiViewContainer) {
+      this.updateStyle(visible);
+    }
+  }
+
+  onOpacityChanged(_opacity: number): void {
+    if (this.pixiViewContainer) {
+      this.updateStyle();
+    }
+  }
+
+  onOrderChanged(_order: number): void {
+    if (this.pixiViewContainer) {
+      this.updateStyle();
+    }
+  }
+
+  onInteractivityChanged(_interactive: boolean): void {
+    if (this.pixiViewContainer) {
+      this.updateStyle();
+    }
+  }
+
+  renderType(): RENDERER_TYPE {
+    return this.ctx.renderer.type;
+  }
+}

package/src/layers/base/SVGLayer.ts

@@ -0,0 +1,63 @@
+import { select, Selection } from 'd3-selection';
+import { Layer } from './Layer';
+import { OnMountEvent, OnResizeEvent } from '../../interfaces';
+import { DEFAULT_LAYER_HEIGHT, DEFAULT_LAYER_WIDTH } from '../../constants';
+
+export abstract class SVGLayer<T> extends Layer<T> {
+  elm: Selection<SVGElement, unknown, null, undefined>;
+
+  override onMount(event: OnMountEvent): void {
+    super.onMount(event);
+    const { elm } = event;
+    const width = event.width || parseInt(elm.getAttribute('width'), 10) || DEFAULT_LAYER_WIDTH;
+    const height = event.height || parseInt(elm.getAttribute('height'), 10) || DEFAULT_LAYER_HEIGHT;
+    if (!this.elm) {
+      this.elm = select(elm).append('svg');
+      this.elm.attr('id', `${this.id}`);
+      this.elm.attr('class', 'svg-layer');
+    }
+    this.elm.attr('height', height).attr('width', width);
+    const interactive = this.interactive ? 'auto' : 'none';
+    this.elm.style('position', 'absolute').style('pointer-events', interactive).style('opacity', this.opacity).style('z-index', this.order);
+  }
+
+  override onUnmount(): void {
+    super.onUnmount();
+    this.elm.remove();
+    this.elm = null;
+  }
+
+  override onResize(event: OnResizeEvent): void {
+    if (!this.elm) {
+      return;
+    }
+    super.onResize(event);
+    this.elm.attr('height', event.height).attr('width', event.width);
+  }
+
+  override setVisibility(visible: boolean): void {
+    super.setVisibility(visible);
+    if (this.elm) {
+      this.elm.attr('visibility', visible ? 'visible' : 'hidden');
+    }
+  }
+
+  onOpacityChanged(opacity: number): void {
+    if (this.elm) {
+      this.elm.style('opacity', opacity);
+    }
+  }
+
+  onOrderChanged(order: number): void {
+    if (this.elm) {
+      this.elm.style('z-index', order);
+    }
+  }
+
+  onInteractivityChanged(shouldBeInteractive: boolean): void {
+    if (this.elm) {
+      const interactive = shouldBeInteractive ? 'auto' : 'none';
+      this.elm.style('pointer-events', interactive);
+    }
+  }
+}

package/src/layers/base/index.ts

@@ -0,0 +1,5 @@
+export * from './CanvasLayer';
+export * from './HTMLLayer';
+export * from './Layer';
+export * from './PixiLayer';
+export * from './SVGLayer';

package/src/layers/index.ts

@@ -0,0 +1,16 @@
+export * from './base/CanvasLayer';
+export * from './base/Layer';
+export * from './base/HTMLLayer';
+export * from './base/SVGLayer';
+export * from './base/PixiLayer';
+export * from './schematicInterfaces';
+export * from './CalloutCanvasLayer';
+export * from './GeomodelCanvasLayer';
+export * from './GeomodelLabelsLayer';
+export * from './GeomodelLayerV2';
+export * from './GridLayer';
+export * from './ImageCanvasLayer';
+export * from './SchematicLayer';
+export * from './SeismicCanvasLayer';
+export * from './WellborePathLayer';
+export * from './ReferenceLineLayer';