V9.0.0

.gitignore

@@ -16,3 +16,10 @@ node_modules/
 .DS_Store
 .turbo
 *.tsbuildinfo
+
+
+# Ignore Yarn cache and unplugged dependencies
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

examples/common/package.json

@@ -7,8 +7,8 @@
   "module": "src/index.js",
   "license": "MIT",
   "dependencies": {
-    "@flowmap.gl/data": "^8.0.2",
-    "@flowmap.gl/layers": "^8.0.2",
+    "@flowmap.gl/data": "workspace:*",
+    "@flowmap.gl/layers": "workspace:*",
     "d3-fetch": "^3.0.1",
     "h3-js": "^4.1.0",
     "lil-gui": "^0.18.2"

examples/react-app/package.json

@@ -11,9 +11,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@deck.gl/react": "^8.9.28",
-    "@flowmap.gl/data": "^8.0.2",
-    "@flowmap.gl/layers": "^8.0.2",
+    "@deck.gl/react": "^9.0.33",
+    "@flowmap.gl/data": "workspace:*",
+    "@flowmap.gl/examples-common": "workspace:^",
+    "@flowmap.gl/layers": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.6"
@@ -27,6 +28,7 @@
     "eslint": "^8.46.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "vite": "^5.4.9"
   }
 }

examples/react-worker-app/package.json

@@ -11,8 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@flowmap.gl/data": "^8.0.2",
-    "@flowmap.gl/layers": "^8.0.2",
+    "@flowmap.gl/data": "workspace:*",
+    "@flowmap.gl/layers": "workspace:*",
     "@loaders.gl/core": "^3.4.14",
     "@loaders.gl/csv": "^3.4.14",
     "comlink": "^4.4.1",

examples/svelte-app/package.json

@@ -8,13 +8,13 @@
     "start": "sirv public --no-clear"
   },
   "devDependencies": {
-    "@deck.gl/core": "^8.9.28",
-    "@deck.gl/layers": "^8.9.28",
-    "@deck.gl/react": "^8.9.28",
-    "@flowmap.gl/data": "^8.0.2",
-    "@flowmap.gl/layers": "^8.0.2",
-    "@luma.gl/constants": "^8.5.21",
-    "@luma.gl/core": "^8.5.21",
+    "@deck.gl/core": "^9.0.33",
+    "@deck.gl/layers": "^9.0.33",
+    "@deck.gl/react": "^9.0.33",
+    "@flowmap.gl/data": "workspace:*",
+    "@flowmap.gl/layers": "workspace:*",
+    "@luma.gl/constants": "^9.0.27",
+    "@luma.gl/core": "^9.0.27",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",

examples/vite-app/package.json

@@ -8,12 +8,12 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@deck.gl/core": "^8.9.28",
-    "@deck.gl/layers": "^8.9.28",
-    "@flowmap.gl/data": "^8.0.2",
-    "@flowmap.gl/layers": "^8.0.2",
-    "@luma.gl/constants": "^8.5.21",
-    "@luma.gl/core": "^8.5.21",
+    "@deck.gl/core": "^9.0.33",
+    "@deck.gl/layers": "^9.0.33",
+    "@flowmap.gl/data": "workspace:*",
+    "@flowmap.gl/layers": "workspace:*",
+    "@luma.gl/constants": "^9.0.27",
+    "@luma.gl/core": "^9.0.27",
     "d3-fetch": "^3.0.1",
     "lil-gui": "^0.18.2",
     "mapbox-gl": "^2.15.0"

package.json

@@ -6,10 +6,12 @@
   "repository": "git@github.com:visgl/flowmap.gl.git",
   "author": "Ilya Boyandin <ilya@boyandin.me>",
   "license": "Apache-2.0",
+  "packageManager": "yarn@4.5.0",
   "scripts": {
     "start": "yarn build && yarn dev",
     "dev": "yarn dev:example",
-    "dev:example": "turbo dev --filter='./examples/react-app' --filter './packages/*'",
+    "_dev:example": "turbo dev --filter './packages/*' --filter='./examples/react-app'",
+    "dev:example": "yarn workspaces foreach --from './examples/react-app' -R run build",
     "build": "turbo run build --filter './packages/*' --concurrency 1",
     "build:docs": "cd docs && yarn && yarn build",
     "prettier": "prettier . --write",
@@ -43,6 +45,6 @@
     "gh-pages": "^5.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
-    "turbo": "^1.12.4"
+    "turbo": "^2.1.3"
   }
 }

