Tech Debt: V7 Examples directory & upgrade dependencies

.prettierrc

@@ -10,6 +10,10 @@
   "trailingComma": "none",
   "parser": "typescript",
   "overrides": [
+    {
+      "files": ["*.css"],
+      "options": { "parser": "css" }
+    },
     {
       "files": ["*.json", "*rc"],
       "options": { "parser": "json" }

examples/collide/data.ts → examples-v6/collide/data.ts

@@ -1,4 +1,4 @@
-import { Node, Edge } from '../../src/'
+import { Node, Edge } from '../../src'
 
 const graph: { nodes: Record<string, Node & { type: string }>; edges: Record<string, Edge> } = {
   nodes: {

examples/collide/index.ts → examples-v6/collide/index.ts

@@ -1,6 +1,6 @@
 import Stats from 'stats.js'
 import * as Collide from '../../src/layout/collide'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 import * as WebGL from '../../src/renderers/webgl'
 import graphData from './data'
 

examples/fixed-nodes/index.ts → examples-v6/fixed-nodes/index.ts

@@ -4,7 +4,7 @@ import * as Hierarchy from '../../src/layout/hierarchy'
 import * as Collide from '../../src/layout/collide'
 import * as Radial from '../../src/layout/radial'
 import * as WebGL from '../../src/renderers/webgl'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 import raw from './data'
 
 type Node = Graph.Node & { cluster?: number; size?: number }

examples/landing/index.ts → examples-v6/landing/index.ts

@@ -2,7 +2,7 @@ import clustersKmeans from '@turf/clusters-kmeans'
 import * as Force from '../../src/layout/force'
 import * as Hierarchy from '../../src/layout/hierarchy'
 import * as WebGL from '../../src/renderers/webgl'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 import raw from './data'
 
 type Node = Graph.Node & { cluster?: number; size?: number }

examples/pixi-icons/index.ts → examples-v6/pixi-icons/index.ts

@@ -2,7 +2,7 @@ import Stats from 'stats.js'
 import * as Force from '../../src/layout/force'
 import * as Fisheye from '../../src/layout/fisheye'
 import * as Cluster from '../../src/layout/cluster'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 import * as WebGL from '../../src/renderers/webgl'
 import { company } from '../assets/icons'
 import person from '../assets/person.png'

examples/pixi-perf/index.ts → examples-v6/pixi-perf/index.ts

@@ -1,6 +1,6 @@
 import Stats from 'stats.js'
 import * as Force from '../../src/layout/force'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 import * as Zoom from '../../src/bindings/native/zoom'
 import * as Download from '../../src/bindings/native/download'
 import * as WebGL from '../../src/renderers/webgl'

examples/pixi-subgraphs/index.ts → examples-v6/pixi-subgraphs/index.ts

@@ -2,7 +2,7 @@ import Stats from 'stats.js'
 import * as Cluster from '../../src/layout/cluster'
 import * as Fisheye from '../../src/layout/fisheye'
 import * as WebGL from '../../src/renderers/webgl'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 
 export const stats = new Stats()
 stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom

examples/pixi/index.ts → examples-v6/pixi/index.ts

@@ -7,7 +7,7 @@ import * as Download from '../../src/bindings/native/download'
 import * as Cluster from '../../src/layout/cluster'
 import * as WebGL from '../../src/renderers/webgl'
 import * as Png from '../../src/renderers/image'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 
 export const stats = new Stats()
 stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom

examples/radial/index.ts → examples-v6/radial/index.ts

@@ -1,6 +1,6 @@
 import Stats from 'stats.js'
 import * as Radial from '../../src/layout/radial'
-import * as Graph from '../../src/'
+import * as Graph from '../../src'
 import * as WebGL from '../../src/renderers/webgl'
 import graphData from '../../data/tmp-data'
 

examples-v6/tsconfig.json

@@ -0,0 +1,64 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
+    "lib": ["es2015", "es2017", "dom"] /* Specify library files to be included in the compilation. */,
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true /* Generates corresponding '.map' file. */,
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./dist" /* Redirect output structure to the directory. */,
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* Enable strict null checks. */,
+    "strictFunctionTypes": true /* Enable strict checking of function types. */,
+    "strictBindCallApply": true /* Enable strict 'bind', 'call', and 'apply' methods on functions. */,
+    "strictPropertyInitialization": true /* Enable strict checking of property initialization in classes. */,
+    "noImplicitThis": true /* Raise error on 'this' expressions with an implied 'any' type. */,
+    "alwaysStrict": true /* Parse in strict mode and emit "use strict" for each source file. */,
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+
+    /* Module Resolution Options */
+    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "include": ["./**/*"]
+}

examples/native/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="/src/index.css" />
+    <title>Graph</title>
+  </head>
+  <body>
+    <div id="examples">
+      <h1>Native Examples</h1>
+      <ul>
+        <li>
+          <a href="/src/simple/simple.html">Simple Trellis Example</a>
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>

examples/native/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@sayari/native",
+  "version": "1.0.0",
+  "description": "Trellis code examples with native renderer",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "dev": "vite",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sayari-analytics/trellis.git"
+  },
+  "keywords": ["trellis", "examples"],
+  "author": "Mikey Gower",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/sayari-analytics/trellis/issues"
+  },
+  "homepage": "https://github.com/sayari-analytics/trellis#readme"
+}

