├── .github └── workflows │ ├── ci.yaml │ └── release.yaml ├── .gitignore ├── LICENSE ├── README.md ├── app ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.tsx │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.json └── tsconfig.node.json ├── docs └── img │ └── screenshot.png ├── package.json ├── rollup.config.mjs ├── src ├── components │ ├── editable-on-click │ │ └── index.tsx │ ├── flow-graph │ │ ├── arrow-marker.tsx │ │ ├── embedded-arrow-marker.tsx │ │ ├── embedded-circle-marker.tsx │ │ ├── embedded-through-marker.tsx │ │ ├── flow-graph.module.css │ │ ├── flow-item-list │ │ │ ├── flow-item-list.module.css │ │ │ └── index.tsx │ │ ├── index.tsx │ │ ├── initial-edge │ │ │ └── index.tsx │ │ ├── routing-layer │ │ │ ├── index.tsx │ │ │ └── routing-layer.module.css │ │ ├── state-node │ │ │ ├── index.tsx │ │ │ └── state-node.module.css │ │ ├── svg-mask.tsx │ │ ├── transition-node │ │ │ ├── index.tsx │ │ │ └── transition-node.module.css │ │ ├── transitions-view │ │ │ └── index.tsx │ │ ├── types.ts │ │ └── use-pan-and-zoom.ts │ ├── flow-items │ │ ├── action-filled.svg │ │ ├── action.svg │ │ ├── assertion.svg │ │ ├── condition-filled.svg │ │ ├── condition.svg │ │ ├── entry-action.svg │ │ ├── event-filled.svg │ │ ├── event.svg │ │ ├── exit-action.svg │ │ ├── flow-icon.module.css │ │ ├── index.tsx │ │ ├── state-filled.svg │ │ └── state.svg │ ├── grid-background │ │ ├── grid-background.module.css │ │ └── index.tsx │ ├── icon-button │ │ ├── icon-button.module.css │ │ └── index.tsx │ ├── popup │ │ ├── index.tsx │ │ └── popup.module.css │ ├── select │ │ ├── chevron-down.svg │ │ ├── index.tsx │ │ └── select.module.css │ ├── svg-flow-graph │ │ ├── arrow-marker.tsx │ │ ├── embedded-arrow-marker.tsx │ │ ├── embedded-circle-marker.tsx │ │ ├── embedded-through-marker.tsx │ │ ├── flow-item-list │ │ │ └── index.tsx │ │ ├── index.tsx │ │ ├── initial-edge │ │ │ └── index.tsx │ │ ├── routing-layer │ │ │ └── index.tsx │ │ ├── sized-text.tsx │ │ ├── sizes.ts │ │ ├── state-node │ │ │ └── index.tsx │ │ ├── svg-mask.tsx │ │ ├── transition-node │ │ │ └── index.tsx │ │ ├── transitions-view │ │ │ └── index.tsx │ │ ├── types.ts │ │ └── use-pan-and-zoom.ts │ └── svg-flow-items │ │ └── index.tsx ├── custom.d.ts ├── data │ └── flows.ts ├── debounce-utils.ts ├── flow-utils │ └── index.ts ├── hooks │ ├── use-click-away.ts │ ├── use-modal.ts │ ├── use-position.ts │ └── use-reposition-visibly.ts ├── index.ts ├── schema.ts └── transformers │ ├── elk.ts │ ├── svg.ts │ └── xstate.ts └── tsconfig.json /.github/workflows/ci.yaml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/.github/workflows/ci.yaml -------------------------------------------------------------------------------- /.github/workflows/release.yaml: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/.github/workflows/release.yaml -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/.gitignore -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/LICENSE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/README.md -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/app/index.html -------------------------------------------------------------------------------- /app/package-lock.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/app/package-lock.json -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/app/package.json -------------------------------------------------------------------------------- /app/src/App.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/app/src/App.tsx -------------------------------------------------------------------------------- /app/src/main.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/app/src/main.tsx -------------------------------------------------------------------------------- /app/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /app/tsconfig.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/app/tsconfig.json -------------------------------------------------------------------------------- /app/tsconfig.node.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/app/tsconfig.node.json -------------------------------------------------------------------------------- /docs/img/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/docs/img/screenshot.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/package.json -------------------------------------------------------------------------------- /rollup.config.mjs: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/rollup.config.mjs -------------------------------------------------------------------------------- /src/components/editable-on-click/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/editable-on-click/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/arrow-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/arrow-marker.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/embedded-arrow-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/embedded-arrow-marker.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/embedded-circle-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/embedded-circle-marker.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/embedded-through-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/embedded-through-marker.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/flow-graph.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/flow-graph.module.css -------------------------------------------------------------------------------- /src/components/flow-graph/flow-item-list/flow-item-list.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/flow-item-list/flow-item-list.module.css -------------------------------------------------------------------------------- /src/components/flow-graph/flow-item-list/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/flow-item-list/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/initial-edge/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/initial-edge/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/routing-layer/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/routing-layer/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/routing-layer/routing-layer.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/routing-layer/routing-layer.module.css -------------------------------------------------------------------------------- /src/components/flow-graph/state-node/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/state-node/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/state-node/state-node.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/state-node/state-node.module.css -------------------------------------------------------------------------------- /src/components/flow-graph/svg-mask.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/svg-mask.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/transition-node/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/transition-node/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/transition-node/transition-node.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/transition-node/transition-node.module.css -------------------------------------------------------------------------------- /src/components/flow-graph/transitions-view/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/transitions-view/index.tsx -------------------------------------------------------------------------------- /src/components/flow-graph/types.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/types.ts -------------------------------------------------------------------------------- /src/components/flow-graph/use-pan-and-zoom.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-graph/use-pan-and-zoom.ts -------------------------------------------------------------------------------- /src/components/flow-items/action-filled.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/action-filled.svg -------------------------------------------------------------------------------- /src/components/flow-items/action.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/action.svg -------------------------------------------------------------------------------- /src/components/flow-items/assertion.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/assertion.svg -------------------------------------------------------------------------------- /src/components/flow-items/condition-filled.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/condition-filled.svg -------------------------------------------------------------------------------- /src/components/flow-items/condition.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/condition.svg -------------------------------------------------------------------------------- /src/components/flow-items/entry-action.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/entry-action.svg -------------------------------------------------------------------------------- /src/components/flow-items/event-filled.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/event-filled.svg -------------------------------------------------------------------------------- /src/components/flow-items/event.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/event.svg -------------------------------------------------------------------------------- /src/components/flow-items/exit-action.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/exit-action.svg -------------------------------------------------------------------------------- /src/components/flow-items/flow-icon.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/flow-icon.module.css -------------------------------------------------------------------------------- /src/components/flow-items/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/index.tsx -------------------------------------------------------------------------------- /src/components/flow-items/state-filled.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/state-filled.svg -------------------------------------------------------------------------------- /src/components/flow-items/state.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/flow-items/state.svg -------------------------------------------------------------------------------- /src/components/grid-background/grid-background.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/grid-background/grid-background.module.css -------------------------------------------------------------------------------- /src/components/grid-background/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/grid-background/index.tsx -------------------------------------------------------------------------------- /src/components/icon-button/icon-button.module.css: -------------------------------------------------------------------------------- 1 | .iconButton { 2 | display: flex; 3 | cursor: pointer; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/icon-button/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/icon-button/index.tsx -------------------------------------------------------------------------------- /src/components/popup/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/popup/index.tsx -------------------------------------------------------------------------------- /src/components/popup/popup.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/popup/popup.module.css -------------------------------------------------------------------------------- /src/components/select/chevron-down.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/select/chevron-down.svg -------------------------------------------------------------------------------- /src/components/select/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/select/index.tsx -------------------------------------------------------------------------------- /src/components/select/select.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/select/select.module.css -------------------------------------------------------------------------------- /src/components/svg-flow-graph/arrow-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/arrow-marker.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/embedded-arrow-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/embedded-arrow-marker.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/embedded-circle-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/embedded-circle-marker.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/embedded-through-marker.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/embedded-through-marker.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/flow-item-list/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/flow-item-list/index.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/index.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/initial-edge/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/initial-edge/index.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/routing-layer/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/routing-layer/index.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/sized-text.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/sized-text.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/sizes.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/sizes.ts -------------------------------------------------------------------------------- /src/components/svg-flow-graph/state-node/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/state-node/index.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/svg-mask.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/svg-mask.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/transition-node/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/transition-node/index.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/transitions-view/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/transitions-view/index.tsx -------------------------------------------------------------------------------- /src/components/svg-flow-graph/types.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/types.ts -------------------------------------------------------------------------------- /src/components/svg-flow-graph/use-pan-and-zoom.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-graph/use-pan-and-zoom.ts -------------------------------------------------------------------------------- /src/components/svg-flow-items/index.tsx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/components/svg-flow-items/index.tsx -------------------------------------------------------------------------------- /src/custom.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/custom.d.ts -------------------------------------------------------------------------------- /src/data/flows.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/data/flows.ts -------------------------------------------------------------------------------- /src/debounce-utils.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/debounce-utils.ts -------------------------------------------------------------------------------- /src/flow-utils/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/flow-utils/index.ts -------------------------------------------------------------------------------- /src/hooks/use-click-away.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/hooks/use-click-away.ts -------------------------------------------------------------------------------- /src/hooks/use-modal.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/hooks/use-modal.ts -------------------------------------------------------------------------------- /src/hooks/use-position.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/hooks/use-position.ts -------------------------------------------------------------------------------- /src/hooks/use-reposition-visibly.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/hooks/use-reposition-visibly.ts -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/index.ts -------------------------------------------------------------------------------- /src/schema.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/schema.ts -------------------------------------------------------------------------------- /src/transformers/elk.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/transformers/elk.ts -------------------------------------------------------------------------------- /src/transformers/svg.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/transformers/svg.ts -------------------------------------------------------------------------------- /src/transformers/xstate.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/src/transformers/xstate.ts -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/statebacked/react-statechart/HEAD/tsconfig.json --------------------------------------------------------------------------------