@cosmos.gl/graph 2.2.0 → 2.3.0-beta.0

package/src/stories/clusters/worm.ts

@@ -6,7 +6,7 @@ import { generateMeshData } from '../generate-mesh-data'
 export const worm = (): {graph: Graph; div: HTMLDivElement} => {
   const { pointPositions, pointColors, links, linkColors, pointClusters } = generateMeshData(100, 100, 1000, 1.0)
 
-  return createCosmos({
+  const { div, graph } = createCosmos({
     simulationGravity: 0.5,
     simulationRepulsion: 1,
     simulationLinkSpring: 1,
@@ -15,5 +15,26 @@ export const worm = (): {graph: Graph; div: HTMLDivElement} => {
     pointClusters,
     links,
     linkColors,
+    onSimulationTick: () => {
+      const currentPointColors = graph.getPointColors()
+      const newPointColors = new Float32Array(currentPointColors.length)
+      for (let i = 0; i < currentPointColors.length / 4; i++) {
+        if (i === 0) {
+          newPointColors[i * 4] = currentPointColors[currentPointColors.length - 4] as number
+          newPointColors[i * 4 + 1] = currentPointColors[currentPointColors.length - 3] as number
+          newPointColors[i * 4 + 2] = currentPointColors[currentPointColors.length - 2] as number
+          newPointColors[i * 4 + 3] = currentPointColors[currentPointColors.length - 1] as number
+        } else {
+          newPointColors[i * 4] = currentPointColors[(i - 1) * 4] as number
+          newPointColors[i * 4 + 1] = currentPointColors[(i - 1) * 4 + 1] as number
+          newPointColors[i * 4 + 2] = currentPointColors[(i - 1) * 4 + 2] as number
+          newPointColors[i * 4 + 3] = currentPointColors[(i - 1) * 4 + 3] as number
+        }
+      }
+      graph.setPointColors(newPointColors)
+      graph.render()
+    },
   })
+
+  return { div, graph }
 }

package/src/stories/clusters.stories.ts

@@ -4,7 +4,7 @@ import { createStory, Story } from '@/graph/stories/create-story'
 import { withLabels } from './clusters/with-labels'
 import { worm } from './clusters/worm'
 import { radial } from './clusters/radial'
-import { lassoSelection } from './clusters/lasso-selection'
+import { polygonSelection } from './clusters/polygon-selection'
 
 import createCosmosRaw from './create-cosmos?raw'
 import generateMeshDataRaw from './generate-mesh-data?raw'
@@ -12,9 +12,9 @@ import withLabelsStoryRaw from './clusters/with-labels?raw'
 import createClusterLabelsRaw from './create-cluster-labels?raw'
 import wormStory from './clusters/worm?raw'
 import radialStory from './clusters/radial?raw'
-import lassoSelectionStory from './clusters/lasso-selection?raw'
-import lassoSelectionStyleRaw from './clusters/lasso-selection/style.css?raw'
-import lassoSelectionLassoRaw from './clusters/lasso-selection/lasso.ts?raw'
+import polygonSelectionStory from './clusters/polygon-selection?raw'
+import polygonSelectionStyleRaw from './clusters/polygon-selection/style.css?raw'
+import polygonSelectionPolygonRaw from './clusters/polygon-selection/polygon.ts?raw'
 
 const meta: Meta<CosmosStoryProps> = {
   title: 'Examples/Clusters',
@@ -61,14 +61,14 @@ export const WithLabels: Story = {
   },
 }
 
-export const LassoSelection: Story = {
-  ...createStory(lassoSelection),
+export const PolygonSelection: Story = {
+  ...createStory(polygonSelection),
   parameters: {
     sourceCode: [
-      { name: 'Story', code: lassoSelectionStory },
-      { name: 'lasso.ts', code: lassoSelectionLassoRaw },
+      { name: 'Story', code: polygonSelectionStory },
+      { name: 'polygon.ts', code: polygonSelectionPolygonRaw },
       ...sourceCodeAddonParams,
-      { name: 'style.css', code: lassoSelectionStyleRaw },
+      { name: 'style.css', code: polygonSelectionStyleRaw },
     ],
   },
 }

package/src/variables.ts

@@ -1,9 +1,11 @@
 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'