lost-sia 1.2.0 → 2.0.0-alpha0

package/src/types/notificationType.js

@@ -0,0 +1,4 @@
+export const INFO='info'
+export const SUCCESS='success'
+export const WARNING='warning'
+export const ERROR='error'

package/src/types/toolbarEvents.js

@@ -0,0 +1,33 @@
+export const TOOL_SELECTED = 'toolSelected'
+export const GET_NEXT_IMAGE = 'getNextImage'
+export const GET_PREV_IMAGE = 'getPrevImage'
+export const TASK_FINISHED = 'taskFinished'
+export const SHOW_IMAGE_LABEL_INPUT = 'showImageLabelInput'
+export const IMG_IS_JUNK = 'imageIsJunk'
+export const DELETE_ALL_ANNOS = 'deleteAllAnnos'
+export const SET_FULLSCREEN = 'setFullscreen'
+export const SHOW_ANNO_DETAILS = 'showAnnoDetails'
+export const SHOW_LABEL_INFO = 'showLabelInfo'
+export const SHOW_ANNO_STATS = 'showAnnoStats'
+export const EDIT_STROKE_WIDTH = 'editStrokeWidth'
+export const EDIT_NODE_RADIUS = 'editNodeRadius'
+export const APPLY_FILTER = 'applyFilter'
+export const SAVE = 'save'
+
+export default {
+    TOOL_SELECTED,
+    GET_NEXT_IMAGE,
+    GET_PREV_IMAGE,
+    TASK_FINISHED,
+    SHOW_IMAGE_LABEL_INPUT,
+    IMG_IS_JUNK,
+    DELETE_ALL_ANNOS,
+    SET_FULLSCREEN,
+    SHOW_ANNO_DETAILS,
+    SHOW_LABEL_INFO,
+    SHOW_ANNO_STATS,
+    EDIT_STROKE_WIDTH,
+    EDIT_NODE_RADIUS,
+    APPLY_FILTER,
+    SAVE
+}

package/src/types/tools.js

@@ -0,0 +1,11 @@
+export const POINT = 'point'
+export const BBOX = 'bBox'
+export const LINE = 'line'
+export const POLYGON = 'polygon'
+
+export default {
+    POINT,
+    BBOX,
+    LINE,
+    POLYGON
+}

package/src/utils/annoConversion.js

@@ -0,0 +1,115 @@
+import * as transform from './transform'
+import * as annoStatus from '../types/annoStatus'
+import * as modes from '../types/modes'
+import _ from 'lodash'
+
+function _fixBackendAnnoElement(element) {
+    return {
+        ...element,
+        id: element.id ? element.id : _.uniqueId('new'),
+        annoTime: element.annoTime ? element.annoTime : 0.0,
+        mode: element.mode ? element.mode : modes.VIEW,
+        status: element.status ? element.status : annoStatus.DATABASE,
+        labelIds: element.labelIds ? element.labelIds : []
+    }
+}
+
+export function fixBackendAnnos(backendAnnos) {
+    let annos = {
+        bBoxes: [...backendAnnos.bBoxes.map((element) => {
+            return _fixBackendAnnoElement(element)
+        })],
+        lines: [...backendAnnos.lines.map((element) => {
+            return _fixBackendAnnoElement(element)
+        })],
+        polygons: [...backendAnnos.polygons.map((element) => {
+            return _fixBackendAnnoElement(element)
+        })],
+        points: [...backendAnnos.points.map((element) => {
+            return _fixBackendAnnoElement(element)
+        })],
+    }
+    console.log('fixBackendAnnos', annos)
+    return annos
+}
+
+export function backendAnnosToCanvas(backendAnnos, imgSize, imgOffset) {
+    let annos = [
+        ...backendAnnos.bBoxes.map((element) => {
+            return {
+                ...element, type: 'bBox',
+                mode: element.mode ? element.mode : modes.VIEW,
+                status: element.status ? element.status : annoStatus.DATABASE
+            }
+        }),
+        ...backendAnnos.lines.map((element) => {
+            return {
+                ...element, type: 'line',
+                mode: element.mode ? element.mode : modes.VIEW,
+                status: element.status ? element.status : annoStatus.DATABASE
+            }
+        }),
+        ...backendAnnos.polygons.map((element) => {
+            return {
+                ...element, type: 'polygon',
+                mode: element.mode ? element.mode : modes.VIEW,
+                status: element.status ? element.status : annoStatus.DATABASE
+            }
+        }),
+        ...backendAnnos.points.map((element) => {
+            return {
+                ...element, type: 'point',
+                mode: element.mode ? element.mode : modes.VIEW,
+                status: element.status ? element.status : annoStatus.DATABASE
+            }
+        })
+    ]
+    annos = annos.map((el) => {
+        return {
+            ...el,
+            data: transform.toSia(el.data, imgSize, el.type, imgOffset)
+        }
+    })
+    // this.setState({annos: [...annos]})
+    return annos
+}
+
+export function canvasToBackendSingleAnno(anno, imgSize, removeFrontedId = false, imgOffset = { x: 0, y: 0 }) {
+    var annoId
+    if (removeFrontedId) {
+        // If an annotation will be send to backend,
+        // ids of new created annoations need to be set to 
+        // undefined.
+        annoId = (typeof anno.id) === "string" ? undefined : anno.id
+    } else {
+        annoId = anno.id
+    }
+    return {
+        ...anno,
+        id: annoId,
+        mode: modes.VIEW,
+        data: transform.toBackend(anno.data, imgSize, anno.type, imgOffset)
+    }
+}
+
+export function canvasToBackendAnnos(annos, imgSize, forBackendPost = false, imgOffset = { x: 0, y: 0 }) {
+    let myAnnos = annos
+    const bAnnos = myAnnos.map(el => {
+        return canvasToBackendSingleAnno(el, imgSize, forBackendPost, imgOffset)
+    })
+
+    const backendFormat = {
+        bBoxes: bAnnos.filter((el) => { return el.type === 'bBox' }),
+        lines: bAnnos.filter((el) => { return el.type === 'line' }),
+        points: bAnnos.filter((el) => { return el.type === 'point' }),
+        polygons: bAnnos.filter((el) => { return el.type === 'polygon' }),
+    }
+    return backendFormat
+}
+
+export default {
+    fixBackendAnnos,
+    backendAnnosToCanvas,
+    canvasToBackendSingleAnno,
+    canvasToBackendAnnos
+}

