@cosmos.gl/graph 2.0.0 → 2.2.0

package/src/stories/2. configuration.mdx

@@ -24,6 +24,7 @@ import { Meta } from "@storybook/blocks";
 | linkGreyoutOpacity | Greyed out link opacity value when the selection is active | `0.1` |
 | linkWidth | The default width value to use for links when no link widths are provided or if the width value in the array is `undefined` or `null` | `1` |
 | linkWidthScale | Scale factor for the link width | `1` |
+| scaleLinksOnZoom | Increase/decrease link width when zooming | `false` |
 | curvedLinks | If set to true, links are rendered as curved lines. Otherwise as straight lines | `false` |
 | curvedLinkSegments | Number of segments in a curved line | `19` |
 | curvedLinkWeight | Weight affects the shape of the curve | `0.8` |
@@ -35,7 +36,7 @@ import { Meta } from "@storybook/blocks";
 | useClassicQuadtree | Use the classic [quadtree algorithm](https://en.wikipedia.org/wiki/Barnes%E2%80%93Hut_simulation) for the Many-Body force. This property will be applied only on component initialization and it can't be changed using the `setConfig` method.<br /><br /> ⚠ The algorithm might not work on some GPUs (e.g. Nvidia) and on Windows (unless you disable ANGLE in the browser settings). | `false` |
 | showFPSMonitor | Show WebGL performance monitor | `false` |
 | pixelRatio | Canvas pixel ratio | `2` |
-| scalePointsOnZoom | Increase/decrease point size when zooming | `true` |
+| scalePointsOnZoom | Increase/decrease point size when zooming | `false` |
 | initialZoomLevel | Initial zoom level (set once during initialization) | `undefined` |
 | enableZoom | Enables zooming interactions | `true` |
 | enableSimulationDuringZoom | Keep simulation running during zoom operations | `false` |
@@ -70,6 +71,7 @@ cosmos.gl layout algorithm was inspired by the [d3-force](https://github.com/d3/
 | simulationLinkDistance | Minimum link distance | 1 – 20 | `10` |
 | simulationLinkDistRandomVariationRange | Link distance randomness multiplier range | [0.8 – 1.2,<br/> 1.2 – 2.0] | `[1.0, 1.2]` |
 | simulationRepulsionFromMouse | Repulsion from the mouse pointer force coefficient. The repulsion force is activated by pressing the right mouse button. | 0.0 – 5.0 | `2.0`
+| enableRightClickRepulsion | Enable or disable the repulsion force from mouse when right-clicking. When set to `true`, holding the right mouse button will activate the mouse repulsion force. When set to `false`, right-clicking will not trigger any repulsion force. | - | `false` |
 | simulationFriction | Friction coefficient. Values range from `0` (high friction, stops quickly) to `1` (no friction, keeps moving). | 0.0 – 1.0 | `0.85` |
 | simulationCluster | Cluster coefficient | 0.0 – 1.0 | `0.1` |
 

package/src/stories/3. api-reference.mdx

@@ -249,6 +249,25 @@ Select points within a rectangular area defined by two corner points `[[left, to
 
 The `top` and `bottom` values represent the vertical position in pixels, relative to the top edge of the canvas, with `0` being the topmost position and the height of the canvas being the bottommost position.
 
+### <a name="get_points_in_lasso" href="#get_points_in_lasso">#</a> graph.<b>getPointsInLasso</b>(<i>lassoPath</i>)
+
+Get points as a Float32Array within a lasso (polygon) area defined by an array of coordinate points.
+
+* **`lassoPath`** (Array): An array of coordinate points in the format `[[x1, y1], [x2, y2], ..., [xN, yN]]` that defines the lasso polygon. The coordinates should be in pixels relative to the canvas, where:
+  - **`x`**: Horizontal position from 0 to the width of the canvas
+  - **`y`**: Vertical position from 0 to the height of the canvas
+  - The polygon requires at least 3 points to form a valid selection area
+
+**Returns:** A Float32Array containing the indices of points inside the lasso area.
+
+### <a name="select_points_in_lasso" href="#select_points_in_lasso">#</a> graph.<b>selectPointsInLasso</b>(<i>lassoPath</i>)
+
+Select points within a lasso (polygon) area defined by an array of coordinate points. This method combines the functionality of `getPointsInLasso` with point selection, making the identified points visually selected in the graph.
+
+* **`lassoPath`** (Array | null): An array of coordinate points in the format `[[x1, y1], [x2, y2], ..., [xN, yN]]` that defines the lasso polygon, or `null` to clear the current selection. The coordinates should be in pixels relative to the canvas, where:
+  - **`x`**: Horizontal position from 0 to the width of the canvas  
+  - **`y`**: Vertical position from 0 to the height of the canvas
+  - The polygon requires at least 3 points to form a valid selection area
 
 ### <a name="select_point_by_index" href="#select_point_by_index">#</a> graph.<b>selectPointByIndex</b>(<i>index</i>, [<i>selectAdjacentPoints</i>])
 

package/src/stories/beginners/basic-set-up/index.ts

@@ -24,7 +24,8 @@ export const basicSetUp = (): { graph: Graph; div: HTMLDivElement} => {
     backgroundColor: '#2d313a',
     pointSize: 4,
     pointColor: '#4B5BBF',
-    linkWidth: 0.1,
+    linkWidth: 0.6,
+    scalePointsOnZoom: true,
     linkColor: '#5F74C2',
     linkArrows: false,
     linkGreyoutOpacity: 0,

package/src/stories/beginners/point-labels/index.ts

@@ -30,7 +30,8 @@ export const pointLabels = (
   const graph = new Graph(graphDiv, {
     spaceSize: 4096,
     backgroundColor: '#2d313a',
-    linkWidth: 0.1,
+    scalePointsOnZoom: true,
+    linkWidth: 0.6,
     linkColor: '#5F74C2',
     linkArrows: false,
     fitViewOnInit: false,

package/src/stories/beginners/quick-start.ts

@@ -9,6 +9,7 @@ export const quickStart = (): { graph: Graph; div: HTMLDivElement} => {
     spaceSize: 4096,
     backgroundColor: '#2d313a',
     pointColor: '#F069B4',
+    scalePointsOnZoom: true,
     simulationFriction: 0.1, // keeps the graph inert
     simulationGravity: 0, // disables gravity
     simulationRepulsion: 0.5, // increases repulsion between points

package/src/stories/beginners/remove-points/config.ts

@@ -5,8 +5,9 @@ export const config: GraphConfigInterface = {
   backgroundColor: '#2d313a',
   pointSize: 4,
   pointColor: '#4B5BBF',
+  scalePointsOnZoom: true,
   pointGreyoutOpacity: 0.1,
-  linkWidth: 0.1,
+  linkWidth: 0.6,
   linkColor: '#5F74C2',
   linkArrows: false,
   linkGreyoutOpacity: 0,

package/src/stories/clusters/lasso-selection/index.ts

@@ -0,0 +1,53 @@
+import { Graph } from '@cosmos.gl/graph'
+import { createCosmos } from '../../create-cosmos'
+import { generateMeshData } from '../../generate-mesh-data'
+import { LassoSelection } from './lasso'
+
+export const lassoSelection = (): {div: HTMLDivElement; graph: Graph; destroy: () => void } => {
+  const nClusters = 25
+  const { pointPositions, pointColors, pointClusters } = generateMeshData(150, 150, nClusters, 1.0)
+
+  const { div, graph } = createCosmos({
+    pointPositions,
+    pointColors,
+    pointClusters,
+    simulationGravity: 1.5,
+    simulationCluster: 0.3,
+    simulationRepulsion: 8,
+    pointSize: 8,
+    backgroundColor: '#1a1a2e',
+    pointGreyoutOpacity: 0.2,
+    onClick: (index: number | undefined): void => {
+      if (index === undefined) {
+        graph.unselectPoints()
+      }
+    },
+  })
+
+  graph.setZoomLevel(0.4)
+
+  const lassoSelection = new LassoSelection(div, (lassoPoints) => {
+    graph.selectPointsInLasso(lassoPoints)
+  })
+
+  const actionsDiv = document.createElement('div')
+  actionsDiv.className = 'actions'
+  div.appendChild(actionsDiv)
+
+  const lassoButton = document.createElement('div')
+  lassoButton.className = 'action'
+  lassoButton.textContent = 'Enable Lasso Selection'
+  lassoButton.addEventListener('click', () => {
+    lassoSelection.enableLassoMode()
+  })
+  actionsDiv.appendChild(lassoButton)
+
+  const destroy = (): void => {
+    lassoSelection.destroy()
+    if (actionsDiv.parentNode) {
+      actionsDiv.parentNode.removeChild(actionsDiv)
+    }
+  }
+
+  return { div, graph, destroy }
+}

package/src/stories/clusters/lasso-selection/lasso.ts

@@ -0,0 +1,143 @@
+import './style.css'
+
+export class LassoSelection {
+  private canvas: HTMLCanvasElement
+  private ctx: CanvasRenderingContext2D
+  private isDrawing = false
+  private points: Array<{ x: number; y: number }> = []
+  private graphDiv: HTMLElement
+  private onLassoComplete?: (points: [number, number][]) => void
+  private boundStartDrawing: (e: MouseEvent) => void
+  private boundDraw: (e: MouseEvent) => void
+  private boundStopDrawing: () => void
+  private resizeObserver: ResizeObserver
+
+  public constructor (graphDiv: HTMLElement, onLassoComplete?: (points: [number, number][]) => void) {
+    this.graphDiv = graphDiv
+    this.onLassoComplete = onLassoComplete
+
+    // Bind event handlers
+    this.boundStartDrawing = this.startDrawing.bind(this)
+    this.boundDraw = this.draw.bind(this)
+    this.boundStopDrawing = this.stopDrawing.bind(this)
+
+    // Create canvas
+    this.canvas = document.createElement('canvas')
+    this.canvas.className = 'lasso-canvas'
+
+    const ctx = this.canvas.getContext('2d')
+    if (!ctx) throw new Error('Could not get canvas context')
+    this.ctx = ctx
+
+    this.graphDiv.appendChild(this.canvas)
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.resizeCanvas()
+    })
+    this.resizeObserver.observe(this.graphDiv)
+  }
+
+  public enableLassoMode (): void {
+    this.canvas.style.pointerEvents = 'auto'
+    this.canvas.style.cursor = 'crosshair'
+
+    // Add event listeners
+    this.canvas.addEventListener('mousedown', this.boundStartDrawing)
+    this.canvas.addEventListener('mousemove', this.boundDraw)
+    this.canvas.addEventListener('mouseup', this.boundStopDrawing)
+  }
+
+  public disableLassoMode (): void {
+    this.canvas.style.pointerEvents = 'none'
+    this.canvas.style.cursor = 'default'
+
+    // Remove event listeners
+    this.canvas.removeEventListener('mousedown', this.boundStartDrawing)
+    this.canvas.removeEventListener('mousemove', this.boundDraw)
+    this.canvas.removeEventListener('mouseup', this.boundStopDrawing)
+
+    // Clear canvas
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  public destroy (): void {
+    this.disableLassoMode()
+    this.resizeObserver.disconnect()
+    if (this.canvas.parentNode) {
+      this.canvas.parentNode.removeChild(this.canvas)
+    }
+  }
+
+  private resizeCanvas (): void {
+    const rect = this.graphDiv.getBoundingClientRect()
+
+    // Apply pixel ratio for crisp rendering
+    const pixelRatio = window.devicePixelRatio || 1
+    this.canvas.width = rect.width * pixelRatio
+    this.canvas.height = rect.height * pixelRatio
+
+    // Reset transform and scale the context to match the pixel ratio
+    this.ctx.resetTransform()
+    this.ctx.scale(pixelRatio, pixelRatio)
+  }
+
+  private startDrawing (e: MouseEvent): void {
+    this.isDrawing = true
+    this.points = []
+    const rect = this.canvas.getBoundingClientRect()
+    this.points.push({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+
+  private draw (e: MouseEvent): void {
+    if (!this.isDrawing) return
+
+    const rect = this.canvas.getBoundingClientRect()
+    this.points.push({ x: e.clientX - rect.left, y: e.clientY - rect.top })
+
+    // Clear the entire canvas accounting for pixel ratio
+    const pixelRatio = window.devicePixelRatio || 1
+    this.ctx.clearRect(0, 0, this.canvas.width / pixelRatio, this.canvas.height / pixelRatio)
+
+    this.ctx.beginPath()
+    if (this.points.length > 0 && this.points[0]) {
+      this.ctx.moveTo(this.points[0].x, this.points[0].y)
+    }
+
+    for (let i = 1; i < this.points.length; i++) {
+      const point = this.points[i]
+      if (point) {
+        this.ctx.lineTo(point.x, point.y)
+      }
+    }
+
+    this.ctx.strokeStyle = '#ffffff'
+    this.ctx.lineWidth = 2
+    this.ctx.stroke()
+  }
+
+  private stopDrawing (): void {
+    if (!this.isDrawing) return
+    this.isDrawing = false
+
+    if (this.points.length > 2) {
+      this.ctx.closePath()
+      this.ctx.stroke()
+
+      const lassoPoints: [number, number][] = this.points.map(p => [p.x, p.y])
+      const firstLassoPoint = lassoPoints[0]
+      const lastLassoPoint = lassoPoints[lassoPoints.length - 1]
+      if (firstLassoPoint && lastLassoPoint && (firstLassoPoint[0] !== lastLassoPoint[0] || firstLassoPoint[1] !== lastLassoPoint[1])) {
+        lassoPoints.push(firstLassoPoint)
+      }
+
+      if (this.onLassoComplete) {
+        this.onLassoComplete(lassoPoints)
+      }
+    }
+
+    const pixelRatio = window.devicePixelRatio || 1
+    this.ctx.clearRect(0, 0, this.canvas.width / pixelRatio, this.canvas.height / pixelRatio)
+    this.disableLassoMode()
+  }
+}

package/src/stories/clusters/lasso-selection/style.css

@@ -0,0 +1,8 @@
+.lasso-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}

package/src/stories/clusters.stories.ts

@@ -4,6 +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 createCosmosRaw from './create-cosmos?raw'
 import generateMeshDataRaw from './generate-mesh-data?raw'
@@ -11,6 +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'
 
 const meta: Meta<CosmosStoryProps> = {
   title: 'Examples/Clusters',
@@ -57,5 +61,17 @@ export const WithLabels: Story = {
   },
 }
 
+export const LassoSelection: Story = {
+  ...createStory(lassoSelection),
+  parameters: {
+    sourceCode: [
+      { name: 'Story', code: lassoSelectionStory },
+      { name: 'lasso.ts', code: lassoSelectionLassoRaw },
+      ...sourceCodeAddonParams,
+      { name: 'style.css', code: lassoSelectionStyleRaw },
+    ],
+  },
+}
+
 // eslint-disable-next-line import/no-default-export
 export default meta

package/src/stories/create-cosmos.ts

@@ -25,7 +25,8 @@ export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; gr
     pointSize: 3,
     pointColor: '#4B5BBF',
     pointGreyoutOpacity: 0.1,
-    linkWidth: 0.2,
+    scalePointsOnZoom: true,
+    linkWidth: 0.8,
     linkColor: '#5F74C2',
     linkArrows: false,
     linkGreyoutOpacity: 0,

package/src/stories/generate-mesh-data.ts

@@ -104,7 +104,7 @@ export function generateMeshData (
     linkColors[i * 4 + 2] = rgba[2]
     linkColors[i * 4 + 3] = 0.9
 
-    linkWidths[i] = getRandom(0.1, 0.5)
+    linkWidths[i] = getRandom(0.4, 0.8)
     // linkStrength[i] = (n * m - sourcePointIndex) / (n * m)
   }
 

package/src/variables.ts

@@ -43,7 +43,8 @@ export const defaultConfigValues = {
   },
   showFPSMonitor: false,
   pixelRatio: 2,
-  scalePointsOnZoom: true,
+  scalePointsOnZoom: false,
+  scaleLinksOnZoom: false,
   enableZoom: true,
   enableSimulationDuringZoom: false,
   enableDrag: false,
@@ -54,6 +55,7 @@ export const defaultConfigValues = {
   pointSamplingDistance: 150,
   attribution: '',
   rescalePositions: undefined,
+  enableRightClickRepulsion: false,
 }
 
 export const hoveredPointRingOpacity = 0.7