@equinor/esv-intersection 3.0.0-beta.4 → 3.0.0-beta.6

package/src/layers/GeomodelLayerV2.ts

@@ -0,0 +1,110 @@
+import { Graphics } from 'pixi.js';
+import { PixiLayer } from './base/PixiLayer';
+import { OnUpdateEvent, OnRescaleEvent } from '../interfaces';
+import { SurfaceArea, SurfaceData, SurfaceLine } from '../datautils';
+import { SURFACE_LINE_WIDTH } from '../constants';
+
+const DEFAULT_Y_BOTTOM = 10000;
+
+export class GeomodelLayerV2<T extends SurfaceData> extends PixiLayer<T> {
+  private isPreRendered: boolean = false;
+
+  onRescale(event: OnRescaleEvent): void {
+    super.onRescale(event);
+
+    if (!this.isPreRendered) {
+      this.clearLayer();
+      this.preRender();
+    }
+
+    this.render();
+  }
+
+  onUpdate(event: OnUpdateEvent<T>): void {
+    super.onUpdate(event);
+
+    this.isPreRendered = false;
+    this.clearLayer();
+    this.preRender();
+    this.render();
+  }
+
+  preRender(): void {
+    const { data }: { data: SurfaceData } = this;
+
+    if (!data) {
+      return;
+    }
+
+    data.areas.forEach((a: SurfaceArea) => this.generateAreaPolygon(a));
+    data.lines.forEach((l: SurfaceLine) => this.generateSurfaceLine(l));
+
+    this.isPreRendered = true;
+  }
+
+  createPolygons = (data: number[][]): number[][] => {
+    const polygons: number[][] = [];
+    let polygon: number[] = null;
+
+    // Start generating polygons
+    for (let i = 0; i < data.length; i++) {
+      // Generate top of polygon as long as we have valid values
+      const topIsValid = !!data[i][1];
+      if (topIsValid) {
+        if (polygon === null) {
+          polygon = [];
+        }
+        polygon.push(data[i][0], data[i][1]);
+      }
+
+      const endIsReached = i === data.length - 1;
+      if (!topIsValid || endIsReached) {
+        if (polygon) {
+          // Generate bottom of polygon
+          for (let j: number = !topIsValid ? i - 1 : i; j >= 0; j--) {
+            if (!data[j][1]) {
+              break;
+            }
+            polygon.push(data[j][0], data[j][2] || DEFAULT_Y_BOTTOM);
+          }
+          polygons.push(polygon);
+          polygon = null;
+        }
+      }
+    }
+    return polygons;
+  };
+
+  generateAreaPolygon = (s: SurfaceArea): void => {
+    const g = new Graphics();
+    g.lineStyle(1, s.color as number, 1);
+    g.beginFill(s.color as number);
+    const polygons = this.createPolygons(s.data);
+    polygons.forEach((polygon: number[]) => g.drawPolygon(polygon));
+    g.endFill();
+    this.addChild(g);
+  };
+
+  generateSurfaceLine = (s: SurfaceLine): void => {
+    const g = new Graphics();
+    const { data: d } = s;
+
+    const alignment = 0.5;
+    g.lineStyle(SURFACE_LINE_WIDTH, s.color as number, 1, alignment, true);
+
+    let penDown = false;
+    for (let i = 0; i < d.length; i++) {
+      if (d[i][1]) {
+        if (penDown) {
+          g.lineTo(d[i][0], d[i][1]);
+        } else {
+          g.moveTo(d[i][0], d[i][1]);
+          penDown = true;
+        }
+      } else {
+        penDown = false;
+      }
+    }
+    this.addChild(g);
+  };
+}

package/src/layers/GridLayer.ts

