Merge pull request #388 from NDLA-H5P/feature/show_arrows_again_in_ed…

…itor redraw arrows when editing existing document
NDLANO · Mar 8, 2022 · 6f70b42 · 6f70b42
2 parents 1dfd205 + e2f263b
commit 6f70b42
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/.storybook/helpers/h5p.utils.ts b/.storybook/helpers/h5p.utils.ts
@@ -45,6 +45,8 @@ export const params: Params = {
       label: "",
       startPosition: { x: 0, y: 0 },
       endPosition: { x: 0, y: 0 },
+      startGridPosition: { x: 0, y: 0 },
+      endGridPosition: { x: 0, y: 0 },
     },
   ],
   colorTheme: ColorTheme.Blue,

diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx
@@ -104,7 +104,7 @@ export const Grid: FC<GridProps> = ({
   const [arrowItems, setArrowItems] = useState(initialArrowItems ?? []);
   const [classicArrowItems, setClassicArrowItems] = useState<
     Array<ClassicArrowItemType>
-  >([]);
+  >((initialArrowItems as ClassicArrowItemType[]) ?? []);
   const [occupiedCells, setOccupiedCells] = useState<Array<OccupiedCell>>([]);
   const [boxStartIndex, setBoxStartIndex] = useState<number | null>(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -136,6 +136,7 @@ export const Grid: FC<GridProps> = ({
   useEffectOnce(() => {
     // eslint-disable-next-line no-param-reassign
     updateGrid.current = updateLocalGrid;
+    updateGridDimensions({ numberOfColumns, numberOfRows });
   });
 
   const elementRef = useRef<HTMLDivElement>(null);

diff --git a/src/types/ArrowItemType.ts b/src/types/ArrowItemType.ts
@@ -17,4 +17,7 @@ export type ArrowItemType = CommonItemType & {
 
   startPosition: Position;
   endPosition: Position;
+
+  startGridPosition: Position;
+  endGridPosition: Position;
 };
diff --git a/src/utils/grid.utils.ts b/src/utils/grid.utils.ts
@@ -359,6 +359,8 @@ export const createArrowItem = (
     endElementId: endId,
     startPosition: { x: 0, y: 0 },
     endPosition: { x: 0, y: 0 },
+    startGridPosition: { x: 0, y: 0 },
+    endGridPosition: { x: 0, y: 0 },
   };
 
   return item;