diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e98de4..31d38cc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 0.30.3 + +This version adds a new argument to the `canCreate` and `canShow` callbacks in the placeholder configuration, providing access to the current definition. + # 0.30.2 This version fixes a bug related to identifying the touched element [#195](https://github.com/nocode-js/sequential-workflow-designer/issues/195). diff --git a/README.md b/README.md index 249bbbf..1d7d431 100644 --- a/README.md +++ b/README.md @@ -106,10 +106,10 @@ Add the below code to your head section in HTML document. ```html ... - - - - + + + + ``` Call the designer by: diff --git a/angular/designer/package.json b/angular/designer/package.json index 5ac6a4c..2ce951f 100644 --- a/angular/designer/package.json +++ b/angular/designer/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-angular", "description": "Angular wrapper for Sequential Workflow Designer component.", - "version": "0.30.2", + "version": "0.30.3", "author": { "name": "NoCode JS", "url": "https://nocode-js.com/" @@ -15,7 +15,7 @@ "peerDependencies": { "@angular/common": "12 - 19", "@angular/core": "12 - 19", - "sequential-workflow-designer": "^0.30.2" + "sequential-workflow-designer": "^0.30.3" }, "dependencies": { "tslib": "^2.3.0" diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json index 8f866f2..c8d36cb 100644 --- a/demos/angular-app/package.json +++ b/demos/angular-app/package.json @@ -26,8 +26,8 @@ "@angular/platform-browser-dynamic": "^17.3.9", "@angular/router": "^17.3.9", "rxjs": "~7.8.0", - "sequential-workflow-designer": "^0.30.2", - "sequential-workflow-designer-angular": "^0.30.2", + "sequential-workflow-designer": "^0.30.3", + "sequential-workflow-designer-angular": "^0.30.3", "tslib": "^2.3.0", "zone.js": "~0.14.6" }, diff --git a/demos/react-app/package.json b/demos/react-app/package.json index f6735e5..537ffeb 100644 --- a/demos/react-app/package.json +++ b/demos/react-app/package.json @@ -6,8 +6,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "sequential-workflow-designer": "^0.30.2", - "sequential-workflow-designer-react": "^0.30.2" + "sequential-workflow-designer": "^0.30.3", + "sequential-workflow-designer-react": "^0.30.3" }, "devDependencies": { "@types/jest": "^29.2.5", diff --git a/demos/react-app/src/playground/Playground.tsx b/demos/react-app/src/playground/Playground.tsx index c0de909..495cda1 100644 --- a/demos/react-app/src/playground/Playground.tsx +++ b/demos/react-app/src/playground/Playground.tsx @@ -1,5 +1,12 @@ import { useEffect, useMemo, useState } from 'react'; -import { ObjectCloner, Step, StepsConfiguration, ToolboxConfiguration, ValidatorConfiguration } from 'sequential-workflow-designer'; +import { + ObjectCloner, + PlaceholderConfiguration, + Step, + StepsConfiguration, + ToolboxConfiguration, + ValidatorConfiguration +} from 'sequential-workflow-designer'; import { SequentialWorkflowDesigner, wrapDefinition } from 'sequential-workflow-designer-react'; import { RootEditor } from './RootEditor'; import { StepEditor } from './StepEditor'; @@ -35,6 +42,14 @@ export function Playground() { }), [] ); + const placeholderConfiguration: PlaceholderConfiguration = useMemo( + () => ({ + canShow() { + return true; + } + }), + [] + ); const [isVisible, setIsVisible] = useState(true); const [isToolboxCollapsed, setIsToolboxCollapsed] = useState(false); @@ -133,6 +148,7 @@ export function Playground() { onIsToolboxCollapsedChanged={setIsToolboxCollapsed} stepsConfiguration={stepsConfiguration} validatorConfiguration={validatorConfiguration} + placeholderConfiguration={placeholderConfiguration} controlBar={true} rootEditor={} stepEditor={} diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index 4ea3bfa..6e271a3 100644 --- a/demos/svelte-app/package.json +++ b/demos/svelte-app/package.json @@ -16,8 +16,8 @@ "eslint": "eslint ./src --ext .ts" }, "dependencies": { - "sequential-workflow-designer": "^0.30.2", - "sequential-workflow-designer-svelte": "^0.30.2" + "sequential-workflow-designer": "^0.30.3", + "sequential-workflow-designer-svelte": "^0.30.3" }, "devDependencies": { "@sveltejs/adapter-static": "^2.0.3", diff --git a/designer/package.json b/designer/package.json index 895deec..eff7e39 100644 --- a/designer/package.json +++ b/designer/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer", "description": "Customizable no-code component for building flow-based programming applications.", - "version": "0.30.2", + "version": "0.30.3", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", diff --git a/designer/src/designer-configuration.ts b/designer/src/designer-configuration.ts index 4b851e7..fe325a4 100644 --- a/designer/src/designer-configuration.ts +++ b/designer/src/designer-configuration.ts @@ -184,8 +184,14 @@ export interface StepsConfiguration { export type StepIconUrlProvider = (componentType: ComponentType, type: string) => string | null; export interface PlaceholderConfiguration { - canCreate?: (sequence: Sequence, index: number) => boolean; - canShow?: (sequence: Sequence, index: number, draggingStepComponentType: ComponentType, draggingStepType: string) => boolean; + canCreate?: (sequence: Sequence, index: number, definition: Definition) => boolean; + canShow?: ( + sequence: Sequence, + index: number, + draggingStepComponentType: ComponentType, + draggingStepType: string, + definition: Definition + ) => boolean; } export interface ValidatorConfiguration { diff --git a/designer/src/designer-context.ts b/designer/src/designer-context.ts index c076fdf..dba5f18 100644 --- a/designer/src/designer-context.ts +++ b/designer/src/designer-context.ts @@ -35,7 +35,7 @@ export class DesignerContext { const workspaceController = new WorkspaceControllerWrapper(); const behaviorController = BehaviorController.create(configuration.shadowRoot); const stepExtensionResolver = StepExtensionResolver.create(services); - const placeholderController = PlaceholderController.create(configuration.placeholder); + const placeholderController = PlaceholderController.create(state, configuration.placeholder); const definitionWalker = configuration.definitionWalker ?? new DefinitionWalker(); const i18n: I18n = configuration.i18n ?? ((_, defaultValue) => defaultValue); const uidGenerator = configuration.uidGenerator ?? Uid.next; diff --git a/designer/src/workspace/placeholder/placeholder-controller.ts b/designer/src/workspace/placeholder/placeholder-controller.ts index 8de0e8d..c933387 100644 --- a/designer/src/workspace/placeholder/placeholder-controller.ts +++ b/designer/src/workspace/placeholder/placeholder-controller.ts @@ -1,15 +1,26 @@ import { Sequence } from 'sequential-workflow-model'; import { PlaceholderConfiguration } from '../../designer-configuration'; +import { DesignerState } from '../../designer-state'; export class PlaceholderController { - public static create(configuration: PlaceholderConfiguration | undefined): PlaceholderController { - return new PlaceholderController(configuration); + public static create(state: DesignerState, configuration: PlaceholderConfiguration | undefined): PlaceholderController { + return new PlaceholderController(state, configuration); } - private constructor(private readonly configuration: PlaceholderConfiguration | undefined) {} + public readonly canCreate: (sequence: Sequence, index: number) => boolean; + public readonly canShow: (sequence: Sequence, index: number, draggingStepComponentType: string, draggingStepType: string) => boolean; - public readonly canCreate: (sequence: Sequence, index: number) => boolean = this.configuration?.canCreate ?? (() => true); + private constructor( + state: DesignerState, + private readonly configuration: PlaceholderConfiguration | undefined + ) { + const canCreate = this.configuration?.canCreate; + const canShow = this.configuration?.canShow; - public readonly canShow: (sequence: Sequence, index: number, draggingStepComponentType: string, draggingStepType: string) => boolean = - this.configuration?.canShow ?? (() => true); + this.canCreate = canCreate ? (sequence, index) => canCreate(sequence, index, state.definition) : () => true; + this.canShow = canShow + ? (sequence, index, draggingStepComponentType, draggingStepType) => + canShow(sequence, index, draggingStepComponentType, draggingStepType, state.definition) + : () => true; + } } diff --git a/examples/assets/lib.js b/examples/assets/lib.js index bdc9248..2848531 100644 --- a/examples/assets/lib.js +++ b/examples/assets/lib.js @@ -13,7 +13,7 @@ function embedStylesheet(url) { document.write(``); } -const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.2'; +const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.3'; embedScript(`${baseUrl}/dist/index.umd.js`); embedStylesheet(`${baseUrl}/css/designer.css`); diff --git a/react/package.json b/react/package.json index d97b853..04467c4 100644 --- a/react/package.json +++ b/react/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-react", "description": "React wrapper for Sequential Workflow Designer component.", - "version": "0.30.2", + "version": "0.30.3", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", @@ -47,7 +47,7 @@ "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", - "sequential-workflow-designer": "^0.30.2" + "sequential-workflow-designer": "^0.30.3" }, "devDependencies": { "@rollup/plugin-node-resolve": "^16.0.1", @@ -63,7 +63,7 @@ "prettier": "^3.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", - "sequential-workflow-designer": "^0.30.2", + "sequential-workflow-designer": "^0.30.3", "rollup": "^4.40.0", "rollup-plugin-dts": "^6.2.1", "rollup-plugin-typescript2": "^0.36.0", diff --git a/svelte/package.json b/svelte/package.json index d84d991..a4ecb77 100644 --- a/svelte/package.json +++ b/svelte/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-svelte", "description": "Svelte wrapper for Sequential Workflow Designer component.", - "version": "0.30.2", + "version": "0.30.3", "license": "MIT", "scripts": { "prepare": "cp ../LICENSE LICENSE", @@ -28,10 +28,10 @@ ], "peerDependencies": { "svelte": "^4.0.0", - "sequential-workflow-designer": "^0.30.2" + "sequential-workflow-designer": "^0.30.3" }, "devDependencies": { - "sequential-workflow-designer": "^0.30.2", + "sequential-workflow-designer": "^0.30.3", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", "@sveltejs/package": "^2.0.0",