@@ -0,0 +1,145 @@
+import { CanvasLayer } from './base/CanvasLayer';
+import { OnUpdateEvent, OnRescaleEvent } from '../interfaces';
+import { ScaleLinear } from 'd3-scale';
+import { LayerOptions } from './base/Layer';
+
+// constants
+const MINORCOLOR: string = 'lightgray';
+const MAJORCOLOR: string = 'gray';
+const MINORWIDTH: number = 0.25;
+const MAJORWIDTH: number = 0.75;
+
+const defaultOptions = {
+  minorColor: MINORCOLOR,
+  majorColor: MAJORCOLOR,
+  minorWidth: MINORWIDTH,
+  majorWidth: MAJORWIDTH,
+};
+
+export interface GridLayerOptions<T> extends LayerOptions<T> {
+  majorWidth?: number;
+  majorColor?: string;
+  minorWidth?: number;
+  minorColor?: string;
+}
+
+export interface OnGridLayerUpdateEvent<T> extends OnUpdateEvent<T> {
+  xScale?: ScaleLinear<number, number, never>;
+  yScale?: ScaleLinear<number, number, never>;
+}
+
+export class GridLayer<T> extends CanvasLayer<T> {
+  private _offsetX: number = 0;
+  private _offsetY: number = 0;
+
+  constructor(id?: string, options?: GridLayerOptions<T>) {
+    super(id, options);
+    this.options = {
+      ...this.options,
+      ...(options || defaultOptions),
+    };
+    this.render = this.render.bind(this);
+  }
+
+  onUpdate(event: OnGridLayerUpdateEvent<T>): void {
+    super.onUpdate(event);
+    this.render(event);
+  }
+
+  onRescale(event: OnRescaleEvent): void {
+    super.onRescale(event);
+    this.render(event);
+  }
+
+  render(event: OnRescaleEvent | OnGridLayerUpdateEvent<T>): void {
+    const { ctx } = this;
+    const { minorWidth, minorColor, majorWidth, majorColor } = this.options as GridLayerOptions<T>;
+
+    if (!ctx) {
+      return;
+    }
+
+    this.clearCanvas();
+
+    if (!(event.xScale || event.yScale)) {
+      return;
+    }
+
+    const xScale = event.xScale.copy();
+    const yScale = event.yScale.copy();
+
+    const xDomain = xScale.domain();
+    const yDomain = yScale.domain();
+
+    const offsetX = this.offsetX;
+    const offsetY = this.offsetY;
+
+    xScale.domain([xDomain[0] - offsetX, xDomain[1] - offsetX]);
+    yScale.domain([yDomain[0] - offsetY, yDomain[1] - offsetY]);
+
+    const [rx1, rx2] = xScale.range();
+    const [ry1, ry2] = yScale.range();
+
+    ctx.lineWidth = minorWidth || MINORWIDTH;
+    ctx.strokeStyle = minorColor || MINORCOLOR;
+
+    // minor grid lines
+    const xminticks = this.mapMinorTicks(xScale.ticks());
+    const yminticks = this.mapMinorTicks(yScale.ticks());
+    this.renderTicksX(xScale, xminticks, ry1, ry2);
+    this.renderTicksY(yScale, yminticks, rx1, rx2);
+
+    ctx.lineWidth = majorWidth || MAJORWIDTH;
+    ctx.strokeStyle = majorColor || MAJORCOLOR;
+
+    // major grid lines
+    this.renderTicksX(xScale, xScale.ticks(), ry1, ry2);
+    this.renderTicksY(yScale, yScale.ticks(), rx1, rx2);
+    ctx.restore();
+  }
+
+  private renderTicksX(xscale: ScaleLinear<number, number, never>, xticks: number[], ry1: number, ry2: number): void {
+    xticks.forEach((tx: number) => {
+      const x = xscale(tx);
+      this.ctx.beginPath();
+      this.ctx.moveTo(x, ry1);
+      this.ctx.lineTo(x, ry2);
+      this.ctx.stroke();
+    });
+  }
+
+  private renderTicksY(yscale: ScaleLinear<number, number, never>, yticks: number[], rx1: number, rx2: number): void {
+    yticks.forEach((ty: number) => {
+      const y = yscale(ty);
+      this.ctx.beginPath();
+      this.ctx.moveTo(rx1, y);
+      this.ctx.lineTo(rx2, y);
+      this.ctx.stroke();
+    });
+  }
+
+  private mapMinorTicks(ticks: number[]): number[] {
+    let xminticks: number[] = [];
+    if (ticks.length >= 2) {
+      xminticks = ticks.map((v: number) => v + (ticks[1] - ticks[0]) / 2);
+      xminticks.pop();
+    }
+    return xminticks;
+  }
+
+  get offsetX(): number {
+    return this._offsetX;
+  }
+
+  set offsetX(offset: number) {
+    this._offsetX = offset;
+  }
+
+  get offsetY(): number {
+    return this._offsetY;
+  }
+
+  set offsetY(offset: number) {
+    this._offsetY = offset;
+  }
+}

