Skip to content
This repository has been archived by the owner on Sep 4, 2024. It is now read-only.

Commit

Permalink
Issue 374- Usability Features (#401)
Browse files Browse the repository at this point in the history
* feat: limits when zooming

* feat: fit to View on Mousewheel click

* make reset view switch to top down drawing

* fix: collapse features rotate triangle

* mark rotation as constant and remove dummy rotation for vertical

* improve: fit to view after changing direction

* adjust triangle alignment to fit exactly to rect

---------

Co-authored-by: Pierre Coquet <[email protected]>
  • Loading branch information
tomatenhans and Pierre Coquet committed Oct 16, 2023
1 parent a45ba54 commit 5efde08
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 10 deletions.
2 changes: 2 additions & 0 deletions frontendVue3/src/classes/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -278,6 +278,7 @@ export default {
methods: {
resetView(levels, maxChildren) {
this.d3Data.direction ='v';
view.reset(this.d3Data, levels, maxChildren);
},
Expand Down Expand Up @@ -322,6 +323,7 @@ export default {
toggleDirection() {
this.d3Data.direction = this.d3Data.direction === 'v' ? 'h' : 'v';
update.updateSvg(this.d3Data);
view.zoomFit(this.d3Data);
},
hideCurrentNode(d3Node) {
Expand Down
2 changes: 1 addition & 1 deletion frontendVue3/src/services/FeatureModel/init.service.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
20 changes: 12 additions & 8 deletions frontendVue3/src/services/FeatureModel/update.service.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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')
Expand Down

0 comments on commit 5efde08

Please sign in to comment.