Flowchart (@webwriter/[email protected])

License: MIT | Version: 2.0.9

Create programming flowcharts with interactive tasks. Use standardized Elements such as loops and Branchings.

Snippets

Snippets are examples and templates using the package's widgets.

| Name | Import Path | | :--: | :---------: | | Erklaerung | @webwriter/flowchart/snippets/Erklaerung.html | | For Schleife | @webwriter/flowchart/snippets/For-Schleife.html | | If Else | @webwriter/flowchart/snippets/If-Else.html | | Switch | @webwriter/flowchart/snippets/Switch.html | | Kontextbeispiel | @webwriter/flowchart/snippets/Kontextbeispiel.html |

FlowchartWidget (<webwriter-flowchart>)

Usage

Use with a CDN (e.g. jsdelivr):

<link href="https://cdn.jsdelivr.net/npm/@webwriter/flowchart/widgets/webwriter-flowchart.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/@webwriter/flowchart/widgets/webwriter-flowchart.js"></script>
<webwriter-flowchart></webwriter-flowchart>

Or use with a bundler (e.g. Vite):

npm install @webwriter/flowchart

<link href="@webwriter/flowchart/widgets/webwriter-flowchart.css" rel="stylesheet">
<script type="module" src="@webwriter/flowchart/widgets/webwriter-flowchart.js"></script>
<webwriter-flowchart></webwriter-flowchart>

Fields

| Name (Attribute Name) | Type | Description | Default | Reflects | | :-------------------: | :--: | :---------: | :-----: | :------: | | localize | - | - | LOCALIZE | ✗ | | graphNodes (graphNodes) | GraphNode[] | Current list of graph nodes (programmatic API). | [] | ✓ | | arrows (arrows) | Arrow[] | Current list of arrows between nodes (programmatic API). | [] | ✗ | | getGraphNodes | - | Get the current nodes. | - | ✗ | | getArrows | - | Get the current arrows. | - | ✗ | | taskList (taskList) | ItemList[] | Tasks shown in the task menu. | [] | ✓ | | helpList (helpList) | ItemList[] | Hints shown in the help menu. | [] | ✓ | | height (height) | number | Canvas height (px). | 400 | ✓ | | zoomLevel (zoomLevel) | number | Current zoom percentage (50–200). | 100 | ✓ | | canvasOffsetX (canvasOffsetX) | number | Horizontal pan offset (world units). | 0 | ✓ | | canvasOffsetY (canvasOffsetY) | number | Vertical pan offset (world units). | 0 | ✓ | | allowStudentEdit (allowStudentEdit) | boolean | Allow interactive editing (adding/dragging/deleting). | false | ✓ | | allowStudentPan (allowStudentPan) | boolean | Allow panning/zooming interactions. | false | ✓ | | font (font) | string | Font family used for labels. | 'Courier New' | ✓ | | fontSize (fontSize) | number | Font size used for labels. | 16 | ✓ | | theme (theme) | string | Color theme name. | 'standard' | ✓ | | fullscreen (fullscreen) | boolean | Whether the widget is currently in fullscreen mode. | false | ✗ | | getSelectedSequence | - | Get the currently selected path sequence. | - | ✗ | | getActiveSequenceButton | - | Get the active sequence button. | - | ✗ | | setActiveSequenceButton | - | Set the active sequence button. | - | ✗ | | isSelectingSequence | - | Set path-selection mode. | - | ✗ | | solutionMessage (solutionMessage) | string | Message shown in the solution prompt. | '' | ✗ | | showSolution (showSolution) | boolean | Whether the solution prompt is visible. | false | ✗ | | setSelectedSequence | - | Programmatically set the selected path sequence.Overwrites the internal selectedSequence with the provided ordered descriptors. | - | ✗ |

Fields including properties and attributes define the current state of the widget and offer customization options.

Methods

| Name | Description | Parameters | | :--: | :---------: | :-------: | | isEditable | Returns whether the widget is currently in an editable statebased on the contenteditable attribute. | - | selectSequence | Toggle path-selection mode for solution checking.When turning off the mode, clears the current selected sequence and any selectednode/arrow/rectangle, then triggers a redraw. Also toggles the active class onthe #select-button element (if present). | - | checkSolution | Compare the currently selected path sequence with a task's expected sequence.If length and element-wise id/type match, shows a success message; otherwiseshows a failure message. Uses showSolutionWithMessage() to display the result. | task: ItemList

Methods allow programmatic access to the widget.

Custom CSS properties

| Name | Description | | :--: | :---------: | | --scaled-grid-size | Spacing between grid dots (derived from zoom). | | --scaled-grid-dot-size | Dot radius for the background grid (derived from zoom). | | --offset-x | Internal canvas left offset (managed by the widget). | | --offset-y | Internal canvas top offset (managed by the widget). | | --widget-height | Workspace height in pixels. |

Custom CSS properties offer defined customization of the widget's style.

CSS parts

| Name | Description | | :--: | :---------: | | options | Styles the settings sidebar (tool menu). |

CSS parts allow freely styling internals of the widget with CSS.

Editing config

| Name | Value | | :--: | :---------: |

The editing config defines how explorable authoring tools such as WebWriter treat the widget.

No public slots, or events.

Generated with @webwriter/[email protected]