-
Notifications
You must be signed in to change notification settings - Fork 107
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
19 changed files
with
276 additions
and
139 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,107 +1,31 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer'; | ||
| import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react'; | ||
| import { GlobalEditor } from './GlobalEditor'; | ||
| import { StepEditor } from './StepEditor'; | ||
| import { createSwitchStep, createTaskStep } from './StepUtils'; | ||
| import { WorkflowDefinition } from './model'; | ||
| import { useSequentialWorkflowDesignerController } from 'sequential-workflow-designer-react'; | ||
| import { useState } from 'react'; | ||
| import { Playground } from './playground/Playground'; | ||
| import { NativeEditors } from './nativeEditors/NativeEditors'; | ||
|
|
||
| const startDefinition: WorkflowDefinition = { | ||
| properties: { | ||
| alfa: 'bravo' | ||
| }, | ||
| sequence: [createTaskStep(), createSwitchStep()] | ||
| }; | ||
|
|
||
| const toolboxConfiguration: ToolboxConfiguration = { | ||
| groups: [{ name: 'Steps', steps: [createTaskStep(), createSwitchStep()] }] | ||
| }; | ||
|
|
||
| const stepsConfiguration: StepsConfiguration = { | ||
| iconUrlProvider: () => null | ||
| }; | ||
|
|
||
| const validatorConfiguration: ValidatorConfiguration = { | ||
| step: (step: Step) => Boolean(step.name), | ||
| root: (definition: WorkflowDefinition) => Boolean(definition.properties.alfa) | ||
| }; | ||
| const pathKey = 'swdReactPath'; | ||
| type AppPath = 'playground' | 'nativeEditors'; | ||
|
|
||
| export function App() { | ||
| const controller = useSequentialWorkflowDesignerController(); | ||
| const [isVisible, setIsVisible] = useState(true); | ||
| const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition)); | ||
| const [selectedStepId, setSelectedStepId] = useState<string | null>(null); | ||
| const [isReadonly, setIsReadonly] = useState(false); | ||
| const definitionJson = JSON.stringify(definition.value, null, 2); | ||
|
|
||
| useEffect(() => { | ||
| console.log(`definition updated, isValid=${definition.isValid}`); | ||
| }, [definition]); | ||
|
|
||
| function toggleVisibilityClicked() { | ||
| setIsVisible(!isVisible); | ||
| } | ||
|
|
||
| function toggleSelectionClicked() { | ||
| const id = definition.value.sequence[0].id; | ||
| setSelectedStepId(selectedStepId ? null : id); | ||
| } | ||
| const [path, setPath] = useState<AppPath>((localStorage[pathKey] as AppPath) || 'playground'); | ||
|
|
||
| function toggleIsReadonlyClicked() { | ||
| setIsReadonly(!isReadonly); | ||
| } | ||
|
|
||
| function moveViewportToFirstStepClicked() { | ||
| const fistStep = definition.value.sequence[0]; | ||
| if (fistStep) { | ||
| controller.moveViewportToStep(fistStep.id); | ||
| } | ||
| } | ||
|
|
||
| function reloadDefinitionClicked() { | ||
| const newDefinition = ObjectCloner.deepClone(startDefinition); | ||
| setDefinition(wrapDefinition(newDefinition)); | ||
| function changePath(path: AppPath) { | ||
| localStorage[pathKey] = path; | ||
| setPath(path); | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {isVisible && ( | ||
| <SequentialWorkflowDesigner | ||
| undoStackSize={10} | ||
| definition={definition} | ||
| onDefinitionChange={setDefinition} | ||
| selectedStepId={selectedStepId} | ||
| isReadonly={isReadonly} | ||
| onSelectedStepIdChanged={setSelectedStepId} | ||
| toolboxConfiguration={toolboxConfiguration} | ||
| stepsConfiguration={stepsConfiguration} | ||
| validatorConfiguration={validatorConfiguration} | ||
| controlBar={true} | ||
| globalEditor={<GlobalEditor />} | ||
| stepEditor={<StepEditor />} | ||
| controller={controller} | ||
| /> | ||
| )} | ||
|
|
||
| <ul> | ||
| <li>Definition: {definitionJson.length} bytes</li> | ||
| <li>Selected step: {selectedStepId}</li> | ||
| <li>Is readonly: {isReadonly ? '✅ Yes' : 'No'}</li> | ||
| <li>Is valid: {definition.isValid === undefined ? '?' : definition.isValid ? '✅ Yes' : '⛔ No'}</li> | ||
| </ul> | ||
|
|
||
| <div> | ||
| <button onClick={toggleVisibilityClicked}>Toggle visibility</button> | ||
| <button onClick={reloadDefinitionClicked}>Reload definition</button> | ||
| <button onClick={toggleSelectionClicked}>Toggle selection</button> | ||
| <button onClick={toggleIsReadonlyClicked}>Toggle readonly</button> | ||
| <button onClick={moveViewportToFirstStepClicked}>Move viewport to first step</button> | ||
| </div> | ||
|
|
||
| <div> | ||
| <textarea value={definitionJson} readOnly={true} cols={100} rows={15} /> | ||
| </div> | ||
| <nav> | ||
| <h1>SWD for React Demo</h1> | ||
| <button onClick={() => changePath('playground')} className={path === 'playground' ? 'selected' : ''}> | ||
| Playground | ||
| </button> | ||
| <button onClick={() => changePath('nativeEditors')} className={path === 'nativeEditors' ? 'selected' : ''}> | ||
| Native editors | ||
| </button> | ||
| </nav> | ||
| {path === 'playground' && <Playground />} | ||
| {path === 'nativeEditors' && <NativeEditors />} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { useState } from 'react'; | ||
| import { Definition, Step, StepEditorContext } from 'sequential-workflow-designer'; | ||
| import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react'; | ||
|
|
||
| export const startDefinition: Definition = { | ||
| sequence: [ | ||
| { | ||
| id: '0x1', | ||
| componentType: 'task', | ||
| name: 'Foo', | ||
| properties: {}, | ||
| type: 'test' | ||
| } | ||
| ], | ||
| properties: {} | ||
| }; | ||
|
|
||
| function globalEditorProvider(): HTMLElement { | ||
| const editor = document.createElement('div'); | ||
| editor.innerHTML = 'Global editor'; | ||
| return editor; | ||
| } | ||
|
|
||
| function stepEditorProvider(step: Step, context: StepEditorContext): HTMLElement { | ||
| const editor = document.createElement('div'); | ||
| const title = document.createElement('h2'); | ||
| title.innerText = `Edit ${step.type} step`; | ||
| editor.appendChild(title); | ||
| const nameInput = document.createElement('input'); | ||
| nameInput.value = step.name; | ||
| nameInput.addEventListener('input', () => { | ||
| step.name = nameInput.value; | ||
| context.notifyNameChanged(); | ||
| }); | ||
| editor.appendChild(nameInput); | ||
| return editor; | ||
| } | ||
|
|
||
| export function NativeEditors() { | ||
| const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition)); | ||
|
|
||
| return ( | ||
| <> | ||
| <SequentialWorkflowDesigner | ||
| definition={definition} | ||
| onDefinitionChange={setDefinition} | ||
| toolboxConfiguration={false} | ||
| stepsConfiguration={{}} | ||
| controlBar={true} | ||
| globalEditor={globalEditorProvider} | ||
| stepEditor={stepEditorProvider} | ||
| /> | ||
| </> | ||
| ); | ||
| } |
File renamed without changes.
Oops, something went wrong.