package/src/utils/colorlut.js

@@ -0,0 +1,67 @@
+// const colors30 = ["#dc9769",
+// "#5c69d6",
+// "#51a630",
+// "#9a59cc",
+// "#a1bb37",
+// "#c043a6",
+// "#5fc666",
+// "#de4282",
+// "#58c699",
+// "#d2404e",
+// "#42c0c7",
+// "#d95130",
+// "#598cdd",
+// "#df8830",
+// "#50a2d1",
+// "#c8a73f",
+// "#d87ed5",
+// "#3e7f38",
+// "#af94d8",
+// "#7b8b2d",
+// "#635ea2",
+// "#a1b56d",
+// "#a93e62",
+// "#3e8d68",
+// "#df82ab",
+// "#616c2c",
+// "#955282",
+// "#91692d",
+// "#d47776",
+// "#a94e2c"]
+
+const colors20 = ["#46aed7",
+"#e28f81",
+"#50b897",
+"#88712f",
+"#9cb067",
+"#a4527d",
+"#a55046",
+"#6e90da",
+"#487b3b",
+"#6360a7",
+"#cd8fd3",
+"#d5a442",
+"#cf7635",
+"#da4971",
+"#a4b137",
+"#d44da4",
+"#aa54be",
+"#5ab74d",
+"#7166d9",
+"#d14734"]
+
+const colors = colors20
+const nColors = 20
+
+export function getColor(n){
+    if (n){
+        return colors[n%nColors]
+    }
+    else{
+        return getDefaultColor()    
+    }
+}
+
+export function getDefaultColor(){
+    return colors[0]
+}

package/src/utils/constraints.js

