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,
* 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))
});
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);
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
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'
});
}
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
});
const parentId = cell.get('parent');
if (!parentId) {
+ // this is action
return;
}
addDgGenericNodeTemplate(nodeTemplateName: string) {
const node = new NodeTemplate('dg-generic');
node.properties = {
- 'dependency-node-template': []
+ 'dependency-node-templates': []
};
this.setState({
...this.state,
[dgGenericNodeName]: {
...this.state.template.node_templates[dgGenericNodeName],
properties: {
- 'dependency-node-template': [
+ 'dependency-node-templates': [
...props['dependency-node-template'],
dependency
]
-import { TopologyTemplate } from './model/designer.topologyTemplate.model';
-import { Injectable } from '@angular/core';
-import { GraphUtil } from './graph.util';
-
/*
============LICENSE_START==========================================
===================================================================
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'
* 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) {
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(
});
}
-
}
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;
+ }
+
}
export class NodeTemplate {
type: string;
properties?: {
- 'dependency-node-template'?: string[]
+ 'dependency-node-templates'?: string[]
};
interfaces?: {};
artifacts?: {};
Code Review / ccsdk / cds.git / commitdiff