sequential-workflow-designer 0.31.0 → 0.32.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +4 -4
  2. package/dist/index.umd.js +21 -20
  3. package/lib/cjs/index.cjs +21 -20
  4. package/lib/esm/index.js +21 -20
  5. package/lib/index.d.ts +1 -1
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -106,10 +106,10 @@ Add the below code to your head section in HTML document.
106
106
  ```html
107
107
  <head>
108
108
  ...
109
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0/css/designer.css" rel="stylesheet">
110
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0/css/designer-light.css" rel="stylesheet">
111
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0/css/designer-dark.css" rel="stylesheet">
112
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0/dist/index.umd.js"></script>
109
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer.css" rel="stylesheet">
110
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-light.css" rel="stylesheet">
111
+ <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/css/designer-dark.css" rel="stylesheet">
112
+ <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0/dist/index.umd.js"></script>
113
113
  ```
114
114
 
115
115
  Call the designer by:
package/dist/index.umd.js CHANGED
@@ -397,14 +397,14 @@
397
397
  }
398
398
 
399
399
  class DragStepView {
400
- static create(step, theme, componentContext) {
400
+ static create(step, isAttached, theme, componentContext) {
401
401
  var _a;
402
402
  const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
403
403
  const layer = Dom.element('div', {
404
404
  class: `sqd-drag sqd-theme-${theme}`
405
405
  });
406
406
  body.appendChild(layer);
407
- const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
407
+ const component = componentContext.services.draggedComponent.create(layer, step, isAttached, componentContext);
408
408
  return new DragStepView(component, layer, body);
409
409
  }
410
410
  constructor(component, layer, body) {
@@ -466,29 +466,30 @@
466
466
  }
467
467
 
468
468
  class DragStepBehavior {
469
- static create(designerContext, step, draggedStepComponent) {
470
- const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
471
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
469
+ static create(designerContext, step, attachedStepComponent) {
470
+ const isAttached = Boolean(attachedStepComponent);
471
+ const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
472
+ return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
472
473
  }
473
- constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
474
+ constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
474
475
  this.view = view;
475
476
  this.workspaceController = workspaceController;
476
477
  this.placeholderController = placeholderController;
477
478
  this.designerState = designerState;
478
479
  this.step = step;
479
480
  this.stateModifier = stateModifier;
480
- this.draggedStepComponent = draggedStepComponent;
481
+ this.attachedStepComponent = attachedStepComponent;
481
482
  }
482
483
  onStart(position) {
483
484
  let offset = null;
484
- if (this.draggedStepComponent) {
485
- this.draggedStepComponent.setIsDisabled(true);
486
- this.draggedStepComponent.setIsDragging(true);
487
- const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
488
- this.draggedStepComponent.view.height === this.view.component.height;
485
+ if (this.attachedStepComponent) {
486
+ this.attachedStepComponent.setIsDisabled(true);
487
+ this.attachedStepComponent.setIsDragging(true);
488
+ const hasSameSize = this.attachedStepComponent.view.width === this.view.component.width &&
489
+ this.attachedStepComponent.view.height === this.view.component.height;
489
490
  if (hasSameSize) {
490
491
  // Mouse cursor will be positioned on the same place as the source component.
491
- const pagePosition = this.draggedStepComponent.view.getClientPosition();
492
+ const pagePosition = this.attachedStepComponent.view.getClientPosition();
492
493
  offset = position.subtract(pagePosition);
493
494
  }
494
495
  }
@@ -498,7 +499,7 @@
498
499
  }
499
500
  this.view.setPosition(position.subtract(offset));
500
501
  this.designerState.setIsDragging(true);
501
- const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
502
+ const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
502
503
  this.state = {
503
504
  placeholders,
504
505
  components,
@@ -537,17 +538,17 @@
537
538
  this.designerState.setIsDragging(false);
538
539
  let modified = false;
539
540
  if (!interrupt && this.currentPlaceholder) {
540
- if (this.draggedStepComponent) {
541
- modified = this.stateModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
541
+ if (this.attachedStepComponent) {
542
+ modified = this.stateModifier.tryMove(this.attachedStepComponent.parentSequence, this.attachedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
542
543
  }
543
544
  else {
544
545
  modified = this.stateModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
545
546
  }
546
547
  }
547
548
  if (!modified) {
548
- if (this.draggedStepComponent) {
549
- this.draggedStepComponent.setIsDisabled(false);
550
- this.draggedStepComponent.setIsDragging(false);
549
+ if (this.attachedStepComponent) {
550
+ this.attachedStepComponent.setIsDisabled(false);
551
+ this.attachedStepComponent.setIsDragging(false);
551
552
  }
552
553
  if (this.currentPlaceholder) {
553
554
  this.currentPlaceholder.setIsHover(false);
@@ -4276,7 +4277,7 @@
4276
4277
 
4277
4278
  const SAFE_OFFSET = 10;
4278
4279
  class DefaultDraggedComponent {
4279
- static create(parent, step, componentContext) {
4280
+ static create(parent, step, _, componentContext) {
4280
4281
  const canvas = Dom.svg('svg');
4281
4282
  canvas.style.marginLeft = -10 + 'px';
4282
4283
  canvas.style.marginTop = -10 + 'px';
package/lib/cjs/index.cjs CHANGED
@@ -395,14 +395,14 @@ class PathBarApi {
395
395
  }
396
396
 
397
397
  class DragStepView {
398
- static create(step, theme, componentContext) {
398
+ static create(step, isAttached, theme, componentContext) {
399
399
  var _a;
400
400
  const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
401
401
  const layer = Dom.element('div', {
402
402
  class: `sqd-drag sqd-theme-${theme}`
403
403
  });
404
404
  body.appendChild(layer);
405
- const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
405
+ const component = componentContext.services.draggedComponent.create(layer, step, isAttached, componentContext);
406
406
  return new DragStepView(component, layer, body);
407
407
  }
408
408
  constructor(component, layer, body) {
@@ -464,29 +464,30 @@ class PlaceholderFinder {
464
464
  }
465
465
 
466
466
  class DragStepBehavior {
467
- static create(designerContext, step, draggedStepComponent) {
468
- const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
469
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
467
+ static create(designerContext, step, attachedStepComponent) {
468
+ const isAttached = Boolean(attachedStepComponent);
469
+ const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
470
+ return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
470
471
  }
471
- constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
472
+ constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
472
473
  this.view = view;
473
474
  this.workspaceController = workspaceController;
474
475
  this.placeholderController = placeholderController;
475
476
  this.designerState = designerState;
476
477
  this.step = step;
477
478
  this.stateModifier = stateModifier;
478
- this.draggedStepComponent = draggedStepComponent;
479
+ this.attachedStepComponent = attachedStepComponent;
479
480
  }
480
481
  onStart(position) {
481
482
  let offset = null;
482
- if (this.draggedStepComponent) {
483
- this.draggedStepComponent.setIsDisabled(true);
484
- this.draggedStepComponent.setIsDragging(true);
485
- const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
486
- this.draggedStepComponent.view.height === this.view.component.height;
483
+ if (this.attachedStepComponent) {
484
+ this.attachedStepComponent.setIsDisabled(true);
485
+ this.attachedStepComponent.setIsDragging(true);
486
+ const hasSameSize = this.attachedStepComponent.view.width === this.view.component.width &&
487
+ this.attachedStepComponent.view.height === this.view.component.height;
487
488
  if (hasSameSize) {
488
489
  // Mouse cursor will be positioned on the same place as the source component.
489
- const pagePosition = this.draggedStepComponent.view.getClientPosition();
490
+ const pagePosition = this.attachedStepComponent.view.getClientPosition();
490
491
  offset = position.subtract(pagePosition);
491
492
  }
492
493
  }
@@ -496,7 +497,7 @@ class DragStepBehavior {
496
497
  }
497
498
  this.view.setPosition(position.subtract(offset));
498
499
  this.designerState.setIsDragging(true);
499
- const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
500
+ const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
500
501
  this.state = {
501
502
  placeholders,
502
503
  components,
@@ -535,17 +536,17 @@ class DragStepBehavior {
535
536
  this.designerState.setIsDragging(false);
536
537
  let modified = false;
537
538
  if (!interrupt && this.currentPlaceholder) {
538
- if (this.draggedStepComponent) {
539
- modified = this.stateModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
539
+ if (this.attachedStepComponent) {
540
+ modified = this.stateModifier.tryMove(this.attachedStepComponent.parentSequence, this.attachedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
540
541
  }
541
542
  else {
542
543
  modified = this.stateModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
543
544
  }
544
545
  }
545
546
  if (!modified) {
546
- if (this.draggedStepComponent) {
547
- this.draggedStepComponent.setIsDisabled(false);
548
- this.draggedStepComponent.setIsDragging(false);
547
+ if (this.attachedStepComponent) {
548
+ this.attachedStepComponent.setIsDisabled(false);
549
+ this.attachedStepComponent.setIsDragging(false);
549
550
  }
550
551
  if (this.currentPlaceholder) {
551
552
  this.currentPlaceholder.setIsHover(false);
@@ -4091,7 +4092,7 @@ class DesignerView {
4091
4092
 
4092
4093
  const SAFE_OFFSET = 10;
4093
4094
  class DefaultDraggedComponent {
4094
- static create(parent, step, componentContext) {
4095
+ static create(parent, step, _, componentContext) {
4095
4096
  const canvas = Dom.svg('svg');
4096
4097
  canvas.style.marginLeft = -10 + 'px';
4097
4098
  canvas.style.marginTop = -10 + 'px';
package/lib/esm/index.js CHANGED
@@ -394,14 +394,14 @@ class PathBarApi {
394
394
  }
395
395
 
396
396
  class DragStepView {
397
- static create(step, theme, componentContext) {
397
+ static create(step, isAttached, theme, componentContext) {
398
398
  var _a;
399
399
  const body = (_a = componentContext.shadowRoot) !== null && _a !== void 0 ? _a : document.body;
400
400
  const layer = Dom.element('div', {
401
401
  class: `sqd-drag sqd-theme-${theme}`
402
402
  });
403
403
  body.appendChild(layer);
404
- const component = componentContext.services.draggedComponent.create(layer, step, componentContext);
404
+ const component = componentContext.services.draggedComponent.create(layer, step, isAttached, componentContext);
405
405
  return new DragStepView(component, layer, body);
406
406
  }
407
407
  constructor(component, layer, body) {
@@ -463,29 +463,30 @@ class PlaceholderFinder {
463
463
  }
464
464
 
465
465
  class DragStepBehavior {
466
- static create(designerContext, step, draggedStepComponent) {
467
- const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext);
468
- return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, draggedStepComponent);
466
+ static create(designerContext, step, attachedStepComponent) {
467
+ const isAttached = Boolean(attachedStepComponent);
468
+ const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
469
+ return new DragStepBehavior(view, designerContext.workspaceController, designerContext.placeholderController, designerContext.state, step, designerContext.stateModifier, attachedStepComponent);
469
470
  }
470
- constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, draggedStepComponent) {
471
+ constructor(view, workspaceController, placeholderController, designerState, step, stateModifier, attachedStepComponent) {
471
472
  this.view = view;
472
473
  this.workspaceController = workspaceController;
473
474
  this.placeholderController = placeholderController;
474
475
  this.designerState = designerState;
475
476
  this.step = step;
476
477
  this.stateModifier = stateModifier;
477
- this.draggedStepComponent = draggedStepComponent;
478
+ this.attachedStepComponent = attachedStepComponent;
478
479
  }
479
480
  onStart(position) {
480
481
  let offset = null;
481
- if (this.draggedStepComponent) {
482
- this.draggedStepComponent.setIsDisabled(true);
483
- this.draggedStepComponent.setIsDragging(true);
484
- const hasSameSize = this.draggedStepComponent.view.width === this.view.component.width &&
485
- this.draggedStepComponent.view.height === this.view.component.height;
482
+ if (this.attachedStepComponent) {
483
+ this.attachedStepComponent.setIsDisabled(true);
484
+ this.attachedStepComponent.setIsDragging(true);
485
+ const hasSameSize = this.attachedStepComponent.view.width === this.view.component.width &&
486
+ this.attachedStepComponent.view.height === this.view.component.height;
486
487
  if (hasSameSize) {
487
488
  // Mouse cursor will be positioned on the same place as the source component.
488
- const pagePosition = this.draggedStepComponent.view.getClientPosition();
489
+ const pagePosition = this.attachedStepComponent.view.getClientPosition();
489
490
  offset = position.subtract(pagePosition);
490
491
  }
491
492
  }
@@ -495,7 +496,7 @@ class DragStepBehavior {
495
496
  }
496
497
  this.view.setPosition(position.subtract(offset));
497
498
  this.designerState.setIsDragging(true);
498
- const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent);
499
+ const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent);
499
500
  this.state = {
500
501
  placeholders,
501
502
  components,
@@ -534,17 +535,17 @@ class DragStepBehavior {
534
535
  this.designerState.setIsDragging(false);
535
536
  let modified = false;
536
537
  if (!interrupt && this.currentPlaceholder) {
537
- if (this.draggedStepComponent) {
538
- modified = this.stateModifier.tryMove(this.draggedStepComponent.parentSequence, this.draggedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
538
+ if (this.attachedStepComponent) {
539
+ modified = this.stateModifier.tryMove(this.attachedStepComponent.parentSequence, this.attachedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
539
540
  }
540
541
  else {
541
542
  modified = this.stateModifier.tryInsert(this.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index);
542
543
  }
543
544
  }
544
545
  if (!modified) {
545
- if (this.draggedStepComponent) {
546
- this.draggedStepComponent.setIsDisabled(false);
547
- this.draggedStepComponent.setIsDragging(false);
546
+ if (this.attachedStepComponent) {
547
+ this.attachedStepComponent.setIsDisabled(false);
548
+ this.attachedStepComponent.setIsDragging(false);
548
549
  }
549
550
  if (this.currentPlaceholder) {
550
551
  this.currentPlaceholder.setIsHover(false);
@@ -4090,7 +4091,7 @@ class DesignerView {
4090
4091
 
4091
4092
  const SAFE_OFFSET = 10;
4092
4093
  class DefaultDraggedComponent {
4093
- static create(parent, step, componentContext) {
4094
+ static create(parent, step, _, componentContext) {
4094
4095
  const canvas = Dom.svg('svg');
4095
4096
  canvas.style.marginLeft = -10 + 'px';
4096
4097
  canvas.style.marginTop = -10 + 'px';
package/lib/index.d.ts CHANGED
@@ -910,7 +910,7 @@ interface UiComponent {
910
910
  destroy(): void;
911
911
  }
912
912
  interface DraggedComponentExtension {
913
- create(parentElement: HTMLElement, step: Step, componentContext: ComponentContext): DraggedComponent;
913
+ create(parentElement: HTMLElement, step: Step, isAttached: boolean, componentContext: ComponentContext): DraggedComponent;
914
914
  }
915
915
  interface DraggedComponent {
916
916
  width: number;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "sequential-workflow-designer",
3
3
  "description": "Customizable no-code component for building flow-based programming applications.",
4
- "version": "0.31.0",
4
+ "version": "0.32.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",