@@ -0,0 +1,75 @@
+import * as annoStatus from '../types/annoStatus'
+
+    /**
+     * Check if labels can be changed for a specific annotation
+     * 
+     * @param allowedActions Actions that are allowed, read from config
+     * @param anno Annotation that should be checked
+     * @returns {Boolean}
+     */
+    export function allowedToLabel(allowedActions, anno){
+        if (allowedActions.label){
+            return true
+            // const status = anno.status
+            // if (!status) return true
+            // if (status !== annoStatus.NEW){
+            //     if (allowedActions.edit.label){
+            //         return true
+            //     } else {
+            //         console.warn('You may not edit the label of this annotation as defined by config!', anno)
+            //         return false
+            //     }
+            // } else {
+            //     // Return always true if labeling is allowed in general
+            //     // and annotation was not edited (it was NEW)
+            //     return true
+            // }
+        } else {
+            console.warn('You may not edit the label of this annotation as defined by config!', anno)
+            return false
+        }
+    }
+
+    // /**
+    //  * Check if config allows to delete a specific annotation.
+    //  * 
+    //  * @param allowedActions Actions that are allowed, read from config
+    //  * @param anno Annotation that should be checked
+    //  * @returns {Boolean}
+    //  */
+    // export function allowedToDelete(allowedActions, anno){
+    //     const status = anno.status
+    //     if (!status) return true
+    //     if (status !== annoStatus.NEW){
+    //         if(allowedActions.edit.delete){
+    //             return true
+    //         } else {
+    //             console.warn('You may not delete this annotation as defined by config!', anno)
+    //             return false
+    //         }
+    //     } else {
+    //         return true
+    //     }
+    // }
+
+    /**
+     * Check if config allows to edit a specific annotation.
+     * 
+     * @param allowedActions Actions that are allowed, read from config
+     * @param anno Annotation that should be checked
+     * @returns {Boolean}
+     */
+    export function allowedToEdit(allowedActions, anno){
+        const status = anno.status
+        if (!status) return true
+        if (status !== annoStatus.NEW){
+            if(allowedActions.edit){
+                return true
+            } else {
+                console.warn('You may not edit bounds of this annotation as defined by config!', anno)
+                return false
+            }
+        } else {
+            return true
+        }
+    }

package/src/utils/hist.js

@@ -0,0 +1,67 @@
+class UndoRedo{
+    constructor(maxElements=100){
+        this.hist = []
+        this.pointer = 0
+        this.maxElements = maxElements
+    }
+
+    push(entry, description='No description'){
+        const histEl = {
+            entry,
+            description
+        }
+        if (this.pointer !== 0){
+            while (this.pointer !== 0){
+                this.pointer--
+                this.hist.shift()
+            }
+        }
+        this.hist.unshift(histEl)
+        if (this.hist.length > this.maxElements){
+            this.hist.pop()
+        }
+    }
+
+    undo(){
+        if (this.pointer+1 < this.hist.length){
+            // const element = 
+            this.pointer++
+            return this.hist[this.pointer]
+        } else {
+            return this.hist[this.hist.length-1]
+        }
+    }
+
+    undoMia(){
+        if (this.pointer+1 < this.hist.length){
+            this.pointer++
+            return this.hist[this.pointer-1] 
+        } else {
+                return this.hist[this.hist.length-1]
+            }
+    }
+
+    redo(){
+        if (this.pointer-1 >= 0){
+            this.pointer--
+            return this.hist[this.pointer]
+        } else {
+            return this.hist[0]
+        }
+    }
+
+    getHist(){
+        return this.hist
+    }
+
+    clearHist(){
+        this.hist = []
+    }
+
+    isEmpty(){
+        return this.hist.length === 0
+    }
+
+}
+
+export default UndoRedo

package/src/utils/keyActions.js