examples/native/src/index.css

@@ -0,0 +1,17 @@
+@import '../../reset';
+
+#examples {
+  display: flex;
+  flex-direction: column;
+  margin: 2rem;
+  gap: 1rem;
+}
+
+#graph {
+  position: absolute;
+  left: 5rem;
+  top: 3rem;
+}
+#graph canvas {
+  border: 1px solid #eee;
+}

examples/native/src/simple/index.ts

@@ -0,0 +1,147 @@
+import * as Renderer from '@trellis/renderers/webgl'
+import * as Graph from '@trellis/index'
+
+const sampleCoordinatePlane = function* (count: number, step: number, sample: number) {
+  const side = Math.sqrt(count / sample) * step
+  let i = 0
+
+  for (let x = -(side / 2); x < side / 2; x += step) {
+    for (let y = -(side / 2); y < side / 2; y += step) {
+      if (i >= count) {
+        return
+      }
+
+      if (Math.random() > sample) {
+        i++
+        yield [x, y]
+      }
+    }
+  }
+}
+
+const PURPLE = '#7A5DC5'
+const LIGHT_PURPLE = '#CAD'
+
+const NODE_STYLE: Graph.NodeStyle = {
+  color: PURPLE,
+  stroke: [{ width: 2, color: LIGHT_PURPLE }],
+  icon: { type: 'textIcon', text: 'T', family: 'sans-serif', size: 14, color: '#fff', weight: '400' },
+  label: {
+    position: 'bottom',
+    color: LIGHT_PURPLE
+  }
+}
+
+const NODE_HOVER_STYLE: Graph.NodeStyle = {
+  color: '#f66',
+  stroke: [{ width: 2, color: '#fcc' }],
+  label: { position: 'bottom' },
+  icon: { type: 'textIcon', text: 'L', family: 'sans-serif', size: 14, color: '#fff', weight: '400' }
+}
+
+const EDGE_STYLE: Graph.EdgeStyle = {
+  width: 1,
+  stroke: '#aaa',
+  arrow: 'reverse'
+}
+
+const EDGE_HOVER_STYLE: Graph.EdgeStyle = {
+  width: 2,
+  stroke: '#f66',
+  arrow: 'reverse'
+}
+
+// const force = Force.Layout()
+// const hierarchy = Hierarchy.Layout()
+let nodes: Graph.Node[] = []
+let edges: Graph.Edge[] = []
+const step = 50
+const coordinates: Record<number, Set<number>> = {}
+for (const [_x, _y] of sampleCoordinatePlane(50000, step, 0.5)) {
+  const x = Math.round(_x)
+  const y = Math.round(_y)
+  nodes.push({ id: `${x}|${y}`, x: _x, y: _y, radius: 10, label: `${x}|${y}`, style: NODE_STYLE })
+
+  if (coordinates[x] === undefined) {
+    coordinates[x] = new Set()
+  }
+  coordinates[x].add(y)
+
+  for (const adjacentX of [x - step, x]) {
+    for (const adjacentY of [y - step, y, y + step]) {
+      if (coordinates[adjacentX]?.has(adjacentY) && !(adjacentX === x && adjacentY === y)) {
+        edges.push({
+          id: `${x}|${y}|${adjacentX}|${adjacentY}`,
+          source: `${x}|${y}`,
+          target: `${adjacentX}|${adjacentY}`,
+          style: EDGE_STYLE
+        })
+      }
+    }
+  }
+}
+
+const container = document.querySelector('#graph') as HTMLDivElement
+
+const options: Renderer.Options = {
+  x: 0,
+  y: 0,
+  zoom: 1,
+  minZoom: 0.025,
+  width: 1250, // 1700,
+  height: 650, // 940,
+  onViewportDrag: (event: Renderer.ViewportDragEvent | Renderer.ViewportDragDecelerateEvent) => {
+    // console.log('viewport drag', `x: ${event.dx}, y: ${event.dy}`)
+    options.x! += event.dx
+    options.y! += event.dy
+    renderer.update({ nodes, edges, options })
+  },
+  onViewportWheel: ({ dx, dy, dz }) => {
+    options.x! += dx
+    options.y! += dy
+    options.zoom! += dz
+    renderer.update({ nodes, edges, options })
+  },
+  onNodePointerEnter: (event: Renderer.NodePointerEvent) => {
+    // console.log('node pointer enter', `x: ${event.x}, y: ${event.y}`)
+    nodes = nodes.map((node) => (node.id === event.target.id ? { ...node, label: node.label + ' 北京', style: NODE_HOVER_STYLE } : node))
+    edges = edges.map((edge) =>
+      edge.source === event.target.id || edge.target === event.target.id ? { ...edge, style: EDGE_HOVER_STYLE } : edge
+    )
+    renderer.update({ nodes, edges, options })
+  },
+  onNodeDrag: (event: Renderer.NodeDragEvent) => {
+    // console.log('node drag', `x: ${event.x}, y: ${event.y}`)
+    nodes = nodes.map((node) =>
+      node.id === event.target.id ? { ...node, x: (node.x ?? 0) + event.dx, y: (node.y ?? 0) + event.dy } : node
+    )
+    renderer.update({ nodes, edges, options })
+  },
+  onNodePointerLeave: (event: Renderer.NodePointerEvent) => {
+    // console.log('node pointer leave', `x: ${event.x}, y: ${event.y}`)
+    nodes = nodes.map((node) =>
+      node.id === event.target.id ? { ...node, label: node.label?.slice(0, node.label.length - 3), style: NODE_STYLE } : node
+    )
+    edges = edges.map((edge) =>
+      edge.source === event.target.id || edge.target === event.target.id ? { ...edge, style: EDGE_STYLE } : edge
+    )
+    renderer.update({ nodes, edges, options })
+  },
+  onEdgePointerEnter: (event: Renderer.EdgePointerEvent) => {
+    // console.log('edge pointer enter', `x: ${event.x}, y: ${event.y}`)
+    edges = edges.map((edge) => (edge.id === event.target.id ? { ...edge, style: EDGE_HOVER_STYLE } : edge))
+    renderer.update({ nodes, edges, options })
+  },
+  onEdgePointerLeave: (event: Renderer.EdgePointerEvent) => {
+    // console.log('edge pointer leave', `x: ${event.x}, y: ${event.y}`)
+    edges = edges.map((edge) => (edge.id === event.target.id ? { ...edge, style: EDGE_STYLE } : edge))
+    renderer.update({ nodes, edges, options })
+  }
+}
+
+const renderer = new Renderer.Renderer({ container, width: options.width, height: options.height, debug: true }).update({
+  nodes,
+  edges,
+  options
+})
+;(window as any).renderer = renderer

examples/native/src/simple/simple.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../index.css" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <title>Simple Trellis Example</title>
+  </head>
+  <body>
+    <div id="graph"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>

examples/native/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/native/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "include": ["src"],
+  "extends": "../tsconfig.json",
+  "references": [{ "path": "../../tsconfig.node.json" }]
+}