packages/data/package.json

@@ -14,6 +14,7 @@
     "prepare": "yarn build"
   },
   "dependencies": {
+    "@math.gl/web-mercator": "^4.1.0",
     "d3-array": "^3.2.4",
     "d3-color": "2 - 3",
     "d3-geo": "^3.1.0",
@@ -39,7 +40,8 @@
     "@types/geojson": "^7946.0.10",
     "@types/kdbush": "^3.0.3",
     "@types/mapbox__geo-viewport": "^0.5.0",
-    "@types/seedrandom": "^3.0.5"
+    "@types/seedrandom": "^3.0.5",
+    "typescript": "^5.6.3"
   },
   "gitHead": "66e2235c27734094d45099c1746e0d334be4972d",
   "publishConfig": {

packages/layers/package.json

@@ -14,13 +14,16 @@
     "prepare": "yarn build"
   },
   "dependencies": {
-    "@flowmap.gl/data": "^8.0.2"
+    "@flowmap.gl/data": "workspace:*"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^8.6.5",
-    "@deck.gl/layers": "^8.6.5",
-    "@luma.gl/constants": "^8.5.10",
-    "@luma.gl/core": "^8.5.10"
+    "@deck.gl/core": "^9.0.33",
+    "@deck.gl/layers": "^9.0.33",
+    "@luma.gl/constants": "^9.0.27",
+    "@luma.gl/core": "^9.0.27"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3"
   },
   "gitHead": "66e2235c27734094d45099c1746e0d334be4972d",
   "publishConfig": {

packages/layers/src/AnimatedFlowLinesLayer/AnimatedFlowLinesLayer.ts

@@ -4,13 +4,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {Layer, picking, project32} from '@deck.gl/core';
-import GL from '@luma.gl/constants';
-import {Geometry, Model} from '@luma.gl/core';
-import FragmentShader from './AnimatedFlowLinesLayerFragment.glsl';
-import VertexShader from './AnimatedFlowLinesLayerVertex.glsl';
+import {UpdateParameters, Layer, picking, project32} from '@deck.gl/core';
+import {GL} from '@luma.gl/constants';
+import {Geometry, Model} from '@luma.gl/engine';
 import {FlowLinesLayerAttributes, RGBA} from '@flowmap.gl/data';
 import {LayerProps} from '../types';
+import fs from './AnimatedFlowLinesLayerFragment.glsl';
+import vs from './AnimatedFlowLinesLayerVertex.glsl';
+
 export interface Props<F> extends LayerProps {
   id: string;
   opacity?: number;
@@ -67,71 +68,71 @@ export default class AnimatedFlowLinesLayer<F> extends Layer {
     super(props);
   }
 
-  getShaders(): Record<string, unknown> {
+  getShaders() {
     return super.getShaders({
-      vs: VertexShader,
-      fs: FragmentShader,
-      modules: [project32, picking],
-      shaderCache: this.context.shaderCache,
+      vs,
+      fs,
+      modules: [
+        project32,
+        picking,
+        //lineUniforms
+      ],
     });
   }
 
   initializeState(): void {
     const attributeManager = this.getAttributeManager();
 
     /* eslint-disable max-len */
-    attributeManager.addInstanced({
+    attributeManager?.addInstanced({
       instanceSourcePositions: {
         size: 3,
-        type: GL.DOUBLE,
+        type: 'float64',
+        fp64: this.use64bitPositions(),
         transition: true,
         accessor: 'getSourcePosition',
       },
       instanceTargetPositions: {
         size: 3,
-        type: GL.DOUBLE,
+        type: 'float64',
+        fp64: this.use64bitPositions(),
         transition: true,
         accessor: 'getTargetPosition',
       },
       instanceColors: {
-        size: 4,
-        type: GL.UNSIGNED_BYTE,
+        size: this.props.colorFormat.length,
+        type: 'unorm8',
         transition: true,
         accessor: 'getColor',
         defaultValue: [0, 0, 0, 255],
       },
       instanceWidths: {
         size: 1,
         transition: true,
-        accessor: 'getThickness',
+        accessor: 'getWidth',
         defaultValue: 1,
       },
       instanceStaggering: {
         accessor: 'getStaggering',
         size: 1,
         transition: false,
       },
-      instancePickable: {
-        accessor: 'getPickable',
-        size: 1,
-        transition: false,
-      },
+      // instancePickable: {
+      //   accessor: 'getPickable',
+      //   size: 1,
+      //   transition: false,
+      // },
     });
     /* eslint-enable max-len */
   }
 
-  getNeedsRedraw(): boolean {
-    return true;
-  }
-
-  updateState({props, oldProps, changeFlags}: Record<string, any>): void {
-    super.updateState({props, oldProps, changeFlags});
+  updateState(params: UpdateParameters<this>): void {
+    super.updateState(params);
 
-    if (changeFlags.extensionsChanged) {
-      const {gl} = this.context;
-      this.state.model?.delete();
-      this.state.model = this._getModel(gl);
-      this.getAttributeManager().invalidateAll();
+    if (params.changeFlags.extensionsChanged) {
+      this.state.model?.destroy();
+      this.state.model = this._getModel();
+      this.getAttributeManager()!.invalidateAll();
     }
   }
 
@@ -150,7 +151,7 @@ export default class AnimatedFlowLinesLayer<F> extends Layer {
       .draw();
   }
 
-  _getModel(gl: WebGLRenderingContext): Record<string, unknown> {
+  protected _getModel(): Model {
     /*
      *  (0, -1)-------------_(1, -1)
      *       |          _,-"  |
@@ -160,18 +161,17 @@ export default class AnimatedFlowLinesLayer<F> extends Layer {
      */
     const positions = [0, -1, 0, 0, 1, 0, 1, -1, 0, 1, 1, 0];
 
-    return new Model(
-      gl,
-      Object.assign({}, this.getShaders(), {
-        id: this.props.id,
-        geometry: new Geometry({
-          drawMode: GL.TRIANGLE_STRIP,
-          attributes: {
-            positions: new Float32Array(positions),
-          },
-        }),
-        isInstanced: true,
+    return new Model(this.context.device, {
+      ...this.getShaders(),
+      id: this.props.id,
+      bufferLayout: this.getAttributeManager()!.getBufferLayouts(),
+      geometry: new Geometry({
+        topology: 'triangle-strip',
+        attributes: {
+          positions: {size: 3, value: new Float32Array(positions)},
+        },
       }),
-    );
+      isInstanced: true,
+    });
   }
 }

packages/layers/src/FlowCirclesLayer/FlowCirclesLayer.ts

@@ -5,8 +5,8 @@
  */
 
 import {Layer, picking, project32} from '@deck.gl/core';
-import GL from '@luma.gl/constants';
-import {Geometry, Model} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {Geometry, Model} from '@luma.gl/engine';
 import FragmentShader from './FlowCirclesLayerFragment.glsl';
 import VertexShader from './FlowCirclesLayerVertex.glsl';
 import {FlowCirclesLayerAttributes, RGBA} from '@flowmap.gl/data';

packages/layers/src/FlowLinesLayer/FlowLinesLayer.ts

@@ -5,8 +5,8 @@
  */
 
 import {Layer, picking, project32} from '@deck.gl/core';
-import GL from '@luma.gl/constants';
-import {Geometry, Model} from '@luma.gl/core';
+import {GL} from '@luma.gl/constants';
+import {Geometry, Model} from '@luma.gl/engine';
 import FragmentShader from './FlowLinesLayerFragment.glsl';
 import VertexShader from './FlowLinesLayerVertex.glsl';
 import {FlowLinesLayerAttributes, RGBA} from '@flowmap.gl/data';

packages/layers/src/FlowmapLayer.ts

@@ -133,7 +133,7 @@ export default class FlowmapLayer<
     highlightColor: 'orange',
     maxTopFlowsDisplayNum: 5000,
   };
-  state: State<L, F> | undefined;
+  state: State<L, F> = {} as State<L, F>;
 
   public constructor(props: FlowmapLayerProps<L, F>) {
     super({

packages/layers/typings.d.ts

@@ -1,4 +1 @@
-declare module '@deck.gl/core';
 declare module '@deck.gl/layers';
-declare module '@luma.gl/constants';
-declare module '@luma.gl/core';

turbo.json

@@ -1,12 +1,13 @@
 {
   "$schema": "https://turbo.build/schema.json",
-  "pipeline": {
+  "tasks": {
     "build": {
-      "outputs": ["packages/*/dist"]
+      "outputs": [
+        "packages/*/dist"
+      ]
     },
     "lint": {},
-    "dev": {
-    },
+    "dev": {},
     "test": {},
     "test:watch": {
       "cache": false