lost-sia 2.0.1-alpha8 → 3.0.0

package/src/stories/AnnotationTools.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Source, Story } from "@storybook/addon-docs/blocks";
+import * as SiaStories from "./AnnotationTools.stories.tsx";
+
+<Meta of={SiaStories} />
+
+# Annotation Tools
+
+The `allowedTools` parameter allows configuring which annotation tools are permitted.  
+For example, you could let the user only annotate bounding boxes with the following:
+
+<Source of={SiaStories.BBoxOnly} language="tsx" />
+
+This will get you the following:
+
+<Canvas>
+  <Story of={SiaStories.BBoxOnly} />
+</Canvas>
+
+## Control Junk
+
+You can also restrict the user from using the junk functionality:
+
+<Source of={SiaStories.NoJunk} language="tsx" />
+
+<Canvas>
+  <Story of={SiaStories.NoJunk} />
+</Canvas>

package/src/stories/AnnotationTools.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Sia from '../Sia'
+import exampleImage from './exampleData/exampleImage'
+import { AllowedTools } from '../types'
+
+export const ActionsData = {}
+
+const meta = {
+  title: 'Annotation Tools',
+  component: Sia,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+  tags: ['!autodocs'],
+  excludeStories: /.*Data$/,
+  args: {
+    ...ActionsData,
+  },
+} satisfies Meta<typeof Sia>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const allowedTools: AllowedTools = {
+  bbox: true,
+  line: false,
+  point: false,
+  polygon: false,
+  junk: true,
+}
+
+export const BBoxOnly: Story = {
+  args: {
+    ...ActionsData,
+    image: exampleImage,
+    possibleLabels: [],
+    allowedTools,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        const imageBlob: string = "data:image/jpeg;base64,/9j/4AAQSkZ..."
+        const allowedTools: AllowedTools = {
+          bbox: true,
+          line: false,
+          point: false,
+          polygon: false,
+          junk: true,
+        };
+
+        ...
+
+        <Sia
+          allowedTools={allowedTools}
+          image={imageBlob}
+          possibleLabels={[]}
+        />`,
+      },
+    },
+  },
+}
+
+const noJunkTools = {
+  bbox: true,
+  line: true,
+  point: true,
+  polygon: true,
+  junk: false,
+}
+
+export const NoJunk: Story = {
+  args: {
+    ...ActionsData,
+    image: exampleImage,
+    possibleLabels: [],
+    allowedTools: noJunkTools,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+        const imageBlob: string = "data:image/jpeg;base64,/9j/4AAQSkZ..."
+        const allowedTools: AllowedTools = {
+          bbox: true,
+          line: true,
+          point: true,
+          polygon: true,
+          junk: false,
+        };
+
+        ...
+
+        <Sia
+          allowedTools={allowedTools}
+          image={imageBlob}
+          possibleLabels={[]}
+        />`,
+      },
+    },
+  },
+}

package/src/stories/Canvas/Canvas.stories.tsx

@@ -1,156 +1,102 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { imgBlob } from "../siaDummyData";
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import exampleImage from '../exampleData/exampleImage'
 
-import Canvas from "../../Canvas/Canvas";
-import AnnotationTool from "../../models/AnnotationTool";
-import Annotation from "../../Annotation/logic/Annotation";
+import Canvas from '../../Canvas/Canvas'
+import AnnotationTool from '../../models/AnnotationTool'
 
-import { possibleLabels } from "../siaDummyData2";
-import UiConfig from "../../models/UiConfig";
+import { AnnotationSettings, UiConfig } from '../../types'
+import exampleAnnotations from '../exampleData/exampleAnnotations'
+import exampleLabels from '../exampleData/exampleLabels'
 
 export const ActionsData = {
   onAnnoEvent: fn(),
   onKeyDown: fn(),
   onKeyUp: fn(),
-};
+}
 
 const meta = {
-  title: "Components/Canvas",
+  title: 'Components/Canvas',
   component: Canvas,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
-  tags: ["autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
-    ...ActionsData,
+    // ...ActionsData,
   },
-} satisfies Meta<typeof Canvas>;
+} satisfies Meta<typeof Canvas>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const uiConfig: UiConfig = {
   nodeRadius: 4,
   strokeWidth: 4,
-};
+  imageCentered: false,
+}
 
