lost-sia 1.2.0 → 2.0.0-alpha0

package/src/utils/transform.js

@@ -0,0 +1,318 @@
+export function toSia(data, image, type, imgOffset) {
+    switch (type) {
+        case 'bBox':
+            const w = image.width * data.w
+            const h = image.height * data.h
+            const x0 = imgOffset.x + image.width * data.x - w / 2.0
+            const y0 = imgOffset.y + image.height * data.y - h / 2.0
+            return [
+                {
+                    x: x0,
+                    y: y0
+                },
+                {
+                    x: x0 + w,
+                    y: y0
+                },
+                {
+                    x: x0 + w,
+                    y: y0 + h
+                },
+                {
+                    x: x0,
+                    y: y0 + h
+                }
+            ]
+        case 'point':
+            return [{
+                x: imgOffset.x + image.width * data.x,
+                y: imgOffset.y + image.height * data.y
+            }]
+        case 'line':
+        case 'polygon':
+            return data.map((e) => {
+                return {
+                    x: imgOffset.x + image.width * e.x,
+                    y: imgOffset.y + image.height * e.y
+                }
+            })
+        default:
+
+    }
+}
+
+/**
+ * Transform a sia annotation to backend format.
+ * 
+ * @param {Array} data Annotation data
+ * @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)
+ */
+export function toBackend(data, svg, type, imgOffset = { x: 0, y: 0 }) {
+    const imgWidth = svg.width - 2 * imgOffset.x
+    const imgHeight = svg.height - 2 * imgOffset.y
+    switch (type) {
+        case 'bBox':
+            // 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')
+            const xList = data.map(e => { return e.x })
+            const yList = data.map(e => { return e.y })
+            const minX = Math.min(...xList) - imgOffset.x
+            const maxX = Math.max(...xList) - imgOffset.x
+            const minY = Math.min(...yList) - imgOffset.y
+            const maxY = Math.max(...yList) - imgOffset.y
+            const w = maxX - minX
+            const h = maxY - minY
+            const x = minX + w / 2.0
+            const y = minY + h / 2.0
+            return {
+                x: x / imgWidth,
+                y: y / imgHeight,
+                w: w / imgWidth,
+                h: h / imgHeight
+            }
+        case 'point':
+            return {
+                x: (data[0].x - imgOffset.x) / imgWidth,
+                y: (data[0].y - imgOffset.y) / imgHeight
+            }
+        case 'line':
+        case 'polygon':
+            return data.map((e) => {
+                return {
+                    x: (e.x - imgOffset.x) / imgWidth,
+                    y: (e.y - imgOffset.y) / imgHeight
+                }
+            })
+        default:
+            console.warn("Wrong annotation type!")
+
+    }
+}
+
+export function getMinMaxPoints(data) {
+    const xList = data.map(e => { return e.x })
+    const yList = data.map(e => { return e.y })
+    const minPoint = { x: Math.min(...xList), y: Math.min(...yList) }
+    const maxPoint = { x: Math.max(...xList), y: Math.max(...yList) }
+    return [minPoint, maxPoint]
+}
+
+/**
+ * Get area relative to the image 
+ * 
+ * @param {Array} data Annotation data
+ * @param {*} scaledImg The scaled image object {width, height}
+ * @param {String} type Type of the annotation bBox, point, line, polygon
+ * @param {object} originalImg The original image
+ * @returns Area relative
+ */
+export function getArea(data, scaledImg, type, originalImg) {
+    const relData = toBackend(data, scaledImg, type)
+    switch (type) {
+        case 'bBox':
+            return Math.abs(relData.w * relData.h) * originalImg.width * originalImg.height
+        // return relData.w*relData.h
+        case 'line':
+        case 'point':
+            return undefined
+        case 'polygon':
+            let area = 0.0;         // Accumulates area in the loop
+            if (relData.length > 2) {
+                let j = relData.length - 1;  // The last vertex is the 'previous' one to the first
+
+                for (let i = 0; i < relData.length; i++) {
+                    area = area + (relData[j].x + relData[i].x) * (relData[j].y - relData[i].y);
+                    j = i;  //j is previous vertex to i
+                }
+            }
+            return Math.abs(area / 2) * originalImg.width * originalImg.height
+        default:
+            console.warn("Wrong annotation type!")
+            return undefined
+    }
+}
+
+export function move(data, movementX, movementY) {
+    return data.map(e => {
+        return {
+            x: e.x + movementX,
+            y: e.y + movementY
+        }
+    })
+}
+
+
+export function getBox(data, type) {
+
+    switch (type) {
+        case 'bBox':
+            return data
+        case 'point':
+        case 'line':
+        case 'polygon':
+            let maxX = 0
+            let maxY = 0
+            let minX = Infinity
+            let minY = Infinity
+            data.forEach(el => {
+                if (el.x > maxX) maxX = el.x
+                if (el.y > maxY) maxY = el.y
+                if (el.x < minX) minX = el.x
+                if (el.y < minY) minY = el.y
+            })
+            return [
+                { x: minX, y: minY }, { x: maxX, y: minY },
+                { x: minX, y: maxY }, { x: maxX, y: maxY }
+            ]
+        default:
+            break
+
+    }
+}
+
+export function getCenter(data, type) {
+    let box = undefined
+    switch (type) {
+        case 'point':
+            return data[0]
+        case 'line':
+        case 'polygon':
+        case 'bBox':
+            box = getBox(data, type)
+            const w = box[1].x - box[0].x
+            const h = box[3].y - box[0].y
+            return {
+                x: box[0].x + w / 2.0,
+                y: box[0].y + h / 2.0
+            }
+        default:
+
+    }
+}
+
+/**
+ * Get point that is closest to the left browser side.
+ * 
+ * @param {object} data list of points {x,y} 
+ * @returns {object} A list of point [{x,y}...]. Multiple points are
+ *  returned when multiple points have the same distance to the left side.
+ */
+export function getMostLeftPoint(data) {
+    let minX = Infinity
+    let minXList = []
+    data.forEach(el => {
+        if (el.x < minX) {
+            minX = el.x
+            minXList = []
+            minXList.push(el)
+        } else if (el.x === minX) {
+            minXList.push(el)
+        }
+    })
+    return minXList
+}
+
+/**
+ * Get point that is closest to the top of the browser.
+ * 
+ * @param {object} data list of points {x,y} 
+ * @returns {object} A list of point [{x,y}...]. Multiple points are
+ *  returned when multiple points have the same distance to the top.
+ */
+export function getTopPoint(data) {
+    let minY = Infinity
+    let minYList = []
+    data.forEach(el => {
+        if (el.y < minY) {
+            minY = el.y
+            minYList = []
+            minYList.push(el)
+        } else if (el.y === minY) {
+            minYList.push(el)
+        }
+    })
+    return minYList
+}
+
+/**
+ * Check if all nodes of an annotation are within the image. If not,
+ * correct the annotation
+ * @param {object} data 
+ * @param {object} image 
+ * @param {object} imageOffset 
+ */
+export function correctAnnotation(data, image, imageOffset) {
+    const imgWidth = image.width - 2 * imageOffset.x
+    const imgHeight = image.height - 2 * imageOffset.y
+    const corrected = data.map(el => {
+        let x = el.x
+        let y = el.y
+        if (el.x <= imageOffset.x) {
+            x = imageOffset.x
+        } else if (el.x > (imgWidth + imageOffset.x)) {
+            x = imgWidth + imageOffset.x
+        }
+        if (el.y < imageOffset.y) {
+            y = imageOffset.y
+        } else if (el.y > (imgHeight + imageOffset.y)) {
+            y = imgHeight + imageOffset.y
+        }
+        return { x: x, y: y }
+    })
+    return corrected
+}
+
+/**
+ * Rotate annotation around center.
+ * @param {*} data list of points {x:int,y:int} 
+ * @param {*} center Center to rotate point 
+ * @param {*} angle Rotation angle
+ */
+export function rotateAnnotation(data, center, angle) {
+    angle = (angle) * (Math.PI / 180); // Convert to radians
+    const rotated = data.map(point => {
+        return {
+            x: Math.round(Math.cos(angle) * (point.x - center.x) - Math.sin(angle) * (point.y - center.y) + center.x),
+            y: Math.round(Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y)
+        }
+    })
+    return rotated;
+}
+
+/**
+ * Resize annotation data in canvas format to new image size
+ * @param {*} data Annotation data in canvas format [{x:int, y:int},...]
+ * @param {*} sizeOld Size of old image {width:int, height:int}
+ * @param {*} sizeNew Size of new image {width:int, height:int}
+ */
+export function resizeAnnoData(data, sizeOld, sizeNew) {
+    const xRatio = sizeNew.width / sizeOld.width
+    const yRatio = sizeNew.height / sizeOld.height
+    return data.map(e => {
+        return {
+            x: parseInt(e.x * xRatio),
+            y: parseInt(e.y * yRatio)
+        }
+    })
+}
+
+export default {
+    toSia,
+    toBackend,
+    getMinMaxPoints,
+    getArea,
+    move,
+    getBox,
+    getCenter,
+    getMostLeftPoint,
+    getTopPoint,
+    correctAnnotation,
+    rotateAnnotation,
+    resizeAnnoData
+}

