@cosmos.gl/graph 2.5.0 → 2.6.1

package/src/stories/geospatial/moscow-metro-stations/style.css

@@ -1,30 +0,0 @@
-body {
-  font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  margin: 0px;
-}
-
-.app {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-
-.graph {
-  width: 100%;
-  height: 100vh;
-}
-
-.actions {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  color: #ccc;
-}
-
-.action {
-  margin-left: 2px;
-  font-size: 10pt;
-  text-decoration: underline;
-  cursor: pointer;
-  user-select: none;
-}

package/src/stories/geospatial.stories.ts

@@ -1,30 +0,0 @@
-import type { Meta } from '@storybook/html'
-
-import { createStory, Story } from '@/graph/stories/create-story'
-import { CosmosStoryProps } from './create-cosmos'
-import { moscowMetroStations } from './geospatial/moscow-metro-stations'
-
-import moscowMetroStationsStoryRaw from './geospatial/moscow-metro-stations/index?raw'
-import dataRaw from './geospatial/moscow-metro-stations/moscow-metro-coords?raw'
-import pointColorsRaw from './geospatial/moscow-metro-stations/point-colors?raw'
-import styleRaw from './geospatial/moscow-metro-stations/style.css?raw'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<CosmosStoryProps> = {
-  title: 'Examples/Geospatial',
-}
-
-export const MoscowMetroStations: Story = {
-  ...createStory(moscowMetroStations),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: moscowMetroStationsStoryRaw },
-      { name: 'moscow-metro-coords', code: dataRaw },
-      { name: 'point-colors', code: pointColorsRaw },
-      { name: 'style.css', code: styleRaw },
-    ],
-  },
-}
-
-// eslint-disable-next-line import/no-default-export
-export default meta

package/src/stories/shapes/all-shapes/index.ts

@@ -1,69 +0,0 @@
-import { Graph, PointShape } from '@cosmos.gl/graph'
-
-export const allShapes = (): {div: HTMLDivElement; graph: Graph } => {
-  // Create container div
-  const div = document.createElement('div')
-  div.style.height = '100vh'
-  div.style.width = '100%'
-
-  // Create 8 points, one for each shape
-  const spaceSize = 4096
-  const pointCount = 8
-  const spacing = spaceSize / pointCount
-
-  const pointPositions = new Float32Array(pointCount * 2)
-  const pointColors = new Float32Array(pointCount * 4)
-  const pointShapes = new Float32Array(pointCount)
-
-  // Define distinct colors for each shape
-  const shapeColors: [number, number, number][] = [
-    [1.0, 0.42, 0.38], // Coral for Circle
-    [0.13, 0.55, 0.45], // Forest Green for Square
-    [0.25, 0.32, 0.71], // Royal Blue for Triangle
-    [0.96, 0.76, 0.19], // Amber Gold for Diamond
-    [0.74, 0.24, 0.45], // Deep Rose for Pentagon
-    [0.18, 0.55, 0.56], // Teal for Hexagon
-    [0.85, 0.45, 0.28], // Terracotta for Star
-    [0.58, 0.44, 0.86], // Periwinkle for Cross
-  ]
-
-  // Position points in a horizontal line
-  const startX = spacing / 2
-  const centerY = spaceSize / 2
-  for (let i = 0; i < pointCount; i++) {
-    // Position: horizontal line, centered
-    pointPositions[i * 2] = startX + i * spacing
-    pointPositions[i * 2 + 1] = centerY
-
-    // Color: distinct color for each shape
-    const color = shapeColors[i] || [1.0, 1.0, 1.0] // fallback to white if undefined
-    pointColors[i * 4] = color[0] // R
-    pointColors[i * 4 + 1] = color[1] // G
-    pointColors[i * 4 + 2] = color[2] // B
-    pointColors[i * 4 + 3] = 1.0 // A
-
-    // Shape: cycle through all available shapes
-    pointShapes[i] = i as PointShape
-  }
-
-  // Create graph with minimal configuration
-  const graph = new Graph(div, {
-    spaceSize,
-    pointSize: spacing / 2,
-    enableSimulation: false,
-    scalePointsOnZoom: true,
-    renderHoveredPointRing: true,
-    hoveredPointRingColor: '#ffffff',
-    rescalePositions: false,
-    enableDrag: true,
-  })
-
-  // Set data
-  graph.setPointPositions(pointPositions)
-  graph.setPointColors(pointColors)
-  graph.setPointShapes(pointShapes)
-
-  graph.render()
-
-  return { div, graph }
-}

