Merge pull request #390 from NDLA-H5P/feature/adjustments-to-new-arrows

Adjustments for new arrows
NDLANO · Mar 9, 2022 · b69dbff · b69dbff
2 parents 8c917f6 + e381180
commit b69dbff
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 31 deletions.
diff --git a/library.json b/library.json
@@ -3,7 +3,7 @@
   "machineName": "H5PEditor.TopicMap",
   "majorVersion": 0,
   "minorVersion": 1,
-  "patchVersion": 39,
+  "patchVersion": 40,
   "runnable": 0,
   "preloadedJs": [
     {

diff --git a/src/components/ClassicArrow/Arrow.tsx b/src/components/ClassicArrow/Arrow.tsx
@@ -84,7 +84,7 @@ export const ClassicArrow: React.FC<ClassicArrowProps> = ({
       changeToNonDirectionalArrowAction,
       deleteAction,
     ];
-  }, [editItem, item.id]);
+  }, [editItem, item.id, updateArrowType]);
 
   const isHorizontal =
     Math.abs(item.startPosition.x - item.endPosition.x) >

diff --git a/src/components/ContextMenu/ContextMenu.module.scss b/src/components/ContextMenu/ContextMenu.module.scss
@@ -14,7 +14,7 @@
   border-radius: 2px;
   filter: drop-shadow(0 0 0.25em rgba(44, 44, 44, 0.5));
   pointer-events: visible;