@@ -0,0 +1,107 @@
+export const EDIT_LABEL='editLabel'
+export const DELETE_ANNO='deleteAnno'
+export const ENTER_ANNO_ADD_MODE='enterAnnoAddMode'
+export const LEAVE_ANNO_ADD_MODE='leaveAnnoAddMode'
+export const UNDO='undo'
+export const REDO='redo'
+export const TRAVERSE_ANNOS='traverseAnnos'
+export const CAM_MOVE_UP='camMoveUp'
+export const CAM_MOVE_DOWN='camMoveDown'
+export const CAM_MOVE_LEFT='camMoveLeft'
+export const CAM_MOVE_RIGHT='camMoveRight'
+export const CAM_MOVE_STOP='camMoveStop'
+export const COPY_ANNOTATION='copyAnnotation'
+export const PASTE_ANNOTATION='pasteAnnotation'
+export const RECREATE_ANNO='recreateAnnotation'
+export const DELETE_ANNO_IN_CREATION='deleteAnnoInCreation'
+export const TOGGLE_ANNO_COMMENT_INPUT='toggleAnnoCommentInput'
+
+class KeyMapper{
+    constructor(keyActionHandler=undefined){
+        this.controlDown = false
+        this.keyActionHandler = keyActionHandler
+    }
+
+    keyDown(key){
+        switch (key){
+            case 'Enter':
+                this.triggerKeyAction(EDIT_LABEL)
+                break
+            case 'Delete':
+                this.triggerKeyAction(DELETE_ANNO)
+                break
+            case 'Backspace':
+                this.triggerKeyAction(DELETE_ANNO)
+                break
+            case 'Control':
+                this.controlDown = true
+                this.triggerKeyAction(ENTER_ANNO_ADD_MODE)
+                break
+            case 'z':
+                if (this.controlDown){
+                    this.triggerKeyAction(UNDO)
+                }
+                break
+            case 'r':
+                if (this.controlDown){
+                    this.triggerKeyAction(REDO)
+                }
+                break
+            case 'Tab':
+                this.triggerKeyAction(TRAVERSE_ANNOS)
+                break
+            case 'w':
+                this.triggerKeyAction(CAM_MOVE_UP)
+                break
+            case 's':
+                this.triggerKeyAction(CAM_MOVE_DOWN)
+                break
+            case 'a':
+                this.triggerKeyAction(CAM_MOVE_LEFT)
+                break
+            case 'd':
+                this.triggerKeyAction(CAM_MOVE_RIGHT)
+                break
+            case 'e':
+                this.triggerKeyAction(RECREATE_ANNO)
+                break
+            case 'c':
+                if (this.controlDown){
+                    this.triggerKeyAction(COPY_ANNOTATION)
+                } else {
+                    this.triggerKeyAction(TOGGLE_ANNO_COMMENT_INPUT)
+                }
+                break
+            case 'v':
+                if (this.controlDown){
+                    this.triggerKeyAction(PASTE_ANNOTATION)
+                }
+                break
+            case 'Escape':
+                this.triggerKeyAction(DELETE_ANNO_IN_CREATION)
+                break
+            default:
+                break
+        }
+    }
+
+    keyUp(key){
+        switch (key){
+            case 'Control':
+                this.controlDown = false
+                this.triggerKeyAction(LEAVE_ANNO_ADD_MODE)
+                break
+            default:
+                break
+        }
+    }
+
+    triggerKeyAction(keyAction){
+        if (this.keyActionHandler){
+            this.keyActionHandler(keyAction)
+        }
+    }
+
+}
+
+export default KeyMapper

package/src/utils/mouse.js

@@ -0,0 +1,14 @@
+export function getMousePosition(e, svg){
+  const absPos = getMousePositionAbs(e, svg)
+  return {
+      x: (absPos.x )/svg.scale - svg.translateX,
+      y: (absPos.y )/svg.scale - svg.translateY
+  }
+}
+
+export function getMousePositionAbs(e, svg){
+  return {
+      x: (e.pageX - svg.left),
+      y: (e.pageY - svg.top)
+  }
+}