-export const Default: Story = {
-  args: {
-    ...ActionsData,
-    image: imgBlob,
-    selectedAnnoTool: AnnotationTool.Point,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
-  },
-};
+const annotationSettings: AnnotationSettings = {
+  canHaveMultipleLabels: true,
+  canCreate: true,
+  canLabel: true,
+}
 
-const samplePointAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.Point, [{ x: 10, y: 10 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 50, y: 50 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 100, y: 100 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 150, y: 150 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 200, y: 200 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 250, y: 250 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 300, y: 300 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 350, y: 350 }]),
-];
+const defaultArgs = {
+  ...ActionsData,
+  annotations: [],
+  annotationSettings,
+  image: exampleImage,
+  selectedAnnotation: undefined,
+  selectedAnnoTool: AnnotationTool.Point,
+  possibleLabels: exampleLabels.voc,
+  preventScrolling: true,
+  uiConfig,
+  onAnnoCreated: () => {},
+  onAnnoChanged: () => {},
+  onAnnoCreationFinished: () => {},
+  onAnnoEditing: () => {},
+  onRequestNewAnnoId: () => 1,
+  onSelectAnnotation: () => {},
+  onSetIsImageJunk: () => {},
+  onSetSelectedTool: () => {},
+  onShouldDeleteAnno: () => {},
+}
+
+export const Default: Story = {
+  args: defaultArgs,
+}
 
 export const WithPoints: Story = {
   args: {
-    ...ActionsData,
-    annotations: samplePointAnnotations,
-    image: imgBlob,
+    ...defaultArgs,
+    annotations: exampleAnnotations.point,
     selectedAnnoTool: AnnotationTool.Point,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
   },
-};
-
-const sampleLineAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.Line, [
-    { x: 10, y: 10 },
-    { x: 100, y: 100 },
-  ]),
-  new Annotation(AnnotationTool.Line, [
-    { x: 50, y: 50 },
-    { x: 200, y: 100 },
-    { x: 300, y: 100 },
-    { x: 450, y: 120 },
-    { x: 400, y: 200 },
-    { x: 200, y: 200 },
-  ]),
-  new Annotation(AnnotationTool.Line, [{ x: 150, y: 150 }]),
-  new Annotation(AnnotationTool.Line, [{ x: 200, y: 200 }]),
-];
+}
 
 export const WithLines: Story = {
   args: {
-    ...ActionsData,
-    annotations: sampleLineAnnotations,
-    image: imgBlob,
+    ...defaultArgs,
+    annotations: exampleAnnotations.line,
     selectedAnnoTool: AnnotationTool.Line,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
   },
-};
-
-const sampleBBoxAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.BBox, [
-    { x: 50, y: 50 },
-    { x: 200, y: 100 },
-  ]),
-  new Annotation(AnnotationTool.BBox, [
-    { x: 150, y: 150 },
-    { x: 200, y: 200 },
-  ]),
-  new Annotation(AnnotationTool.BBox, [
-    { x: 400, y: 325 },
-    { x: 500, y: 375 },
-  ]),
-];
+}
 
 export const WithBBoxes: Story = {
   args: {
-    ...ActionsData,
-    annotations: sampleBBoxAnnotations,
-    image: imgBlob,
+    ...defaultArgs,
+    annotations: exampleAnnotations.bbox,
     selectedAnnoTool: AnnotationTool.BBox,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
   },
-};
-
-const samplePolygonAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.Polygon, [
-    { x: 50, y: 50 },
-    { x: 200, y: 100 },
-    { x: 250, y: 100 },
-    { x: 250, y: 200 },
-  ]),
-  new Annotation(AnnotationTool.Polygon, [
-    { x: 500, y: 300 },
-    { x: 500, y: 320 },
-    { x: 550, y: 370 },
-    { x: 600, y: 350 },
-    { x: 550, y: 450 },
-  ]),
-];
+}
 
 export const WithPolygonAnnotations: Story = {
   args: {
-    ...ActionsData,
-    annotations: samplePolygonAnnotations,
-    image: imgBlob,
+    ...defaultArgs,
+    annotations: exampleAnnotations.polygon,
     selectedAnnoTool: AnnotationTool.Polygon,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
   },
-};
+}

package/src/stories/Canvas/CanvasOffset.tsx

