Started transitioning to the new tree.

Author: GeReV

package.json

@@ -8,9 +8,11 @@
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@reduxjs/toolkit": "^1.3.6",
     "bootstrap": "^4.4.1",
+    "css-box-model": "^1.2.1",
     "immer": "^6.0.5",
     "konva": "^6.0.0",
     "react": "^16.13.1",
+    "react-beautiful-dnd-next": "^11.0.5",
     "react-bootstrap": "^1.0.1",
     "react-dom": "^16.13.1",
     "react-konva": "^16.13.0-2",

src/App.css

@@ -16,7 +16,12 @@
   flex-direction: row;
 }
 
-.App-canvas {
+.App-canvas,
+.App-tree {
   display: flex;
   flex-direction: column;
 }
+
+.App-tree {
+  overflow: auto;
+}

src/App.tsx

@@ -31,7 +31,7 @@ function App() {
   const [state, dispatch] = useAppReducer();
 
   useKey('Delete', () => {
-    if (typeof state.selectedId !== "number") {
+    if (state.selectedId === null) {
       return;
     }
 
@@ -94,7 +94,10 @@ function App() {
               pageImage={pageImage}
             />
           </Col>
-          <Col xl={2}>
+          <Col 
+            xl={2}
+            className="App-tree"
+          >
             <PageTreeView />
           </Col>
         </Row>

src/components/PageCanvas/Block.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { Group, Rect, Transformer } from 'react-konva';
 import Konva from 'konva';
 
-import { PageTreeItem, Position } from '../../types';
-import { TreeMap } from "../../reducer/types";
+import { DocumentTreeItem, ElementType, ItemId, Position } from '../../types';
+import { TreeItems } from "../../reducer/types";
 import { calculateDragBounds } from "./utils";
 import { clamp } from "../../utils";
 import { IRect } from "konva/types/types";
@@ -13,7 +13,7 @@ interface Box extends IRect {
 }
 
 export interface ChangeCallbackParams extends Position {
-  nodeId: number;
+  nodeId: ItemId;
   width?: number;
   height?: number;
 }
@@ -23,14 +23,14 @@ export interface BlockProps {
   opacity?: number;
   draggable?: boolean;
   onChange?: (args: ChangeCallbackParams) => void;
-  item: PageTreeItem;
+  item: DocumentTreeItem;
   isSelected?: boolean;
   isHovered?: boolean;
-  onSelected?: (itemId: number) => void;
+  onSelected?: (itemId: ItemId) => void;
   children?: React.ReactNode
   pageWidth: number;
   pageHeight: number;
-  treeMap: TreeMap;
+  treeItems: TreeItems;
 }
 
 const MINIMUM_NODE_WIDTH = 5;
@@ -60,13 +60,13 @@ export function Block(props: BlockProps): React.ReactElement | null {
   }, [props]);
 
   const dragBoundFunc = React.useCallback<(pos: Position) => Position>((pos) => {
-    const bounds = calculateDragBounds(groupRef.current, props.item, props.treeMap, props.pageWidth, props.pageHeight);
+    const bounds = calculateDragBounds(groupRef.current, props.item, props.treeItems, props.pageWidth, props.pageHeight);
 
     return {
       x: clamp(pos.x, bounds.left, bounds.right),
       y: clamp(pos.y, bounds.top, bounds.bottom),
     };
-  }, [props.item, props.pageHeight, props.pageWidth, props.treeMap]);
+  }, [props.item, props.pageHeight, props.pageWidth, props.treeItems]);
 
   const handleDragEnd = React.useCallback<(evt: Konva.KonvaEventObject<DragEvent>) => void>((evt) => {
     evt.cancelBubble = true;
@@ -115,13 +115,15 @@ export function Block(props: BlockProps): React.ReactElement | null {
     }
 
     const scale = groupRef.current.getAbsoluteScale();
+    
+    const parent: DocumentTreeItem | null = props.item.parentId ? props.treeItems[props.item.parentId] : null;
 
-    const bbox = props.item.parentId ? props.treeMap[props.item.parentId].value.bbox : {
+    const bbox = (!parent || parent.type === ElementType.Page) ? {
       x0: 0,
       y0: 0,
       x1: props.pageWidth,
       y1: props.pageHeight,
-    };
+    } : parent.data.bbox;
 
     const scaledBbox = {
       left: bbox.x0 * scale.x,
@@ -144,7 +146,11 @@ export function Block(props: BlockProps): React.ReactElement | null {
     }
 
     return newBox;
-  }, [props.item.parentId, props.pageHeight, props.pageWidth, props.treeMap]);
+  }, [props.item.parentId, props.pageHeight, props.pageWidth, props.treeItems]);
+  
+  if (props.item.type === ElementType.Page) {
+    throw new Error('Block component cannot handle Page element type.');
+  }
 
   return (
     <Group
@@ -164,8 +170,8 @@ export function Block(props: BlockProps): React.ReactElement | null {
         strokeScaleEnabled={false}
         strokeEnabled={props.isHovered}
         opacity={props.opacity}
-        width={props.item.value.bbox.x1 - props.item.value.bbox.x0}
-        height={props.item.value.bbox.y1 - props.item.value.bbox.y0}
+        width={props.item.data.bbox.x1 - props.item.data.bbox.x0}
+        height={props.item.data.bbox.y1 - props.item.data.bbox.y0}
         onTransformEnd={handleTransformEnd}
       />
       {props.isSelected && (

src/components/PageCanvas/PageGraphics.tsx

@@ -1,31 +1,32 @@
 import { Image, Layer, Stage } from "react-konva";
-import { BlockTreeItem, PageImage } from "../../types";
+import { BlockTreeItem, ItemId, PageImage } from "../../types";
 import { Block, ChangeCallbackParams } from "./Block";
 import React from "react";
 import { useAppReducer } from "../../reducerContext";
 import { createUpdateTreeNodeRect } from "../../reducer/actions";
+import { getNodeOrThrow } from "../../reducer";
 
 export interface Props {
   width: number;
   height: number;
   scale: number;
-  onSelect: (id: number) => void;
+  onSelect: (id: ItemId) => void;
   onDeselect: () => void;
-  hoveredId?: number | null;
-  selectedId?: number | null;
+  hoveredId?: ItemId | null;
+  selectedId?: ItemId | null;
   pageImage?: PageImage;
 }
 
 export default function PageGraphics({ width, height, onSelect, scale, onDeselect, hoveredId, pageImage, selectedId }: Props) {
   const [state, dispatch] = useAppReducer();
 
-  const treeMap = state.treeMap;
+  const treeItems = state.treeItems;
 
   function handleChange(args: ChangeCallbackParams) {
     dispatch(createUpdateTreeNodeRect(args));
   }
 
-  if (!pageImage) {
+  if (!pageImage || state.treeRootId === null) {
     return null;
   }
 
@@ -48,8 +49,9 @@ export default function PageGraphics({ width, height, onSelect, scale, onDeselec
       </Layer>
       <Layer>
         {
-          state.tree
-            .map(item => treeMap[item] as BlockTreeItem)
+          state.treeItems[state.treeRootId]
+            .children
+            .map(item => getNodeOrThrow(state.treeItems, item) as BlockTreeItem)
             .map((block: BlockTreeItem) =>
             (
               <Block
@@ -62,16 +64,12 @@ export default function PageGraphics({ width, height, onSelect, scale, onDeselec
                 isSelected={selectedId === block.id}
                 isHovered={hoveredId === block.id}
                 draggable
-                treeMap={treeMap}
+                treeItems={treeItems}
                 {...pageProps}
               >
                 {
                   block.children?.map((paraId) => {
-                    const para = treeMap[paraId];
-                  
-                    if (!para) {
-                      return null;
-                    }
+                    const para = getNodeOrThrow(treeItems, paraId);
 
                     return (
                       <Block
@@ -84,16 +82,12 @@ export default function PageGraphics({ width, height, onSelect, scale, onDeselec
                         isSelected={selectedId === para.id}
                         isHovered={hoveredId === para.id}
                         draggable
-                        treeMap={treeMap}
+                        treeItems={treeItems}
                         {...pageProps}
                       >
                         {
-                          para.children?.map((lineId: number) => {
-                            const line = treeMap[lineId];
-
-                            if (!line) {
-                              return null;
-                            }
+                          para.children?.map((lineId: ItemId) => {
+                            const line = getNodeOrThrow(treeItems, lineId);
 
                             return (
                               <Block
@@ -106,7 +100,7 @@ export default function PageGraphics({ width, height, onSelect, scale, onDeselec
                                 isSelected={selectedId === line.id}
                                 isHovered={hoveredId === line.id}
                                 draggable
-                                treeMap={treeMap}
+                                treeItems={treeItems}
                                 {...pageProps}
                               />
                             );

src/components/PageCanvas/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useMeasure, useTitle } from "react-use";
 import { Button, Spinner } from 'react-bootstrap';
 
-import { PageImage, RecognizeUpdate } from '../../types';
+import { ItemId, PageImage, RecognizeUpdate } from '../../types';
 import { createInit, createChangeSelected } from '../../reducer/actions';
 import PageGraphics from "./PageGraphics";
 import { recognize } from "../../ocr";
@@ -45,7 +45,7 @@ export default function PageCanvas(props: Props) {
 
   React.useLayoutEffect(setFitScale, [setFitScale]);
 
-  function handleSelected(itemId: number | null) {
+  function handleSelected(itemId: ItemId | null) {
     dispatch(createChangeSelected(itemId));
   }
 

src/components/PageCanvas/utils.ts

@@ -1,6 +1,6 @@
 import Konva from "konva";
-import { BaseTreeItem, ElementType, PageTreeItem, Position } from "../../types";
-import { TreeMap } from "../../reducer/types";
+import { BaseTreeItem, DocumentTreeItem, ElementType, Position } from "../../types";
+import { TreeItems } from "../../reducer/types";
 import { Bbox } from "tesseract.js";
 
 type BoundsTuple = [number, number, number, number];
@@ -26,10 +26,10 @@ const bboxToBoundsTuple = (bbox: Bbox): BoundsTuple => ([
   bbox.y1,
 ]);
 
-const getParent = (treeMap: TreeMap, item: PageTreeItem): BaseTreeItem<ElementType, any> | null => typeof item.parentId === 'number' ? treeMap[item.parentId] : null;
+const getParent = (treeItems: TreeItems, item: DocumentTreeItem): BaseTreeItem<ElementType, any> | null => item.parentId !== null ? treeItems[item.parentId] : null;
 
-export function calculateDragBounds(node: Konva.Node | null, item: PageTreeItem, treeMap: TreeMap, pageWidth: number, pageHeight: number) {
-  if (!node) {
+export function calculateDragBounds(node: Konva.Node | null, item: DocumentTreeItem, treeItems: TreeItems, pageWidth: number, pageHeight: number) {
+  if (!node || item.type === ElementType.Page) {
     return INFINITE_BOUNDS;
   }
 
@@ -41,8 +41,8 @@ export function calculateDragBounds(node: Konva.Node | null, item: PageTreeItem,
 
   const scale = node.getAbsoluteScale();
 
-  const nodeWidth = item.value.bbox.x1 - item.value.bbox.x0;
-  const nodeHeight = item.value.bbox.y1 - item.value.bbox.y0;
+  const nodeWidth = item.data.bbox.x1 - item.data.bbox.x0;
+  const nodeHeight = item.data.bbox.y1 - item.data.bbox.y0;
 
   const stageOffset: Position = {
     x: stage.x() / scale.x,
@@ -51,9 +51,9 @@ export function calculateDragBounds(node: Konva.Node | null, item: PageTreeItem,
 
   const pageBounds: BoundsTuple = [0, 0, pageWidth, pageHeight];
 
-  const parent = getParent(treeMap, item);
+  const parent = getParent(treeItems, item);
 
-  const parentBounds: BoundsTuple = parent ? bboxToBoundsTuple(parent.value.bbox) : pageBounds;
+  const parentBounds: BoundsTuple = parent ? bboxToBoundsTuple(parent.data.bbox) : pageBounds;
 
   const offsetParentBounds = offsetBounds(parentBounds, stageOffset);
 

src/components/PageTreeView/index.css

@@ -0,0 +1,68 @@
+.Tree {
+  height: 100%;
+  flex: 1 1;
+  flex-basis: 0;
+  overflow: auto;
+}
+
+%rowItem {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.Tree-rowContents {
+  @extend %rowItem;
+  position: relative;
+  height: 100%;
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: 0.8rem;
+}
+
+.Tree-rowLabel {
+  @extend %rowItem;
+  flex: 0 1 auto;
+}
+
+.Tree-collapseButton,
+.Tree-expandButton {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate3d(-100%, -50%, 0);
+  cursor: pointer;
+
+  &::after {
+    content: "";
+    position: absolute;
+    transform-origin: 5px 4px;
+    transform: translate3d(-50%, -20%, 0);
+    border: solid transparent 7px;
+    border-left-width: 5px;
+    border-right-width: 5px;
+    border-top-color: gray;
+  }
+
+  &:hover::after {
+    border-top-color: black;
+  }
+
+  &:focus {
+    outline: none;
+
+    &::after {
+      filter: drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9);
+    }
+  }
+}
+
+.Tree-expandButton::after {
+  transform: translate3d(-50%, -20%, 0) rotateZ(-90deg);
+}