package/src/layers/ImageCanvasLayer.ts

@@ -0,0 +1,55 @@
+import { CanvasLayer } from './base/CanvasLayer';
+import { OnUpdateEvent, OnMountEvent, OnRescaleEvent } from '../interfaces';
+import { ScaleLinear } from 'd3-scale';
+
+export interface OnImageLayerUpdateEvent<T> extends OnUpdateEvent<T> {
+  url: string;
+  xScale: ScaleLinear<number, number, never>;
+  yScale: ScaleLinear<number, number, never>;
+  xRatio?: number;
+  yRatio?: number;
+  x?: number;
+  y?: number;
+}
+
+export type OnImageLayerRescaleEvent<T> = OnImageLayerUpdateEvent<T> & OnRescaleEvent;
+
+export class ImageLayer<T> extends CanvasLayer<T> {
+  img: HTMLImageElement;
+
+  onMount(event: OnMountEvent): void {
+    super.onMount(event);
+    const img = document.createElement('img');
+    this.img = img;
+    this.isLoading = true;
+  }
+
+  onUpdate(event: OnImageLayerUpdateEvent<T>): void {
+    super.onUpdate(event);
+    this.img.src = event.url;
+    this.render(event);
+  }
+
+  onRescale(event: OnImageLayerRescaleEvent<T>): void {
+    super.onRescale(event);
+    this.setTransform(event);
+    this.render(event);
+  }
+
+  render(event: OnImageLayerUpdateEvent<T>): void {
+    const width = parseInt(this.elm.getAttribute('width'), 10);
+    const height = parseInt(this.elm.getAttribute('height'), 10);
+    const { xScale, yScale, xRatio, yRatio, x, y } = event;
+    const calcWidth = width * (xRatio || 1);
+    const calcHeight = height * (yRatio || 1);
+    this.clearCanvas();
+    if (this.isLoading) {
+      this.img.onload = (): void => {
+        this.isLoading = false;
+        this.ctx.drawImage(this.img, xScale(x || 0), yScale(y || 0), calcWidth, calcHeight);
+      };
+    } else {
+      this.ctx.drawImage(this.img, xScale(x || 0), yScale(y || 0), calcWidth, calcHeight);
+    }
+  }
+}

package/src/layers/ReferenceLineLayer.ts

