Skip to content

Commit

Permalink
Config: Add disableSimulation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Stukova @rokotyan
Stukova authored and rokotyan committed Jul 28, 2023
1 parent 1e16f4a commit 215de08
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 88 deletions.
10 changes: 10 additions & 0 deletions src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,15 @@ export interface GraphSimulationSettings<N> {
onRestart?: () => void;
}
export interface GraphConfigInterface<N extends CosmosInputNode, L extends CosmosInputLink> {
/**
* Do not run the simulation, just render the graph.
* Cosmos uses the x and y values of the nodes’ data to determine their position in the graph.
* If x and y values are not specified, the position of the nodes will be assigned randomly.
* This property will be applied only on component initialization and it
* can't be changed using the `setConfig` method.
* Default value: `false`
*/
disableSimulation?: boolean;
/**
* Canvas background color.
* Default value: '#222222'
Expand Down Expand Up @@ -366,6 +375,7 @@ export interface GraphConfigInterface<N extends CosmosInputNode, L extends Cosmo
}

export class GraphConfig<N extends CosmosInputNode, L extends CosmosInputLink> implements GraphConfigInterface<N, L> {
public disableSimulation = defaultConfigValues.disableSimulation
public backgroundColor = defaultBackgroundColor
public spaceSize = defaultConfigValues.spaceSize
public nodeColor = defaultNodeColor
Expand Down
114 changes: 59 additions & 55 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ export class Graph<N extends CosmosInputNode, L extends CosmosInputLink> {
private store = new Store<N>()
private points: Points<N, L>
private lines: Lines<N, L>
private forceGravity: ForceGravity<N, L>
private forceCenter: ForceCenter<N, L>
private forceGravity: ForceGravity<N, L> | undefined
private forceCenter: ForceCenter<N, L> | undefined
private forceManyBody: ForceManyBody<N, L> | ForceManyBodyQuadtree<N, L> | undefined
private forceLinkIncoming: ForceLink<N, L>
private forceLinkOutgoing: ForceLink<N, L>
private forceMouse: ForceMouse<N, L>
private forceLinkIncoming: ForceLink<N, L> | undefined
private forceLinkOutgoing: ForceLink<N, L> | undefined
private forceMouse: ForceMouse<N, L> | undefined
private zoomInstance = new Zoom(this.store, this.config)
private fpsMonitor: FPSMonitor | undefined
private hasBeenRecentlyDestroyed = false
Expand Down Expand Up @@ -107,14 +107,16 @@ export class Graph<N extends CosmosInputNode, L extends CosmosInputLink> {

this.points = new Points(this.reglInstance, this.config, this.store, this.graph)
this.lines = new Lines(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceGravity = new ForceGravity(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceCenter = new ForceCenter(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceManyBody = this.config.useQuadtree
? new ForceManyBodyQuadtree(this.reglInstance, this.config, this.store, this.graph, this.points)
: new ForceManyBody(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceLinkIncoming = new ForceLink(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceLinkOutgoing = new ForceLink(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceMouse = new ForceMouse(this.reglInstance, this.config, this.store, this.graph, this.points)
if (!this.config.disableSimulation) {
this.forceGravity = new ForceGravity(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceCenter = new ForceCenter(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceManyBody = this.config.useQuadtree
? new ForceManyBodyQuadtree(this.reglInstance, this.config, this.store, this.graph, this.points)
: new ForceManyBody(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceLinkIncoming = new ForceLink(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceLinkOutgoing = new ForceLink(this.reglInstance, this.config, this.store, this.graph, this.points)
this.forceMouse = new ForceMouse(this.reglInstance, this.config, this.store, this.graph, this.points)
}

this.store.backgroundColor = getRgbaColor(this.config.backgroundColor)
if (this.config.highlightedNodeRingColor) {
Expand Down Expand Up @@ -597,9 +599,9 @@ export class Graph<N extends CosmosInputNode, L extends CosmosInputLink> {
if (this.hasBeenRecentlyDestroyed) return
this.points.destroy()
this.lines.destroy()
this.forceCenter.destroy()
this.forceLinkIncoming.destroy()
this.forceLinkOutgoing.destroy()
this.forceCenter?.destroy()
this.forceLinkIncoming?.destroy()
this.forceLinkOutgoing?.destroy()
this.forceManyBody?.destroy()
this.reglInstance.destroy()
this.hasBeenRecentlyDestroyed = true
Expand All @@ -612,9 +614,9 @@ export class Graph<N extends CosmosInputNode, L extends CosmosInputLink> {
this.points.create()
this.lines.create()
this.forceManyBody?.create()
this.forceLinkIncoming.create(LinkDirection.INCOMING)
this.forceLinkOutgoing.create(LinkDirection.OUTGOING)
this.forceCenter.create()
this.forceLinkIncoming?.create(LinkDirection.INCOMING)
this.forceLinkOutgoing?.create(LinkDirection.OUTGOING)
this.forceCenter?.create()
this.hasBeenRecentlyDestroyed = false
}

Expand All @@ -637,16 +639,16 @@ export class Graph<N extends CosmosInputNode, L extends CosmosInputLink> {
private initPrograms (): void {
this.points.initPrograms()
this.lines.initPrograms()
this.forceGravity.initPrograms()
this.forceLinkIncoming.initPrograms()
this.forceLinkOutgoing.initPrograms()
this.forceMouse.initPrograms()
this.forceGravity?.initPrograms()
this.forceLinkIncoming?.initPrograms()
this.forceLinkOutgoing?.initPrograms()
this.forceMouse?.initPrograms()
this.forceManyBody?.initPrograms()
this.forceCenter.initPrograms()
this.forceCenter?.initPrograms()
}

private frame (): void {
const { config: { simulation, renderLinks }, store: { alpha, isSimulationRunning } } = this
const { config: { simulation, renderLinks, disableSimulation }, store: { alpha, isSimulationRunning } } = this
if (alpha < ALPHA_MIN && isSimulationRunning) this.end()
if (!this.store.pointsTextureSize) return

Expand All @@ -655,46 +657,48 @@ export class Graph<N extends CosmosInputNode, L extends CosmosInputLink> {
this.resizeCanvas()
this.findHoveredPoint()

if (this.isRightClickMouse) {
if (!isSimulationRunning) this.start(0.1)
this.forceMouse.run()
this.points.updatePosition()
}

if ((isSimulationRunning && !this.zoomInstance.isRunning)) {
if (simulation.gravity) {
this.forceGravity.run()
if (!disableSimulation) {
if (this.isRightClickMouse) {
if (!isSimulationRunning) this.start(0.1)
this.forceMouse?.run()
this.points.updatePosition()
}

if (simulation.center) {
this.forceCenter.run()
this.points.updatePosition()
}
if ((isSimulationRunning && !this.zoomInstance.isRunning)) {
if (simulation.gravity) {
this.forceGravity?.run()
this.points.updatePosition()
}

this.forceManyBody?.run()
this.points.updatePosition()
if (simulation.center) {
this.forceCenter?.run()
this.points.updatePosition()
}

if (this.store.linksTextureSize) {
this.forceLinkIncoming.run()
this.points.updatePosition()
this.forceLinkOutgoing.run()
this.forceManyBody?.run()
this.points.updatePosition()

if (this.store.linksTextureSize) {
this.forceLinkIncoming?.run()
this.points.updatePosition()
this.forceLinkOutgoing?.run()
this.points.updatePosition()
}

this.store.alpha += this.store.addAlpha(this.config.simulation.decay ?? defaultConfigValues.simulation.decay)
if (this.isRightClickMouse) this.store.alpha = Math.max(this.store.alpha, 0.1)
this.store.simulationProgress = Math.sqrt(Math.min(1, ALPHA_MIN / this.store.alpha))
this.config.simulation.onTick?.(
this.store.alpha,
this.store.hoveredNode?.node,
this.store.hoveredNode ? this.graph.getInputIndexBySortedIndex(this.store.hoveredNode.index) : undefined,
this.store.hoveredNode?.position
)
}

this.store.alpha += this.store.addAlpha(this.config.simulation.decay ?? defaultConfigValues.simulation.decay)
if (this.isRightClickMouse) this.store.alpha = Math.max(this.store.alpha, 0.1)
this.store.simulationProgress = Math.sqrt(Math.min(1, ALPHA_MIN / this.store.alpha))
this.config.simulation.onTick?.(
this.store.alpha,
this.store.hoveredNode?.node,
this.store.hoveredNode ? this.graph.getInputIndexBySortedIndex(this.store.hoveredNode.index) : undefined,
this.store.hoveredNode?.position
)
this.points.trackPoints()
}

this.points.trackPoints()

// Clear canvas
this.reglInstance.clear({
color: this.store.backgroundColor,
Expand Down
71 changes: 38 additions & 33 deletions src/modules/Points/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,26 +65,28 @@ export class Points<N extends CosmosInputNode, L extends CosmosInputLink> extend
stencil: false,
})

this.previousPositionFbo = reglInstance.framebuffer({
color: reglInstance.texture({
data: initialState,
shape: [pointsTextureSize, pointsTextureSize, 4],
type: 'float',
}),
depth: false,
stencil: false,
})
if (!this.config.disableSimulation) {
this.previousPositionFbo = reglInstance.framebuffer({
color: reglInstance.texture({
data: initialState,
shape: [pointsTextureSize, pointsTextureSize, 4],
type: 'float',
}),
depth: false,
stencil: false,
})

// Create velocity buffer
this.velocityFbo = reglInstance.framebuffer({
color: reglInstance.texture({
data: new Float32Array(pointsTextureSize * pointsTextureSize * 4).fill(0),
shape: [pointsTextureSize, pointsTextureSize, 4],
type: 'float',
}),
depth: false,
stencil: false,
})
// Create velocity buffer
this.velocityFbo = reglInstance.framebuffer({
color: reglInstance.texture({
data: new Float32Array(pointsTextureSize * pointsTextureSize * 4).fill(0),
shape: [pointsTextureSize, pointsTextureSize, 4],
type: 'float',
}),
depth: false,
stencil: false,
})
}

// Create selected points buffer
this.selectedFbo = reglInstance.framebuffer({
Expand All @@ -111,20 +113,23 @@ export class Points<N extends CosmosInputNode, L extends CosmosInputLink> extend

public initPrograms (): void {
const { reglInstance, config, store, data } = this
this.updatePositionCommand = reglInstance({
frag: updatePositionFrag,
vert: updateVert,
framebuffer: () => this.currentPositionFbo as regl.Framebuffer2D,
primitive: 'triangle strip',
count: 4,
attributes: { quad: createQuadBuffer(reglInstance) },
uniforms: {
position: () => this.previousPositionFbo,
velocity: () => this.velocityFbo,
friction: () => config.simulation?.friction,
spaceSize: () => store.adjustedSpaceSize,
},
})
if (!config.disableSimulation) {
this.updatePositionCommand = reglInstance({
frag: updatePositionFrag,
vert: updateVert,
framebuffer: () => this.currentPositionFbo as regl.Framebuffer2D,
primitive: 'triangle strip',
count: 4,
attributes: { quad: createQuadBuffer(reglInstance) },
uniforms: {
position: () => this.previousPositionFbo,
velocity: () => this.velocityFbo,
friction: () => config.simulation?.friction,
spaceSize: () => store.adjustedSpaceSize,
},
})
}

this.drawCommand = reglInstance({
frag: drawPointsFrag,
vert: drawPointsVert,
Expand Down
1 change: 1 addition & 0 deletions src/variables.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const defaultLinkWidth = 1
export const defaultBackgroundColor = '#222222'

export const defaultConfigValues = {
disableSimulation: false,
spaceSize: 4096,
nodeSizeScale: 1,
linkWidthScale: 1,
Expand Down

0 comments on commit 215de08

Please sign in to comment.