### Install Packages
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Install the necessary packages for the Sequential Workflow Designer and its Svelte wrapper using NPM.
```bash
npm i sequential-workflow-designer sequential-workflow-designer-svelte
```
--------------------------------
### Full Designer Initialization Example
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/README.md
A comprehensive example demonstrating how to initialize the sequential workflow designer with a placeholder, definition, and extensive configuration options. This includes step behaviors, validation, toolbox, and editors.
```typescript
import { Designer } from 'sequential-workflow-designer';
const placeholder = document.getElementById('placeholder');
const definition = {
properties: {
myProperty: 'my-value',
// root properties...
},
sequence: [
// steps...
],
};
const configuration = {
theme: 'light', // optional, default: 'light'
isReadonly: false, // optional, default: false
undoStackSize: 10, // optional, default: 0 - disabled, 1+ - enabled
steps: {
// all properties in this section are optional
iconUrlProvider: (componentType, type) => {
return `icon-${componentType}-${type}.svg`;
},
isDraggable: (step, parentSequence) => {
return step.name !== 'y';
},
isDeletable: (step, parentSequence) => {
return step.properties['isDeletable'];
},
isDuplicable: (step, parentSequence) => {
return true;
},
canInsertStep: (step, targetSequence, targetIndex) => {
return targetSequence.length < 5;
},
canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
return !step.properties['isLocked'];
},
canDeleteStep: (step, parentSequence) => {
return step.name !== 'x';
},
},
validator: {
// all validators are optional
step: (step, parentSequence, definition) => {
return /^[a-z]+$/.test(step.name);
},
root: definition => {
return definition.properties['memory'] > 256;
},
},
toolbox: {
isCollapsed: false,
groups: [
{
name: 'Files',
steps: [
// steps for the toolbox's group
],
},
{
name: 'Notification',
steps: [
// steps for the toolbox's group
],
},
],
},
editors: {
isCollapsed: false,
rootEditorProvider: (definition, rootContext, isReadonly) => {
const editor = document.createElement('div');
// ...
return editor;
},
stepEditorProvider: (step, stepContext, definition, isReadonly) => {
const editor = document.createElement('div');
// ...
return editor;
},
},
controlBar: true,
contextMenu: true,
};
const designer = Designer.create(placeholder, definition, configuration);
designer.onDefinitionChanged.subscribe(event => {
// ...
});
```
--------------------------------
### CDN Setup for Designer
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/README.md
Include the designer's CSS and JavaScript files in the head section of your HTML document when using a CDN. This makes the designer available globally.
```html
...
```
--------------------------------
### Root Editor Component
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Example of a custom root editor component for the workflow designer, allowing modification of root properties like 'velocity'.
```svelte
```
--------------------------------
### Step Editor Component
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Example of a custom step editor component for the workflow designer, allowing modification of step properties like 'name'.
```svelte
```
--------------------------------
### Create Designer Instance (NPM)
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/README.md
Instantiate the designer using the Designer.create method, passing a placeholder element, the workflow definition, and configuration options. This is the core step to render the designer.
```typescript
// ...
Designer.create(placeholder, definition, configuration);
```
--------------------------------
### Import CSS Files
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Add the required CSS files to your global CSS file for the designer's styling.
```css
@import 'sequential-workflow-designer/css/designer.css';
@import 'sequential-workflow-designer/css/designer-light.css';
@import 'sequential-workflow-designer/css/designer-dark.css';
```
--------------------------------
### Configure Designer Options
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Configure the designer's toolbox, steps, and validator settings using `useMemo` for optimization. These configurations define the available tools, step types, and validation rules.
```tsx
const toolboxConfiguration: ToolboxConfiguration = useMemo(() => ({ /* ... */ }), []);
const stepsConfiguration: StepsConfiguration = useMemo(() => ({ /* ... */ }), []);
const validatorConfiguration: ValidatorConfiguration = useMemo(() => ({ /* ... */ }), []);
```
--------------------------------
### Define Designer Configuration
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Import configuration types and define the steps, toolbox, and validator configurations for the designer.
```ts
import type { StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer';
const steps: StepsConfiguration = { /* ... */ };
const toolbox: ToolboxConfiguration = { /* ... */ };
const validator: ValidatorConfiguration = { /* ... */ };
```
--------------------------------
### Call Designer via CDN
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/README.md
Call the designer's create method using the global object provided by the CDN script. This is how you initialize the designer when not using a module bundler.
```javascript
sequentialWorkflowDesigner.Designer.create(placeholder, definition, configuration);
```
--------------------------------
### Initialize Workflow Definition
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Create or load an initial workflow definition. This object represents the structure of your workflow and is used to initialize the designer.
```ts
const startDefinition: Definition = { /* ... */ };
```
--------------------------------
### Import CSS Files (NPM)
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/README.md
Import the necessary CSS files for styling the designer when using NPM. These imports ensure the designer has the correct visual appearance.
```typescript
import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-soft.css';
import 'sequential-workflow-designer/css/designer-dark.css';
```
--------------------------------
### Define Workflow Definition
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Import the Definition type and initialize a workflow definition object.
```ts
import type { Definition } from 'sequential-workflow-designer';
let definition: Definition = { ... };
```
--------------------------------
### Wrap and Memorize Definition
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Use the `wrapDefinition` function to prepare the initial definition for the designer and store it using React's `useState` hook. This ensures the definition is reactive.
```tsx
const [definition, setDefinition] = useState(() => wrapDefinition(startDefinition));
```
--------------------------------
### Import CSS Files for Designer
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Import the required CSS files for the designer's styling. Ensure these are imported into your application's entry point or relevant component.
```tsx
import 'sequential-workflow-designer/css/designer.css';
import 'sequential-workflow-designer/css/designer-light.css';
import 'sequential-workflow-designer/css/designer-dark.css';
```
--------------------------------
### Assign Custom Editors to Designer
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Import and assign your custom root and step editor components to the SequentialWorkflowDesigner.
```svelte
```
--------------------------------
### Import Designer Package (NPM)
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/README.md
Import the Designer class from the sequential-workflow-designer package when using NPM. This is the primary step to integrate the designer into your project.
```typescript
import { Designer } from 'sequential-workflow-designer';
```
--------------------------------
### Import Svelte Component
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Import the SequentialWorkflowDesigner component into your Svelte application.
```tsx
import { SequentialWorkflowDesigner } from 'sequential-workflow-designer-svelte';
```
--------------------------------
### Create Custom Root Editor Component
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Define a React component for editing the root properties of the workflow. Use the `useRootEditor` hook to access and modify root properties.
```tsx
function RootEditor() {
const { properties, setProperty, definition, isReadonly } = useRootEditor();
function onSpeedChanged(e) {
setProperty('speed', e.target.value);
}
return (
<>
Speed
);
}
```
--------------------------------
### Handle Definition Changes
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Create a function to receive and update the definition and validation status when changes occur.
```ts
function onDefinitionChanged({ detail }: { detail: { definition: Definition, isValid: boolean } }) {
definition = detail.definition;
isValid = detail.isValid;
}
```
--------------------------------
### Create Custom Step Editor Component
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Define a React component for editing individual step properties. Use the `useStepEditor` hook to access and modify step details like name and properties.
```tsx
function StepEditor() {
const { type, componentType, name, setName, properties, setProperty, definition, isReadonly } = useStepEditor();
function onNameChanged(e) {
setName(e.target.value);
}
return (
<>
Name
);
}
```
--------------------------------
### Use SequentialWorkflowDesigner Component
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Integrate the SequentialWorkflowDesigner component into your Svelte template, passing necessary props like theme, definition, and event handlers.
```svelte
```
--------------------------------
### Import Designer Types and Hooks
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Import essential types and hooks from the designer and its React wrapper. These are necessary for defining workflow structures and using designer functionalities within React components.
```tsx
import {
Definition,
ToolboxConfiguration,
StepsConfiguration,
ValidatorConfiguration
} from 'sequential-workflow-designer';
import {
SequentialWorkflowDesigner,
wrapDefinition,
useRootEditor,
useStepEditor
} from 'sequential-workflow-designer-react';
```
--------------------------------
### Attach Sequential Workflow Designer
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Render the `SequentialWorkflowDesigner` component, passing the definition, change handler, configurations, and custom editor components. This integrates the designer into your React application.
```tsx
}
stepEditor={}>
/>
```
--------------------------------
### Hide Designer UI Components
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/react/README.md
Configure the `SequentialWorkflowDesigner` to hide specific UI elements like the toolbox, control bar, context menu, or custom editors by setting their props to `false`.
```tsx
/>
```
--------------------------------
### Hiding UI Components
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/README.md
Configure the designer to hide specific UI components like the toolbox, editors, control bar, or context menu by setting their respective properties to false. This allows for a more streamlined interface.
```typescript
const configuration = {
toolbox: false,
editors: false,
controlBar: false,
contextMenu: false,
// ...
};
```
--------------------------------
### Track Validation Status
Source: https://github.com/nocode-js/sequential-workflow-designer/blob/main/svelte/README.md
Declare a variable to store the validation status of the workflow definition.
```ts
let isValid: boolean | null = null;
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.