diff options
Diffstat (limited to 'cds-ui')
5 files changed, 74 insertions, 23 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts index 56b5dcbbc..5adce7ea0 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts @@ -53,6 +53,7 @@ export class DesignerComponent implements OnInit, OnDestroy { paletteGraph: joint.dia.Graph; palettePaper: joint.dia.Paper; private ngUnsubscribe = new Subject(); + private opt = { tx: 100, ty: 100 }; constructor(private designerStore: DesignerStore, private functionStore: FunctionsStore, @@ -91,7 +92,6 @@ export class DesignerComponent implements OnInit, OnDestroy { * the code to retrieve from server is commented */ this.functionStore.state$ - .pipe(x => { console.log('value on way to distinct', x); return x; }) .pipe( distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), takeUntil(this.ngUnsubscribe)) @@ -114,7 +114,9 @@ export class DesignerComponent implements OnInit, OnDestroy { }); this.designerStore.state$ - .pipe(takeUntil(this.ngUnsubscribe)) + .pipe( + distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) .subscribe(state => { if (state.sourceContent) { console.log('inside desinger.component---> ', state); @@ -123,6 +125,8 @@ export class DesignerComponent implements OnInit, OnDestroy { console.log(topologtTemplate); delete state.sourceContent; this.graphGenerator.populate(topologtTemplate, this.boardGraph); + + console.log('all cells', this.boardGraph.getCells()); /** * auto arrange elements in graph * https://resources.jointjs.com/docs/jointjs/v3.1/joint.html#layout.DirectedGraph @@ -130,12 +134,10 @@ export class DesignerComponent implements OnInit, OnDestroy { joint.layout.DirectedGraph.layout( this.boardGraph.getCells(), { dagre, graphlib, - // nodeSep: 50, - // setLinkVertices: false, - // rankDir: 'LR', - marginX: 100, - marginY: 100, - clusterPadding: { top: 100, left: 10, right: 10, bottom: 100 }, + setLinkVertices: false, + marginX: 10, + marginY: 10, + clusterPadding: { top: 100, left: 30, right: 10, bottom: 100 }, rankDir: 'TB' }); } @@ -174,9 +176,9 @@ export class DesignerComponent implements OnInit, OnDestroy { width: 1100, gridSize: 10, drawGrid: true, - background: { - color: 'rgba(0, 255, 0, 0.3)' - }, + // background: { + // color: 'rgba(0, 255, 0, 0.3)' + // }, cellViewNamespace: joint.shapes }); @@ -200,6 +202,7 @@ export class DesignerComponent implements OnInit, OnDestroy { const parentId = cell.get('parent'); if (!parentId) { + // this is action return; } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts index c37accdb4..a7f25902c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.store.ts @@ -106,7 +106,7 @@ export class DesignerStore extends Store<DesignerDashboardState> { addDgGenericNodeTemplate(nodeTemplateName: string) { const node = new NodeTemplate('dg-generic'); node.properties = { - 'dependency-node-template': [] + 'dependency-node-templates': [] }; this.setState({ ...this.state, @@ -131,7 +131,7 @@ export class DesignerStore extends Store<DesignerDashboardState> { [dgGenericNodeName]: { ...this.state.template.node_templates[dgGenericNodeName], properties: { - 'dependency-node-template': [ + 'dependency-node-templates': [ ...props['dependency-node-template'], dependency ] diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts index 17596bd33..8e1d88907 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.generator.util.ts @@ -1,7 +1,3 @@ -import { TopologyTemplate } from './model/designer.topologyTemplate.model'; -import { Injectable } from '@angular/core'; -import { GraphUtil } from './graph.util'; - /* ============LICENSE_START========================================== =================================================================== @@ -22,6 +18,10 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ */ +import { TopologyTemplate } from './model/designer.topologyTemplate.model'; +import { Injectable } from '@angular/core'; +import { GraphUtil } from './graph.util'; +import { NodeTemplate } from './model/desinger.nodeTemplate.model'; @Injectable({ providedIn: 'root' @@ -36,7 +36,41 @@ export class GraphGenerator { * create action element * from steps --> create function element * add function element to action element + * example toplogyTemplate + * + * { + * "workflows": { + * "Action1": { + * "steps": { + * "STEP_NAME": { + * "target": "NODE_TEMPLATE_NAME", + * "description": "" + * } + * } + * } + * }, + * "node_templates": { + * "NODE_TEMPLATE_NAME": { + * "type": "dg-generic", + * "properties": { + * "dependency-node-templates": [ + * "component-config-snapshots-executor", + * "component-jython-executor" + * ] + * } + * }, + * "component-config-snapshots-executor": { + * "type": "component-config-snapshots-executor", + * "properties": { } + * }, + * "component-jython-executor": { + * "type": "component-jython-executor", + * "properties": { } + * } + * } + * } */ + public populate(topologyTempalte: TopologyTemplate, boardGraph: joint.dia.Graph) { @@ -51,18 +85,19 @@ export class GraphGenerator { const workflow = topologyTempalte.workflows[workFlowName].steps; const stepName = Object.keys(workflow)[0]; if (stepName) { - const functionType = workflow[stepName].target; + const nodeTemplateName = workflow[stepName].target; + const functionType = topologyTempalte.node_templates[nodeTemplateName].type; console.log('draw function with ', stepName, functionType); - const functionElementForBoard = this.graphUtil.dropFunctionOverActionRelativeToParent( + this.graphUtil.dropFunctionOverActionRelativeToParent( actionElement, stepName , functionType, boardGraph); // TODO handle dg-generic case (multi-step in the same action) if (functionType === 'dg-generic') { - const props = topologyTempalte.node_templates[stepName].properties; + const props = topologyTempalte.node_templates[nodeTemplateName].properties; console.log('dg props', props); - props['dependency-node-template'].forEach(dependencyStepName => { + props['dependency-node-templates'].forEach(dependencyStepName => { const dependencyType = topologyTempalte.node_templates[dependencyStepName].type; console.log('dependencyType', dependencyType); this.graphUtil.dropFunctionOverActionRelativeToParent( @@ -75,5 +110,4 @@ export class GraphGenerator { }); } - } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts index 9ba7271fb..fd4dd35e4 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/graph.util.ts @@ -211,4 +211,18 @@ export class GraphUtil { return !parentCell.get('embeds') || parentCell.get('embeds').length < 1; } + getActionSiblings(actionCell: joint.shapes.app.ActionElement, + boardGraph: joint.dia.Graph + ): joint.shapes.app.ActionElement[] { + const cellId = actionCell.id; + const siblings = boardGraph.getCells().filter(elem => { + const type = elem.attributes.type; + const elemId = elem.id; + return (type !== undefined && type === 'app.ActionElement' + && elemId !== cellId); + }) as joint.shapes.app.ActionElement[]; + console.log('siblings', siblings); + return siblings; + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts index 9bd56e5d5..8715e44c2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts @@ -1,7 +1,7 @@ export class NodeTemplate { type: string; properties?: { - 'dependency-node-template'?: string[] + 'dependency-node-templates'?: string[] }; interfaces?: {}; artifacts?: {}; |