Release/0.2.1-5 (#109)

* Panel update style * Polygon bugs * Bump * Undo & redo & reset on Image * Bump to new MST vers * #102 * Fix bug with zoom * Fix bug with incorrect start / end * Time and image * Polygon bugs * Time traveller prepare new logic * Build 0.2.1-5 * Fix multi labeling
HumanSignal · Oct 29, 2019 · 2d52988 · 2d52988
1 parent 8740635
commit 2d52988
Show file tree

Hide file tree

Showing 25 changed files with 179 additions and 407 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,10 +1,10 @@
 {
-  "main.css": "/static/css/main.ca4d6399.css",
-  "main.js": "/static/js/main.b5ddacd9.js",
-  "main.js.map": "/static/js/main.b5ddacd9.js.map",
+  "main.css": "/static/css/main.ae336099.css",
+  "main.js": "/static/js/main.10833e21.js",
+  "main.js.map": "/static/js/main.10833e21.js.map",
   "static/media/config.xml": "/static/media/config.1890026d.xml",
-  "static/css/main.ca4d6399.css.map": "/static/css/main.ca4d6399.css.map",
+  "static/css/main.ae336099.css.map": "/static/css/main.ae336099.css.map",
   "index.html": "/index.html",
-  "precache-manifest.bbf29cc0590c9f5ed8edf29c73dce7a4.js": "/precache-manifest.bbf29cc0590c9f5ed8edf29c73dce7a4.js",
+  "precache-manifest.a131d1729d95bfbae20b0e22e7cffac6.js": "/precache-manifest.a131d1729d95bfbae20b0e22e7cffac6.js",
   "service-worker.js": "/service-worker.js"
 }
diff --git a/build/index.html b/build/index.html
@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono" rel="stylesheet"/><link href="//fonts.googleapis.com/css?family=Dosis:500&text=LabelStudio" rel="stylesheet"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="stylesheet" href="/styles/main.css"><title>Label Studio</title><link href="/static/css/main.ca4d6399.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="header"><a id="logo" href="/"><img src="./images/ls_logo.png" alt="label studio logo"> <span style="font-size:1.2em">Label Studio</span></a><ul id="nav" style="display:flex;align-items:center"><a style="margin-right:1em;text-decoration:underline" href="https://labelstud.io/guide">Guide</a> <a class="github-button" href="https://github.com/heartexlabs/label-studio" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub"><img src="./images/GitHub-Mark-64px.png" height="25"/></a></ul></div><div id="label-studio"></div><footer class="footer">Made by <a target="_blank" href="https://heartex.net">Heartex</a> in San Francisco<br/><br/><img src="./images/3nowhite.svg" height="80"/></footer><script>setTimeout(() => {
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono" rel="stylesheet"/><link href="//fonts.googleapis.com/css?family=Dosis:500&text=LabelStudio" rel="stylesheet"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="stylesheet" href="/styles/main.css"><title>Label Studio</title><link href="/static/css/main.ae336099.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="header"><a id="logo" href="/"><img src="./images/ls_logo.png" alt="label studio logo"> <span style="font-size:1.2em">Label Studio</span></a><ul id="nav" style="display:flex;align-items:center"><a style="margin-right:1em;text-decoration:underline" href="https://labelstud.io/guide">Guide</a> <a class="github-button" href="https://github.com/heartexlabs/label-studio" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub"><img src="./images/GitHub-Mark-64px.png" height="25"/></a></ul></div><div id="label-studio"></div><footer class="footer">Made by <a target="_blank" href="https://heartex.net">Heartex</a> in San Francisco<br/><br/><img src="./images/3nowhite.svg" height="80"/></footer><script>setTimeout(() => {
         var ls = new LabelStudio("label-studio", {
           config: `
             <View>
@@ -37,4 +37,4 @@
             }
           }
         });
-      }, 2000);</script><script src="/static/js/main.b5ddacd9.js"></script></body></html>
+      }, 2000);</script><script src="/static/js/main.10833e21.js"></script></body></html>
diff --git a/...ifest.bbf29cc0590c9f5ed8edf29c73dce7a4.js → ...ifest.a131d1729d95bfbae20b0e22e7cffac6.js b/...ifest.bbf29cc0590c9f5ed8edf29c73dce7a4.js → ...ifest.a131d1729d95bfbae20b0e22e7cffac6.js
@@ -4,8 +4,8 @@ self.__precacheManifest = [
     "url": "/static/media/config.be40f192.xml"
   },
   {
-    "revision": "b5ddacd94d11a4c88ddb",
-    "url": "/static/css/main.ca4d6399.css"
+    "revision": "10833e215ea38553448e",
+    "url": "/static/css/main.ae336099.css"
   },
   {
     "revision": "5bb63d8f59b769afa2951085535974c9",
@@ -28,8 +28,8 @@ self.__precacheManifest = [
     "url": "/static/media/config.2a6054fe.xml"
   },
   {
-    "revision": "b5ddacd94d11a4c88ddb",
-    "url": "/static/js/main.b5ddacd9.js"
+    "revision": "10833e215ea38553448e",
+    "url": "/static/js/main.10833e21.js"
   },
   {
     "revision": "f4626f44ab6f63bfc683408a117236b7",
@@ -52,7 +52,7 @@ self.__precacheManifest = [
     "url": "/static/media/config.1890026d.xml"
   },
   {
-    "revision": "1de38c3f2c31b4441d36af033bd835a9",
+    "revision": "1bce8d3350dfa9a19e0e41bb2f10be22",
     "url": "/index.html"
   }
 ];
diff --git a/build/service-worker.js b/build/service-worker.js
@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.bbf29cc0590c9f5ed8edf29c73dce7a4.js"
+  "/precache-manifest.a131d1729d95bfbae20b0e22e7cffac6.js"
 );
 
 workbox.clientsClaim();

diff --git a/build/static/css/main.ca4d6399.css → build/static/css/main.ae336099.css b/build/static/css/main.ca4d6399.css → build/static/css/main.ae336099.css
diff --git a/build/static/css/main.ae336099.css.map b/build/static/css/main.ae336099.css.map
diff --git a/build/static/css/main.ca4d6399.css.map b/build/static/css/main.ca4d6399.css.map
diff --git a/build/static/js/main.b5ddacd9.js → build/static/js/main.10833e21.js b/build/static/js/main.b5ddacd9.js → build/static/js/main.10833e21.js
diff --git a/build/static/js/main.10833e21.js.map b/build/static/js/main.10833e21.js.map
diff --git a/build/static/js/main.b5ddacd9.js.map b/build/static/js/main.b5ddacd9.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "label-studio",
-  "version": "0.2.1-4",
+  "version": "0.2.1-5",
   "description": "Label Studio is a multi-domain data labeling tool with standardized output format",
   "homepage": "https://labelstud.io",
   "author": {
@@ -35,7 +35,7 @@
     "konva": "^4.0.13",
     "mobx": "^5.8.0",
     "mobx-react": "^5.4.3",
-    "mobx-state-tree": "^3.10.0",
+    "mobx-state-tree": "^3.14.1",
     "nanoid": "^2.0.3",
     "node-sass": "^4.12.0",
     "react": "^16.10.2",

diff --git a/src/components/App/App.module.scss b/src/components/App/App.module.scss
@@ -17,6 +17,7 @@
 
 .menu {
   width: 320px;
+  min-width: 320px;
   display: flex;
   flex-flow: column;
 

diff --git a/src/components/ImageView/ImageView.js b/src/components/ImageView/ImageView.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { observer } from "mobx-react";
+import { getParent } from "mobx-state-tree";
 import { Stage, Layer, Rect, Group, Line } from "react-konva";
 
 import Tree from "../../core/Tree";
@@ -42,6 +43,7 @@ export default observer(
      */
     handleMouseUp = e => {
       const { item } = this.props;
+      // getParent(item, 4)[0].history.freeze();
 
       if (item.mode === "drawing") {
         /**
@@ -51,14 +53,13 @@ export default observer(
 
         const as = item.detachActiveShape();
 
-        console.log(as);
-
         if (as.width > 3 && as.height > 3) item.addShape(as);
       }
     };
 
     handleMouseMove = e => {
       const { item } = this.props;
+      getParent(item, 4)[0].history.freeze();
       if (item.mode === "drawing") {
         const x = (e.evt.offsetX - item.zoomPosX) / item.zoomScale;
         const y = (e.evt.offsetY - item.zoomPosY) / item.zoomScale;
@@ -73,6 +74,7 @@ export default observer(
 
     handleStageMouseDown = e => {
       const { item } = this.props;
+      getParent(item, 4)[0].history.freeze();
 
       if (item.controlButtonType === "PolygonLabelsModel") {
         return;
@@ -111,8 +113,26 @@ export default observer(
      * Handle to zoom
      */
     handleZoom = e => {
+      /**
+       * Disable if user doesn't use ctrl
+       */
+      if (e.evt && !e.evt.ctrlKey) {
+        return;
+      } else if (e.evt && e.evt.ctrlKey) {
+        /**
+         * Disable scrolling page
+         */
+        e.evt.preventDefault();
+      }
+
       const { item } = this.props;
 
+      /**
+       * Freeze Time Traveller
+       * TODO: currently work with [0] completion
+       */
+      getParent(item, 4)[0].history.freeze();
+
       const stage = item.stageRef;
       const scaleBy = parseFloat(item.zoomby);
       const oldScale = stage.scaleX();
@@ -294,12 +314,12 @@ export default observer(
               onMouseDown={this.handleStageMouseDown}
               onMouseMove={this.handleMouseMove}
               onMouseUp={this.handleMouseUp}
-              onWheel={item.zoom === true ? this.handleZoom : () => {}}
+              onWheel={item.zoom ? this.handleZoom : () => {}}
             >
               {item.grid && item.sizeUpdated && this.renderGrid()}
               <Layer>
-                {item.shapes.map(s => {
-                  return Tree.renderItem(s);
+                {item.shapes.map(shape => {
+                  return Tree.renderItem(shape);
                 })}
                 {item.activeShape && Tree.renderItem(item.activeShape)}
 

diff --git a/src/core/TimeTraveller.js b/src/core/TimeTraveller.js
@@ -1,10 +1,14 @@
 import { types, resolvePath, getEnv, onSnapshot, getSnapshot, applySnapshot } from "mobx-state-tree";
 
+/**
+ * Time Traveller
+ */
 const TimeTraveller = types
   .model("TimeTraveller", {
     history: types.array(types.frozen()),
     undoIdx: -1,
     targetPath: "",
+    skipNextUndoState: types.optional(types.boolean, false),
 
     createdIdx: 1,
 
@@ -24,25 +28,27 @@ const TimeTraveller = types
   .actions(self => {
     let targetStore;
     let snapshotDisposer;
-    let skipNextUndoState = false;
 
     return {
       freeze() {
         self.isFrozen = true;
-        skipNextUndoState = true;
+        self.skipNextUndoState = true;
         self.frozenIdx = self.undoIdx;
       },
 
-      addUndoState(ss) {
-        if (skipNextUndoState) {
-          // skip recording if this state was caused by undo / redo
-          skipNextUndoState = false;
+      addUndoState(recorder) {
+        if (self.skipNextUndoState) {
+          /**
+           * Skip recording if this state was caused by undo / redo
+           */
+          self.skipNextUndoState = false;
+
           return;
         }
 
-        self.history.splice(self.undoIdx + 1);
-        self.history.push(ss);
-        self.undoIdx = self.history.length - 1;
+        self.history.splice(self.undoIdx);
+        self.history.push(recorder);
+        self.undoIdx = self.history.length;
       },
 
       afterCreate() {
@@ -58,7 +64,7 @@ const TimeTraveller = types
         snapshotDisposer = onSnapshot(targetStore, snapshot => this.addUndoState(snapshot));
         // record an initial state if no known
         if (self.history.length === 0) {
-          this.addUndoState(getSnapshot(targetStore));
+          self.addUndoState(getSnapshot(targetStore));
         }
 
         self.createdIdx = self.undoIdx;
@@ -69,29 +75,27 @@ const TimeTraveller = types
       },
 
       undo() {
-        if (self.isFrozen && self.frozenIdx <= self.undoIdx) return;
+        if (self.isFrozen && self.frozenIdx < self.undoIdx) return;
+
+        let newIdx = self.undoIdx - 1;
 
-        self.undoIdx--;
-        skipNextUndoState = true;
-        applySnapshot(targetStore, self.history[self.undoIdx]);
+        self.set(newIdx);
       },
 
       redo() {
-        self.undoIdx++;
-        skipNextUndoState = true;
-        applySnapshot(targetStore, self.history[self.undoIdx]);
+        let newIdx = self.undoIdx + 1;
+
+        self.set(newIdx);
       },
 
       set(idx) {
         self.undoIdx = idx;
-        skipNextUndoState = true;
-        applySnapshot(targetStore, self.history[self.undoIdx]);
+        self.skipNextUndoState = true;
+        applySnapshot(targetStore, self.history[idx]);
       },
 
       reset() {
-        self.undoIdx = 1;
-        skipNextUndoState = true;
-        applySnapshot(targetStore, self.history[self.undoIdx]);
+        self.set(self.createdIdx);
       },
     };
   });

diff --git a/src/interfaces/control/Label.js b/src/interfaces/control/Label.js
@@ -65,15 +65,44 @@ const Model = types
 
       labels.finishCurrentObject();
 
-      labels.shouldBeUnselected && labels.unselectAll();
+      /**
+       * Multiple
+       */
+      if (!labels.shouldBeUnselected) {
+        self.markSelected(!self.selected);
+      }
 
-      if (labels.shouldBeUnselected && !selectedLabel) {
-        self.selected = !self.selected;
+      /**
+       * Single
+       */
+      if (labels.shouldBeUnselected) {
+        /**
+         * Current not selected
+         */
+        if (!selectedLabel) {
+          /**
+           * Unselect all labels
+           */
+          labels.unselectAll();
+          /**
+           * Select current label
+           */
+          self.markSelected(!self.selected);
+        } else {
+          /**
+           * Unselect all labels
+           */
+          labels.unselectAll();
+        }
       }
     },
 
-    markSelected(val) {
-      self.selected = val;
+    /**
+     *
+     * @param {boolean} value
+     */
+    markSelected(value) {
+      self.selected = value;
     },
 
     onHotKey() {
@@ -90,7 +119,7 @@ const LabelModel = types.compose(
 
 const HtxLabelView = inject("store")(
   observer(({ item, store }) => {
-    const bg = {
+    const labelStyle = {
       backgroundColor: item.selected ? item.background : "#e8e8e8",
       color: item.selected ? item.selectedcolor : "#333333",
       cursor: "pointer",
@@ -103,7 +132,7 @@ const HtxLabelView = inject("store")(
           item.toggleSelected();
           return false;
         }}
-        style={bg}
+        style={labelStyle}
         size={item.size}
       >
         {item._value}

diff --git a/src/interfaces/mixins/Regions.js b/src/interfaces/mixins/Regions.js
@@ -13,6 +13,7 @@ const RegionsMixin = types
 
     unselectRegion() {
       const completion = self.completion;
+
       if (completion.relationMode) {
         completion.stopRelationMode();
       }
@@ -38,11 +39,18 @@ const RegionsMixin = types
       }
     },
 
+    /**
+     * Remove region
+     */
     deleteRegion() {
       self.unselectRegion();
 
       self.completion.relationStore.deleteNodeRelation(self);
 
+      if (self.type === "polygonregion") {
+        self.destroyRegion();
+      }
+
       self.completion.regionStore.deleteRegion(self);
 
       self.completion.deleteRegion(self);