@@ -1,58 +1,74 @@
-import Annotation from "../../Annotation/logic/Annotation";
-import Canvas from "../../Canvas/Canvas";
-import AnnotationTool from "../../models/AnnotationTool";
-import CanvasAction from "../../models/CanvasAction";
-import Label from "../../models/Label";
-import UiConfig from "../../models/UiConfig";
+import { CSSProperties } from 'react'
+import Annotation from '../../Annotation/logic/Annotation'
+import Canvas from '../../Canvas/Canvas'
+import AnnotationTool from '../../models/AnnotationTool'
+import type { AnnotationSettings, Label, UiConfig } from '../../types'
 
 type CanvasProps = {
-  annotations?: Annotation[];
-  image: string;
-  selectedAnnoTool: AnnotationTool;
-  possibleLabels: Label[];
-  preventScrolling: boolean;
-  uiConfig: UiConfig;
-  onAnnoEvent?: (
-    annotation: Annotation,
-    canvasAction: CanvasAction,
-  ) => void | undefined;
-  onKeyDown?: (e) => void | undefined;
-  onKeyUp?: (e) => void | undefined;
-};
+  annotations?: Annotation[]
+  image: string
+  selectedAnnoTool: AnnotationTool
+  possibleLabels: Label[]
+  preventScrolling: boolean
+  uiConfig: UiConfig
+}
+
+const annotationSettings: AnnotationSettings = {
+  canHaveMultipleLabels: true,
+  canCreate: true,
+  canLabel: true,
+}
 
 const CanvasWithOffset = ({
-  annotations = [],
+  annotations = undefined,
   image,
   selectedAnnoTool,
   possibleLabels,
   preventScrolling,
   uiConfig,
-  onAnnoEvent: propsOnAnnoEvent,
-  onKeyDown: propOnKeyDown,
-  onKeyUp: propsOnKeyUp,
 }: CanvasProps) => {
+  const forwardFlex: CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+
+    flex: '1 1 auto',
+    minHeight: 0,
+  }
+
   return (
     <>
       <h1>A line to generate offset</h1>
       <div
         style={{
-          width: "100%",
-          height: "100%",
-          padding: 200,
-          background: "green",
+          ...forwardFlex,
+          background: 'green',
+          padding: 100,
         }}
       >
-        <Canvas
-          annotations={annotations}
-          image={image}
-          selectedAnnoTool={selectedAnnoTool}
-          possibleLabels={possibleLabels}
-          preventScrolling={preventScrolling}
-          uiConfig={uiConfig}
-        />
+        <div style={{ ...forwardFlex, background: 'white' }}>
+          <Canvas
+            annotations={annotations}
+            annotationSettings={annotationSettings}
+            image={image}
+            selectedAnnotation={undefined}
+            selectedAnnoTool={selectedAnnoTool}
+            possibleLabels={possibleLabels}
+            preventScrolling={preventScrolling}
+            uiConfig={uiConfig}
+            onAnnoCreated={() => {}}
+            onAnnoChanged={() => {}}
+            onAnnoCreationFinished={() => {}}
+            onAnnoEditing={() => {}}
+            onRequestNewAnnoId={() => 1}
+            onSelectAnnotation={() => {}}
+            onSetIsImageJunk={() => {}}
+            onSetSelectedTool={() => {}}
+            onShouldDeleteAnno={() => {}}
+          />
+        </div>
       </div>
     </>
-  );
-};
+  )
+}
 
-export default CanvasWithOffset;
+export default CanvasWithOffset

package/src/stories/Canvas/CanvasWithOffset.stories.tsx

@@ -1,156 +1,85 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { imgBlob } from "../siaDummyData";
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import exampleImage from '../exampleData/exampleImage'
 
-import AnnotationTool from "../../models/AnnotationTool";
-import Annotation from "../../Annotation/logic/Annotation";
+import AnnotationTool from '../../models/AnnotationTool'
 
-import { possibleLabels } from "../siaDummyData2";
-import UiConfig from "../../models/UiConfig";
-import CanvasWithOffset from "./CanvasOffset";
+import { UiConfig } from '../../types'
+import CanvasWithOffset from './CanvasOffset'
+
+import exampleAnnotations from '../exampleData/exampleAnnotations'
+import exampleLabels from '../exampleData/exampleLabels'
 
 export const ActionsData = {
   onAnnoEvent: fn(),
   onKeyDown: fn(),
   onKeyUp: fn(),
-};
+}
 
 const meta = {
-  title: "Components/CanvasWithOffset",
+  title: 'Components/CanvasWithOffset',
   component: CanvasWithOffset,
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: "fullscreen",
+    layout: 'fullscreen',
   },
