@deck.gl-community/graph-layers 9.0.0

package/src/layers/common-layers/marker-layer/marker-mapping.ts

@@ -0,0 +1,428 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+/* eslint-disable */
+export const MarkerMapping = {
+  'bell-filled': {
+    x: 0,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  bell: {
+    x: 32,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'bookmark-filled': {
+    x: 0,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  bookmark: {
+    x: 32,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'cd-filled': {
+    x: 64,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  cd: {
+    x: 64,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  checkmark: {
+    x: 0,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-check-filled': {
+    x: 32,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-check': {
+    x: 64,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-filled': {
+    x: 96,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-i-filled': {
+    x: 96,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-i': {
+    x: 96,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-minus-filled': {
+    x: 0,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-minus': {
+    x: 32,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-plus-filled': {
+    x: 64,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-plus': {
+    x: 96,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-questionmark-filled': {
+    x: 128,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-questionmark': {
+    x: 128,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-slash-filled': {
+    x: 128,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-slash': {
+    x: 128,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-x-filled': {
+    x: 0,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'circle-x': {
+    x: 32,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  circle: {
+    x: 64,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'diamond-filled': {
+    x: 96,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  diamond: {
+    x: 128,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'flag-filled': {
+    x: 160,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  flag: {
+    x: 160,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  gear: {
+    x: 160,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'heart-filled': {
+    x: 160,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  heart: {
+    x: 160,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'location-marker-filled': {
+    x: 0,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'location-marker': {
+    x: 32,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'octagonal-star-filled': {
+    x: 64,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'octagonal-star': {
+    x: 96,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'person-filled': {
+    x: 128,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  person: {
+    x: 160,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'pin-filled': {
+    x: 192,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  pin: {
+    x: 192,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'plus-small': {
+    x: 192,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  plus: {
+    x: 192,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'rectangle-filled': {
+    x: 192,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  rectangle: {
+    x: 192,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'star-filled': {
+    x: 0,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  star: {
+    x: 32,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'tag-filled': {
+    x: 64,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  tag: {
+    x: 96,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'thumb-down-filled': {
+    x: 128,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'thumb-down': {
+    x: 160,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'thumb-up': {
+    x: 192,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'thumb_up-filled': {
+    x: 224,
+    y: 0,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-down-filled': {
+    x: 224,
+    y: 32,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-down': {
+    x: 224,
+    y: 64,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-left-filled': {
+    x: 224,
+    y: 96,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-left': {
+    x: 224,
+    y: 128,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-right-filled': {
+    x: 224,
+    y: 160,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-right': {
+    x: 224,
+    y: 192,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-up-filled': {
+    x: 0,
+    y: 224,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'triangle-up': {
+    x: 32,
+    y: 224,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  'x-small': {
+    x: 64,
+    y: 224,
+    width: 32,
+    height: 32,
+    mask: true
+  },
+  x: {
+    x: 96,
+    y: 224,
+    width: 32,
+    height: 32,
+    mask: true
+  }
+};
+/* eslint-enable */

package/src/layers/common-layers/spline-layer/spline-layer.ts

@@ -0,0 +1,83 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {COORDINATE_SYSTEM, CompositeLayer} from '@deck.gl/core';
+import {PathLayer} from '@deck.gl/layers';
+import {getCurvePoints} from 'cardinal-spline-js';
+// const getCurvePoints = () => {};
+
+/* Constants */
+const defaultProps = {
+  id: 'spline-layer',
+  getData: (d) => d.points,
+  getAngle: (x) => 0,
+  fontSize: 24,
+  coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+  fp64: false
+};
+
+export class SplineLayer extends CompositeLayer {
+  static layerName = 'SplineLayer';
+
+  initializeState() {
+    this.state = {typedEdgeData: []};
+  }
+
+  shouldUpdateState({changeFlags}) {
+    return changeFlags.dataChanged || changeFlags.propsChanged;
+  }
+
+  updateState({props, oldProps, changeFlags}) {
+    super.updateState({props, oldProps, changeFlags} as any);
+    if (changeFlags.dataChanged || changeFlags.propsChanged) {
+      this.updateSplineData();
+    }
+  }
+
+  updateSplineData() {
+    const {data} = this.props as any;
+    const paths = data.reduce((res, d) => {
+      const sourcePosition = (this.props as any).getSourcePosition(d);
+      const targetPosition = (this.props as any).getTargetPosition(d);
+      const controlPoints = (this.props as any).getControlPoints(d);
+
+      // Catmull-Rom curve
+      const serializedControlPoints = controlPoints.toString().split(',');
+
+      // NOTE: we might change the number of points according to the length.
+      // so we can render less segements.
+      // points = [x1, y1, x2, y2, ...];
+      const points = getCurvePoints(
+        [...sourcePosition, ...serializedControlPoints, ...targetPosition],
+        0.5,
+        10
+      );
+      // convert points to [[x1, y1], [x2, y2], ...]
+      const path = [];
+      for (let idx = 0; idx < points.length; idx += 2) {
+        path.push([points[idx], points[idx + 1]]);
+      }
+      res.push(path);
+      return res;
+    }, []);
+    this.setState({paths});
+  }
+
+  renderLayers() {
+    const {coordinateSystem, getColor, getWidth, id, updateTriggers} = this.props as any;
+    const {paths} = this.state;
+    return new PathLayer({
+      id: `${id}-splines`,
+      data: paths as any,
+      getPath: (d) => d,
+      getColor,
+      getWidth,
+      coordinateSystem,
+      updateTriggers
+    });
+  }
+}
+
+SplineLayer.layerName = 'SplineLayer';
+SplineLayer.defaultProps = defaultProps;