@@ -0,0 +1,185 @@
+import { calcSize } from '../utils';
+import { CanvasLayer, LayerOptions } from './base';
+import { assertNever } from './schematicInterfaces';
+import { OnUpdateEvent, OnRescaleEvent, OnMountEvent } from '../interfaces';
+import { ScaleLinear } from 'd3-scale';
+
+export type ReferenceLineType = 'wavy' | 'dashed' | 'solid';
+
+export type ReferenceLine = {
+  text?: string;
+  lineType: ReferenceLineType;
+  color: string;
+  depth: number;
+  lineWidth?: number;
+  textColor?: string;
+  fontSize?: string;
+};
+
+export interface ReferenceLineLayerOptions extends LayerOptions<ReferenceLine[]> {}
+
+const foldReferenceLine = <T>(
+  options: {
+    wavy: (wavy: ReferenceLine) => T;
+    dashed: (dashed: ReferenceLine) => T;
+    solid: (solid: ReferenceLine) => T;
+  },
+  refLine: ReferenceLine,
+): T => {
+  switch (refLine.lineType) {
+    case 'wavy':
+      return options.wavy(refLine);
+
+    case 'dashed':
+      return options.dashed(refLine);
+
+    case 'solid':
+      return options.solid(refLine);
+
+    default:
+      return assertNever(refLine.lineType);
+  }
+};
+
+export class ReferenceLineLayer extends CanvasLayer<ReferenceLine[]> {
+  yScale: ScaleLinear<number, number, never> | null = null;
+  xScale: ScaleLinear<number, number, never> | null = null;
+
+  onMount(event: OnMountEvent) {
+    super.onMount(event);
+  }
+
+  onUpdate(event: OnUpdateEvent<ReferenceLine[]>) {
+    super.onUpdate(event);
+    this.clearCanvas();
+    this.render();
+  }
+
+  onRescale(event: OnRescaleEvent) {
+    super.onRescale(event);
+    this.yScale = event.yScale;
+    this.xScale = event.xScale;
+    this.resetTransform();
+    this.render();
+  }
+
+  private drawDashed(dashed: ReferenceLine) {
+    const { ctx } = this;
+    const { canvas } = this;
+    const y = this.yScale(dashed.depth);
+    ctx.save();
+    ctx.strokeStyle = dashed.color;
+    this.setCtxLineStyle(ctx, dashed);
+    this.setCtxLineWidth(ctx, dashed);
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(canvas.width, y);
+    ctx.stroke();
+    ctx.restore();
+    if (dashed.text) {
+      this.drawText(ctx, dashed, ctx.canvas.width, y);
+    }
+  }
+
+  private drawSolid(solid: ReferenceLine) {
+    const { ctx } = this;
+    const { canvas } = this;
+    const y = this.yScale(solid.depth);
+    ctx.save();
+    ctx.strokeStyle = solid.color;
+    this.setCtxLineStyle(ctx, solid);
+    this.setCtxLineWidth(ctx, solid);
+    ctx.beginPath();
+    ctx.moveTo(0, y);
+    ctx.lineTo(canvas.width, y);
+    ctx.stroke();
+    ctx.restore();
+    if (solid.text) {
+      this.drawText(ctx, solid, ctx.canvas.width, y);
+    }
+  }
+
+  private drawWavy(wavy: ReferenceLine): void {
+    const factor = 4;
+    const min = 2.5;
+    const max = 500;
+    const { ctx } = this;
+    const { canvas } = this;
+    const waveHeight = calcSize(factor, min, max, this.yScale);
+    const wavePeriod = waveHeight * 2;
+    const y = this.yScale(wavy.depth) - waveHeight;
+    const steps = Math.ceil(canvas.width / wavePeriod) + 1;
+    const xOffset = this.xScale(0) % wavePeriod;
+    ctx.save();
+    ctx.strokeStyle = wavy.color;
+    this.setCtxLineStyle(ctx, wavy);
+    this.setCtxLineWidth(ctx, wavy);
+    for (let i = -1; i < steps; i++) {
+      ctx.beginPath();
+      ctx.arc(i * wavePeriod + xOffset + waveHeight, y, waveHeight, 0, Math.PI);
+      ctx.stroke();
+    }
+    ctx.restore();
+    if (wavy.text) {
+      this.drawText(ctx, wavy, ctx.canvas.width, y);
+    }
+  }
+
+  private drawText(ctx: CanvasRenderingContext2D, refLine: ReferenceLine, x: number, y: number) {
+    const textColor = refLine.textColor || '#000';
+    const fontSize = refLine.fontSize || '10px sans-serif';
+    const textOffsetX = 10;
+    ctx.save();
+    ctx.strokeStyle = textColor;
+    ctx.font = fontSize;
+    ctx.textAlign = 'end';
+    ctx.textBaseline = 'bottom';
+    ctx.fillText(refLine.text, x - textOffsetX, y);
+    ctx.restore();
+  }
+
+  private setCtxLineStyle(ctx: CanvasRenderingContext2D, refLine: ReferenceLine): void {
+    const a = 8;
+    const b = 10;
+    foldReferenceLine(
+      {
+        solid: () => {
+          ctx.setLineDash([]);
+        },
+        dashed: () => {
+          ctx.setLineDash([a, b]);
+        },
+        wavy: () => {
+          ctx.setLineDash([]);
+        },
+      },
+      refLine,
+    );
+  }
+
+  private setCtxLineWidth(ctx: CanvasRenderingContext2D, refLine: ReferenceLine) {
+    const defaultLineWidth = 1;
+    ctx.lineWidth = refLine.lineWidth || defaultLineWidth;
+  }
+
+  private render() {
+    if (!this.ctx || !this.yScale || !this.xScale) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      this.clearCanvas();
+
+      this.data?.forEach((refLine) => {
+        foldReferenceLine(
+          {
+            solid: (solid) => this.drawSolid(solid),
+            dashed: (dashed) => this.drawDashed(dashed),
+            wavy: (wavy) => this.drawWavy(wavy),
+          },
+          refLine,
+        );
+      });
+    });
+  }
+}