Zoom, manage zIndex when selected

Contributes: #71

frontend/src/lib/components/Arrows.react.js

@@ -10,7 +10,7 @@ export function Arrows() {
     const {highlightedSymbol} = useHighlightedSymbol();
     const [arrows, setArrows] = React.useState([]);
     const {
-        value: animationState,
+        animationState,
     } = useAnimationUpdater();
 
     const calculateArrows = React.useCallback(() => {

frontend/src/lib/components/Facts.react.js

@@ -14,8 +14,8 @@ export function Facts() {
     const opacityMultiplier = 0.8;
     const branchSpaceRef = React.useRef(null);
     const rowbodyRef = React.useRef(null);
-    const {setValue: setAnimationValue} = useAnimationUpdater();
-    const setAnimationValueRef = React.useRef(setAnimationValue);
+    const {setAnimationState} = useAnimationUpdater();
+    const setAnimationStateRef = React.useRef(setAnimationState);
 
     React.useEffect(() => {
         if (
@@ -36,9 +36,9 @@ export function Facts() {
     }, [currentDragged, opacityMultiplier]);
 
     const animateResize = React.useCallback(() => {
-        const setAnimationValue = setAnimationValueRef.current;
+        const setAnimationState = setAnimationStateRef.current;
         const element = rowbodyRef.current;
-        setAnimationValue((oldValue) => ({
+        setAnimationState((oldValue) => ({
             ...oldValue,
             [-1]: {
                 ...oldValue[-1],

frontend/src/lib/components/Node.react.js

@@ -405,9 +405,8 @@ export function Node(props) {
     const {dispatch: dispatchShownNodes} = useShownNodes();
     const classNames = useHighlightedNodeToCreateClassName(node);
     const [height, setHeight] = React.useState(emToPixel(minimumNodeHeight));
-    const {setValue, animationUpdater} = useAnimationUpdater();
-    const setValueRef = React.useRef(setValue);
-    const animationUpdaterRef = React.useRef(animationUpdater);
+    const {setAnimationState} = useAnimationUpdater();
+    const setAnimationStateRef = React.useRef(setAnimationState);
     const {setShownDetail} = useShownDetail();
     const dispatchShownNodesRef = React.useRef(dispatchShownNodes);
     const nodeuuidRef = React.useRef(node.uuid);
@@ -426,11 +425,11 @@ export function Node(props) {
     }, []);
 
     React.useEffect(() => {
-        const setValue = setValueRef.current;
+        const setAnimationState = setAnimationStateRef.current;
         const nodeuuid = nodeuuidRef.current;
-        setValue((oldValue) => ({...oldValue, [nodeuuid]: null}));
+        setAnimationState((oldValue) => ({...oldValue, [nodeuuid]: null}));
         return () => {
-            setValue((v) => {
+            setAnimationState((v) => {
                 const {[nodeuuid]: _, ...rest} = v;
                 return rest;
             });
@@ -462,11 +461,20 @@ export function Node(props) {
 
     const animateResize = React.useCallback(() => {
         const nodeuuid = nodeuuidRef.current;
-        const animationUpdater = animationUpdaterRef.current;
+        const setAnimationState = setAnimationStateRef.current;
         const element = animateHeightRef.current;
         if (element === null) {return;}
-        animationUpdater(nodeuuid, {width: element.clientWidth, height: element.clientHeight, top: element.offsetTop, left: element.offsetLeft, isSubnode: isSubnode});
-    }, [isSubnode]);
+        setAnimationState((oldValue) => ({
+            ...oldValue,
+            [nodeuuid]: {
+                ...oldValue[nodeuuid],
+                width: element.clientWidth,
+                height: element.clientHeight,
+                top: element.offsetTop,
+                left: element.offsetLeft,
+            },
+        }));
+    }, []);
     // useResizeObserver(animateHeightRef, animateResize); // is this needed for good animation?
 
     const divID = `${node.uuid}_animate_height`;

frontend/src/lib/components/Row.react.js

@@ -31,9 +31,18 @@ export class DragHandle extends React.Component {
     render() {
         const {dragHandleProps} = this.props;
         return (
-            <div className="dragHandle" {...dragHandleProps}>
+            <div
+                className="dragHandle"
+                {...dragHandleProps}
+                style={{
+                    position: 'absolute',
+                }}
+            >
                 <Suspense fallback={<div>=</div>}>
-                    <IconWrapper icon={dragHandleRounded} width="24" />
+                    <IconWrapper
+                        icon={dragHandleRounded}
+                        width="24"
+                    />
                 </Suspense>
             </div>
         );
@@ -60,7 +69,7 @@ export class RowTemplate extends React.Component {
             currentDragged: '',
         };
         this.intervalId = null;
-        this.setAnimationValue = null;
+        this.setAnimationState = null;
         this.animationUpdater = null;
     }
 
@@ -72,7 +81,7 @@ export class RowTemplate extends React.Component {
         });
         const element = this.rowRef.current;
         if (element !== null) {
-            this.setAnimationValue((oldValue) => ({
+            this.setAnimationState((oldValue) => ({
                 ...oldValue,
                 [this.props.item.transformation.id]: {
                     width: element.clientWidth,
@@ -85,7 +94,7 @@ export class RowTemplate extends React.Component {
     }
 
     componentWillUnmount() {
-        this.setAnimationValue((v) => {
+        this.setAnimationState((v) => {
             const {[this.props.item.transformation.id]: _, ...rest} = v;
             return rest;
         });
@@ -116,7 +125,7 @@ export class RowTemplate extends React.Component {
                 if (element === null) {
                     return;
                 }
-                this.setAnimationValue((oldValue) =>({
+                this.setAnimationState((oldValue) =>({
                     ...oldValue,
                     [this.props.item.transformation.id]: {
                         ...oldValue[this.props.item.transformation.id],
@@ -135,7 +144,7 @@ export class RowTemplate extends React.Component {
         if (this.props.itemSelected < animationPickupThreshold && this.intervalId !== null) {
             clearInterval(this.intervalId);
             this.intervalId = null;
-            this.setAnimationValue((oldValue) => ({
+            this.setAnimationState((oldValue) => ({
                 ...oldValue,
                 [this.props.item.transformation.id]: {
                     ...oldValue[this.props.item.transformation.id],
@@ -152,9 +161,8 @@ export class RowTemplate extends React.Component {
 
         return (
             <AnimationUpdater.Consumer>
-                {({setValue, animationUpdater}) => {
-                    this.setAnimationValue = setValue;
-                    this.animationUpdater = animationUpdater;
+                {({setAnimationState}) => {
+                    this.setAnimationState = setAnimationState;
                     return (
                         <TransformationContext.Consumer>
                             {({state: {canDrop}}) => {
@@ -269,8 +277,8 @@ export function Row(props) {
     const handleRef = useRef(null);
     const [shownRecursion, ,] = useShownRecursion();
     const transformationIdRef = useRef(transformation.id);
-    const {setValue: setAnimationValue} = useAnimationUpdater();
-    const setAnimationValueRef = useRef(setAnimationValue);
+    const {setAnimationState} = useAnimationUpdater();
+    const setAnimationStateRef = useRef(setAnimationState);
     const {rowHeaderHeights} = useRowHeaderHeightState();
     const rowContainerRef = useRef(null);
 
@@ -282,16 +290,16 @@ export function Row(props) {
     }, []);
 
     React.useEffect(() => {
-        const setAnimationValue = setAnimationValueRef.current;
+        const setAnimationState = setAnimationStateRef.current;
         const transformationId = transformationIdRef.current;
-        setAnimationValue((oldValue) => {
+        setAnimationState((oldValue) => {
             if (transformationId in oldValue) {
                 return oldValue;
             }
             return {...oldValue, [transformationId]: null}
         });
         return () => {
-            setAnimationValue((v) => {
+            setAnimationState((v) => {
                 const {[transformationId]: _, ...rest} = v;
                 return rest;
             });
@@ -309,15 +317,9 @@ export function Row(props) {
 
     const animateResize = React.useCallback(() => {
         const transformationId = transformationIdRef.current;
-        const setAnimationValue = setAnimationValueRef.current;
+        const setAnimationState = setAnimationStateRef.current;
         const element = rowbodyRef.current;
-        if (transformationId === 1) {
-            console.log(
-                'new Element top:',
-                element
-            );
-        }
-            setAnimationValue((oldValue) => ({
+        setAnimationState((oldValue) => ({
                 ...oldValue,
                 [transformationId]: {
                     ...oldValue[transformationId],
@@ -328,7 +330,8 @@ export function Row(props) {
                         element.offsetParent.offsetParent
                             .offsetParent.offsetTop,
                 },
-            }));
+            }
+        ));
     }, []);
     useResizeObserver(rowbodyRef, animateResize);
 

frontend/src/lib/components/RowHeader.react.js

@@ -5,6 +5,7 @@ import {useGraphZoomState} from '../contexts/GraphZoomState';
 import {useRowHeaderHeightState} from '../contexts/RowHeaderHeightState';
 import {useTransformations} from '../contexts/transformations';
 import {useAnimationUpdater} from '../contexts/AnimationUpdater';
+import { emToPixel } from '../utils';
 
 export function RowHeaderContainer() {
     const {state: {transformations}} = useTransformations();
@@ -33,8 +34,20 @@ export function RowHeader(props) {
     const rowHeaderRef = React.useRef(null);
     const setRowHeaderHeightsRef = React.useRef(setRowHeaderHeights);
     const transformationhashRef = React.useRef(transformation.hash);
-    const {value: animationValue} = useAnimationUpdater();
-    const rowHeaderAttributes = findRowAttributes(transformation.hash);
+
+    const findRowAttributes = React.useCallback(() => {
+        const defaultRowPosition = -1000;
+        const rowContainer = document.getElementsByClassName(
+            `row_container ${transformation.hash}`
+        )[0];
+        const box = rowContainer?.getBoundingClientRect();
+        return {
+            position: box?.top || defaultRowPosition,
+            opacity: rowContainer?.parentElement?.style?.opacity || 1,
+            zIndex: rowContainer?.parentElement.parentElement.style.zIndex || 0,
+        };
+    }, [transformation.hash]);
+    const rowHeaderAttributes = findRowAttributes();
 
     React.useEffect(() => {
         const setRowHeaderHeights = setRowHeaderHeightsRef.current;
@@ -53,11 +66,12 @@ export function RowHeader(props) {
 
     React.useEffect(() => {
         if (rowHeaderRef.current) {
-            const margins = rowHeaderRef.current.style.marginTop;
-            console.log(margins)
+            const margins = emToPixel(
+                parseInt(rowHeaderRef.current.style.marginTop, 10)
+            );
             setRowHeaderHeights((oldValue) => ({
                 ...oldValue,
-                [transformation.hash]: rowHeaderRef.current.offsetHeight,
+                [transformation.hash]: rowHeaderRef.current.offsetHeight + margins,
             }));
         }
     }, [setRowHeaderHeights, transformation.hash]);
@@ -70,7 +84,8 @@ export function RowHeader(props) {
                 borderColor: colorPalette.primary,
                 top: rowHeaderAttributes.position,
                 opacity: rowHeaderAttributes.opacity,
-                zIndex: rowHeaderAttributes.zIndex+1,
+                zIndex: rowHeaderAttributes.zIndex,
+                marginTop: '1em'
             }}
             className={`row_header ${transformation.hash}`}
             ref={rowHeaderRef}
@@ -91,16 +106,16 @@ export function RowHeader(props) {
     );
 }
 
-function findRowAttributes(hash) {
-    const defaultRowPosition = -1000;
-    const rowContainer = document.getElementsByClassName(`row_container ${hash}`)[0];
-    const box = rowContainer?.getBoundingClientRect();
-    return {
-        position: box?.top || defaultRowPosition,
-        opacity: rowContainer?.parentElement?.style?.opacity || 1,
-        zIndex: rowContainer?.parentElement?.zIndex || 1,
-    };
-}
+// function findRowAttributes(hash) {
+//     const defaultRowPosition = -1000;
+//     const rowContainer = document.getElementsByClassName(`row_container ${hash}`)[0];
+//     const box = rowContainer?.getBoundingClientRect();
+//     return {
+//         position: box?.top || defaultRowPosition,
+//         opacity: rowContainer?.parentElement?.style?.opacity || 1,
+//         zIndex: rowContainer?.parentElement?.parentElement?.zIndex ? rowContainer.parentElement.parentElement.zIndex : 0,
+//     };
+// }
 
 
 RowHeader.propTypes = {

frontend/src/lib/components/row.css

@@ -7,7 +7,6 @@
     max-width: 95%;
     position: absolute;
     padding: 8px 8px 8px 16px;
-    margin-top: 1em;
 }
 
 .row_header_bar {

frontend/src/lib/contexts/AnimationUpdater.js

@@ -7,19 +7,10 @@ export const AnimationUpdater = React.createContext(defaultAnimationUpdater);
 
 export const useAnimationUpdater = () => React.useContext(AnimationUpdater);
 export const AnimationUpdaterProvider = ({ children }) => {
-    const [value, setValue] = React.useState(Object());
-
-    const animationUpdater = (elementId, elementValue) => {
-        setValue((oldValue) => {
-            return {
-                ...oldValue,
-                [elementId]: elementValue,
-            };
-        });
-    };
+    const [animationState, setAnimationState] = React.useState(Object());
 
     return <AnimationUpdater.Provider
-        value={{value, setValue, animationUpdater}}>{children}</AnimationUpdater.Provider>
+        value={{animationState, setAnimationState}}>{children}</AnimationUpdater.Provider>
 }
 
 AnimationUpdaterProvider.propTypes = {

frontend/src/lib/main/ViaspDash.react.js

@@ -140,9 +140,8 @@ function MainWindow(props) {
     const [, dispatch] = useMessages();
     const backendURLRef = React.useRef(backendURL);
     const dispatchRef = React.useRef(dispatch);
-    const {setValue, animationUpdater} = useAnimationUpdater();
-    const setValueRef = React.useRef(setValue);
-    const animationUpdaterRef = React.useRef(animationUpdater);
+    const {setAnimationState} = useAnimationUpdater();
+    const setAnimationStateRef = React.useRef(setAnimationState);
     const [ctrlPressed, setCtrlPressed] = React.useState(false);
     const {graphZoom, setGraphZoom} = useGraphZoomState();
     const contentDivRef = React.useRef(null);
@@ -163,16 +162,16 @@ function MainWindow(props) {
 
 
     React.useEffect(() => {
-        const setValue = setValueRef.current;
-        setValue((oldValue) => ({
+        const setAnimationState = setAnimationStateRef.current;
+        setAnimationState((oldValue) => ({
             ...oldValue,
             graph_zoom: {
                 translation: {x: 0, y: 0},
                 scale: 1,
             },
         }));
         return () => {
-            setValue((v) => {
+            setAnimationState((v) => {
                 const {graph: _, ...rest} = v;
                 return rest;
             });
@@ -205,6 +204,7 @@ function MainWindow(props) {
 
     const handleMapChange = ({translation, scale}) => {
         if (ctrlPressed) {
+            const setAnimationState = setAnimationStateRef.current;
             setGraphZoom(() => {
                 const contentWidth = contentDivRef.current.clientWidth;
                 const graphWidth = scale * contentWidth;
@@ -223,7 +223,14 @@ function MainWindow(props) {
                     scale,
                 };
             });
-            animationUpdaterRef.current('graph_zoom', {translation, scale});
+            setAnimationState((oldValue) => ({
+                    ...oldValue,
+                    graph_zoom: {
+                        translation, 
+                        scale
+                    }
+                }
+            ));
         }
     };