package/src/utils/uiConfig.js

@@ -0,0 +1,57 @@
+export const SIA_INITIAL_UI_CONFIG = {
+    nodeRadius: 4,
+    strokeWidth: 4,
+    annoDetails: {
+        visible: false
+    },
+    labelInfo: {
+        visible: false
+    },
+    annoStats: {
+        visible: false
+    }
+}
+
+// read sia-ui-config from localStorage 
+const iniFromStorage = localStorage.getItem('sia-ui-config') ? JSON.parse(localStorage.getItem('sia-ui-config')) : SIA_INITIAL_UI_CONFIG
+
+
+// collect object keys and its type in order to describe the object
+const collectDescription = (obj, array) => {
+    Object.keys(obj).forEach(key => {
+
+        const description = {
+            key: key,
+            type: typeof (obj[key])
+        }
+        array.push(description)
+
+        if (typeof obj[key] === 'object') {
+            collectDescription(obj[key], array)
+        }
+    })
+}
+
+// collect object description for ini and storage ui-config
+
+let iniObjectDescriptor = []
+let storageObjectDescriptor = []
+
+collectDescription(SIA_INITIAL_UI_CONFIG, iniObjectDescriptor)
+collectDescription(iniFromStorage, storageObjectDescriptor)
+
+
+// compare both object descriptions
+
+const getUiConfig = () => {
+    if (JSON.stringify(iniObjectDescriptor) === JSON.stringify(storageObjectDescriptor)) {
+        return iniFromStorage
+    }
+    else {
+        // ini description dif from storage: send ini ui-config and store it to local storage
+        return SIA_INITIAL_UI_CONFIG
+    }
+}
+
+export const uiConfig = getUiConfig()
+

