@webviz/subsurface-viewer 0.0.1-alpha.1 → 0.0.2-alpha.2

package/src/layers/axes/axesLayer.ts

@@ -1,692 +0,0 @@
-import {
-    COORDINATE_SYSTEM,
-    Color,
-    CompositeLayer,
-    Viewport,
-    UpdateParameters,
-    LayersList,
-    OrthographicViewport,
-} from "@deck.gl/core/typed";
-import BoxLayer from "./boxLayer";
-import { Position3D, ExtendedLayerProps } from "../utils/layerTools";
-import { TextLayer } from "@deck.gl/layers/typed";
-import { cloneDeep } from "lodash";
-
-export interface AxesLayerProps<D> extends ExtendedLayerProps<D> {
-    /**
-     *  [xmin, ymin, zmin, xmax, ymax, zmax]
-     *  Note that z values are default interptreted as going downwards. See property "ZIncreasingDownwards".
-     *  So by default zmax is expected to be bigger than zmin.
-     */
-    bounds: [number, number, number, number, number, number];
-    labelColor?: Color;
-    labelFontSize?: number;
-    fontFamily?: string;
-    axisColor?: Color;
-    /** If true means that input z values are interpreted as depths.
-     * For example a depth of 2000 will be further down than a depth value of 1000.
-     * Default true.
-     */
-    ZIncreasingDownwards: boolean;
-
-    // Non public properties:
-    setReportedBoundingBox?: React.Dispatch<
-        React.SetStateAction<[number, number, number, number, number, number]>
-    >;
-}
-
-const defaultProps = {
-    "@@type": "AxesLayer",
-    name: "Axes",
-    id: "axes-layer",
-    visible: true,
-    ZIncreasingDownwards: true,
-};
-
-type TextLayerData = {
-    label: string;
-    from: Position3D; // tick line start
-    to: Position3D; // tick line end
-    size: number; // font size
-};
-
-export default class AxesLayer extends CompositeLayer<AxesLayerProps<unknown>> {
-    rebuildData(reportBoundingBox: boolean): void {
-        const bounds = cloneDeep(this.props.bounds);
-
-        if (this.props.ZIncreasingDownwards) {
-            bounds[2] *= -1;
-            bounds[5] *= -1;
-        }
-
-        if (bounds[2] > bounds[5]) {
-            // Swap z values to ensure smallest first.
-            [bounds[2], bounds[5]] = [bounds[5], bounds[2]];
-        }
-
-        if (bounds[0] > bounds[3]) {
-            // Swap x values to ensure smallest first.
-            [bounds[0], bounds[3]] = [bounds[3], bounds[0]];
-        }
-
-        if (bounds[1] > bounds[4]) {
-            // Swap y values to ensure smallest first.
-            [bounds[1], bounds[4]] = [bounds[4], bounds[1]];
-        }
-
-        const box_lines = GetBoxLines(bounds);
-
-        const is_orthographic =
-            this.context.viewport.constructor === OrthographicViewport;
-
-        const [tick_lines, tick_labels] = GetTickLines(
-            this.props.ZIncreasingDownwards,
-            is_orthographic,
-            bounds,
-            this.context.viewport
-        );
-
-        const textlayerData = maketextLayerData(
-            is_orthographic,
-            tick_lines,
-            tick_labels,
-            bounds,
-            this.props.labelFontSize
-        );
-
-        this.setState({ box_lines, tick_lines, textlayerData });
-
-        if (
-            typeof this.props.setReportedBoundingBox !== "undefined" &&
-            reportBoundingBox
-        ) {
-            this.props.setReportedBoundingBox(bounds);
-        }
-    }
-
-    initializeState(): void {
-        const reportBoundingBox = true;
-        this.rebuildData(reportBoundingBox);
-    }
-
-    shouldUpdateState({
-        props,
-        oldProps,
-        context,
-        changeFlags,
-    }: UpdateParameters<this>): boolean {
-        return (
-            super.shouldUpdateState({
-                props,
-                oldProps,
-                context,
-                changeFlags,
-            }) || changeFlags.viewportChanged
-        );
-    }
-
-    updateState(): void {
-        const reportBoundingBox = false;
-        this.rebuildData(reportBoundingBox);
-    }
-
-    getAnchor(d: TextLayerData, is_orthographic: boolean): string {
-        const is_xaxis = d.from[1] !== d.to[1];
-        if (is_orthographic && is_xaxis) {
-            return "middle";
-        }
-
-        const screen_from = this.context.viewport.project(d.from);
-        const screen_to = this.context.viewport.project(d.to);
-        const is_labels = d.label !== "X" && d.label !== "Y" && d.label !== "Z"; // labels on axis or XYZ annotations
-        if (is_labels) {
-            if (screen_from[0] < screen_to[0]) {
-                return "start";
-            }
-        }
-
-        return "end";
-    }
-
-    getLabelPosition(d: TextLayerData): Position3D {
-        const is_labels = d.label !== "X" && d.label !== "Y" && d.label !== "Z"; // labels on axis or XYZ annotations
-        if (is_labels) {
-            const tick_vec = [d.to[0] - d.from[0], d.to[1] - d.from[1]];
-            if (d.to[2] && d.from[2]) tick_vec.push(d.to[2] - d.from[2]);
-
-            const s = 0.5;
-            return [
-                d.to[0] + s * tick_vec[0],
-                d.to[1] + s * tick_vec[1],
-                d.to[2] + s * tick_vec[2],
-            ];
-        } else {
-            // XYZ axis annotaion.
-            return d.to;
-        }
-    }
-
-    getBaseLine(d: TextLayerData, is_orthographic: boolean): string {
-        const is_x_annotaion = d.label === "X";
-        if (is_x_annotaion) {
-            return "center";
-        }
-
-        const is_xaxis_label = d.from[1] !== d.to[1];
-        return is_orthographic && is_xaxis_label ? "top" : "center";
-    }
-
-    renderLayers(): LayersList {
-        const is_orthographic =
-            this.context.viewport.constructor === OrthographicViewport;
-
-        const lines = [...this.state["box_lines"], ...this.state["tick_lines"]];
-
-        const box_layer = new BoxLayer(
-            this.getSubLayerProps({
-                lines,
-                coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
-                color: this.props.axisColor || [0, 0, 0, 255],
-            })
-        );
-
-        const text_layer = new TextLayer(
-            this.getSubLayerProps({
-                fontFamily: this.props.fontFamily ?? "Monaco, monospace",
-                data: this.state["textlayerData"],
-                id: "text-layer",
-                pickable: true,
-                getPosition: (d: TextLayerData) => this.getLabelPosition(d),
-                getText: (d: TextLayerData) => d.label,
-                sizeUnits: "pixels",
-                getSize: (d: TextLayerData) => d.size,
-                getAngle: 0,
-                getTextAnchor: (d: TextLayerData) =>
-                    this.getAnchor(d, is_orthographic),
-                getAlignmentBaseline: (d: TextLayerData) =>
-                    this.getBaseLine(d, is_orthographic),
-                coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
-                getColor: this.props.labelColor || [0, 0, 0, 255],
-            })
-        );
-
-        return [box_layer, text_layer];
-    }
-}
-
-AxesLayer.layerName = "AxesLayer";
-AxesLayer.defaultProps = defaultProps;
-
-//-- Local functions. -------------------------------------------------
-
-function LineLengthInPixels(
-    p0: Position3D,
-    p1: Position3D,
-    viewport: Viewport
-): number {
-    const screen_from = viewport.project(p0);
-    const screen_to = viewport.project(p1);
-
-    const v = [
-        screen_from[0] - screen_to[0],
-        screen_from[1] - screen_to[1],
-        screen_from[2] - screen_to[2],
-    ];
-    const L = Math.sqrt(v[0] * v[0] + v[1] * v[1]); // Length of axis on screen in pixles.
-    return L;
-}
-
-function maketextLayerData(
-    is_orthographic: boolean,
-    tick_lines: number[],
-    tick_labels: string[],
-    bounds: [number, number, number, number, number, number],
-    labelFontSize?: number
-): [TextLayerData] {
-    const x_min = bounds[0];
-    const x_max = bounds[3];
-
-    const y_min = bounds[1];
-    const y_max = bounds[4];
-
-    const z_min = bounds[2];
-    const z_max = bounds[5];
-
-    const dx = Math.abs(x_max - x_min);
-    const dy = Math.abs(y_max - y_min);
-    const dz = Math.abs(z_max - z_min);
-
-    const offset = ((dx + dy + dz) / 3.0) * 0.1;
-
-    const data = [
-        {
-            label: "X",
-            from: [0.0, 0.0, 0.0],
-            to: [x_max + offset, y_min, z_min],
-            size: labelFontSize ?? 26,
-        },
-        {
-            label: "Y",
-            from: [0.0, 0.0, 0.0],
-            to: [x_min, y_max + offset, z_min],
-            size: labelFontSize ?? 26,
-        },
-    ];
-
-    if (!is_orthographic) {
-        const z_axis_annotaion = {
-            label: "Z",
-            from: [0.0, 0.0, 0.0],
-            to: [x_min, y_min, z_max + offset],
-            size: labelFontSize ?? 26,
-        };
-        data.push(z_axis_annotaion);
-    }
-
-    for (let i = 0; i < tick_lines.length / 6; i++) {
-        const from = [
-            tick_lines[6 * i + 0],
-            tick_lines[6 * i + 1],
-            tick_lines[6 * i + 2],
-        ];
-        const to = [
-            tick_lines[6 * i + 3],
-            tick_lines[6 * i + 4],
-            tick_lines[6 * i + 5],
-        ];
-        const label = tick_labels[i];
-
-        data.push({
-            label: label,
-            from: from,
-            to: to,
-            size: labelFontSize ?? 11,
-        });
-    }
-
-    return data as [TextLayerData];
-}
-
-function GetTicks(
-    min: number,
-    max: number,
-    axis_pixel_length: number
-): number[] {
-    let step = Math.min(Math.round(axis_pixel_length / 100) + 1, 20);
-    const range = max - min;
-
-    const delta = Math.abs(range) / step;
-    let decade = 1;
-    if (delta >= 10) {
-        const logde = Math.log10(delta);
-        const pot = Math.floor(logde);
-        decade = Math.pow(10.0, pot);
-    }
-    let scaled_delta = Math.round(delta / decade);
-    if (scaled_delta == 3) scaled_delta = 2;
-    else if (scaled_delta == 4 || scaled_delta == 6 || scaled_delta == 7)
-        scaled_delta = 5;
-    else if (scaled_delta > 7) scaled_delta = 10;
-    else if (scaled_delta < 1) scaled_delta = 1;
-
-    const incr = scaled_delta * decade;
-    const start = Math.ceil(min / incr) * incr;
-    const stop = Math.floor(max / incr) * incr;
-    const calc_step = Math.floor(Math.abs(stop - start) / incr);
-    step = calc_step > 0 ? calc_step : 0;
-
-    const ticks: number[] = [];
-
-    //ticks.push(min);
-    for (let i = 0; i <= step; i++) {
-        const x = start + i * incr;
-        ticks.push(x);
-    }
-
-    return ticks;
-}
-
-function GetTickLines(
-    isZIncreasingDownwards: boolean,
-    is_orthographic: boolean,
-    bounds: [number, number, number, number, number, number],
-    viewport: Viewport
-): [number[], string[]] {
-    const ndecimals = 0;
-    const n_minor_ticks = 3;
-
-    const x_min = bounds[0];
-    const x_max = bounds[3];
-
-    const y_min = bounds[1];
-    const y_max = bounds[4];
-
-    const z_min = bounds[2];
-    const z_max = bounds[5];
-
-    const lines: number[] = [];
-    const tick_labels: string[] = [];
-
-    // ADD TICK LINES.
-    const dx = x_max - x_min;
-    const dy = y_max - y_min;
-    const dz = z_max - z_min;
-
-    let x_tick = 0.0;
-    let y_tick = 0;
-    let z_tick = 0;
-
-    const delta = ((dx + dy + dz) / 3.0) * 0.025;
-
-    const Lz = LineLengthInPixels(
-        [x_min, y_min, z_min],
-        [x_min, y_min, z_max],
-        viewport
-    );
-
-    // Z tick marks. Only in 3D.
-    if (!is_orthographic) {
-        const z_ticks = GetTicks(z_min, z_max, Lz);
-
-        x_tick = x_min;
-        y_tick = y_min;
-        for (let i = 0; i < z_ticks.length; i++) {
-            const tick = z_ticks[i];
-
-            const sign = isZIncreasingDownwards ? -1 : 1;
-            const tick_label_num = sign * tick;
-            const label = tick_label_num.toFixed(ndecimals);
-            tick_labels.push(label);
-
-            // tick line start
-            lines.push(x_tick, y_tick, tick);
-
-            // tick line end. let tick mark point 45 degrees out from z axis.
-            const x = -delta * Math.cos(3.14157 / 4);
-            const y = -delta * Math.sin(3.14157 / 4);
-            lines.push(x_tick + x, y_tick + y, tick);
-        }
-
-        // Add minor Z ticks.
-        if (z_ticks.length > 1) {
-            const tick1 = z_ticks[0];
-            const tick2 = z_ticks[1];
-            const d = (tick2 - tick1) / (n_minor_ticks + 1);
-            const z_start = tick1;
-
-            // up
-            let i = 0;
-            while (z_start + (i + 1) * d < z_max) {
-                const tick = z_start + (i + 1) * d;
-                tick_labels.push("");
-                i++;
-                // tick line start
-                lines.push(x_tick, y_tick, tick);
-
-                // tick line end.
-                const x = -0.5 * delta * Math.cos(3.14157 / 4);
-                const y = -0.5 * delta * Math.sin(3.14157 / 4);
-                lines.push(x_tick + x, y_tick + y, tick);
-            }
-
-            // down
-            i = 0;
-            while (z_start - (i + 1) * d > z_min) {
-                const tick = z_start - (i + 1) * d;
-                tick_labels.push("");
-                i++;
-                // tick line start
-                lines.push(x_tick, y_tick, tick);
-
-                // tick line end.
-                const x = -0.5 * delta * Math.cos(3.14157 / 4);
-                const y = -0.5 * delta * Math.sin(3.14157 / 4);
-                lines.push(x_tick + x, y_tick + y, tick);
-            }
-        }
-    }
-
-    // X axis labels.
-    const Lx = LineLengthInPixels(
-        [x_min, y_min, z_min],
-        [x_max, y_min, z_min],
-        viewport
-    );
-    const x_ticks = GetTicks(x_min, x_max, Lx);
-    y_tick = y_min;
-    z_tick = z_min;
-    for (let i = 0; i < x_ticks.length; i++) {
-        const tick = x_ticks[i];
-
-        const label = tick.toFixed(ndecimals);
-        tick_labels.push(label);
-
-        // tick line start
-        lines.push(tick, y_tick, z_tick);
-
-        // tick line end.
-        const z = 0.0;
-        const y = -delta;
-        lines.push(tick, y_tick + y, z_tick + z);
-    }
-
-    // Add minor X ticks.
-    if (x_ticks.length > 1) {
-        const tick1 = x_ticks[0];
-        const tick2 = x_ticks[1];
-        const d = (tick2 - tick1) / (n_minor_ticks + 1);
-        const x_start = tick1;
-
-        // up
-        let i = 0;
-        while (x_start + (i + 1) * d < x_max) {
-            const tick = x_start + (i + 1) * d;
-            tick_labels.push("");
-            i++;
-            // tick line start
-            lines.push(tick, y_tick, z_tick);
-
-            // tick line end.
-            const z = 0.0;
-            const y = -0.5 * delta;
-            lines.push(tick, y_tick + y, z_tick + z);
-        }
-
-        // down
-        i = 0;
-        while (x_start - (i + 1) * d > x_min) {
-            const tick = x_start - (i + 1) * d;
-            tick_labels.push("");
-            i++;
-            // tick line start
-            lines.push(tick, y_tick, z_tick);
-
-            // tick line end.
-            const z = 0.0;
-            const y = -0.5 * delta;
-            lines.push(tick, y_tick + y, z_tick + z);
-        }
-    }
-
-    // Y axis labels.
-    const Ly = LineLengthInPixels(
-        [x_min, y_min, z_min],
-        [x_min, y_max, z_min],
-        viewport
-    );
-    const y_ticks = GetTicks(y_min, y_max, Ly);
-    for (let i = 0; i < y_ticks.length; i++) {
-        const tick = y_ticks[i];
-
-        const label = tick.toFixed(ndecimals);
-        tick_labels.push(label);
-
-        const x_tick = x_min;
-        const z_tick = z_min;
-
-        // tick line start
-        lines.push(x_tick, tick, z_tick);
-
-        // tick line end.
-        const z = 0.0;
-        const x = -delta;
-        lines.push(x_tick + x, tick, z_tick + z);
-
-        // Add minor Y ticks.
-        if (y_ticks.length > 1) {
-            const tick1 = y_ticks[0];
-            const tick2 = y_ticks[1];
-            const d = (tick2 - tick1) / (n_minor_ticks + 1);
-            const y_start = tick1;
-
-            // up
-            let i = 0;
-            while (y_start + (i + 1) * d < y_max) {
-                const tick = y_start + (i + 1) * d;
-                tick_labels.push("");
-                i++;
-                // tick line start
-                lines.push(x_tick, tick, z_tick);
-
-                // tick line end.
-                const z = 0.0;
-                const x = -0.5 * delta;
-                lines.push(x_tick + x, tick, z_tick + z);
-            }
-
-            // down
-            i = 0;
-            while (y_start - (i + 1) * d > y_min) {
-                const tick = y_start - (i + 1) * d;
-                tick_labels.push("");
-                i++;
-                // tick line start
-                lines.push(x_tick, tick, z_tick);
-
-                // tick line end.
-                const z = 0.0;
-                const x = -0.5 * delta;
-                lines.push(x_tick + x, tick, z_tick + z);
-            }
-        }
-    }
-
-    return [lines, tick_labels];
-}
-
-function GetBoxLines(
-    bounds: [number, number, number, number, number, number]
-): number[] {
-    const x_min = bounds[0];
-    const x_max = bounds[3];
-
-    const y_min = bounds[1];
-    const y_max = bounds[4];
-
-    const z_min = bounds[2];
-    const z_max = bounds[5];
-
-    // ADD LINES OF BOUNDING BOX.
-    const lines = [
-        // TOP
-        x_min,
-        y_min,
-        z_min,
-
-        x_max,
-        y_min,
-        z_min,
-
-        x_min,
-        y_min,
-        z_min,
-
-        x_min,
-        y_max,
-        z_min,
-
-        x_min,
-        y_max,
-        z_min,
-
-        x_max,
-        y_max,
-        z_min,
-
-        x_max,
-        y_max,
-        z_min,
-
-        x_max,
-        y_min,
-        z_min,
-
-        // BOTTOM
-        x_min,
-        y_min,
-        z_max,
-
-        x_max,
-        y_min,
-        z_max,
-
-        x_min,
-        y_min,
-        z_max,
-
-        x_min,
-        y_max,
-        z_max,
-
-        x_min,
-        y_max,
-        z_max,
-
-        x_max,
-        y_max,
-        z_max,
-
-        x_max,
-        y_max,
-        z_max,
-
-        x_max,
-        y_min,
-        z_max,
-
-        // PILLARS
-        x_min,
-        y_min,
-        z_min,
-
-        x_min,
-        y_min,
-        z_max,
-
-        x_max,
-        y_min,
-        z_min,
-
-        x_max,
-        y_min,
-        z_max,
-
-        x_max,
-        y_max,
-        z_min,
-
-        x_max,
-        y_max,
-        z_max,
-
-        x_min,
-        y_max,
-        z_min,
-
-        x_min,
-        y_max,
-        z_max,
-    ];
-
-    return lines;
-}