lost-sia 0.5.2 → 0.9.0

package/CHANGELOG.md

@@ -5,6 +5,29 @@ 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
+  can not be edited 
+
+## [0.7.0] - 2021-10-13
+### Added
+- Update annotations on **annos**-prob change
+
+## [0.6.0] - 2021-09-28
+### Added
+- Edit mode for Polygons -> Edit polygons again that already have been created
+
 ## [0.5.2] - 2021-07-22
 ### Changed
 - do not spam logs with toSia function

package/dist/index.css

@@ -2,10 +2,10 @@
   position: fixed;
   top: 0;
   left: 0;
-  z-index: 1021;
+  z-index: 9999;
   width: 100%;
   height: 100%;
-  background-color: #eee8d5; }
+  background-color: #FFFF; }
 
 .sel-area-off {
   fill: none; }

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:
@@ -2448,7 +2452,7 @@ var Annotation$1 = function (_Component) {
     }, {
         key: 'getColor',
         value: function getColor$$1() {
-            if (this.state.anno.labelIds.length > 0) {
+            if (this.state.anno.labelIds && this.state.anno.labelIds.length > 0) {
                 return this.getLabel(this.state.anno.labelIds[0]).color;
             } else {
                 return getDefaultColor();
@@ -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,
@@ -3403,7 +3421,36 @@ var _extends$8 = Object.assign || function (target) { for (var i = 1; i < argume
 
 function _toConsumableArray$3(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 backendAnnosToCanvas(backendAnnos, imgSize) {
+function _fixBackendAnnoElement(element) {
+    return _extends$8({}, element, {
+        id: element.id ? element.id : _.uniqueId('new'),
+        annoTime: element.annoTime ? element.annoTime : 0.0,
+        mode: element.mode ? element.mode : VIEW,
+        status: element.status ? element.status : DATABASE,
+        labelIds: element.labelIds ? element.labelIds : []
+    });
+}
+
+function fixBackendAnnos(backendAnnos) {
+    var annos = {
+        bBoxes: [].concat(_toConsumableArray$3(backendAnnos.bBoxes.map(function (element) {
+            return _fixBackendAnnoElement(element);
+        }))),
+        lines: [].concat(_toConsumableArray$3(backendAnnos.lines.map(function (element) {
+            return _fixBackendAnnoElement(element);
+        }))),
+        polygons: [].concat(_toConsumableArray$3(backendAnnos.polygons.map(function (element) {
+            return _fixBackendAnnoElement(element);
+        }))),
+        points: [].concat(_toConsumableArray$3(backendAnnos.points.map(function (element) {
+            return _fixBackendAnnoElement(element);
+        })))
+    };
+    console.log('fixBackendAnnos', annos);
+    return annos;
+}
+
+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,
@@ -3424,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;
@@ -3432,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) {
@@ -3447,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)
         });
     });
 
@@ -3486,6 +3534,8 @@ var CAM_MOVE_RIGHT = 'camMoveRight';
 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() {
@@ -3539,6 +3589,9 @@ var KeyMapper = function () {
                 case 'd':
                     this.triggerKeyAction(CAM_MOVE_RIGHT);
                     break;
+                case 'e':
+                    this.triggerKeyAction(RECREATE_ANNO);
+                    break;
                 case 'c':
                     if (this.controlDown) {
                         this.triggerKeyAction(COPY_ANNOTATION);
@@ -3549,6 +3602,9 @@ var KeyMapper = function () {
                         this.triggerKeyAction(PASTE_ANNOTATION);
                     }
                     break;
+                case 'Escape':
+                    this.triggerKeyAction(DELETE_ANNO_IN_CREATION);
+                    break;
                 default:
                     break;
             }
@@ -3702,7 +3758,7 @@ function getZoomTranslation(w0, svg, s1) {
     return translation;
 }
 
-var css$1 = ".SIA_sia-fullscreen__1P3FS {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 1021;\n  width: 100%;\n  height: 100%;\n  background-color: #eee8d5; }\n";
+var css$1 = ".SIA_sia-fullscreen__1P3FS {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100%;\n  height: 100%;\n  background-color: #FFFF; }\n";
 styleInject(css$1);
 
 var _extends$9 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -3727,17 +3783,19 @@ 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: [{
- *                  id: int,
- *                  labelIds: list of int,
- *                  data: {}
+ *                  id: int, // -> Not required if status === annoStatus.NEW
+ *                  data: {},
+ *                  labelIds: list of int, // -> optional
+ *                  status: see annoStatus, // -> optional
+ *                  annoTime: float, // -> optional
  *              },...],
  *              points: []
  *              lines: []
@@ -3791,10 +3849,13 @@ 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.
  * @param {bool} blocked Block canvas view with loading dimmer.
+ * @param {bool} lockedAnnos A list of AnnoIds of annos that should only be displayed.
+ *      Such annos can not be edited in any way.
  * @event onSVGUpdate - Fires when the svg in canvas changed.
  *      args: {width: int, height: int, scale: float, translateX: float,
  *      translateY:float}
@@ -3832,6 +3893,10 @@ var Canvas = function (_Component) {
                 width: undefined,
                 height: undefined
             },
+            imageOffset: {
+                x: 0,
+                y: 0
+            },
             annos: [],
             mode: VIEW,
             // selectedAnnoId: {id:undefined},
@@ -3886,6 +3951,9 @@ var Canvas = function (_Component) {
                     imgLoadTimestamp: performance.now()
                     // isJunk: this.props.annos.image.isJunk
                 });
+                if (this.state.imageData) {
+                    this.updateCanvasView(fixBackendAnnos(this.props.annos.annotations));
+                }
                 // this.setState({
                 //     imageLoaded: false,
                 //     // imageData: undefined
@@ -3932,7 +4000,7 @@ var Canvas = function (_Component) {
                 // Selected annotation should be on top
                 this.putSelectedOnTop(prevState);
                 if (prevState.imgLoadCount !== this.state.imgLoadCount) {
-                    this.updateCanvasView(this.props.annos.annotations);
+                    this.updateCanvasView(fixBackendAnnos(this.props.annos.annotations));
                     this.setImageLabels(this.props.annos.image.labelIds);
                     this.setState({
                         performedImageInit: true
@@ -3941,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));
                 }
             }
         }
@@ -4065,14 +4134,10 @@ var Canvas = function (_Component) {
                     this.editAnnoLabel(myAnno);
                     break;
                 case DELETE_ANNO:
-                    if (anno) {
-                        if (anno.mode === CREATE) {
-                            var _ar = this.findAnnoRef(this.state.selectedAnnoId);
-                            if (_ar !== undefined) _ar.current.myAnno.current.removeLastNode();
-                        } else {
-                            this.onAnnoPerformedAction(anno, ANNO_DELETED);
-                        }
-                    }
+                    this.deleteAnnotation(anno);
+                    break;
+                case DELETE_ANNO_IN_CREATION:
+                    this.deleteAnnoInCreationMode(anno);
                     break;
                 case ENTER_ANNO_ADD_MODE:
                     if (anno) {
@@ -4117,6 +4182,10 @@ var Canvas = function (_Component) {
                 case PASTE_ANNOTATION:
                     this.pasteAnnotation(0);
                     break;
+                case RECREATE_ANNO:
+                    // recreate selected annotation using the anno id
+                    if (this.state.selectedAnnoId) this.recreateAnnotation(this.state.selectedAnnoId);
+                    break;
                 default:
                     console.warn('Unknown key action', action);
             }
@@ -4398,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))
             });
@@ -4481,6 +4552,29 @@ var Canvas = function (_Component) {
                 this.setCanvasState(cState.entry.annotations, cState.entry.imgLabelIds, cState.entry.selectedAnnoId, cState.entry.showSingleAnno);
             }
         }
