jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved dep graph to creature form, improved style

Browse Source
This commit is contained in:
Stefan Zermatten
2023-05-29 13:18:27 +02:00
parent 16d3ea9d53
commit b402fdf517
3 changed files with 66 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/imports/client/ui/creature/CreatureForm.vue
View File

@@ -120,6 +120,18 @@
{{ libraryWriteError }}
</p>
</form-section>
<form-section name="Debug">
<v-btn
data-id="dependency-graph-button"
text
@click="showDependencyGraph"
>
<v-icon left>
mdi-graph
</v-icon>
Dependency Graph
</v-btn>
</form-section>
</form-sections>
</div>
</template>
@@ -267,6 +279,15 @@ export default {
this.dirty = true;
this.updateAllowedLibraryCollections();
},
showDependencyGraph() {
this.$store.commit('pushDialogStack', {
component: 'dependency-graph-dialog',
elementId: 'dependency-graph-button',
data: {
creatureId: this.model._id,
},
});
},
},
};
</script>

16
app/imports/client/ui/creature/character/CharacterSheetToolbar.vue
View File

@@ -55,13 +55,6 @@
</v-icon> Delete
</v-list-item-title>
</v-list-item>
<v-list-item @click="showDependencyGraph">
<v-list-item-title>
<v-icon left>
mdi-graph
</v-icon> Dependency Graph
</v-list-item-title>
</v-list-item>
<v-list-item @click="showCharacterForm">
<v-list-item-title>
<v-icon left>
@@ -244,15 +237,6 @@ export default {
}
});
},
showDependencyGraph() {
this.$store.commit('pushDialogStack', {
component: 'dependency-graph-dialog',
elementId: 'creature-menu',
data: {
creatureId: this.creatureId,
},
});
},
unshareWithMe() {
updateUserSharePermissions.call({
docRef: {

66
app/imports/client/ui/creature/dependencyGraph/DependencyGraphDialog.vue
View File

@@ -60,15 +60,16 @@ export default {
// Convert ngraph to cytoscape
// Convert Nodes
const nodes = [];
console.log(this.computation);
const loopNodes = getLoopNodes(this.computation);
this.computation.dependencyGraph.forEachNode(function (node) {
nodes.push({
data: {
id: node.id,
label: getNodeName(node) || node.id,
variable: !node.data,
variable: !node.data?.type,
inLoop: loopNodes.includes(node.id),
propId: node.data?._id,
prop: node.data,
},
});
});
@@ -80,9 +81,7 @@ export default {
target: link.fromId,
source: link.toId,
linkType: link.data,
inLoop: loopNodes.includes(link.fromId) && loopNodes.includes(link.toId)
},
scratch: {
inLoop: loopNodes.includes(link.fromId) && loopNodes.includes(link.toId),
},
})
//{ data: { source: 'n0', target: 'n1' } }
@@ -97,18 +96,23 @@ export default {
name: 'klay',
nodeDimensionsIncludeLabels: false,
klay: {
// direction: 'RIGHT',
addUnnecessaryBendpoints: false,
aspectRatio: 1.6,
direction: 'RIGHT',
edgeRouting: 'ORTHOGONAL', //'ORTHOGONAL',
edgeSpacingFactor: 0.5,
feedbackEdges: true,
compactComponents: true,
inLayerSpacingFactor: 1.0,
layoutHierarchy: true,
mergeEdges: true,
// mergeHierarchyCrossingEdges: true,
linearSegmentsDeflectionDampening: 0.3,
compactComponents: true,
mergeEdges: false,
mergeHierarchyCrossingEdges: false,
nodeLayering: 'NETWORK_SIMPLEX',
nodePlacement: 'LINEAR_SEGMENTS', //default 'BRANDES_KOEPF'
spacing: 20,//20,
edgeSpacingFactor: 2.0, //0.5,
thoroughness: 12,//7,
separateConnectedComponents: false,
separateConnectedComponents: true,
},
},
@@ -117,37 +121,56 @@ export default {
selector: 'node',
style: {
'content': 'data(label)',
//'text-opacity': 0.5,
'text-valign': 'bottom',
//'text-opacity': 0.8,
'text-valign': 'center',
'text-halign': 'center',
'background-color': '#11479e',
'background-color': '#303030',
'text-background-color': '#303030',
'color': '#fff',
//'text-outline-color': '#888',
//'text-outline-width': 3,
'text-background-opacity': 1,
'text-background-color': '#888',
'text-background-shape': 'roundrectangle',
'shape': 'round-rectangle'
'text-background-padding': 2,
'shape': 'round-rectangle',
'width': 80,
'height': 20,
'compound-sizing-wrt-labels': 'include',
'font-family': '"Roboto",sans-serif',
}
}, {
selector: ele => ele.data().variable,
style: {
'color': '#f44336',
'font-family': 'monospace',
}
}, {
selector: ele => !!ele.data().propId,
style: {
'background-color': '#B71C1C',
'text-background-color': '#B71C1C',
}
}, {
selector: 'edge',
style: {
'width': 4,
'target-arrow-shape': 'triangle-backcurve',
'line-color': '#9dbaea',
'target-arrow-color': '#9dbaea',
'curve-style': 'unbundled-bezier',
'color': '#fff',
'text-opacity': 0.8,
'line-color': '#555',
'target-arrow-color': '#555',
'curve-style': 'unbundled-bezier',//'unbundled-bezier',
'label': 'data(linkType)',
'text-rotation': 'autorotate',
'source-endpoint': 'outside-to-line-or-label',
'target-endpoint': 'outside-to-line-or-label',
}
}, {
selector: ele => ele.data().inLoop,
style: {
'color': '#fff',
'background-color': '#FF6D00',
'text-background-color': '#FF6D00',
'line-color': '#FF6D00',
'target-arrow-color': '#FF6D00',
}
@@ -161,11 +184,11 @@ export default {
});
this.cytoscape.on('tap', 'node', function(evt){
var node = evt.target;
console.log( 'tapped node', node.data() );
console.log( node.data() );
});
this.cytoscape.on('tap', 'edge', function(evt){
var edge = evt.target;
console.log( 'tapped edge', edge );
console.log( edge.data() );
});
},
meteor: {
@@ -182,6 +205,7 @@ export default {
.graph-container {
width: 100%;
height: 100%;
background-color: #151515;
}
.graph-container svg {