lost-sia 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [0.9.0] - 2021-12-23
+### Added
+- Delete annotation in creation mode when hitting *Escape*-Key
+- Show img description in ImgBar if available
+- Max canvas size mode. Where canvas takes the maximum container size and is not 
+  image oriented as before. Add prop *maxCanvas={true}* to canvas in order to enable.
+### Changed
+- Be able to deal with mixed color possible labels -> where a part of labels 
+  will have a specified color and the other part has no provided color
+
 ## [0.8.0] - 2021-10-14
 ### Added
 - Added lockedAnnos prop for Canvas in order to lock annos by id. Locked annos

package/dist/index.es.js

@@ -4,13 +4,13 @@ import _ from 'lodash';
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
-function toSia(data, image, type) {
+function toSia(data, image, type, imgOffset) {
     switch (type) {
         case 'bBox':
             var w = image.width * data.w;
             var h = image.height * data.h;
-            var x0 = image.width * data.x - w / 2.0;
-            var y0 = image.height * data.y - h / 2.0;
+            var x0 = imgOffset.x + image.width * data.x - w / 2.0;
+            var y0 = imgOffset.y + image.height * data.y - h / 2.0;
             return [{
                 x: x0,
                 y: y0
@@ -26,15 +26,15 @@ function toSia(data, image, type) {
             }];
         case 'point':
             return [{
-                x: image.width * data.x,
-                y: image.height * data.y
+                x: imgOffset.x + image.width * data.x,
+                y: imgOffset.y + image.height * data.y
             }];
         case 'line':
         case 'polygon':
             return data.map(function (e) {
                 return {
-                    x: image.width * e.x,
-                    y: image.height * e.y
+                    x: imgOffset.x + image.width * e.x,
+                    y: imgOffset.y + image.height * e.y
                 };
             });
         default:
@@ -46,17 +46,21 @@ function toSia(data, image, type) {
  * Transform a sia annotation to backend format.
  * 
  * @param {Array} data Annotation data
- * @param {*} image Image object {width, height}
+ * @param {*} svg Image object {width, height}
  * @param {String} type Type of the annotation bBox, point, line, polygon
  * @returns Annotation data in backend style (relative, centered)
  */
-function toBackend(data, image, type) {
+function toBackend(data, svg, type) {
+    var imgOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { x: 0, y: 0 };
+
+    var imgWidth = svg.width - 2 * imgOffset.x;
+    var imgHeight = svg.height - 2 * imgOffset.y;
     switch (type) {
         case 'bBox':
-            // const w = image.width * data.w
-            // const h = image.height * data.h
-            // const x0 = image.width * data.x - w/2.0
-            // const y0 = image.height * data.y - h/2.0
+            // const w = svg.width * data.w
+            // const h = svg.height * data.h
+            // const x0 = svg.width * data.x - w/2.0
+            // const y0 = svg.height * data.y - h/2.0
 
             // console.error('GO On Here! w = max_x - min_x; h = max_y - min_y')
             var xList = data.map(function (e) {
@@ -65,30 +69,30 @@ function toBackend(data, image, type) {
             var yList = data.map(function (e) {
                 return e.y;
             });
-            var minX = Math.min.apply(Math, _toConsumableArray(xList));
-            var maxX = Math.max.apply(Math, _toConsumableArray(xList));
-            var minY = Math.min.apply(Math, _toConsumableArray(yList));
-            var maxY = Math.max.apply(Math, _toConsumableArray(yList));
+            var minX = Math.min.apply(Math, _toConsumableArray(xList)) - imgOffset.x;
+            var maxX = Math.max.apply(Math, _toConsumableArray(xList)) - imgOffset.x;
+            var minY = Math.min.apply(Math, _toConsumableArray(yList)) - imgOffset.y;
+            var maxY = Math.max.apply(Math, _toConsumableArray(yList)) - imgOffset.y;
             var w = maxX - minX;
             var h = maxY - minY;
             var x = minX + w / 2.0;
             var y = minY + h / 2.0;
             return {
-                x: x / image.width,
-                y: y / image.height,
-                w: w / image.width,
-                h: h / image.height };
+                x: x / imgWidth,
+                y: y / imgHeight,
+                w: w / imgWidth,
+                h: h / imgHeight };
         case 'point':
             return {
-                x: data[0].x / image.width,
-                y: data[0].y / image.height
+                x: (data[0].x - imgOffset.x) / imgWidth,
+                y: (data[0].y - imgOffset.y) / imgHeight
             };
         case 'line':
         case 'polygon':
             return data.map(function (e) {
                 return {
-                    x: e.x / image.width,
-                    y: e.y / image.height
+                    x: (e.x - imgOffset.x) / imgWidth,
+                    y: (e.y - imgOffset.y) / imgHeight
                 };
             });
         default:
@@ -3153,6 +3157,19 @@ var ImgBar = function (_Component) {
                 return null;
             }
         }
+    }, {
+        key: 'renderImgDescription',
+        value: function renderImgDescription() {
+            if (this.props.annos.image.description) {
+                return React.createElement(
+                    Menu.Item,
+                    null,
+                    this.props.annos.image.description
+                );
+            } else {
+                return null;
+            }
+        }
     }, {
         key: 'render',
         value: function render() {
@@ -3160,7 +3177,7 @@ var ImgBar = function (_Component) {
 
             if (!this.props.visible) return null;
             if (!this.props.annos.image) return null;
-            if (!this.props.annos.image.url) return null;
+            // if (!this.props.annos.image.url) return null
             return React.createElement(
                 'div',
                 { style: {
@@ -3177,10 +3194,11 @@ var ImgBar = function (_Component) {
                 React.createElement(
                     Menu,
                     { inverted: true, style: { opacity: 0.9, justifyContent: 'center', alignItems: 'center' } },
+                    this.renderImgDescription(),
                     React.createElement(
                         Menu.Item,
                         null,
-                        this.props.annos.image.url.split('/').pop() + " (ID: " + this.props.annos.image.id + ")"
+                        "ID: " + this.props.annos.image.id
                     ),
                     React.createElement(
                         Menu.Item,
@@ -3432,7 +3450,7 @@ function fixBackendAnnos(backendAnnos) {
     return annos;
 }
 
-function backendAnnosToCanvas(backendAnnos, imgSize) {
+function backendAnnosToCanvas(backendAnnos, imgSize, imgOffset) {
     var annos = [].concat(_toConsumableArray$3(backendAnnos.bBoxes.map(function (element) {
         return _extends$8({}, element, { type: 'bBox',
             mode: element.mode ? element.mode : VIEW,
@@ -3453,7 +3471,7 @@ function backendAnnosToCanvas(backendAnnos, imgSize) {
     })));
     annos = annos.map(function (el) {
         return _extends$8({}, el, {
-            data: toSia(el.data, imgSize, el.type) });
+            data: toSia(el.data, imgSize, el.type, imgOffset) });
     });
     // this.setState({annos: [...annos]})
     return annos;
@@ -3461,6 +3479,7 @@ function backendAnnosToCanvas(backendAnnos, imgSize) {
 
 function canvasToBackendAnnos(annos, imgSize) {
     var forBackendPost = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var imgOffset = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { x: 0, y: 0 };
 
     var myAnnos = annos;
     var bAnnos = myAnnos.map(function (el) {
@@ -3476,7 +3495,7 @@ function canvasToBackendAnnos(annos, imgSize) {
         return _extends$8({}, el, {
             id: annoId,
             mode: VIEW,
-            data: toBackend(el.data, imgSize, el.type)
+            data: toBackend(el.data, imgSize, el.type, imgOffset)
         });
     });
 
@@ -3516,6 +3535,7 @@ var CAM_MOVE_STOP = 'camMoveStop';
 var COPY_ANNOTATION = 'copyAnnotation';
 var PASTE_ANNOTATION = 'pasteAnnotation';
 var RECREATE_ANNO = 'recreateAnnotation';
+var DELETE_ANNO_IN_CREATION = 'deleteAnnoInCreation';
 
 var KeyMapper = function () {
     function KeyMapper() {
@@ -3582,6 +3602,9 @@ var KeyMapper = function () {
                         this.triggerKeyAction(PASTE_ANNOTATION);
                     }
                     break;
+                case 'Escape':
+                    this.triggerKeyAction(DELETE_ANNO_IN_CREATION);
+                    break;
                 default:
                     break;
             }
@@ -3760,11 +3783,11 @@ function _inherits$e(subClass, superClass) { if (typeof superClass !== "function
  *      {
  *          image : {
  *              id: int, 
- *              url: string, 
  *              number: int, 
  *              amount: int, 
  *              isFirst: bool, 
- *              isLast: bool
+ *              isLast: bool,
+ *              description: string, // -> optional
  *          },
  *          annotations: {
  *              bBoxes: [{
@@ -3826,6 +3849,7 @@ function _inherits$e(subClass, superClass) { if (typeof superClass !== "function
  *      {left:int, top:int, right:int, bottom:int} values in pixels.
  * @param {bool} centerCanvasInContainer - Center the canvas in the 
  *      middle of the container.
+ * @param {bool} maxCanvas - Maximize Canvas Size. Do not fit canvas to image size
  * @param {str or int} defaultLabel (optional) - Name or ID of the default label that is used
  *      when no label was selected by the annotator. If not set "no label" will be used.
  *      If ID is used, it needs to be one of the possible label ids.
@@ -3869,6 +3893,10 @@ var Canvas = function (_Component) {
                 width: undefined,
                 height: undefined
             },
+            imageOffset: {
+                x: 0,
+                y: 0
+            },
             annos: [],
             mode: VIEW,
             // selectedAnnoId: {id:undefined},
@@ -3981,7 +4009,8 @@ var Canvas = function (_Component) {
                 if (prevProps.layoutUpdate !== this.props.layoutUpdate) {
                     this.selectAnnotation(undefined);
                     // this.updateCanvasView(this.getAnnoBackendFormat())
-                    this.updateCanvasView(canvasToBackendAnnos(this.state.annos, this.state.svg));
+                    // const {imageOffset} = this.updateImageSize()
+                    this.updateCanvasView(canvasToBackendAnnos(this.state.annos, this.state.svg, false, this.state.imageOffset));
                 }
             }
         }
@@ -4107,6 +4136,9 @@ var Canvas = function (_Component) {
                 case DELETE_ANNO:
                     this.deleteAnnotation(anno);
                     break;
+                case DELETE_ANNO_IN_CREATION:
+                    this.deleteAnnoInCreationMode(anno);
+                    break;
                 case ENTER_ANNO_ADD_MODE:
                     if (anno) {
                         this.updateSelectedAnno(anno, ADD);
@@ -4435,11 +4467,13 @@ var Canvas = function (_Component) {
             if (!this.props.possibleLabels) return;
             if (this.props.possibleLabels.length <= 0) return;
             var lbls = this.props.possibleLabels;
-            if (!('color' in lbls[0])) {
-                lbls = lbls.map(function (e) {
+            lbls = lbls.map(function (e) {
+                if (!('color' in e)) {
                     return _extends$9({}, e, { color: getColor(e.id) });
-                });
-            }
+                } else {
+                    return _extends$9({}, e);
+                }
+            });
             this.setState({
                 possibleLabels: [].concat(_toConsumableArray$4(lbls))
             });
@@ -4530,6 +4564,17 @@ var Canvas = function (_Component) {
                 }
             }
         }
+    }, {
+        key: 'deleteAnnoInCreationMode',
+        value: function deleteAnnoInCreationMode(anno) {
+            if (anno) {
+                if (anno.mode === CREATE) {
+                    // const ar = this.findAnnoRef(this.state.selectedAnnoId)
+                    // if (ar !== undefined) ar.current.myAnno.current.removeLastNode()
+                    this.onAnnoPerformedAction(anno, ANNO_DELETED);
+                }
+            }
+        }
     }, {
         key: 'deleteAllAnnos',
         value: function deleteAllAnnos() {
@@ -4648,7 +4693,7 @@ var Canvas = function (_Component) {
 
             var myAnnos = annos ? annos : this.state.annos;
             // const backendFormat = this.getAnnoBackendFormat(removeFrontedIds, myAnnos)
-            var backendFormat = canvasToBackendAnnos(myAnnos, this.state.svg, removeFrontedIds);
+            var backendFormat = canvasToBackendAnnos(myAnnos, this.state.svg, removeFrontedIds, this.state.imageOffset);
             var finalData = {
                 imgId: this.props.annos.image.id,
                 imgLabelIds: this.state.imgLabelIds,
@@ -4999,28 +5044,40 @@ var Canvas = function (_Component) {
                 imgWidth = maxImgHeight * ratio;
                 imgHeight = maxImgHeight;
             }
-            if (this.props.centerCanvasInContainer) {
-                var resSpaceX = maxImgWidth - imgWidth;
-                if (resSpaceX > 2) {
-                    canvasLeft = canvasLeft + resSpaceX / 2;
-                }
-                var resSpaceY = maxImgHeight - imgHeight;
-                if (resSpaceY > 2) {
-                    canvasTop = canvasTop + resSpaceY / 2;
+            var svg;
+            var imgOffset = { x: 0, y: 0 };
+            if (this.props.maxCanvas) {
+                imgOffset.x = (maxImgWidth - imgWidth) / 2;
+                imgOffset.y = (maxImgHeight - imgHeight) / 2;
+                console.log('imgOffset: ', imgOffset);
+                svg = _extends$9({}, this.state.svg, { width: maxImgWidth, height: maxImgHeight,
+                    left: canvasLeft, top: canvasTop
+                });
+            } else {
+                if (this.props.centerCanvasInContainer) {
+                    var resSpaceX = maxImgWidth - imgWidth;
+                    if (resSpaceX > 2) {
+                        canvasLeft = canvasLeft + resSpaceX / 2;
+                    }
+                    var resSpaceY = maxImgHeight - imgHeight;
+                    if (resSpaceY > 2) {
+                        canvasTop = canvasTop + resSpaceY / 2;
+                    }
                 }
+                svg = _extends$9({}, this.state.svg, { width: imgWidth, height: imgHeight,
+                    left: canvasLeft, top: canvasTop
+                });
             }
-            var svg = _extends$9({}, this.state.svg, { width: imgWidth, height: imgHeight,
-                left: canvasLeft, top: canvasTop
-            });
             this.setState({
                 svg: svg,
                 image: {
                     width: this.img.current.naturalWidth,
                     height: this.img.current.naturalHeight
-                }
+                },
+                imageOffset: imgOffset
             });
             this.svgUpdate(svg);
-            return { imgWidth: imgWidth, imgHeight: imgHeight };
+            return { imgWidth: imgWidth, imgHeight: imgHeight, imgOffset: imgOffset };
         }
     }, {
         key: 'svgUpdate',
@@ -5045,7 +5102,7 @@ var Canvas = function (_Component) {
             //for svg should be calculated
             if (annotations) {
                 var imgSize = this.updateImageSize();
-                this.setState({ annos: [].concat(_toConsumableArray$4(backendAnnosToCanvas(annotations, { width: imgSize.imgWidth, height: imgSize.imgHeight }))) });
+                this.setState({ annos: [].concat(_toConsumableArray$4(backendAnnosToCanvas(annotations, { width: imgSize.imgWidth, height: imgSize.imgHeight }, imgSize.imgOffset))) });
             }
         }
     }, {