-  z-index: 10;
+  z-index: 2;
   &::before {
     position: absolute;
     display: block;

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
@@ -19,8 +19,8 @@ export type ContextMenuProps = {
   show: boolean;
   turnLeft: boolean;
   actions: Array<ContextMenuAction>;
-  x: number;
-  y: number;
+  x?: number;
+  y?: number;
 };
 
 export const ContextMenu: React.FC<ContextMenuProps> = ({
@@ -37,7 +37,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = ({
       className={`${styles.contextMenu} ${className} ${
         show && styles.show
       } context-menu-button`}
-      style={{ left: x, top: y }}
+      style={x && y ? { left: x, top: y } : undefined}
     >
       {actions.map(({ icon, label, onClick }) => (
         <ContextMenuButton

diff --git a/src/components/Draggable/Draggable.tsx b/src/components/Draggable/Draggable.tsx
@@ -360,8 +360,6 @@ export const Draggable: FC<DraggableProps> = ({
         actions={contextMenuActions}
         show={selectedItem === id}
         turnLeft={checkIfRightSideOfGrid(position.x, gridSize.width)}
-        x={0}
-        y={0}
       />
     </div>
   );

diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
@@ -746,7 +746,12 @@ export const Grid: FC<GridProps> = ({
           }}
         />
       )),
-    [gridIndicators, createBoxStart, onGridIndicatorMouseEnter],
+    [
+      gridIndicators,
+      numberOfColumns,
+      createBoxStart,
+      onGridIndicatorMouseEnter,
+    ],
   );
 
   const updateItemPosition = useCallback(
@@ -827,7 +832,7 @@ export const Grid: FC<GridProps> = ({
       setResizeDirectionLock(directionLock);
       updateGridDimensions({ numberOfColumns, numberOfRows });
     },
-    [numberOfColumns, numberOfRows],
+    [numberOfColumns, numberOfRows, updateGridDimensions],
   );
 
   const setArrowType = useCallback(
@@ -854,7 +859,13 @@ export const Grid: FC<GridProps> = ({
         setClassicArrowItems(newClassicItems);
       }
     },
-    [arrowItems, items, updateArrowItems],
+    [
+      arrowItems,
+      classicArrowItems,
+      items,
+      updateArrowItems,
+      updateClassicArrowItems,
+    ],
   );
 
   const children = useMemo(() => {
@@ -960,6 +971,7 @@ export const Grid: FC<GridProps> = ({
       cellSize,
       deleteArrow,
       editArrow,
+      gapSize,
       selectedItem,
       setArrowType,
       setSelectedItem,
@@ -1103,8 +1115,7 @@ export const Grid: FC<GridProps> = ({
         onMouseMove={moveAHPreview}
         onTouchMove={moveAHPreview}
       >
-        {childrenArrows}
-        {childrenClassicArrows}
+        {childrenClassicArrows ?? childrenArrows}
         {arrowPreview ? renderArrow(arrowPreview) : null}
         {classicArrowPreview ? renderClassicArrow(classicArrowPreview) : null}
         {children}

diff --git a/src/components/MapEditorView/MapEditorView.tsx b/src/components/MapEditorView/MapEditorView.tsx
@@ -7,6 +7,7 @@ import { H5PFieldGroup } from "../../types/H5P/H5PField";
 import { H5PForm } from "../../types/H5P/H5PForm";
 import { Params } from "../../types/H5P/Params";
 import { TopicMapItemType } from "../../types/TopicMapItemType";
+import { updateClassicArrowLabels } from "../../utils/arrow.utils";
 import { findConnectedArrows } from "../../utils/grid.utils";
 import { getBackgroundImageField } from "../../utils/H5P/form.utils";
 import { ArrowItemForm } from "../ArrowItemForm/ArrowItemForm";
@@ -42,9 +43,10 @@ export const MapEditorView: React.FC<MapEditorViewProps> = ({
   const [activeTool, setActiveTool] = useState<ToolbarButtonType | null>(null);
   const [gridItems, setGridItems] = useState(params.topicMapItems ?? []);
   const [arrowItems, setArrowItems] = useState(params.arrowItems ?? []);
-  const [classicArrowItems, setClassicArrowItems] = useState(
-    params.classicArrowItems ?? [],
-  );
+  const [classicArrowItems, setClassicArrowItems] = useState<
+    Array<ClassicArrowItemType>
+  >((params.arrowItems as ClassicArrowItemType[]) ?? []);
+
   const [editedItem, setEditedItem] = useState<string | null>(null);
   const [deletedItem, setDeletedItem] = useState<string | null>(null);
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
@@ -69,30 +71,37 @@ export const MapEditorView: React.FC<MapEditorViewProps> = ({
     [setParams],
   );
 
+  const updateClassicArrows = React.useCallback(
+    (items: Array<ClassicArrowItemType>) => {
+      setParams({ arrowItems: items });
+      setClassicArrowItems(items);
+    },
+    [setParams],
+  );
+
   const updateItems = React.useCallback(
     (items: Array<TopicMapItemType>) => {
       setParams({ topicMapItems: items });
       setGridItems(items);
       updateGrid.current(items);
-    },
-    [setParams],
-  );
 
-  const updateArrows = React.useCallback(
-    (items: Array<ArrowItemType>) => {
-      // setParams({ arrowItems: items });
-      setArrowItems(items);
+      // Update arrow labels to match mapItem labels
+      if (classicArrowItems.length > 0) {
+        const updatedClassicArrows = updateClassicArrowLabels(
+          classicArrowItems,
+          items,
+        );
+        updateClassicArrows(updatedClassicArrows);
+        setClassicArrowItems(updatedClassicArrows);
+      }
     },
-    [setParams],
+    [classicArrowItems, setParams, updateClassicArrows],
   );
 
-  const updateClassicArrows = React.useCallback(
-    (items: Array<ClassicArrowItemType>) => {
-      setParams({ arrowItems: items });
-      setClassicArrowItems(items);
-    },
-    [setParams],
-  );
+  const updateArrows = React.useCallback((items: Array<ArrowItemType>) => {
+    // setParams({ arrowItems: items });
+    setArrowItems(items);
+  }, []);
 
   const openDeleteDialogue = React.useCallback((itemId: string) => {
     setDeletedItem(itemId);

diff --git a/src/utils/arrow.utils.ts b/src/utils/arrow.utils.ts
@@ -95,6 +95,36 @@ export const updateClassicArrowType = (
   return newItems;
 };
 
+export const updateClassicArrowLabels = (
+  items: Array<ClassicArrowItemType>,
+  topicMapItems: Array<TopicMapItemType>,
+): Array<ClassicArrowItemType> => {
+  const newItems = items.map((item: ClassicArrowItemType) => {
+    const startItem = findItem(item.startElementId, topicMapItems);
+    const endItem = findItem(item.endElementId, topicMapItems);
+
+    if (!startItem || !endItem) {
+      return item;
+    }
+
+    const label = getLabel(
+      startItem.id,
+      endItem.id,
+      item.arrowType,
+      topicMapItems,
+    );
+
+    const newItem: ClassicArrowItemType = {
+      ...item,
+      label,
+    };
+
+    return newItem;
+  });
+
+  return newItems;
+};
+
 export const calculateIsHorizontal = (
   startPosition: Position,
   endPosition: Position,
-Original file line number
+Diff line change
@@ Expand Up / @@ -360,8 +360,6 @@ export const Draggable: FC<DraggableProps> = ({ @@
             actions={contextMenuActions}
             show={selectedItem === id}
             turnLeft={checkIfRightSideOfGrid(position.x, gridSize.width)}
-            x={0}
-            y={0}
           />
         </div>
       );
@@ Expand Down @@