sequential-workflow-designer 0.30.5 → 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 +35 -29
  3. package/lib/cjs/index.cjs +35 -29
  4. package/lib/esm/index.js +35 -29
  5. package/lib/index.d.ts +5 -5
  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.30.5/css/designer.css" rel="stylesheet">
110
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.5/css/designer-light.css" rel="stylesheet">
111
- <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.5/css/designer-dark.css" rel="stylesheet">
112
- <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.30.5/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);
@@ -1524,7 +1525,6 @@
1524
1525
  })(exports.ClickCommandType || (exports.ClickCommandType = {}));
1525
1526
  exports.PlaceholderDirection = void 0;
1526
1527
  (function (PlaceholderDirection) {
1527
- PlaceholderDirection[PlaceholderDirection["gap"] = 0] = "gap";
1528
1528
  PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
1529
1529
  PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
1530
1530
  })(exports.PlaceholderDirection || (exports.PlaceholderDirection = {}));
@@ -2302,7 +2302,7 @@
2302
2302
  }
2303
2303
 
2304
2304
  class RectPlaceholderView {
2305
- static create(parent, width, height, radius, iconSize, direction) {
2305
+ static create(parent, width, height, radius, iconD, iconSize) {
2306
2306
  const g = Dom.svg('g', {
2307
2307
  visibility: 'hidden',
2308
2308
  class: 'sqd-placeholder'
@@ -2316,8 +2316,7 @@
2316
2316
  ry: radius
2317
2317
  });
2318
2318
  g.appendChild(rect);
2319
- if (direction) {
2320
- const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
2319
+ if (iconD) {
2321
2320
  const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
2322
2321
  Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
2323
2322
  }
@@ -2339,9 +2338,9 @@
2339
2338
  }
2340
2339
 
2341
2340
  class RectPlaceholder {
2342
- static create(parent, size, direction, sequence, index, radius, iconSize) {
2343
- const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconSize, direction);
2344
- return new RectPlaceholder(view, sequence, index);
2341
+ static create(parent, size, parentSequence, index, radius, iconD, iconSize) {
2342
+ const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconD, iconSize);
2343
+ return new RectPlaceholder(view, parentSequence, index);
2345
2344
  }
2346
2345
  constructor(view, parentSequence, index) {
2347
2346
  this.view = view;
@@ -2495,10 +2494,17 @@
2495
2494
  }
2496
2495
  createForGap(parent, parentSequence, index, orientation) {
2497
2496
  const gapSize = this.getGapSize(orientation);
2498
- return RectPlaceholder.create(parent, gapSize, exports.PlaceholderDirection.gap, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
2497
+ return RectPlaceholder.create(parent, gapSize, parentSequence, index, this.configuration.radius, this.configuration.iconD, this.configuration.iconSize);
2499
2498
  }
2500
2499
  createForArea(parent, size, direction, parentSequence, index) {
2501
- return RectPlaceholder.create(parent, size, direction, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
2500
+ let iconD;
2501
+ if (direction === exports.PlaceholderDirection.in) {
2502
+ iconD = Icons.folderIn;
2503
+ }
2504
+ else if (direction === exports.PlaceholderDirection.out) {
2505
+ iconD = Icons.folderOut;
2506
+ }
2507
+ return RectPlaceholder.create(parent, size, parentSequence, index, this.configuration.radius, iconD, this.configuration.iconSize);
2502
2508
  }
2503
2509
  }
2504
2510
 
@@ -4271,7 +4277,7 @@
4271
4277
 
4272
4278
  const SAFE_OFFSET = 10;
4273
4279
  class DefaultDraggedComponent {
4274
- static create(parent, step, componentContext) {
4280
+ static create(parent, step, _, componentContext) {
4275
4281
  const canvas = Dom.svg('svg');
4276
4282
  canvas.style.marginLeft = -10 + 'px';
4277
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);
@@ -1339,7 +1340,6 @@ exports.ClickCommandType = void 0;
1339
1340
  })(exports.ClickCommandType || (exports.ClickCommandType = {}));
1340
1341
  exports.PlaceholderDirection = void 0;
1341
1342
  (function (PlaceholderDirection) {
1342
- PlaceholderDirection[PlaceholderDirection["gap"] = 0] = "gap";
1343
1343
  PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
1344
1344
  PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
1345
1345
  })(exports.PlaceholderDirection || (exports.PlaceholderDirection = {}));
@@ -2117,7 +2117,7 @@ class PlaceholderController {
2117
2117
  }
2118
2118
 
2119
2119
  class RectPlaceholderView {
2120
- static create(parent, width, height, radius, iconSize, direction) {
2120
+ static create(parent, width, height, radius, iconD, iconSize) {
2121
2121
  const g = Dom.svg('g', {
2122
2122
  visibility: 'hidden',
2123
2123
  class: 'sqd-placeholder'
@@ -2131,8 +2131,7 @@ class RectPlaceholderView {
2131
2131
  ry: radius
2132
2132
  });
2133
2133
  g.appendChild(rect);
2134
- if (direction) {
2135
- const iconD = direction === exports.PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
2134
+ if (iconD) {
2136
2135
  const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
2137
2136
  Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
2138
2137
  }
@@ -2154,9 +2153,9 @@ class RectPlaceholderView {
2154
2153
  }
2155
2154
 
2156
2155
  class RectPlaceholder {
2157
- static create(parent, size, direction, sequence, index, radius, iconSize) {
2158
- const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconSize, direction);
2159
- return new RectPlaceholder(view, sequence, index);
2156
+ static create(parent, size, parentSequence, index, radius, iconD, iconSize) {
2157
+ const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconD, iconSize);
2158
+ return new RectPlaceholder(view, parentSequence, index);
2160
2159
  }
2161
2160
  constructor(view, parentSequence, index) {
2162
2161
  this.view = view;
@@ -2310,10 +2309,17 @@ class RectPlaceholderExtension {
2310
2309
  }
2311
2310
  createForGap(parent, parentSequence, index, orientation) {
2312
2311
  const gapSize = this.getGapSize(orientation);
2313
- return RectPlaceholder.create(parent, gapSize, exports.PlaceholderDirection.gap, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
2312
+ return RectPlaceholder.create(parent, gapSize, parentSequence, index, this.configuration.radius, this.configuration.iconD, this.configuration.iconSize);
2314
2313
  }
2315
2314
  createForArea(parent, size, direction, parentSequence, index) {
2316
- return RectPlaceholder.create(parent, size, direction, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
2315
+ let iconD;
2316
+ if (direction === exports.PlaceholderDirection.in) {
2317
+ iconD = Icons.folderIn;
2318
+ }
2319
+ else if (direction === exports.PlaceholderDirection.out) {
2320
+ iconD = Icons.folderOut;
2321
+ }
2322
+ return RectPlaceholder.create(parent, size, parentSequence, index, this.configuration.radius, iconD, this.configuration.iconSize);
2317
2323
  }
2318
2324
  }
2319
2325
 
@@ -4086,7 +4092,7 @@ class DesignerView {
4086
4092
 
4087
4093
  const SAFE_OFFSET = 10;
4088
4094
  class DefaultDraggedComponent {
4089
- static create(parent, step, componentContext) {
4095
+ static create(parent, step, _, componentContext) {
4090
4096
  const canvas = Dom.svg('svg');
4091
4097
  canvas.style.marginLeft = -10 + 'px';
4092
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);
@@ -1338,7 +1339,6 @@ var ClickCommandType;
1338
1339
  })(ClickCommandType || (ClickCommandType = {}));
1339
1340
  var PlaceholderDirection;
1340
1341
  (function (PlaceholderDirection) {
1341
- PlaceholderDirection[PlaceholderDirection["gap"] = 0] = "gap";
1342
1342
  PlaceholderDirection[PlaceholderDirection["in"] = 1] = "in";
1343
1343
  PlaceholderDirection[PlaceholderDirection["out"] = 2] = "out";
1344
1344
  })(PlaceholderDirection || (PlaceholderDirection = {}));
@@ -2116,7 +2116,7 @@ class PlaceholderController {
2116
2116
  }
2117
2117
 
2118
2118
  class RectPlaceholderView {
2119
- static create(parent, width, height, radius, iconSize, direction) {
2119
+ static create(parent, width, height, radius, iconD, iconSize) {
2120
2120
  const g = Dom.svg('g', {
2121
2121
  visibility: 'hidden',
2122
2122
  class: 'sqd-placeholder'
@@ -2130,8 +2130,7 @@ class RectPlaceholderView {
2130
2130
  ry: radius
2131
2131
  });
2132
2132
  g.appendChild(rect);
2133
- if (direction) {
2134
- const iconD = direction === PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
2133
+ if (iconD) {
2135
2134
  const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize);
2136
2135
  Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2);
2137
2136
  }
@@ -2153,9 +2152,9 @@ class RectPlaceholderView {
2153
2152
  }
2154
2153
 
2155
2154
  class RectPlaceholder {
2156
- static create(parent, size, direction, sequence, index, radius, iconSize) {
2157
- const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconSize, direction);
2158
- return new RectPlaceholder(view, sequence, index);
2155
+ static create(parent, size, parentSequence, index, radius, iconD, iconSize) {
2156
+ const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconD, iconSize);
2157
+ return new RectPlaceholder(view, parentSequence, index);
2159
2158
  }
2160
2159
  constructor(view, parentSequence, index) {
2161
2160
  this.view = view;
@@ -2309,10 +2308,17 @@ class RectPlaceholderExtension {
2309
2308
  }
2310
2309
  createForGap(parent, parentSequence, index, orientation) {
2311
2310
  const gapSize = this.getGapSize(orientation);
2312
- return RectPlaceholder.create(parent, gapSize, PlaceholderDirection.gap, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
2311
+ return RectPlaceholder.create(parent, gapSize, parentSequence, index, this.configuration.radius, this.configuration.iconD, this.configuration.iconSize);
2313
2312
  }
2314
2313
  createForArea(parent, size, direction, parentSequence, index) {
2315
- return RectPlaceholder.create(parent, size, direction, parentSequence, index, this.configuration.radius, this.configuration.iconSize);
2314
+ let iconD;
2315
+ if (direction === PlaceholderDirection.in) {
2316
+ iconD = Icons.folderIn;
2317
+ }
2318
+ else if (direction === PlaceholderDirection.out) {
2319
+ iconD = Icons.folderOut;
2320
+ }
2321
+ return RectPlaceholder.create(parent, size, parentSequence, index, this.configuration.radius, iconD, this.configuration.iconSize);
2316
2322
  }
2317
2323
  }
2318
2324
 
@@ -4085,7 +4091,7 @@ class DesignerView {
4085
4091
 
4086
4092
  const SAFE_OFFSET = 10;
4087
4093
  class DefaultDraggedComponent {
4088
- static create(parent, step, componentContext) {
4094
+ static create(parent, step, _, componentContext) {
4089
4095
  const canvas = Dom.svg('svg');
4090
4096
  canvas.style.marginLeft = -10 + 'px';
4091
4097
  canvas.style.marginTop = -10 + 'px';
package/lib/index.d.ts CHANGED
@@ -250,7 +250,6 @@ interface Placeholder {
250
250
  resolveClick(click: ClickDetails): ClickCommand | null;
251
251
  }
252
252
  declare enum PlaceholderDirection {
253
- gap = 0,
254
253
  in = 1,
255
254
  out = 2
256
255
  }
@@ -783,7 +782,7 @@ declare class DefaultViewportControllerExtension implements ViewportControllerEx
783
782
  declare class RectPlaceholderView implements PlaceholderView {
784
783
  readonly rect: SVGElement;
785
784
  readonly g: SVGGElement;
786
- static create(parent: SVGElement, width: number, height: number, radius: number, iconSize: number, direction: PlaceholderDirection): RectPlaceholderView;
785
+ static create(parent: SVGElement, width: number, height: number, radius: number, iconD: string | undefined, iconSize: number): RectPlaceholderView;
787
786
  private constructor();
788
787
  setIsHover(isHover: boolean): void;
789
788
  setIsVisible(isVisible: boolean): void;
@@ -793,7 +792,7 @@ declare class RectPlaceholder implements Placeholder {
793
792
  readonly view: RectPlaceholderView;
794
793
  readonly parentSequence: Sequence;
795
794
  readonly index: number;
796
- static create(parent: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number, radius: number, iconSize: number): RectPlaceholder;
795
+ static create(parent: SVGElement, size: Vector, parentSequence: Sequence, index: number, radius: number, iconD: string | undefined, iconSize: number): RectPlaceholder;
797
796
  constructor(view: RectPlaceholderView, parentSequence: Sequence, index: number);
798
797
  getClientRect(): DOMRect;
799
798
  setIsHover(isHover: boolean): void;
@@ -805,6 +804,7 @@ interface RectPlaceholderConfiguration {
805
804
  gapWidth: number;
806
805
  gapHeight: number;
807
806
  radius: number;
807
+ iconD?: string;
808
808
  iconSize: number;
809
809
  }
810
810
 
@@ -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;
@@ -953,7 +953,7 @@ declare enum PlaceholderGapOrientation {
953
953
  interface PlaceholderExtension {
954
954
  getGapSize(orientation: PlaceholderGapOrientation): Vector;
955
955
  createForGap(parentElement: SVGElement, sequence: Sequence, index: number, orientation: PlaceholderGapOrientation): Placeholder;
956
- createForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder;
956
+ createForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection | null, sequence: Sequence, index: number): Placeholder;
957
957
  }
958
958
  interface ViewportControllerExtension {
959
959
  create(api: WorkspaceApi): ViewportController;
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.30.5",
4
+ "version": "0.32.0",
5
5
  "type": "module",
6
6
  "main": "./lib/esm/index.js",
7
7
  "types": "./lib/index.d.ts",