package/src/utils/siaIcons.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+
+export function textIcon(){
+    return <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
+          // x="0px" y="0px"
+          // width="1190.549px" height="841.891px" 
+          viewBox="0 0 1190.549 841.891" 
+          width="17px"
+          // onClick={e => this.handleClick(e)}
+        >
+            <path id="T" fillRule="evenodd" clipRule="evenodd" fill="currentColor" d="M925.876,172.939c-0.172-13.004,0.161-26.013,0.116-39.019
+                c-0.021-4.017-5.046-9.053-9.037-9.087c-7.948-0.068-15.897-0.051-23.848-0.051c-73.526,0.006-147.051,0.02-220.578,0.032
+                c-8.095,0.001-11.969,3.776-11.969,11.742c-0.009,154.998-0.009,309.997-0.009,464.998c0,44.257-0.002,88.519,0.009,132.778
+                c0,7.553,4.173,11.736,11.651,11.747c21.677,0.018,30.288-0.227,65.032,0.018c34.743,0.239,46.295,27.955,46.295,46.43
+                c-0.005,18.477-13.856,42.722-46.792,43.747c-42.993,0.197-85.989-0.057-128.979-0.05c-47.697,0.014-95.387,0.009-143.078,0.074
+                c-13.712-0.278-44.888-9.133-44.888-44.159c0-35.025,20.399-44.646,42.975-46.192c16.293,0.115,45.164,0.179,67.743,0.16
+                c5.553-0.006,10.175-5.03,10.178-11.005c0.008-45.524-0.016-91.049-0.018-136.569c0-99.001,0-197.997,0.008-296.994
+                c0.001-55.278,0.018-110.559,0.007-165.837c0-6.513-4.521-10.917-11.118-10.917c-81.116-0.005-162.229-0.005-243.34-0.001
+                c-6.977,0-11.061,3.995-11.069,10.825c-0.016,12.286-0.033,24.569,0.019,36.855c-0.076,20.742-10.042,43.007-40.763,43.007
+                c-30.724,0-46.917-15.208-48.805-43.296c-0.419-14.084,0.01-28.181,0.01-42.272c0-27.46,0-54.917,0-82.379
+                c0-1.048,0.747-16.871,13.391-30.357c12.642-13.485,26.225-12.505,27.633-12.505c84.544,0.015,169.091,0.009,253.635,0.009
+                c153.191,0.001,459.578,0.004,459.578,0.004s20.149-0.287,35.766-0.17c0.983-0.023,18.696,1.188,30.027,13.07
+                c11.333,11.885,9.972,27.513,9.972,28.256c-0.024,42.091,0.255,84.183-0.007,126.274c-0.247,26.341-22.705,41.944-44.85,42.037
+                C948.049,214.236,926.687,199.643,925.876,172.939z"/>
+        </svg>
+}
+
+export function lineIcon(){
+    return (
+        <svg version="1.1" id="Linie" xmlns="http://www.w3.org/2000/svg"
+            // xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            viewBox="0 0 1190.549 841.891" 
+            width="17px"
+            // enable-background="new 0 0 1190.549 841.891"
+            // xml:space="preserve"
+            >
+            <path fill="currentColor" d="M986.331,109.582c7.141-10.669,28.926-51.179-2.968-85.299S891.011,8.972,891.011,8.972L539.125,133.474
+                L63.239,302.022c-21.503,7.998-53.586,30.072-60.956,61.716s-2.116,58.538,22.414,96.79S211.33,752.213,228.564,777.28
+                c26.453,36.868,62.16,58.042,105.507,57.154s365.665-7.485,365.665-7.485l331.7-8.325l89.453-2.293c0,0,70.998-7.179,69.861-60.287
+                c-1.135-53.108-74.618-62.721-74.618-62.721s-733.215,15.553-749.148,15.576c-22.688,0.201-45.355-15.278-54.146-28.928
+                s-175.79-272.956-175.79-272.956l600.587-212.338c0,0-73.179,67.087-99.315,100.041s-30.56,74.565-5.053,95.237
+                c31.188,24.081,91.974-3.708,123.127-39.312C782.35,323.912,979.191,120.251,986.331,109.582z"/>
+        </svg>
+        )
+}
+
+export function bBoxIcon(){
+    return (
+        <svg version="1.1" id="Linie" xmlns="http://www.w3.org/2000/svg"
+            // xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            viewBox="0 0 1190.549 841.891" 
+            width="17px"
+            // enable-background="new 0 0 1190.549 841.891"
+            // xml:space="preserve"
+            >
+            <path fill="none" stroke="currentColor" strokeWidth="120" strokeMiterlimit="10" d="M929.775,710.655
+                c0,23.386-19.134,42.52-42.52,42.52H278.991c-23.386,0-42.52-19.134-42.52-42.52V102.392c0-23.386,19.134-42.52,42.52-42.52
+                h608.264c23.386,0,42.52,19.134,42.52,42.52V710.655z"/>
+        </svg>
+    )
+}
+
+export function polygonIcon(){
+    return (
+        <svg version="1.1" id="Linie" xmlns="http://www.w3.org/2000/svg"
+            // xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            viewBox="0 0 1190.549 841.891" 
+            width="17px"
+            // enable-background="new 0 0 1190.549 841.891"
+            // xml:space="preserve"
+            >
+            <path fill="none" stroke="currentColor" strokeWidth="120" strokeMiterlimit="10" d="M342.327,769.938
+                c-23.379,0.548-52.922-15.056-65.65-34.674L65.479,409.738c-12.729-19.619-5.085-41.998,16.984-49.732L917.331,67.421
+                c22.07-7.734,26.86-0.275,10.645,16.576L691.761,329.475c-16.216,16.852-14.503,42.542,3.807,57.092l425.212,337.901
+                c18.31,14.549,14.16,26.901-9.219,27.449L342.327,769.938z"/>
+        </svg>
+    )
+}
+
+export function pointIcon(){
+    return (
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
+            // x="0px" y="0px"
+            // width="1190.549px" height="841.891px" 
+            viewBox="0 0 1190.549 841.891" 
+            width="17px"
+        >
+            <path fill="currentColor" d="M748.197,408.286c0,151.355-122.699,274.058-274.059,274.058c-151.357,0-274.057-122.703-274.057-274.058
+                c0-151.356,122.7-274.057,274.057-274.057C625.497,134.229,748.197,256.929,748.197,408.286z"/>
+        </svg>
+    )
+}