@searpent/react-image-annotate 2.0.5 → 2.0.8

package/src/Annotator/index.story.js

@@ -1,807 +0,0 @@
-// @flow
-
-import React, { useState } from "react"
-
-import { storiesOf } from "@storybook/react"
-import { action as actionAddon } from "@storybook/addon-actions"
-import exampleImage from "../ImageCanvas/seves_desk.story.jpg"
-import bikeImg1 from "./bike-pic.png"
-import bikeImg2 from "./bike-pic2.png"
-import { HotKeys } from "react-hotkeys"
-import { defaultKeyMap } from "../ShortcutsManager"
-
-import Annotator from "./"
-
-import { testRegions, testRegionsBoxes } from "../ImageCanvas/index.story"
-import photosToImages from "../utils/photosToImages"
-import examplePhotos from "./examplePhotos"
-
-const middlewares = [
-  (store) => (next) => (action) => {
-    actionAddon(action.type)(action)
-    return next(action)
-  },
-]
-
-storiesOf("Annotator", module)
-  .add("Basic", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      regionTagList={["tag1", "tag2", "tag3"]}
-      imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      imageTagList={["tag1", "tag2", "tag3"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=1",
-          name: "Frame 0036",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=2",
-          name: "Frame 0037",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=3",
-          name: "Frame 0038",
-        },
-      ]}
-    />
-  ))
-  .add("Basic with onImagesChange", () => (
-    <Annotator
-      middlewares={middlewares}
-      labelImages
-      regionClsList={[
-        "author",
-        "appendix",
-        "photo_author",
-        "photo_caption",
-        "advertisement",
-        "other_graphics",
-        "unknown",
-        "title",
-        "about_author",
-        "image",
-        "subtitle",
-        "interview",
-        "table",
-        "text",
-      ]}
-      allowedGroups={[
-        { value: '0', label: '0' },
-        { value: '1', label: '1' },
-        { value: '2', label: '2' },
-        { value: '3', label: '3' },
-        { value: '4', label: '4' },
-        { value: '5', label: '5' },
-        { value: '6', label: '6' },
-        { value: '7', label: '7' },
-        { value: '8', label: '8' },
-        { value: '9', label: '9' },
-      ]}
-      onImagesChange={(images) => console.log("[images changed to]:", images)}
-      images={photosToImages([...examplePhotos, ...examplePhotos, ...examplePhotos])}
-      clsColors={{
-        title: "#f70202",
-        subtitle: "#ffb405",
-        text: "#14deef",
-        author: "#f8d51e",
-        appendix: "#bfede2",
-        photo_author: "#9a17bb",
-        photo_caption: "#ff84f6",
-        advertisement: "#ffb201",
-        other_graphics: "#ff5400",
-        unknown: "#bfede2",
-        about_author: "#9a17bb",
-        image: "#14deef",
-        interview: "#23b20f",
-        table: "#02b4ba",
-      }}
-      groupColors={{
-        "0": "#e3a7c0",
-        "1": "#c2d5a8",
-        "2": "#f2e9cc",
-        "3": "#bad5f0",
-        "4": "#f0d5ba",
-        "5": "#d6eff5",
-        "6": "#f8d7e8",
-        "7": "#a5d5d5",
-        "8": "#b0abcb",
-        "9": "#fae4cc",
-      }}
-      onGroupSelect={(groupId) => console.log('selected groupid:', groupId)}
-      hideHeader={true}
-      hideHistory={true}
-      hideNotEditingLabel={true}
-      showEditor={true}
-      showPageSelector={true}
-      metadata={[{
-        key: "name", value: "Dennik Aha"
-      }, {
-        key: "released", value: "20/1/2022"
-      }]}
-      onSave={() => console.log("[onSave] triggered]")}
-      onRecalc={() => console.log("[onRecalc] triggered]")}
-      onExit={(s) => console.log('[onExit] triggered:', s)}
-    />
-  ))
-  .add("Basic - Allow Comments", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      regionTagList={["tag1", "tag2", "tag3"]}
-      imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      imageTagList={["tag1", "tag2", "tag3"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=1",
-          name: "Frame 0036",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=2",
-          name: "Frame 0037",
-        },
-        {
-          src: "https://loremflickr.com/100/100/cars?lock=3",
-          name: "Frame 0038",
-        },
-      ]}
-      allowComments
-    />
-  ))
-  .add("Fixed Size Container", () => (
-    <div style={{ width: 500, height: 500 }}>
-      <Annotator
-        onExit={actionAddon("onExit")}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        labelImages
-        regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        regionTagList={["tag1", "tag2", "tag3"]}
-        imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        imageTagList={["tag1", "tag2", "tag3"]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=1",
-            name: "Frame 0036",
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=2",
-            name: "Frame 0037",
-          },
-          {
-            src: "https://loremflickr.com/100/100/cars?lock=3",
-            name: "Frame 0038",
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Shrunk Annotator (Test Fullscreen)", () => (
-    <div style={{ padding: 100 }}>
-      <Annotator
-        onExit={actionAddon("onExit")}
-        regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        regionTagList={["tag1", "tag2", "tag3"]}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Annotator w/o No Region Labels or Image Labels", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-      ]}
-    />
-  ))
-  .add("Annotator with no enabled tools", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      enabledTools={[]}
-      showTags={false}
-      middlewares={middlewares}
-      images={[
-        {
-          src: exampleImage,
-          name: "Seve's Desk",
-          regions: testRegions,
-        },
-      ]}
-    />
-  ))
-  .add("Bounding Box Annotator with output to console.log", () => (
-    <Annotator
-      onExit={(out) => {
-        window.lastOutput = out
-        console.log(out)
-      }}
-      taskDescription={`## Annotate Hands\nDraw a bounding box around each hand.`}
-      enabledTools={["select", "create-box"]}
-      regionClsList={["Hand", "Face"]}
-      regionTagList={["Open Pinch", "Closed Pinch", "In Frame"]}
-      showTags={false}
-      images={[
-        {
-          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
-          name: "Bounding Box Test",
-          regions: [],
-        },
-        {
-          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame001.png",
-          name: "Bounding Box Test",
-          regions: [],
-        },
-      ]}
-    />
-  ))
-  .add("Bounding Box Annotator with allowed area", () => (
-    <Annotator
-      taskDescription={`## Annotate Hands\nDraw a bounding box around each hand.`}
-      enabledTools={["select", "create-box"]}
-      regionClsList={["Hand", "Face"]}
-      regionTagList={["Open Pinch", "Closed Pinch", "In Frame"]}
-      showTags={false}
-      allowedArea={{ x: 0, y: 0.6, w: 0.3, h: 0.3 }}
-      images={[
-        {
-          src: "https://s3.amazonaws.com/jobstorage.workaround.online/Atheer/video-frames/VID_20190111_161054.mp4_frame017.png",
-          name: "Bounding Box Test",
-          regions: [],
-        },
-      ]}
-    />
-  ))
-  .add("Car Annotation", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      regionClsList={["Car", "Sign", "Construction Barrier"]}
-      regionTagList={["Moving", "Stopped", "Obstacle"]}
-      imageClsList={["On Street", "Sidewalk", "Other"]}
-      // imageTagList={["tag1", "tag2", "tag3"]}
-      images={[
-        {
-          src: bikeImg1,
-          name: "Frame 03021",
-          regions: [
-            {
-              cls: "Car",
-              color: "hsl(82,100%,50%)",
-              h: 0.45921666772960146,
-              w: 0.3932156342484836,
-              x: 0.6302148980776354,
-              y: 0.5559504689545722,
-              type: "box",
-              id: "8776160642957009",
-              tags: ["Stopped"],
-              highlighted: false,
-              editingLabels: false,
-            },
-            {
-              cls: "Car",
-              color: "hsl(264,100%,50%)",
-              type: "box",
-              id: "885140028730734",
-              tags: ["Moving"],
-              w: 0.2627711048576583,
-              x: 0.20751775748638238,
-              y: 0.5566583219431673,
-              h: 0.268717618171478,
-              highlighted: false,
-              editingLabels: false,
-            },
-            {
-              cls: "Car",
-              color: "hsl(127,100%,50%)",
-              w: 0.033016094117647055,
-              x: 0.5051247779336334,
-              y: 0.5396378545840628,
-              h: 0.03423999999999994,
-              type: "box",
-              id: "5952553512262024",
-              tags: ["Stopped"],
-              highlighted: false,
-              editingLabels: false,
-            },
-            {
-              type: "box",
-              x: 0.7847296794208894,
-              y: 0.3635007199404308,
-              w: 0.04871147880041349,
-              h: 0.10995961095800888,
-              highlighted: true,
-              editingLabels: false,
-              color: "hsl(268,100%,50%)",
-              id: "5647593040225252",
-              cls: "Sign",
-            },
-          ],
-        },
-        {
-          src: bikeImg2,
-          name: "Frame 03022",
-          regions: [
-            {
-              type: "box",
-              x: 0.12226982552783494,
-              y: 0.5578947368421052,
-              w: 0.3301518695958121,
-              h: 0.33562583001232194,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(171,100%,50%)",
-              id: "014393439034159128",
-              cls: "Car",
-              tags: ["Stopped"],
-            },
-            {
-              type: "box",
-              x: 0.5018477698901193,
-              y: 0.5954194079501558,
-              w: 0.07194249496837657,
-              h: 0.06826906557009338,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(17,100%,50%)",
-              id: "02954614542034717",
-              cls: "Car",
-              tags: ["Moving"],
-            },
-            {
-              type: "box",
-              x: 0.6483083881082046,
-              y: 0.6217109311709718,
-              w: 0.08786544324705947,
-              h: 0.20450608002345438,
-              highlighted: true,
-              editingLabels: true,
-              color: "hsl(337,100%,50%)",
-              id: "9124138360972984",
-              cls: "Construction Barrier",
-              tags: ["Obstacle"],
-            },
-            {
-              type: "box",
-              x: 0.7628671305695606,
-              y: 0.6299511028935285,
-              w: 0.12734928166820647,
-              h: 0.2689292407634438,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(89,100%,50%)",
-              id: "5960600741979638",
-              cls: "Construction Barrier",
-            },
-            {
-              type: "box",
-              x: 0.5871362440754417,
-              y: 0.6232091442114366,
-              w: 0.06562102723514573,
-              h: 0.15281773012741662,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(326,100%,50%)",
-              id: "7955287536996538",
-              cls: "Construction Barrier",
-            },
-            {
-              type: "box",
-              x: 0.42943330004934643,
-              y: 0.6054718359824862,
-              w: 0.053210066743122564,
-              h: 0.054984658299147116,
-              highlighted: false,
-              editingLabels: false,
-              color: "hsl(66,100%,50%)",
-              id: "49573139861381166",
-              cls: "Car",
-              tags: ["Stopped"],
-            },
-          ],
-        },
-      ]}
-      onExit={(out) => {
-        window.lastOutput = out
-        console.log(JSON.stringify(out.images))
-      }}
-    />
-  ))
-  .add("Annotator blocks scroll from propagating", () => (
-    <div style={{ height: "200vh" }}>
-      <Annotator
-        onExit={actionAddon("onExit")}
-        showTags={false}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-        ]}
-      />
-      <div style={{ color: "red" }}>You shouldn't be able to see this</div>
-    </div>
-  ))
-  .add("Annotator should not expand beyond parent", () => (
-    <div
-      style={{
-        width: "100vw",
-        height: "100vh",
-        padding: 100,
-        boxSizing: "border-box",
-      }}
-    >
-      <Annotator
-        onExit={actionAddon("onExit")}
-        showTags={false}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-            regions: testRegions,
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Video with frames as each image", () => (
-    <div
-      style={{
-        width: "100vw",
-        height: "100vh",
-        boxSizing: "border-box",
-      }}
-    >
-      <Annotator
-        onExit={actionAddon("onExit")}
-        showTags={false}
-        middlewares={[
-          (store) => (next) => (action) => {
-            actionAddon(action.type)(action)
-            return next(action)
-          },
-        ]}
-        images={[
-          {
-            src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-            frameTime: 0,
-            name: "Frame 1",
-          },
-          {
-            src: "https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4",
-            frameTime: 4500,
-            name: "Frame 2",
-          },
-        ]}
-      />
-    </div>
-  ))
-  .add("Keyframe video", () => (
-    <div
-      style={{
-        width: "100vw",
-        height: "100vh",
-        boxSizing: "border-box",
-      }}
-    >
-      <Annotator
-        onExit={(...args) => {
-          console.log(...args)
-          actionAddon("onExit")(...args)
-        }}
-        showTags
-        videoSrc="https://s3.amazonaws.com/asset.workaround.online/SampleVideo_1280x720_1mb.mp4"
-        videoTime={1000}
-        keyframes={{
-          0: {
-            regions: [
-              {
-                type: "point",
-                x: 0.1608187134502924,
-                y: 0.5769980506822612,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(238,100%,50%)",
-                id: "9995495728521284",
-              },
-              {
-                type: "box",
-                x: 0.089171974522293,
-                y: 0.36801132342533616,
-                w: 0.30573248407643316,
-                h: 0.4170794998820476,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(263,100%,50%)",
-                id: "04858393322065635",
-              },
-            ],
-          },
-          3333: {
-            regions: [
-              {
-                type: "point",
-                x: 0.1608187134502924,
-                y: 0.5769980506822612,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(238,100%,50%)",
-                id: "9995495728521284",
-              },
-              {
-                type: "box",
-                x: 0.14861995753715496,
-                y: 0.0934182590233546,
-                w: 0.3163481953290871,
-                h: 0.7596131163010142,
-                highlighted: true,
-                editingLabels: false,
-                color: "hsl(263,100%,50%)",
-                id: "04858393322065635",
-              },
-            ],
-          },
-        }}
-      />
-    </div>
-  ))
-  .add("Override Next/Prev Button Handling", () => {
-    const images = [
-      exampleImage,
-      "https://loremflickr.com/100/100/cars?lock=1",
-      "https://loremflickr.com/100/100/cars?lock=2",
-    ]
-    const [selectedImageIndex, changeSelectedImageIndex] = useState(0)
-
-    return (
-      <Annotator
-        onExit={actionAddon("onExit")}
-        onNextImage={() => {
-          actionAddon("onNextImage")()
-          changeSelectedImageIndex((selectedImageIndex + 1) % 3)
-        }}
-        onPrevImage={() => {
-          actionAddon("onPrevImage")()
-          changeSelectedImageIndex((selectedImageIndex - 1 + 3) % 3)
-        }}
-        labelImages
-        selectedImage={images[selectedImageIndex]}
-        regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-          },
-          {
-            src: images[1],
-            name: "Frame 0036",
-          },
-          {
-            src: images[2],
-            name: "Frame 0037",
-          },
-        ]}
-      />
-    )
-  })
-  .add("Override RegionEditLabel", () => {
-    const images = [
-      exampleImage,
-      "https://loremflickr.com/100/100/cars?lock=1",
-      "https://loremflickr.com/100/100/cars?lock=2",
-    ]
-
-    const NewRegionEditLabel = ({
-      region,
-      editing,
-      onDelete,
-      onChange,
-      onClose,
-      onOpen,
-    }) => {
-      return (
-        <div style={{ backgroundColor: "white" }}>
-          I'm the closed part
-          <div style={{ display: editing ? "block" : "none" }}>
-            I'm the part that shows when it's being edited!
-            <button onClick={() => onDelete(region)}>Delete This Region</button>
-            <button
-              onClick={() => onChange({ ...region, cls: "awesome-value" })}
-            >
-              Set Classification to "awesome-value"
-            </button>
-            <button onClick={() => onClose(region)}>Close the edit mode</button>
-          </div>
-        </div>
-      )
-    }
-
-    return (
-      <Annotator
-        onExit={actionAddon("onExit")}
-        labelImages
-        selectedImage={images[0]}
-        RegionEditLabel={NewRegionEditLabel}
-        images={[
-          {
-            src: exampleImage,
-            name: "Seve's Desk",
-          },
-          {
-            src: images[1],
-            name: "Frame 0036",
-          },
-          {
-            src: images[2],
-            name: "Frame 0037",
-          },
-        ]}
-      />
-    )
-  })
-  .add("Two on sample page w/ hotkeys", () => {
-    return (
-      <HotKeys keyMap={defaultKeyMap}>
-        <div>
-          <div style={{ height: 600 }}>
-            <Annotator
-              onExit={actionAddon("onExit")}
-              regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-              imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-              middlewares={[
-                (store) => (next) => (action) => {
-                  actionAddon(action.type)(action)
-                  return next(action)
-                },
-              ]}
-              images={[
-                {
-                  src: exampleImage,
-                  name: "Seve's Desk",
-                  regions: testRegions,
-                },
-              ]}
-            />
-          </div>
-          <div style={{ height: 600 }}>
-            <Annotator
-              onExit={actionAddon("onExit")}
-              middlewares={[
-                (store) => (next) => (action) => {
-                  actionAddon(action.type)(action)
-                  return next(action)
-                },
-              ]}
-              images={[
-                {
-                  src: exampleImage,
-                  name: "Seve's Desk",
-                  regions: testRegions,
-                },
-              ]}
-            />
-          </div>
-        </div>
-      </HotKeys>
-    )
-  })
-  .add("CORs Error (Pixel Segmentation)", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      fullImageSegmentationMode
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: "https://placebear.com/200/300",
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))
-  .add("Modify Allowed Area", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      middlewares={middlewares}
-      labelImages
-      fullImageSegmentationMode
-      allowedArea={{ x: 0, y: 0.6, w: 0.3, h: 0.3 }}
-      enabledTools={["modify-allowed-area"]}
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))
-  .add("Hide Next, Hide Header Text", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      labelImages
-      hideNext
-      hideHeaderText
-      fullImageSegmentationMode
-      enabledTools={["modify-allowed-area"]}
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))
-  .add("Hide Header", () => (
-    <Annotator
-      onExit={actionAddon("onExit")}
-      labelImages
-      hideHeader
-      fullImageSegmentationMode
-      enabledTools={["modify-allowed-area"]}
-      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
-      images={[
-        {
-          src: exampleImage,
-          name: "Frame 0036",
-        },
-      ]}
-    />
-  ))