package/src/utils/windowViewport.js

@@ -0,0 +1,35 @@
+export function getViewportCoordinates(w, svg){
+    const window = {
+        xMin:-1*svg.translateX,
+        xMax: -1*svg.translateX + (svg.width)/svg.scale,
+        yMin: -1*svg.translateY,
+        yMax: -1*svg.translateY + (svg.height)/svg.scale
+
+    }
+    const viewport = {
+        xMin: 0,
+        xMax: svg.width,
+        yMin: 0,
+        yMax: svg.height
+    }
+    const scaleX = (viewport.xMax - viewport.xMin)/ (window.xMax - window.xMin)
+    const scaleY = (viewport.yMax - viewport.yMin)/ (window.yMax - window.yMin)
+
+    const vX = viewport.xMin + (w.x - window.xMin) * scaleX
+    const vY = viewport.yMin + (w.y - window.yMin) * scaleY
+    return {window, viewport, vX, vY, scaleX, scaleY}
+}
+
+/**
+ * 
+ * @param {*} w0 Point in image coordinate system
+ * @param {*} svg Svg with old translation values and old scales
+ * @param {*} s1 New scale/zoom
+ */
+export function getZoomTranslation(w0, svg, s1){
+    const s0 = svg.scale
+    let translation = {x:0,y:0}
+    translation.x = (s0/s1) * (w0.x + svg.translateX) - w0.x 
+    translation.y = (s0/s1) * (w0.y + svg.translateY) - w0.y 
+    return translation
+}

package/CHANGELOG.md