package/src/stories/shapes/image-example/index.ts

@@ -1,238 +0,0 @@
-import { Graph, PointShape } from '@cosmos.gl/graph'
-
-// Import all PNG icons
-import boxUrl from './icons/box.png'
-import toolboxUrl from './icons/toolbox.png'
-import swiftUrl from './icons/swift.png'
-import legoUrl from './icons/lego.png'
-import sUrl from './icons/s.png'
-
-// Helper function to convert PNG URL to ImageData
-const pngUrlToImageData = (pngUrl: string): Promise<ImageData> => {
-  return new Promise<ImageData>((resolve, reject) => {
-    const img = new Image()
-
-    img.onload = (): void => {
-      const canvas = document.createElement('canvas')
-      const ctx = canvas.getContext('2d')
-      if (!ctx) {
-        reject(new Error('Could not get 2D context'))
-        return
-      }
-
-      canvas.width = img.width
-      canvas.height = img.height
-      ctx.drawImage(img, 0, 0)
-
-      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-      resolve(imageData)
-    }
-    img.onerror = (): void => reject(new Error(`Failed to load image: ${pngUrl}`))
-    img.src = pngUrl
-  })
-}
-
-const loadPngImages = (pngUrls: string[]): Promise<ImageData[]> => {
-  return Promise.all(pngUrls.map(pngUrlToImageData))
-}
-
-// Define node types for Xcode dependency graph
-enum NodeType {
-  App = 0, // Main app target (swift icon)
-  Framework = 1, // Framework (box icon)
-  Library = 2, // Static library (toolbox icon)
-  Bundle = 3, // Bundle (lego icon)
-  Target = 4 // Build target (s icon)
-}
-
-interface DependencyNode {
-  id: number;
-  name: string;
-  type: NodeType;
-  x: number;
-  y: number;
-  dependencies: number[];
-  size: number;
-  color: [number, number, number, number];
-}
-
-export const imageExample = async (): Promise<{div: HTMLDivElement; graph: Graph }> => {
-  // Create container div
-  const div = document.createElement('div')
-  div.style.height = '100vh'
-  div.style.width = '100%'
-  div.style.display = 'flex'
-  div.style.flexDirection = 'column'
-
-  // Create main graph container
-  const graphContainer = document.createElement('div')
-  graphContainer.style.height = '100vh'
-  graphContainer.style.width = '100%'
-  graphContainer.style.position = 'absolute'
-  graphContainer.style.overflow = 'hidden'
-  div.appendChild(graphContainer)
-
-  try {
-    const spaceSize = 4096
-
-    const nodes: DependencyNode[] = [
-      // Main app target (center)
-      { id: 0, name: 'MyApp', type: NodeType.App, x: 2048, y: 2048, dependencies: [1, 2, 3, 14], size: 60, color: [0.2, 0.6, 1.0, 1.0] },
-
-      // Frameworks (first ring around center)
-      { id: 1, name: 'CoreData', type: NodeType.Framework, x: 1024, y: 2048, dependencies: [4, 5], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
-      { id: 2, name: 'UIKit', type: NodeType.Framework, x: 2048, y: 1024, dependencies: [6, 15], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
-      { id: 3, name: 'Network', type: NodeType.Framework, x: 3072, y: 2048, dependencies: [7, 8], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
-
-      // Libraries (second ring)
-      { id: 4, name: 'SQLite', type: NodeType.Library, x: 512, y: 2048, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-      { id: 5, name: 'Foundation', type: NodeType.Library, x: 1024, y: 1024, dependencies: [16], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-      { id: 6, name: 'CoreGraphics', type: NodeType.Library, x: 2048, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-      { id: 7, name: 'Security', type: NodeType.Library, x: 3072, y: 1024, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-      { id: 8, name: 'CFNetwork', type: NodeType.Library, x: 3584, y: 2048, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-
-      // Additional frameworks (first ring)
-      { id: 9, name: 'Analytics', type: NodeType.Framework, x: 2048, y: 3072, dependencies: [10, 17], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
-      { id: 10, name: 'Firebase', type: NodeType.Library, x: 2048, y: 3840, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-
-      // Test targets (outer ring)
-      { id: 11, name: 'Tests', type: NodeType.Target, x: 512, y: 1024, dependencies: [0], size: 50, color: [0.4, 0.6, 1.0, 1.0] },
-      { id: 12, name: 'UITests', type: NodeType.Target, x: 3584, y: 1024, dependencies: [0, 2], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
-      { id: 13, name: 'Widget', type: NodeType.Target, x: 3584, y: 3072, dependencies: [1, 2], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
-
-      // Additional components
-      { id: 14, name: 'Localization', type: NodeType.Framework, x: 1536, y: 3072, dependencies: [18], size: 50, color: [0.8, 0.4, 0.2, 1.0] },
-      { id: 15, name: 'CoreAnimation', type: NodeType.Library, x: 2560, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-      { id: 16, name: 'CoreFoundation', type: NodeType.Library, x: 1024, y: 512, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-      { id: 17, name: 'Crashlytics', type: NodeType.Library, x: 1536, y: 3584, dependencies: [], size: 45, color: [0.6, 0.8, 0.4, 1.0] },
-      { id: 18, name: 'LocalizationBundle', type: NodeType.Bundle, x: 1792, y: 3584, dependencies: [], size: 45, color: [1.0, 0.4, 1.0, 1.0] },
-
-      // More test targets
-      { id: 19, name: 'UnitTests', type: NodeType.Target, x: 512, y: 3072, dependencies: [0, 1], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
-      { id: 20, name: 'IntegrationTests', type: NodeType.Target, x: 512, y: 3584, dependencies: [0, 3], size: 45, color: [0.4, 0.6, 1.0, 1.0] },
-
-      // Bundle resources
-      { id: 21, name: 'Resources', type: NodeType.Bundle, x: 2304, y: 3072, dependencies: [0], size: 50, color: [1.0, 0.4, 1.0, 1.0] },
-      { id: 22, name: 'Assets', type: NodeType.Bundle, x: 2560, y: 3584, dependencies: [0, 21], size: 50, color: [1.0, 0.4, 1.0, 1.0] },
-    ]
-
-    const pointCount = nodes.length
-    const pointPositions = new Float32Array(pointCount * 2)
-    const pointColors = new Float32Array(pointCount * 4)
-    const pointShapes = new Float32Array(pointCount)
-    const pointSizes = new Float32Array(pointCount)
-    const imageIndices = new Float32Array(pointCount)
-
-    // Create links array for dependencies
-    const links: number[] = []
-    const linkArrows: boolean[] = []
-    const linkColors: number[] = []
-
-    // Set up nodes based on the dependency structure
-    for (const node of nodes) {
-      const i = node.id
-
-      // Set positions
-      pointPositions[i * 2] = node.x
-      pointPositions[i * 2 + 1] = node.y
-
-      // Set node properties - use None shape for all images except targets (s icon)
-      pointShapes[i] = node.type === NodeType.Target ? PointShape.Hexagon : PointShape.None
-      pointSizes[i] = node.size
-      imageIndices[i] = node.type
-
-      // Set colors
-      pointColors[i * 4] = node.color[0]
-      pointColors[i * 4 + 1] = node.color[1]
-      pointColors[i * 4 + 2] = node.color[2]
-      pointColors[i * 4 + 3] = node.color[3]
-
-      // Add dependency links
-      for (const depId of node.dependencies) {
-        links.push(i, depId)
-        linkArrows.push(true)
-
-        // Add colorful link colors based on source node type
-        const sourceType = node.type
-        let linkColor: [number, number, number, number]
-
-        switch (sourceType) {
-        case NodeType.App:
-          linkColor = [0.2, 0.8, 1.0, 0.8] // Bright blue
-          break
-        case NodeType.Framework:
-          linkColor = [1.0, 0.6, 0.2, 0.8] // Orange
-          break
-        case NodeType.Library:
-          linkColor = [0.4, 1.0, 0.4, 0.8] // Green
-          break
-        case NodeType.Bundle:
-          linkColor = [1.0, 0.4, 1.0, 0.8] // Magenta
-          break
-        case NodeType.Target:
-          linkColor = [0.8, 0.4, 1.0, 0.8] // Purple
-          break
-        default:
-          linkColor = [0.7, 0.7, 0.7, 0.8] // Gray
-        }
-
-        // Add RGBA values for this link
-        linkColors.push(linkColor[0], linkColor[1], linkColor[2], linkColor[3])
-      }
-    }
-
-    // Create graph with static positioning
-    const graph = new Graph(graphContainer, {
-      spaceSize,
-      enableSimulation: false,
-      enableDrag: false,
-      linkArrows: true,
-      curvedLinks: true,
-      pointSize: 50,
-      linkWidth: 3,
-      hoveredPointRingColor: 'white',
-      renderHoveredPointRing: true,
-
-      // Add click handler for point and background selection
-      onPointClick: (pointIndex: number): void => {
-        // Use built-in functionality to select the clicked point and its neighbors
-        graph.selectPointByIndex(pointIndex, true)
-      },
-      onBackgroundClick: (): void => {
-        // Clear selection when clicking on background
-        graph.unselectPoints()
-      },
-    })
-
-    const imageDataArray = await loadPngImages([swiftUrl, boxUrl, toolboxUrl, legoUrl, sUrl])
-
-    // Set images and their indices
-    graph.setImageData(imageDataArray)
-    graph.setPointImageIndices(imageIndices)
-
-    // Set all data
-    graph.setPointPositions(pointPositions)
-    graph.setPointColors(pointColors)
-    graph.setPointShapes(pointShapes)
-    graph.setPointSizes(pointSizes)
-
-    // Set links if we have any dependencies
-    if (links.length > 0) {
-      graph.setLinks(new Float32Array(links))
-      graph.setLinkArrows(linkArrows)
-      graph.setLinkColors(new Float32Array(linkColors))
-    }
-
-    graph.render()
-
-    return { div, graph }
-  } catch (error) {
-    console.error('Error creating Xcode dependency graph:', error)
-    div.innerHTML = `
-      <div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ff0000; font-size: 18px;">
-        Error loading Xcode dependency graph: ${error instanceof Error ? error.message : 'Unknown error'}
-      </div>
-    `
-    throw error
-  }
-}

package/src/stories/shapes.stories.ts

@@ -1,37 +0,0 @@
-import type { Meta } from '@storybook/html'
-
-import { createStory, Story } from '@/graph/stories/create-story'
-import { CosmosStoryProps } from './create-cosmos'
-import { allShapes } from './shapes/all-shapes'
-import { imageExample } from './shapes/image-example'
-
-import allShapesStoryRaw from './shapes/all-shapes/index?raw'
-import imageExampleStoryRaw from './shapes/image-example/index?raw'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<CosmosStoryProps> = {
-  title: 'Examples/Shapes',
-}
-
-export const AllShapes: Story = {
-  ...createStory(allShapes),
-  name: 'All Point Shapes',
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: allShapesStoryRaw },
-    ],
-  },
-}
-
-export const ImageExample: Story = {
-  ...createStory(imageExample),
-  name: 'Image Points Example',
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: imageExampleStoryRaw },
-    ],
-  },
-}
-
-// eslint-disable-next-line import/no-default-export
-export default meta

package/src/variables.ts

@@ -1,68 +0,0 @@
-export const defaultPointColor = '#b3b3b3'
-export const defaultGreyoutPointOpacity = undefined
-export const defaultGreyoutPointColor = undefined
-export const defaultPointOpacity = 1.0
-export const defaultPointSize = 4
-export const defaultLinkColor = '#666666'
-export const defaultGreyoutLinkOpacity = 0.1
-export const defaultLinkOpacity = 1.0
-export const defaultLinkWidth = 1
-export const defaultBackgroundColor = '#222222'
-
-export const defaultConfigValues = {
-  enableSimulation: true,
-  spaceSize: 8192,
-  pointSizeScale: 1,
-  linkWidthScale: 1,
-  linkArrowsSizeScale: 1,
-  renderLinks: true,
-  curvedLinks: false,
-  curvedLinkSegments: 19,
-  curvedLinkWeight: 0.8,
-  curvedLinkControlPointDistance: 0.5,
-  linkArrows: false,
-  linkVisibilityDistanceRange: [50, 150],
-  linkVisibilityMinTransparency: 0.25,
-  hoveredPointCursor: 'auto',
-  hoveredLinkCursor: 'auto',
-  renderHoveredPointRing: false,
-  hoveredPointRingColor: 'white',
-  hoveredLinkColor: undefined,
-  hoveredLinkWidthIncrease: 5,
-  focusedPointRingColor: 'white',
-  focusedPointIndex: undefined,
-  useClassicQuadtree: false,
-  simulation: {
-    decay: 5000,
-    gravity: 0.25,
-    center: 0,
-    repulsion: 1.0,
-    repulsionTheta: 1.15,
-    repulsionQuadtreeLevels: 12,
-    linkSpring: 1,
-    linkDistance: 10,
-    linkDistRandomVariationRange: [1, 1.2],
-    repulsionFromMouse: 2,
-    friction: 0.85,
-    cluster: 0.1,
-  },
-  showFPSMonitor: false,
-  pixelRatio: 2,
-  scalePointsOnZoom: false,
-  scaleLinksOnZoom: false,
-  enableZoom: true,
-  enableSimulationDuringZoom: false,
-  enableDrag: false,
-  fitViewOnInit: true,
-  fitViewDelay: 250,
-  fitViewPadding: 0.1,
-  fitViewDuration: 250,
-  pointSamplingDistance: 150,
-  attribution: '',
-  rescalePositions: undefined,
-  enableRightClickRepulsion: false,
-}
-
-export const hoveredPointRingOpacity = 0.7
-export const focusedPointRingOpacity = 0.95
-export const defaultScaleToZoom = 3

package/tsconfig.json

@@ -1,41 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/graph": ["src/"],
-      "@/graph/*": ["src/*"],
-      "@cosmos.gl/graph": ["src/"],
-      "@cosmos.gl/graph/*": ["src/*"],
-    },
-    "plugins": [{
-      "transform": "@zerollup/ts-transform-paths",
-      "exclude": ["*"]
-      }],
-    "target": "es2019",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "lib": ["es2019", "es2017", "es7", "es6", "dom"],
-    "declaration": true,
-    "outDir": "dist",
-
-    "alwaysStrict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": true,
-    "strictFunctionTypes": true,
-    "noImplicitThis": true,
-    "strictBindCallApply": true,
-
-    "noPropertyAccessFromIndexSignature": true,
-    "noUncheckedIndexedAccess": true,
-
-    "esModuleInterop": true
-  },
-  "include": [
-    "./src/**/*"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist"
-  ]
-}

package/vite.config.ts

@@ -1,54 +0,0 @@
-import { resolve } from 'path'
-import { defineConfig, LibraryFormats, UserConfig } from 'vite'
-import glsl from 'vite-plugin-glsl'
-import dts from 'vite-plugin-dts'
-
-// eslint-disable-next-line import/no-default-export
-export default defineConfig(() => {
-  const config: UserConfig = {
-    build: {
-      lib: {
-        entry: resolve(__dirname, 'src/index.ts'),
-        name: 'Cosmos',
-        formats: ['es', 'umd'] as LibraryFormats[],
-        fileName: (format): string => format === 'umd' ? 'index.min.js' : 'index.js',
-      },
-      sourcemap: true,
-      minify: true,
-      rollupOptions: {
-        external: ['d3-array', 'd3-color', 'd3-drag', 'd3-ease', 'd3-scale', 'd3-selection', 'd3-transition', 'd3-zoom', 'regl'],
-        output: {
-          globals: {
-            'd3-selection': 'd3',
-            'd3-ease': 'd3',
-            regl: 'createREGL',
-            'd3-color': 'd3',
-            'd3-scale': 'd3',
-            'd3-array': 'd3',
-            'gl-matrix': 'glMatrix',
-            random: 'random',
-            'd3-zoom': 'd3',
-            'd3-drag': 'd3',
-            'd3-transition': 'd3',
-          },
-        },
-      },
-    },
-    plugins: [
-      glsl(),
-      dts(),
-    ],
-    resolve: {
-      alias: {
-        '@/graph': resolve(__dirname, 'src/'),
-        '@cosmos.gl/graph': resolve(__dirname, 'src/'),
-      },
-    },
-  }
-
-  if (config?.build?.lib && config.build.rollupOptions && config.build.lib.formats && config.build.lib.formats.includes('umd')) {
-    delete config.build.rollupOptions.external
-  }
-
-  return config
-})