Merge pull request #22 from sedax90/0.0.22-dev

0.0.22-dev

README.md

@@ -163,11 +163,15 @@ flowMode: "vertical" | "horizontal", // Default to 'vertical'
 style: {
   fontSize: string;
   fontFamily: string;
-};
+},
 strings: {
   "context-menu.component.actions.remove.label": string,
   "context-menu.workspace.actions.fitandcenter.label": string,
   "placeholder.not-allowed-to-drop.label": string,
+},
+infinite: boolean;
+events: {
+    emitSelectedOnContextMenu: boolean;
 }
 ```
 
@@ -185,7 +189,7 @@ strings: {
 
 FirJs provide this methods to override your data:
 
-```javascript
+```typescript
 // to override your label.
 overrideLabel(node: Node): Promise<string>;
 
@@ -194,6 +198,27 @@ overrideIcon(node: Node): Promise<string>;
 
 // to assign a label for each choice column.
 overrideColumnLabel(node: Node, parent: Node | null, columnIndex: number): Promise<string | HtmlElement | SvgElement>;
+
+/**
+ * It allows you to override the view of a node type however you like.
+ * To help you with the more complex views you can take advantage of the CreationHelper utility class.
+ */
+overrideView: {
+    task?: (creationContext: TaskViewCreationContext, workspaceContext: Context) => Promise<ComponentView | null>;
+    choice?: (creationContext: ChoiceViewCreationContext, workspaceContext: Context) => Promise<ComponentView | null>;
+    map?: (creationContext: MapViewCreationContext, workspaceContext: Context) => Promise<ComponentView | null>;
+    terminator?: (creationContext: TerminatorViewCreationContext, workspaceContext: Context) => Promise<ComponentView | null>;
+};
+
+/**
+ * It allows you to override the public methods behavior (normally used combined with overrideView).
+ */
+overrideComponentMethods: {
+    task?: PublicComponentInstanceOverridableFns,
+    choice?: PublicComponentInstanceOverridableFns,
+    map?: PublicComponentInstanceOverridableFns,
+    terminator?: PublicComponentInstanceOverridableFns
+}
 ```
 
 All of this functions are executed when a node is drawed.
@@ -216,7 +241,7 @@ You can customize the entire Workspace with only a little bit of CSS. You will f
 - [x] Angular module.
 - [ ] React component.
 - [x] Better event management.
-- [ ] More customizations.
+- [x] More customizations.
 - [ ] Better mobile.
 - [x] Horizontal mode
 

angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.html

@@ -41,3 +41,5 @@
   (onWorkflowScale)="onWorkflowScale($event)" (onFlowModeChange)="flowMode = $event.flowMode"
   [overrideView]="overrideView" [overrideComponentMethods]="overrideComponentMethods">
 </firjs>
+
+<div #ghostContainer class="ghost-container"></div>

angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import { DeselectNodeRequestEvent, FlowMode, NgxFirjsComponent, Node, NodeAddEvent, NodeDeselectEvent, NodeMoveEvent, NodeRemoveEvent, NodeRemoveRequestEvent, NodeSelectEvent, NodeType, OverrideComponentMethodsMap, OverrideViewMap, SelectNodeRequestEvent, TreeChangeEvent, WorkflowPanEvent, WorkflowScaleEvent, Workspace, WorkspaceOptions } from '../../../../../ngx-firjs/src/public-api';
 
 
@@ -8,7 +8,7 @@ import { DeselectNodeRequestEvent, FlowMode, NgxFirjsComponent, Node, NodeAddEve
   styleUrls: ['./designer.component.scss']
 })
 export class DesignerComponent implements OnInit {
-
+  @ViewChild('ghostContainer') ghostContainer!: ElementRef<any>;
   @ViewChild(NgxFirjsComponent) firjsWorkflow!: NgxFirjsComponent;
 
   @Input() tree: Node[] = [];
@@ -83,25 +83,27 @@ export class DesignerComponent implements OnInit {
   }
 
   onDragstart(event: DragEvent, type: NodeType): void {
-    const element = event.target as HTMLElement;
-    const rect = element.getBoundingClientRect();
+    const node = {
+      id: new Date().getTime().toString(),
+      type: type,
+    };
+
+    const originaElement = (<HTMLElement>event.target);
+    const rect = originaElement.getBoundingClientRect();
 
-    this._ghost = element.cloneNode(true) as HTMLElement;
+    this._ghost = originaElement.cloneNode(true) as HTMLElement;
     this._ghost.classList.add("ghost");
     this._ghost.style.width = rect.width + 'px';
     this._ghost.style.height = rect.height + 'px';
 
-    document.body.appendChild(this._ghost);
-
-    const node = {
-      id: new Date().getTime().toString(),
-      type: type,
-    };
+    this.ghostContainer.nativeElement.appendChild(this._ghost);
+    const offsetX = (event.clientX - rect.left);
+    const offsetY = (event.clientY - rect.top);
 
-    event.dataTransfer?.setDragImage(this._ghost, 0, 0);
+    event.dataTransfer?.setDragImage(this._ghost, offsetX, offsetY);
     event.dataTransfer?.setData('text/plain', JSON.stringify(node));
 
-    this.firjsWorkflow.startDrag(element as HTMLElement, {
+    this.firjsWorkflow.startDrag(originaElement as HTMLElement, {
       x: event.pageX,
       y: event.pageY,
     }, node);

angular/projects/ngx-firjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sedax90/ngx-firjs",
-  "version": "0.0.30-dev",
+  "version": "0.0.31-dev",
   "author": {
     "name": "Cristian Sedaboni"
   },
@@ -9,7 +9,7 @@
     "@angular/core": "13 - 15"
   },
   "dependencies": {
-    "@sedax90/firjs": "0.0.21-dev",
+    "@sedax90/firjs": "0.0.22-dev",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

demo/custom.html

@@ -131,7 +131,7 @@ <h6 class="mb-0">Terminator</h6>
         integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
         crossorigin="anonymous"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
-    <script src="./../lib/dist/index.js"></script>
+    <script src="./../lib/dist/firjs.js"></script>
     <script src="./custom.js"></script>
 </body>
 

demo/index.html

@@ -135,7 +135,7 @@ <h6 class="mb-0">Terminator</h6>
         integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
         crossorigin="anonymous"></script>
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
-    <script src="./../lib/dist/index.js"></script>
+    <script src="./../lib/dist/firjs.js"></script>
     <script src="./index.js"></script>
 </body>
 

demo/index.js

@@ -1,5 +1,40 @@
 let = i = 0;
 const tree = [
+    {
+        id: i++,
+        label: "Map (node-4)",
+        type: "map",
+        props: {
+            children: [
+
+            ],
+        }
+    },
+    {
+        id: i++,
+        label: "Choice 1",
+        type: "choice",
+        props: {
+            custom: true,
+            choices: [
+                [
+                    {
+                        id: i++,
+                        label: "Map (node-4)",
+                        type: "map",
+                        props: {
+                            children: [
+
+                            ],
+                        }
+                    },
+                ],
+                [
+
+                ]
+            ]
+        }
+    },
     {
         id: i++,
         label: "Pass 1",
@@ -244,7 +279,7 @@ firjs.init({
     parent: root,
     tree: [...tree],
     options: {
-        flowMode: "vertical",
+        flowMode: "horizontal",
         style: {
             fontSize: "0.875em",
         },
@@ -363,6 +398,11 @@ firjs.init({
                 element.classList.add('bi', 'bi-shuffle');
                 return resolve(element);
             }
+            else if (node.type === 'map') {
+                const element = document.createElement('i');
+                element.classList.add('bi', 'bi-shuffle');
+                return resolve(element);
+            }
             else {
                 resolve('');
             }
@@ -411,7 +451,7 @@ firjs.init({
             };
 
             const originaElement = event.target;
-            const rect = event.target.getBoundingClientRect();
+            const rect = originaElement.getBoundingClientRect();
 
             ghost = originaElement.cloneNode(true);
             ghost.classList.add("ghost");

lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sedax90/firjs",
-    "version": "0.0.21-dev",
+    "version": "0.0.22-dev",
     "author": {
         "name": "Cristian Sedaboni"
     },
@@ -21,9 +21,9 @@
         "tslib": "^2.4.1",
         "typescript": "^4.9.4"
     },
-    "main": "./index.js",
-    "types": "./index.d.ts",
-    "module": "./es/index.js",
+    "main": "./firjs.js",
+    "types": "./firjs.d.ts",
+    "module": "./es/firjs.js",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/sedax90/FirJs.git"

lib/rollup.config.mjs

@@ -17,12 +17,12 @@ export default [
     input: './src/index.ts',
     output: [
       {
-        file: './dist/es/index.js',
+        file: './dist/es/firjs.js',
         format: 'es',
         sourcemap: !isProduction,
       },
       {
-        file: './dist/index.js',
+        file: './dist/firjs.js',
         format: 'umd',
         name: 'firjs',
         sourcemap: !isProduction,
@@ -42,7 +42,7 @@ export default [
     input: './build/index.d.ts',
     output: [
       {
-        file: './dist/index.d.ts',
+        file: './dist/firjs.d.ts',
         format: 'es'
       }
     ],

lib/src/components/map/map-view.ts

@@ -75,40 +75,48 @@ export class MapView extends ParentView {
             const childrenContainerBgLeftOffset = 30;
             const childrenContainerBgTopOffset = 10;
 
+            let maxWidth = sequenceComponent.view.width;
+            if (mapLabelWidth > maxWidth) {
+                maxWidth = mapLabelWidth
+            }
+
             let totalWidth = 0;
             let totalHeight = 0;
             let joinX;
             let joinY;
 
-            let childrenContainerBgWidth;
+            let childrenContainerBgWidth = 0;
+            let childrenContainerBgHeight = 0;
 
             if (flowMode === 'vertical') {
-                totalWidth = sequenceComponent.view.width + childrenContainerBgLeftOffset;
+                totalWidth = maxWidth + childrenContainerBgLeftOffset;
                 totalHeight = sequenceComponent.view.height + mapLabelHeight + childrenContainerBgTopOffset;
 
                 joinX = totalWidth / 2;
                 joinY = totalHeight;
 
                 childrenContainerBgWidth = totalWidth;
+                childrenContainerBgHeight = totalHeight - childrenContainerBgTopOffset;
             }
             else {
-                totalWidth = sequenceComponent.view.width + mapLabelWidth + childrenContainerBgLeftOffset;
+                totalWidth = maxWidth + mapLabelWidth + childrenContainerBgLeftOffset;
                 totalHeight = sequenceComponent.view.height + childrenContainerBgLeftOffset;
 
                 joinX = totalWidth;
                 joinY = totalHeight / 2;
 
                 childrenContainerBgWidth = totalWidth - childrenContainerBgTopOffset;
+                childrenContainerBgHeight = totalHeight;
             }
 
             childrenContainerBg.setAttribute('width', `${childrenContainerBgWidth}px`);
-            childrenContainerBg.setAttribute('height', `${totalHeight}px`);
+            childrenContainerBg.setAttribute('height', `${childrenContainerBgHeight}px`);
 
             // Output connection dot
             const endConnection = DomHelper.svg('circle', {
                 r: 5,
                 cx: joinX,
-                cy: flowMode === 'vertical' ? (joinY + childrenContainerBgTopOffset) : joinY,
+                cy: joinY,
                 class: 'output',
                 fill: "black",
                 stroke: "black",
@@ -118,10 +126,8 @@ export class MapView extends ParentView {
             if (flowMode === 'vertical') {
                 DomHelper.translate(childrenContainerBg, 0, childrenContainerBgTopOffset);
                 DomHelper.translate(stepView.element, (totalWidth - mapLabelWidth) / 2, 0);
-                DomHelper.translate(sequenceComponent.view.element, childrenContainerBgLeftOffset / 2, context.options.style.placeholder.height + childrenContainerBgTopOffset);
+                DomHelper.translate(sequenceComponent.view.element, (totalWidth - sequenceComponent.view.width) / 2, mapLabelHeight);
                 DomHelper.translate(mapLabelIcon, stepView.width / 2, stepView.height);
-
-                totalHeight = totalHeight + childrenContainerBgTopOffset;
             }
             else {
                 DomHelper.translate(childrenContainerBg, childrenContainerBgTopOffset, 0);

lib/src/models.ts

@@ -1,7 +1,6 @@
 import { ContextMenuView } from "./components/common/context-menu/context-menu-view";
 import { Placeholder } from "./components/placeholder/placeholder";
 import { Sequence } from "./components/sequence/sequence";
-import { WorkspaceView } from "./core/workspace-view";
 import { ComponentCreator } from "./utils/component-creator";
 import { ClickEvent } from "./utils/event-utils";
 import { Observable } from "./utils/observable";

lib/src/utils/creation-helper.ts

@@ -263,7 +263,7 @@ export class CreationHelper {
 
                 lastJoinTargets.push({
                     x: branchJoinX,
-                    y: processedBranch.joinY + choiceLabelHeight + placeholderHeight / 2,
+                    y: processedBranch.joinY + choiceLabelHeight + placeholderHeight / 2 + padding,
                 });
             }