diff --git a/src/stories/clusters.stories.ts b/src/stories/clusters.stories.ts index 7eb83a5..c9f7473 100644 --- a/src/stories/clusters.stories.ts +++ b/src/stories/clusters.stories.ts @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html' +import type { Meta } from '@storybook/html' import { CosmosStoryProps } from '@/graph/stories/create-cosmos' +import { createStory, Story } from '@/graph/stories/create-story' import { WithLabelsStory } from './clusters/with-labels' import { WormStory } from './clusters/worm' import { RadialStory } from './clusters/radial' @@ -19,35 +20,39 @@ const meta: Meta = { }, } -type Story = StoryObj; - const sourceCodeAddonParams = [ { name: 'create-cosmos', code: createCosmosRaw }, { name: 'generate-mesh-data', code: generateMeshDataRaw }, ] -export const Worm = WormStory as Story -Worm.parameters = { - sourceCode: [ - { name: 'Story', code: wormStory }, - ...sourceCodeAddonParams, - ], +export const Worm: Story = { + ...createStory(WormStory), + parameters: { + sourceCode: [ + { name: 'Story', code: wormStory }, + ...sourceCodeAddonParams, + ], + }, } -export const Radial = RadialStory as Story -Radial.parameters = { - sourceCode: [ - { name: 'Story', code: radialStory }, - ...sourceCodeAddonParams, - ], +export const Radial: Story = { + ...createStory(RadialStory), + parameters: { + sourceCode: [ + { name: 'Story', code: radialStory }, + ...sourceCodeAddonParams, + ], + }, } -export const WithLabels = WithLabelsStory as Story -WithLabels.parameters = { - sourceCode: [ - { name: 'Story', code: withLabelsStory }, - ...sourceCodeAddonParams, - ], +export const WithLabels: Story = { + ...createStory(WithLabelsStory), + parameters: { + sourceCode: [ + { name: 'Story', code: withLabelsStory }, + ...sourceCodeAddonParams, + ], + }, } // eslint-disable-next-line import/no-default-export diff --git a/src/stories/clusters/radial.ts b/src/stories/clusters/radial.ts index bbb48cd..d0934cb 100644 --- a/src/stories/clusters/radial.ts +++ b/src/stories/clusters/radial.ts @@ -1,14 +1,16 @@ +import { Graph } from '@cosmograph/cosmos' import { createCosmos } from '../create-cosmos' import { generateMeshData } from '../generate-mesh-data' -export const RadialStory = (): HTMLDivElement => { +export const RadialStory = (): { graph: Graph; div: HTMLDivElement} => { const { pointPositions, pointColors, pointSizes, links, linkColors, linkWidths, pointClusters, clusterPositions, clusterStrength, } = generateMeshData(100, 100, 100, 1.0) - const { div } = createCosmos({ + + return createCosmos({ pointPositions, pointColors, pointSizes, @@ -19,6 +21,4 @@ export const RadialStory = (): HTMLDivElement => { clusterPositions, clusterStrength, }) - - return div } diff --git a/src/stories/clusters/with-labels.ts b/src/stories/clusters/with-labels.ts index cde7862..9231951 100644 --- a/src/stories/clusters/with-labels.ts +++ b/src/stories/clusters/with-labels.ts @@ -1,9 +1,10 @@ +import { Graph } from '@cosmograph/cosmos' import { createClusterLabels } from '../create-cluster-labels' import { createCosmos } from '../create-cosmos' import { generateMeshData } from '../generate-mesh-data' -export const WithLabelsStory = (): HTMLDivElement => { +export const WithLabelsStory = (): {div: HTMLDivElement; graph: Graph } => { const { pointPositions, pointColors, pointClusters } = generateMeshData(100, 100, 15, 1.0) const { div, graph } = createCosmos({ pointPositions, @@ -20,5 +21,5 @@ export const WithLabelsStory = (): HTMLDivElement => { onSimulationTick: updateClusterLabels.bind(this, graph), }) - return div + return { div, graph } } diff --git a/src/stories/clusters/worm.ts b/src/stories/clusters/worm.ts index 48b5cf1..7a69b7f 100644 --- a/src/stories/clusters/worm.ts +++ b/src/stories/clusters/worm.ts @@ -1,10 +1,12 @@ +import { Graph } from '@cosmograph/cosmos' import { createCosmos } from '../create-cosmos' import { generateMeshData } from '../generate-mesh-data' -export const WormStory = (): HTMLDivElement => { +export const WormStory = (): {graph: Graph; div: HTMLDivElement} => { const { pointPositions, pointColors, links, linkColors, pointClusters } = generateMeshData(100, 100, 1000, 1.0) - const { div } = createCosmos({ + + return createCosmos({ simulationGravity: 0.5, simulationRepulsion: 1, simulationLinkSpring: 1, @@ -14,6 +16,4 @@ export const WormStory = (): HTMLDivElement => { links, linkColors, }) - - return div } diff --git a/src/stories/create-cosmos.ts b/src/stories/create-cosmos.ts index 0847c34..1285e19 100644 --- a/src/stories/create-cosmos.ts +++ b/src/stories/create-cosmos.ts @@ -17,10 +17,8 @@ export type CosmosStoryProps = GraphConfigInterface & { export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; graph: Graph} => { const div = document.createElement('div') - // const canvas = document.createElement('canvas') div.style.height = '100vh' div.style.width = '100%' - // div.appendChild(canvas) const config: GraphConfigInterface = { backgroundColor: '#212C42', diff --git a/src/stories/create-story.ts b/src/stories/create-story.ts new file mode 100644 index 0000000..6dff2d1 --- /dev/null +++ b/src/stories/create-story.ts @@ -0,0 +1,21 @@ +import { Graph } from '@cosmograph/cosmos' +import type { StoryObj } from '@storybook/html' +import { CosmosStoryProps } from '@/graph/stories/create-cosmos' + +export type Story = StoryObj; + +export const createStory: (storyFunction: () => { + graph: Graph; + div: HTMLDivElement; +}) => Story = (storyFunction) => ({ + async beforeEach (d): Promise<() => void> { + return (): void => { + d.args.graph?.destroy() + } + }, + render: (args): HTMLDivElement => { + const story = storyFunction() + args.graph = story.graph + return story.div + }, +}) diff --git a/src/stories/experiments.stories.ts b/src/stories/experiments.stories.ts index a6a3d31..86ddcaf 100644 --- a/src/stories/experiments.stories.ts +++ b/src/stories/experiments.stories.ts @@ -1,5 +1,6 @@ -import type { Meta, StoryObj } from '@storybook/html' +import type { Meta } from '@storybook/html' +import { createStory, Story } from '@/graph/stories/create-story' import { CosmosStoryProps } from './create-cosmos' import { MeshWithHolesStory } from './experiments/mesh-with-holes' import { FullMeshStory } from './experiments/full-mesh' @@ -14,26 +15,28 @@ const meta: Meta = { title: 'Examples/Experiments', } -type Story = StoryObj; - const sourceCodeAddonParams = [ { name: 'create-cosmos', code: createCosmosRaw }, { name: 'generate-mesh-data', code: generateMeshDataRaw }, ] -export const FullMesh = FullMeshStory as Story -FullMesh.parameters = { - sourceCode: [ - { name: 'Story', code: fullMeshRaw }, - ...sourceCodeAddonParams, - ], +export const FullMesh: Story = { + ...createStory(FullMeshStory), + parameters: { + sourceCode: [ + { name: 'Story', code: fullMeshRaw }, + ...sourceCodeAddonParams, + ], + }, } -export const MeshWithHoles = MeshWithHolesStory as Story -MeshWithHoles.parameters = { - sourceCode: [ - { name: 'Story', code: meshWithHolesRaw }, - ...sourceCodeAddonParams, - ], +export const MeshWithHoles: Story = { + ...createStory(MeshWithHolesStory), + parameters: { + sourceCode: [ + { name: 'Story', code: meshWithHolesRaw }, + ...sourceCodeAddonParams, + ], + }, } // eslint-disable-next-line import/no-default-export diff --git a/src/stories/experiments/full-mesh.ts b/src/stories/experiments/full-mesh.ts index bc67e83..f258676 100644 --- a/src/stories/experiments/full-mesh.ts +++ b/src/stories/experiments/full-mesh.ts @@ -1,13 +1,13 @@ +import { Graph } from '@cosmograph/cosmos' import { createCosmos } from '../create-cosmos' import { generateMeshData } from '../generate-mesh-data' -export const FullMeshStory = (): HTMLDivElement => { +export const FullMeshStory = (): { graph: Graph; div: HTMLDivElement} => { const { pointPositions, links, pointColors } = generateMeshData(40, 30, 15, 1.0) - const { div } = createCosmos({ + + return createCosmos({ pointPositions, links, pointColors, }) - - return div } diff --git a/src/stories/experiments/mesh-with-holes.ts b/src/stories/experiments/mesh-with-holes.ts index d9bec0f..adb0f5f 100644 --- a/src/stories/experiments/mesh-with-holes.ts +++ b/src/stories/experiments/mesh-with-holes.ts @@ -1,13 +1,13 @@ +import { Graph } from '@cosmograph/cosmos' import { createCosmos } from '../create-cosmos' import { generateMeshData } from '../generate-mesh-data' -export const MeshWithHolesStory = (): HTMLDivElement => { +export const MeshWithHolesStory = (): { graph: Graph; div: HTMLDivElement} => { const { pointPositions, links, pointColors } = generateMeshData(40, 80, 15, 0.8) - const { div } = createCosmos({ + + return createCosmos({ pointPositions, links, pointColors, }) - - return div }