diff --git a/README.md b/README.md index 777c1ea..7892ae9 100644 --- a/README.md +++ b/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; @@ -194,6 +198,27 @@ overrideIcon(node: Node): Promise; // to assign a label for each choice column. overrideColumnLabel(node: Node, parent: Node | null, columnIndex: number): Promise; + +/** + * 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; + choice?: (creationContext: ChoiceViewCreationContext, workspaceContext: Context) => Promise; + map?: (creationContext: MapViewCreationContext, workspaceContext: Context) => Promise; + terminator?: (creationContext: TerminatorViewCreationContext, workspaceContext: Context) => Promise; +}; + +/** + * 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 diff --git a/angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.html b/angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.html index 6441f18..730143c 100644 --- a/angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.html +++ b/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"> + +
diff --git a/angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.ts b/angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.ts index 7ac7674..65963f1 100644 --- a/angular/projects/ngx-firjs-demo/src/app/components/designer/designer.component.ts +++ b/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; @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 = (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); diff --git a/angular/projects/ngx-firjs/package.json b/angular/projects/ngx-firjs/package.json index b79d7ad..3af6ae5 100644 --- a/angular/projects/ngx-firjs/package.json +++ b/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, diff --git a/demo/custom.html b/demo/custom.html index babe716..e1a1f6e 100644 --- a/demo/custom.html +++ b/demo/custom.html @@ -131,7 +131,7 @@
Terminator
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"> - + diff --git a/demo/index.html b/demo/index.html index 86ce236..028cbea 100644 --- a/demo/index.html +++ b/demo/index.html @@ -135,7 +135,7 @@
Terminator
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"> - + diff --git a/demo/index.js b/demo/index.js index 46b64c3..b8c78f9 100644 --- a/demo/index.js +++ b/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"); diff --git a/lib/package.json b/lib/package.json index e8a8302..5532057 100644 --- a/lib/package.json +++ b/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" diff --git a/lib/rollup.config.mjs b/lib/rollup.config.mjs index b75f8dc..cb74ae6 100644 --- a/lib/rollup.config.mjs +++ b/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' } ], diff --git a/lib/src/components/map/map-view.ts b/lib/src/components/map/map-view.ts index d00f035..8299fa5 100644 --- a/lib/src/components/map/map-view.ts +++ b/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); diff --git a/lib/src/models.ts b/lib/src/models.ts index 1779527..28ef679 100644 --- a/lib/src/models.ts +++ b/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"; diff --git a/lib/src/utils/creation-helper.ts b/lib/src/utils/creation-helper.ts index a2c3050..5e5a5cf 100644 --- a/lib/src/utils/creation-helper.ts +++ b/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, }); }