Issue 374- Usability Features

frontendVue3/src/classes/constants.js

@@ -3,6 +3,8 @@ export const SVG_MARGIN = {top: 20, right: 90, bottom: 20, left: 90};
 export const RECT_MARGIN = {right: 8, left: 8};
 export const RECT_HEIGHT = 35;
 
+export const TRIANGLE_HORIZONTAL_ROTATION=270;
+export const TRIANGLE_BORDER_OFFSET=11;
 export const MONOSPACE_HEIGHT_WIDTH_FACTOR = 0.6;
 export const MANDATORY_CIRCLE_RADIUS = 6;
 export const GROUP_SEGMENT_RADIUS = 25; // Radius of the segment that represents the 'alt' and 'and' groups.

frontendVue3/src/components/FeatureModel/FeatureModelTree.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div @click.middle="fitToView">
         <div class="float-right mt-2 mr-3" style="position: absolute; right: 0">
             <v-toolbar
                 floating
@@ -278,6 +278,7 @@ export default {
 
     methods: {
         resetView(levels, maxChildren) {
+            this.d3Data.direction ='v';
             view.reset(this.d3Data, levels, maxChildren);
         },
 
@@ -321,6 +322,7 @@ export default {
         toggleDirection() {
             this.d3Data.direction = this.d3Data.direction === 'v' ? 'h' : 'v';
             update.updateSvg(this.d3Data);
+            view.zoomFit(this.d3Data);
         },
 
         hideCurrentNode(d3Node) {

frontendVue3/src/services/FeatureModel/init.service.js

@@ -19,7 +19,7 @@ export function initialize(d3Data, data) {
 
     d3Data.zoom = d3
         .zoom()
-        //.scaleExtent([0.1, 8])
+        .scaleExtent([0.125, 5])
         .on('zoom', (event) => svgContent.attr('transform', event.transform));
 
     // Create svg-container.

frontendVue3/src/services/FeatureModel/update.service.js

@@ -230,7 +230,7 @@ function updateChildrenCount(d3Data, featureNodeUpdate) {
             (d) => (d.data.isLeaf() || !d.data.isCollapsed ? [] : [d]),
             (d) => d.id
         );
-
+    
     const childrenCountEnter = childrenCount
         .enter()
         .append('g')
@@ -254,13 +254,17 @@ function updateChildrenCount(d3Data, featureNodeUpdate) {
 
     const childrenCountUpdate = childrenCountEnter.merge(childrenCount);
     childrenCountUpdate.attr('transform', (d3Node) => {
-        const x = d3Data.direction === 'v' ? 0 : d3Node.width + 10;
-        const y =
-            d3Data.direction === 'v'
-                ? CONSTANTS.RECT_HEIGHT + 10
-                : -CONSTANTS.RECT_HEIGHT / 8;
-        return `
-    translate(${x}, ${y})`;
+        if(d3Data.direction === 'v'){
+            const x = 0 ;
+            const y = CONSTANTS.RECT_HEIGHT + CONSTANTS.TRIANGLE_BORDER_OFFSET;
+            return `translate(${x}, ${y})`;
+        }else{
+            const angle= CONSTANTS.TRIANGLE_HORIZONTAL_ROTATION;
+            const x = d3Node.width+CONSTANTS.TRIANGLE_BORDER_OFFSET;
+            const y =   0;
+            return `translate(${x}, ${y})rotate(${angle})`;
+        }
+
     });
     childrenCountUpdate
         .selectAll('text.direct-children')