label-studio/src/tools/FloodFill.js

Data Labeling Tool that is backend agnostic and can be embedded into your applications

import React, { Component, Fragment } from "react";
import { observer } from "mobx-react";
import { types, getParent } from "mobx-state-tree";

import BaseTool from "./Base";
import SliderTool from "../components/Tools/Slider";
import ToolMixin from "../mixins/Tool";
import { PolygonRegionModel } from "../regions/PolygonRegion";
import { calcBorder, getImageData } from "../utils/floodfill";
import { guidGenerator } from "../core/Helpers";

const DEF_THRESHOLD = 10;

const ToolView = observer(({ item }) => {
  return (
    <SliderTool
      max={50}
      default={DEF_THRESHOLD}
      selected={item.selected}
      icon={"tool"}
      onClick={ev => {
        const cur = item.selected;
        item.manager.unselectAll();
        item.setSelected(!cur);
      }}
      onChange={val => {
        item.setThreshold(val);
      }}
    />
  );
});

const _Tool = types
  .model({
    threshold: types.optional(types.number, DEF_THRESHOLD),
  })
  .views(self => ({
    get viewClass() {
      return <ToolView item={self} />;
    },
  }))
  .actions(self => ({
    setThreshold(val) {
      self.threshold = val;
    },

    mouseupEv() {
      self.mode = "viewing";
    },

    mousemoveEv(ev, [x, y]) {
      if (self.mode != "drawing") return;
    },

    createPolygonRegion(points) {
      const { states, strokecolor } = self.statesAndParams;
      const c = self.control;

      const p = PolygonRegionModel.create({
        id: guidGenerator(),

        opacity: parseFloat(c.opacity),
        fillcolor: c.fillcolor,

        strokewidth: parseInt(c.strokewidth),
        strokecolor: strokecolor,

        pointsize: c.pointsize,
        pointstyle: c.pointstyle,

        states: states,

        coordstype: "px",
      });

      points.forEach(t => p.addPoint(t.x, t.y));
      self.obj.addShape(p);

      p.closePoly();

      return p;
    },

    clickEv(ev, [x, y]) {
      const image = self.obj;
      const imageRef = image.imageRef;
      const imageData = getImageData(imageRef);
      const points = calcBorder(imageData.data, image.naturalWidth, image.naturalHeight, x, y, self.threshold, true);

      if (points) self.createPolygonRegion(points);

      self.control.unselectAll();
    },

    mousedownEv(ev, [x, y]) {
      self.mode = "drawing";
    },
  }));

const FloodFill = types.compose(ToolMixin, _Tool, BaseTool);

export { FloodFill };