@webviz/subsurface-viewer 0.0.1-alpha.1

package/src/layers/axes/boxLayer.ts

@@ -0,0 +1,71 @@
+import {
+    COORDINATE_SYSTEM,
+    Color,
+    Layer,
+    project,
+    UpdateParameters,
+} from "@deck.gl/core/typed";
+import GL from "@luma.gl/constants";
+import { Model, Geometry } from "@luma.gl/engine";
+import fragmentShader from "./axes-fragment.glsl";
+import gridVertex from "./grid-vertex.glsl";
+import { DeckGLLayerContext } from "../../components/Map";
+import { ExtendedLayerProps } from "../utils/layerTools";
+
+export interface BoxLayerProps<D> extends ExtendedLayerProps<D> {
+    lines: [number]; // from pt , to pt.
+    color: Color;
+}
+
+const defaultProps = {
+    name: "Box",
+    id: "box-layer",
+    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+    lines: [],
+    color: [0, 0, 0, 1],
+};
+
+export default class BoxLayer extends Layer<BoxLayerProps<unknown>> {
+    initializeState(context: DeckGLLayerContext): void {
+        const { gl } = context;
+        this.setState(this._getModels(gl));
+    }
+
+    shouldUpdateState(): boolean {
+        return true;
+    }
+
+    updateState({ context }: UpdateParameters<this>): void {
+        const { gl } = context;
+        this.setState(this._getModels(gl));
+    }
+
+    //eslint-disable-next-line
+    _getModels(gl: any) {
+        const color = this.props.color.map((x) => (x ?? 0) / 255);
+        const grids = new Model(gl, {
+            id: `${this.props.id}-grids`,
+            vs: gridVertex,
+            fs: fragmentShader,
+            uniforms: { uColor: color },
+            geometry: new Geometry({
+                drawMode: GL.LINES,
+                attributes: {
+                    positions: new Float32Array(this.props.lines),
+                },
+                vertexCount: this.props.lines.length / 3,
+            }),
+            modules: [project],
+            isInstanced: false, // This only works when set to false.
+        });
+
+        return {
+            model: grids,
+            models: [grids].filter(Boolean),
+            modelsByName: { grids },
+        };
+    }
+}
+
+BoxLayer.layerName = "BoxLayer";
+BoxLayer.defaultProps = defaultProps;

package/src/layers/axes/grid-vertex.glsl.ts

@@ -0,0 +1,14 @@
+const gridVertex = `#version 300 es
+#define SHADER_NAME graph-layer-axis-vertex-shader
+
+precision highp float;
+
+in  vec3 positions;
+
+void main(void) {
+   vec3 position_commonspace = project_position(positions);
+   gl_Position = project_common_position_to_clipspace(vec4(position_commonspace, 0.0));
+}
+`;
+
+export default gridVertex;

package/src/layers/axes2d/axes2DLayer.stories.tsx

@@ -0,0 +1,150 @@
+import React from "react";
+import SubsurfaceViewer from "../../SubsurfaceViewer";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { View } from "../../../..";
+import { ViewsType } from "../../components/Map";
+
+type NumberQuad = [number, number, number, number];
+
+export default {
+    component: SubsurfaceViewer,
+    title: "SubsurfaceViewer / Axes2D",
+} as ComponentMeta<typeof SubsurfaceViewer>;
+
+const layerProps = {
+    marginH: 80, // Horizontal margin (in pixels)
+    marginV: 30, // Vertical margin (in pixels)
+    isLeftRuler: true,
+    isRightRuler: false,
+    isBottomRuler: true,
+    isTopRuler: false,
+    backgroundColor: [155, 155, 155, 255],
+};
+
+const meshMapLayerPng = {
+    "@@type": "MapLayer",
+    id: "mesh-layer",
+    meshUrl: "hugin_depth_25_m.png",
+    frame: {
+        origin: [432150, 6475800],
+        count: [291, 229],
+        increment: [25, 25],
+        rotDeg: 0,
+    },
+    propertiesUrl: "kh_netmap_25_m.png",
+    contours: [0, 100],
+    isContoursDepth: true,
+    gridLines: false,
+    material: true,
+    smoothShading: true,
+    colorMapName: "Physics",
+};
+
+const axes2D = {
+    "@@type": "Axes2DLayer",
+    id: "axes-layer2D",
+    ...layerProps,
+};
+
+export const Base: ComponentStory<typeof SubsurfaceViewer> = (args) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+Base.args = {
+    id: "map",
+    layers: [meshMapLayerPng, axes2D],
+
+    bounds: [432150, 6475800, 439400, 6481500],
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: false,
+            },
+        ],
+    },
+};
+
+export const ColoredTextAndBackGround: ComponentStory<
+    typeof SubsurfaceViewer
+> = (args) => {
+    return <SubsurfaceViewer {...args} />;
+};
+
+ColoredTextAndBackGround.args = {
+    id: "map",
+    layers: [
+        meshMapLayerPng,
+        // Yellow background, blue text.
+        {
+            ...axes2D,
+            axisColor: [100, 100, 255],
+            backgroundColor: [255, 255, 100],
+        },
+    ],
+
+    bounds: [432150, 6475800, 439400, 6481500],
+    views: {
+        layout: [1, 1],
+        viewports: [
+            {
+                id: "view_1",
+                show3D: false,
+            },
+        ],
+    },
+};
+
+//===========================================================
+const MatrixStory = () => {
+    const views: ViewsType = {
+        layout: [2, 2],
+        marginPixels: 10,
+        viewports: [
+            {
+                id: "view_1",
+                show3D: false,
+                layerIds: ["mesh-layer", "axes-layer2D"],
+                isSync: false,
+            },
+            {
+                id: "view_2",
+                show3D: false,
+                layerIds: ["mesh-layer", "axes-layer2D"],
+                isSync: false,
+            },
+            {
+                id: "view_3",
+                show3D: false,
+                layerIds: ["mesh-layer", "axes-layer2D"],
+                isSync: false,
+            },
+            {
+                id: "view_4",
+                show3D: false,
+                layerIds: ["mesh-layer", "axes-layer2D"],
+                isSync: false,
+            },
+        ],
+    };
+
+    const bounds = [432150, 6475800, 439400, 6481501] as NumberQuad;
+    return (
+        <SubsurfaceViewer
+            id={"test"}
+            layers={[meshMapLayerPng, axes2D]}
+            views={views}
+            bounds={bounds}
+        >
+            <View id="view_1"></View>
+            <View id="view_2"></View>
+            <View id="view_3"></View>
+            <View id="view_4"></View>
+        </SubsurfaceViewer>
+    );
+};
+
+export const Matrix: ComponentStory<typeof MatrixStory> = () => {
+    return <MatrixStory />;
+};