Merge branch 'main' into feature/#52-right-click-modal

data/entities.graphql

@@ -22,7 +22,7 @@ type Label {
   createdAt: DateTime!
   updatedAt: DateTime!
   imageId: ID!
-  labelClass: LabelClass!
+  labelClass: LabelClass
   x: Float!
   y: Float!
   height: Int!

data/label-class.graphql

@@ -1,4 +1,5 @@
 input LabelClassCreateInput {
+  id: ID
   name: String!
   color: ColorHex!
 }

data/label.graphql

@@ -1,7 +1,7 @@
 input LabelCreateInput {
   id: ID
   imageId: ID!
-  labelClassId: ID!
+  labelClassId: ID
   x: Float!
   y: Float!
   width: Int!

package.json

@@ -5,7 +5,9 @@
   "repository": "git@github.com:Labelflow/labelflow.git",
   "scripts": {
     "lint": "eslint 'typescript/**/*.{ts,tsx}'",
+    "lint:all": "eslint 'typescript/**/*.{ts,tsx}'",
     "test": "jest",
+    "test:all": "jest",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "dev:web-app": "cd ./typescript/web-app && yarn dev",
@@ -14,6 +16,7 @@
     "codegen": "graphql-codegen --config ./codegen.yml",
     "codegen:ci": "graphql-codegen --config ./codegen.yml && git diff --exit-code",
     "storybook": "start-storybook -p 6006",
+    "storybook:all": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic"
   },

typescript/web-app/package.json

@@ -31,7 +31,8 @@
     "react-hotkeys-hook": "3.3.1",
     "react-icons": "^4.2.0",
     "react-use-measure": "^2.0.4",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "zustand": "^3.5.1"
   },
   "devDependencies": {
     "@labelflow/dev-utils": "workspace:typescript/dev-utils",

typescript/web-app/src/components/labelling-tool/__stories__/labelling-tool.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { addDecorator, Story } from "@storybook/react";
+import { NextRouter } from "next/router";
+import { Box } from "@chakra-ui/react";
+
+import { LabellingTool, Props } from "../labelling-tool";
+import { chakraDecorator } from "../../../utils/chakra-decorator";
+
+addDecorator(chakraDecorator);
+
+export default {
+  title: "web-app/Labelling Tool",
+  component: LabellingTool,
+};
+
+const Template: Story<Props> = (args: Props) => (
+  <Box background="gray.100" width="640px" height="480px">
+    <LabellingTool {...args} />
+  </Box>
+);
+
+const router = {
+  push: (x: string) => console.log(`Navigate to ${x}`),
+} as unknown as NextRouter;
+
+export const OneImage = Template.bind({});
+OneImage.args = {
+  image: {
+    name: "Hello puffin",
+    id: "toto",
+    width: 600,
+    height: 750,
+    url: "https://images.unsplash.com/photo-1612564148954-59545876eaa0?auto=format&fit=crop&w=600&q=80",
+  },
+  images: [{ id: "toto" }],
+  router,
+};
+
+export const ThreeImages = Template.bind({});
+ThreeImages.args = {
+  image: {
+    name: "Hello puffin",
+    id: "toto",
+    width: 600,
+    height: 750,
+    url: "https://images.unsplash.com/photo-1612564148954-59545876eaa0?auto=format&fit=crop&w=600&q=80",
+  },
+  images: [{ id: "titi" }, { id: "toto" }, { id: "tata" }],
+  router,
+};

typescript/web-app/src/components/labelling-tool/drawing-tool-bar/__stories__/drawing-tool-bar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { addDecorator, Story } from "@storybook/react";
+import { VStack } from "@chakra-ui/react";
+
+import { chakraDecorator } from "../../../../utils/chakra-decorator";
+
+import { DrawingToolbar, Props } from "../drawing-tool-bar";
+
+addDecorator(chakraDecorator);
+
+export default {
+  title: "web-app/Drawing Toolbar",
+  component: DrawingToolbar,
+};
+
+const Template: Story<Props> = (args: Props) => (
+  <VStack background="gray.100" padding={4} spacing={4} h="640px" w="72px">
+    <DrawingToolbar {...args} />
+  </VStack>
+);
+
+// @ts-ignore
+export const Default = Template.bind({});
+Default.args = {};

typescript/web-app/src/components/labelling-tool/drawing-tool-bar/drawing-tool-bar.tsx

@@ -0,0 +1,11 @@
+import { SelectionTool } from "./selection-tool";
+
+export type Props = {};
+
+export const DrawingToolbar = () => {
+  return (
+    <>
+      <SelectionTool />
+    </>
+  );
+};

typescript/web-app/src/components/labelling-tool/drawing-tool-bar/index.tsx

@@ -0,0 +1 @@
+export { DrawingToolbar } from "./drawing-tool-bar";

typescript/web-app/src/components/labelling-tool/drawing-tool-bar/selection-tool.tsx

@@ -0,0 +1,26 @@
+import { IconButton, Tooltip } from "@chakra-ui/react";
+import { BiPointer } from "react-icons/bi";
+
+import { useHotkeys } from "react-hotkeys-hook";
+
+import { keymap } from "../../../keymap";
+
+export type Props = {};
+
+export const SelectionTool = () => {
+  useHotkeys(keymap.toolSelect.key, () => console.log("Select tool"), {}, []);
+
+  return (
+    <Tooltip
+      label={`Selection tool [${keymap.toolSelect.key}]`}
+      placement="right"
+    >
+      <IconButton
+        icon={<BiPointer size="1.3em" />}
+        backgroundColor="white"
+        aria-label="Select tool"
+        pointerEvents="initial"
+      />
+    </Tooltip>
+  );
+};

typescript/web-app/src/components/image-navigation-tool-bar/__stories__/image-navigation-tool.tsx → typescript/web-app/src/components/labelling-tool/image-navigation-tool-bar/__stories__/image-navigation-tool.tsx

@@ -4,7 +4,7 @@ import { NextRouter } from "next/router";
 import { HStack, Button, Flex } from "@chakra-ui/react";
 
 import { ImageNavigationTool, Props } from "../image-navigation-tool";
-import { chakraDecorator } from "../../../utils/chakra-decorator";
+import { chakraDecorator } from "../../../../utils/chakra-decorator";
 
 addDecorator(chakraDecorator);
 

typescript/web-app/src/components/image-navigation-tool-bar/index.tsx → typescript/web-app/src/components/labelling-tool/image-navigation-tool-bar/image-navigation-tool-bar.tsx

@@ -1,8 +1,6 @@
-import { HStack } from "@chakra-ui/react";
-
 import { NextRouter } from "next/router";
 
-import { Image } from "../../types.generated";
+import { Image } from "../../../types.generated";
 import { ImageNavigationTool } from "./image-navigation-tool";
 
 export type Props = {
@@ -13,15 +11,8 @@ export type Props = {
 
 export const ImageNavigationToolbar = ({ imageId, images, router }: Props) => {
   return (
-    <HStack
-      padding={4}
-      spacing={4}
-      position="absolute"
-      bottom={0}
-      left={0}
-      pointerEvents="none"
-    >
+    <>
       <ImageNavigationTool imageId={imageId} images={images} router={router} />
-    </HStack>
+    </>
   );
 };

typescript/web-app/src/components/image-navigation-tool-bar/image-navigation-tool.tsx → typescript/web-app/src/components/labelling-tool/image-navigation-tool-bar/image-navigation-tool.tsx

@@ -14,9 +14,9 @@ import { NextRouter } from "next/router";
 import NextLink from "next/link";
 import { useHotkeys } from "react-hotkeys-hook";
 
-import { keymap } from "../../keymap";
+import { keymap } from "../../../keymap";
 
-import { Image } from "../../types.generated";
+import { Image } from "../../../types.generated";
 
 export type Props = {
   imageId: string | undefined;

typescript/web-app/src/components/labelling-tool/image-navigation-tool-bar/index.tsx

@@ -0,0 +1 @@
+export { ImageNavigationToolbar } from "./image-navigation-tool-bar";

typescript/web-app/src/components/labelling-tool/index.tsx

@@ -0,0 +1,6 @@
+import { LabellingTool, Props } from "./labelling-tool";
+
+export { LabellingTool };
+export type { Props };
+
+export default LabellingTool;

typescript/web-app/src/components/labelling-tool/labelling-tool.tsx

@@ -0,0 +1,46 @@
+import { Box, HStack, VStack } from "@chakra-ui/react";
+import { NextRouter } from "next/router";
+
+import type { Image } from "../../types.generated";
+
+import { OpenlayersMap } from "./openlayers-map";
+import { DrawingToolbar } from "./drawing-tool-bar";
+import { ImageNavigationToolbar } from "./image-navigation-tool-bar";
+
+export type Props = {
+  image?: Pick<Image, "id" | "url" | "name" | "width" | "height">;
+  images?: Pick<Image, "id">[];
+  router: NextRouter;
+};
+
+export const LabellingTool = ({ image, images, router }: Props) => {
+  return (
+    <Box height="100%" position="relative">
+      <OpenlayersMap image={image} />
+      <VStack
+        padding={4}
+        spacing={4}
+        position="absolute"
+        top={0}
+        left={0}
+        pointerEvents="none"
+      >
+        <DrawingToolbar />
+      </VStack>
+      <HStack
+        padding={4}
+        spacing={4}
+        position="absolute"
+        bottom={0}
+        left={0}
+        pointerEvents="none"
+      >
+        <ImageNavigationToolbar
+          imageId={image?.id}
+          images={images}
+          router={router}
+        />
+      </HStack>
+    </Box>
+  );
+};

typescript/web-app/src/components/labelling-tool/openlayers-map/index.tsx

@@ -0,0 +1,3 @@
+import { OpenlayersMap } from "./openlayers-map";
+
+export { OpenlayersMap };

typescript/web-app/src/components/openlayers-map/index.tsx → typescript/web-app/src/components/labelling-tool/openlayers-map/openlayers-map.tsx

@@ -5,7 +5,7 @@ import Projection from "ol/proj/Projection";
 import useMeasure from "react-use-measure";
 
 import { Map } from "@labelflow/react-openlayers-fiber";
-import type { Image } from "../../types.generated";
+import type { Image } from "../../../types.generated";
 import "ol/ol.css";
 
 const empty: any[] = [];
@@ -55,7 +55,7 @@ type Props = {
   image?: Pick<Image, "id" | "url" | "name" | "width" | "height">;
 };
 
-const OpenlayersMap = ({ image }: Props) => {
+export const OpenlayersMap = ({ image }: Props) => {
   const [ref, bounds] = useMeasure();
 
   const isBoundsValid = bounds.width > 0 || bounds.height > 0;
@@ -115,5 +115,3 @@ const OpenlayersMap = ({ image }: Props) => {
     </Map>
   );
 };
-
-export default OpenlayersMap;