+    }, {
+        key: 'deleteAnnotation',
+        value: function deleteAnnotation(anno) {
+            if (anno) {
+                if (anno.mode === CREATE) {
+                    var ar = this.findAnnoRef(this.state.selectedAnnoId);
+                    if (ar !== undefined) ar.current.myAnno.current.removeLastNode();
+                } else {
+                    this.onAnnoPerformedAction(anno, ANNO_DELETED);
+                }
+            }
+        }
+    }, {
+        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() {
@@ -4514,9 +4608,27 @@ var Canvas = function (_Component) {
             this.selectAnnotation(selectedAnnoId);
             this.setState({ showSingleAnno: showSingleAnno });
         }
+    }, {
+        key: 'isLocked',
+        value: function isLocked(annoId) {
+            if (this.props.lockedAnnos) {
+                if (this.props.lockedAnnos.includes(annoId)) {
+                    return true;
+                }
+            }
+            return false;
+        }
     }, {
         key: 'selectAnnotation',
         value: function selectAnnotation(annoId) {
+            if (this.isLocked(annoId)) {
+                this.handleNotification({
+                    title: "Annotation locked",
+                    message: 'Annotation with id ' + annoId + ' is locked and can not be edited',
+                    type: WARNING
+                });
+                return;
+            }
             if (annoId) {
                 var anno = this.findAnno(annoId);
                 this.setState({
@@ -4555,7 +4667,7 @@ var Canvas = function (_Component) {
 
             if (this.state.annos.length > 0) {
                 var myAnnos = this.state.annos.filter(function (e) {
-                    return e.status !== DELETED$1;
+                    return e.status !== DELETED$1 && !_this2.isLocked(e.id);
                 });
                 if (myAnnos.length > 0) {
                     if (!this.state.selectedAnnoId) {
@@ -4581,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,
@@ -4730,6 +4842,56 @@ var Canvas = function (_Component) {
                 }
             }
         }
+
+        /**
+         * recreate an existing annotation in case the creation process was not finished
+         * @param {string} id of annotation
+         */
+
+    }, {
+        key: 'recreateAnnotation',
+        value: function recreateAnnotation(annoID) {
+
+            var annos = this.state.annos;
+
+            // search for id of selected anno in all annos (should normally be last item in list, but to be sure)
+            var annoIndex = void 0;
+            var anno = void 0;
+
+            for (var k in annos) {
+                if (annos[k].id == annoID) {
+                    annoIndex = k;
+                    anno = annos[k];
+                    break;
+                }
+            } // editing is only allowed on line and polygon
+            if (!['line', 'polygon'].includes(anno.type)) return console.log("Cant recreate annotation: Type " + anno.type + " is forbidden");
+
+            // remove the old annotation
+            this.state.annos.splice(annoIndex, 1);
+
+            // create a new annotation based on the datapoints of the old annotation
+            var newAnno = {
+                id: anno.id,
+                type: anno.type,
+                data: anno.data,
+                mode: CREATE,
+                status: anno.status == 'database' ? CHANGED : NEW,
+                labelIds: anno.labelIds,
+                selectedNode: anno.data.length - 1,
+                annoTime: anno.annoTime
+            };
+
+            newAnno = this.startAnnotimeMeasure(newAnno);
+            this.setState({
+                annos: [].concat(_toConsumableArray$4(this.state.annos), [newAnno]),
+                selectedAnnoId: newAnno.id,
+                showSingleAnno: newAnno.id,
+                annoToolBarVisible: false
+            });
+
+            console.log("Annotation recreated");
+        }
     }, {
         key: 'putSelectedOnTop',
         value: function putSelectedOnTop(prevState) {
@@ -4882,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',
@@ -4928,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))) });
             }
         }
     }, {