-  tags: ["autodocs"],
+  tags: ['!autodocs'],
   excludeStories: /.*Data$/,
   args: {
     ...ActionsData,
   },
-} satisfies Meta<typeof CanvasWithOffset>;
+} satisfies Meta<typeof CanvasWithOffset>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 const uiConfig: UiConfig = {
   nodeRadius: 4,
   strokeWidth: 4,
-};
+  imageCentered: false,
+}
 
-export const Default: Story = {
-  args: {
-    ...ActionsData,
-    image: imgBlob,
-    selectedAnnoTool: AnnotationTool.Point,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
-  },
-};
+const defaultArgs = {
+  ...ActionsData,
+  selectedAnnotation: undefined,
+  image: exampleImage,
+  selectedAnnoTool: AnnotationTool.Point,
+  possibleLabels: exampleLabels.voc,
+  preventScrolling: true,
+  uiConfig,
+}
 
-const samplePointAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.Point, [{ x: 10, y: 10 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 50, y: 50 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 100, y: 100 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 150, y: 150 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 200, y: 200 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 250, y: 250 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 300, y: 300 }]),
-  new Annotation(AnnotationTool.Point, [{ x: 350, y: 350 }]),
-];
+export const Default: Story = {
+  args: defaultArgs,
+}
 
 export const WithPoints: Story = {
   args: {
-    ...ActionsData,
-    annotations: samplePointAnnotations,
-    image: imgBlob,
-    selectedAnnoTool: AnnotationTool.Point,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
+    ...defaultArgs,
+    annotations: exampleAnnotations.point,
   },
-};
-
-const sampleLineAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.Line, [
-    { x: 10, y: 10 },
-    { x: 100, y: 100 },
-  ]),
-  new Annotation(AnnotationTool.Line, [
-    { x: 50, y: 50 },
-    { x: 200, y: 100 },
-    { x: 300, y: 100 },
-    { x: 450, y: 120 },
-    { x: 400, y: 200 },
-    { x: 200, y: 200 },
-  ]),
-  new Annotation(AnnotationTool.Line, [{ x: 150, y: 150 }]),
-  new Annotation(AnnotationTool.Line, [{ x: 200, y: 200 }]),
-];
+}
 
 export const WithLines: Story = {
   args: {
-    ...ActionsData,
-    annotations: sampleLineAnnotations,
-    image: imgBlob,
+    ...defaultArgs,
+    annotations: exampleAnnotations.line,
     selectedAnnoTool: AnnotationTool.Line,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
   },
-};
-
-const sampleBBoxAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.BBox, [
-    { x: 50, y: 50 },
-    { x: 200, y: 100 },
-  ]),
-  new Annotation(AnnotationTool.BBox, [
-    { x: 150, y: 150 },
-    { x: 200, y: 200 },
-  ]),
-  new Annotation(AnnotationTool.BBox, [
-    { x: 400, y: 325 },
-    { x: 500, y: 375 },
-  ]),
-];
+}
 
 export const WithBBoxes: Story = {
   args: {
-    ...ActionsData,
-    annotations: sampleBBoxAnnotations,
-    image: imgBlob,
+    ...defaultArgs,
+    annotations: exampleAnnotations.bbox,
     selectedAnnoTool: AnnotationTool.BBox,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
   },
-};
-
-const samplePolygonAnnotations: Annotation[] = [
-  new Annotation(AnnotationTool.Polygon, [
-    { x: 50, y: 50 },
-    { x: 200, y: 100 },
-    { x: 250, y: 100 },
-    { x: 250, y: 200 },
-  ]),
-  new Annotation(AnnotationTool.Polygon, [
-    { x: 500, y: 300 },
-    { x: 500, y: 320 },
-    { x: 550, y: 370 },
-    { x: 600, y: 350 },
-    { x: 550, y: 450 },
-  ]),
-];
+}
 
 export const WithPolygonAnnotations: Story = {
   args: {
-    ...ActionsData,
-    annotations: samplePolygonAnnotations,
-    image: imgBlob,
+    ...defaultArgs,
+    annotations: exampleAnnotations.polygon,
     selectedAnnoTool: AnnotationTool.Polygon,
-    possibleLabels,
-    preventScrolling: true,
-    uiConfig,
   },
-};
+}