@@ -1,163 +0,0 @@
-# Changelog
-All notable changes to this project will be documented in this file.
-
-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).
-
-## [1.2.0] - 2022-05-12
-### Added
-- Added preventScrolling prop onMouseEnter in canvas 
-
-## [1.1.3] - 2022-05-12
-### Changed
-- Move import of semantic-ui-css into index js
-
-## [1.1.2] - 2022-05-12
-### Added
-- Sia dummy data for quick testing
-### Changed
-- Moved semantic ui css into sia component
-### Fixed
-- Toolbar: Do not crash if no filter props is provided
-
-## [1.1.1] - 2022-05-11
-### Changed
-- Update sematic-ui-react to version 2.0.3
-
-## [1.1.0] - 2022-05-10
-### Added
-- More fine grained visibility level for toolbar elements
-
-## [1.0.3] - 2022-05-10
-### Fixed
-- Export of toolbarEvents and tools
-
-## [1.0.2] - 2022-05-09
-### Fixed
-- Improved internal uiConfig handling
-
-## [1.0.1] - 2022-05-06
-### Fixed 
-- Export of Sia and other components
-
-## [1.0.0] - 2022-05-06
-### Added
-- Possibility to assign comments to 2D-Annotations
-- InfoBox (AnnoStats) that shows the number of annotations per label (see https://github.com/l3p-cv/lost/issues/86 and https://github.com/l3p-cv/lost/issues/160)
-  - When clicking on a label in the InfoBox all annotations of this label will be hidden. Anothter click will show the annotations again. (see also https://github.com/l3p-cv/lost/issues/161)
-- Added auto save feature
-- Anno Example Viewer + Image Example in LabelInfo box
-### Changed
-- Move InfoBoxes to Canvas
-### Breaking Change
-- Restructured props and event handling for canvas and toolbar
-- Created new Sia component
-### Fixed 
-  - Fixed correctAnnotation method to work correctly in maxCanvas mode
-  - Will prevent annotations from being created outside of the image
-
-## [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
-## [0.5.1] - 2021-04-17
-### Fixed
-- Prevent to crash when hitting delete and no annotation was selected
-- Prevent to crash when no AnnoRef was found
-
-## [0.5.0] - 2021-01-04
-### Added
-- Added onAnnoPerformedAction callback to canvas
-### Changed
-- Removed all logs
-
-## [0.4.1] - 2020-12-16
-### Changed
-- Do not unload image when props.annos change 
-
-## [0.4.0] - 2020-12-16
-### Added
-- A possible label can now be selected as default label by id
-- Added maxAnnos to canvasConfig. This allows to define a maximum number of annotations that are allowed per image.
-
-## [0.3.0] - 2020-12-11
-### Added
-- Frontend annotation time measurement 
-  * Annotation time is now measured in frontend, based on user events. For each annotation individual user interaction time is measured. 
-- Delete last node of polygon/ line when hitting delete key in create mode
-- Added copy & paste for annotations
-- Added prop to block canvas
-### Fixed
-- Do not lose polygon annotation when hitting enter in create mode
-- Do not allow to draw a polygon consisting of two points
-- Do not collapse line with two points, when confirming with enter
-
-## [0.2.2] - 2020-08-06
-### Fixed
-- Do not clutter background through sia css file, when importing sia canvas component
-  
-## [0.2.1] - 2020-06-20
-### Fixed
-- Fixed multiple image load events for the same image, that lead to wrong svg sizes
-
-## [0.2.0] - 2020-06-05
-### Fixed 
-- Added camera move on wasd keys
-- Provide canvas key events via prop callback
-### Changed
-- Show annotation nodes in foreground and label above annotation to prevent that nodes are not accessible by the annotator (see https://github.com/l3p-cv/lost/issues/74)
-
-## [0.1.2] - 2020-04-06
-### Removed
-- Removed most sia logs that clutter the console
-  
-## [0.1.1] - 2020-04-06
-### Fixed
-- Fixed undefined possible labels in canvas
-   
-## [0.1.0] - 2020-04-06
-### Added
-- Always reset annotation mode to *view* when getAnnoBackendFormat is called
-- Delete annotation in sia canvas correctly, when they are moved out of the image.
-- Prevent user from moving image out of canvas
-- Confirm label in LabelInput by click on the respective label
-- Configure name of the default Label by a prop 
-- Provide method to reset canvas zoom
-- It is now possible to define custom label colors via canvas *possibleLabels* props 
-
-### Fixed
-- Fixed jumping camera when zooming into the image
-- Fixed LabelInput on wrong position when image was zoomed
-
-## [0.0.2] - 2020-04-02
-### Fixed
-- Fixed crash on changing image when label input is active.
-
-## [0.0.1] - 2020-04-01
-### Fixed 
-- Fixed all annotations lost bug. (see also https://github.com/l3p-cv/lost/issues/51)
-  * When a new annotation was created and deleted before a backend update was performed, SIA sent this annotation to backend for an db update
-  * The backend then tried to update a db record that did not exists which caused an exception.
-  * The result was that all annotation where lost