lost-sia 1.2.0 → 2.0.0-alpha0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Jonas Jäger & Gereon Reus.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/package.json

@@ -1,63 +1,76 @@
 {
   "name": "lost-sia",
-  "version": "1.2.0",
-  "description": "Single Image Annotation Tool for LOST",
-  "author": "l3p-cv",
+  "version": "2.0.0-alpha0",
+  "description": "Single Image Annotation Tool",
   "license": "MIT",
-  "repository": "l3p-cv/lost",
+  "repository": "l3p-cv/lost-sia",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
+  "type": "module",
+  "keywords": [
+    "lost",
+    "annotation",
+    "image annotation",
+    "react annotation tool"
+  ],
   "engines": {
-    "node": ">=8",
-    "npm": ">=5"
+    "node": ">=18",
+    "npm": ">=8"
   },
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    }
+  },
+  "files": [
+    "src"
+  ],
   "scripts": {
-    "test": "cross-env CI=1 react-scripts test --env=jsdom",
-    "test:watch": "react-scripts test --env=jsdom",
-    "build": "rollup -c",
-    "start": "rollup -c -w",
-    "prepare": "npm run build"
+    "build": "vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "publishpkg": "npm publish",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@coreui/react": "^5.0.0",
+    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-draggable": "^4.4.6",
+    "sass": "^1.77.1",
+    "semantic-ui-css": "2.5.0",
+    "semantic-ui-react": "^2.0.3"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.4",
-    "react": "^15.0.0 || ^16.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0",
     "lodash": "^4.17.15",
-    "semantic-ui-react": "^2.0.3"
+    "prop-types": "^15.5.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@svgr/rollup": "^2.4.1",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^8.2.5",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "cross-env": "^5.1.4",
-    "eslint": "^5.0.1",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
-    "eslint-plugin-import": "^2.13.0",
-    "eslint-plugin-node": "^7.0.1",
-    "eslint-plugin-promise": "^4.0.0",
-    "eslint-plugin-react": "^7.10.0",
-    "eslint-plugin-standard": "^3.1.0",
-    "gh-pages": "^1.2.0",
-    "node-sass": "^4.13.1",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
-    "rollup": "^0.64.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
-    "rollup-plugin-scss": "^2.1.0",
-    "rollup-plugin-url": "^1.4.0"
+    "@vitejs/plugin-react": "^4.3.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.0.1",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-config-standard-react": "^13.0.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-standard": "^5.0.0",
+    "glob": "^10.4.1",
+    "vite": "^5.2.12",
+    "vitest": "^1.6.0"
   },
-  "files": [
-    "dist"
-  ]
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended",
+      "plugin:storybook/recommended"
+    ]
+  }
 }

package/src/AnnoExampleViewer.jsx

@@ -0,0 +1,57 @@
+import Prompt from './Prompt'
+import React from 'react'
+import { Card, Divider, Header, Image } from 'semantic-ui-react'
+
+const LabelExampleViewer = (props) => {
+
+    const requestExample = (e) => {
+        e.stopPropagation()
+        if (props.onRequestExample){
+            props.onRequestExample()
+        }
+    }
+    const renderContent = () => {
+        if (!props.lbl) return null
+        if (!props.exampleImg) return null
+        const description = <div>
+              {/* <Divider horizontal> Description </Divider> */}
+            {props.lbl.description}
+              <Divider horizontal> comment </Divider>
+            { props.exampleImg.anno ? props.exampleImg.anno.comment : "no comment" }
+        </div>
+        return <div>
+            <Card 
+                
+                // image={props.exampleImg.img}
+                // description={props.lbl.description}
+                // header={props.lbl.label}
+                // // description={props.exampleImg.anno.comment}
+                // extra={props.exampleImg.anno.comment}
+            >
+                <Image onClick={(e) => requestExample(e)} src={props.exampleImg.img} wrapped ui={false} />
+                <Card.Content>
+                <Card.Header >{props.lbl.label}</Card.Header>
+                {/* <Card.Description>{props.lbl.description}</Card.Description> */}
+                <Card.Description>{description}</Card.Description>
+                {/* <Card.Description>{props.exampleImg.anno.comment}</Card.Description> */}
+                </Card.Content>
+            </Card>
+            {/* <Header inverted>{props.lbl.label}</Header>
+            {props.lbl.description}
+            <Image src={props.exampleImg.img} centered size='medium'></Image> */}
+        </div>
+    }
+
+    const handlePromptClick = () => {
+        if (props.onClose){
+            props.onClose()
+        }
+    }
+
+    return <Prompt onClick={() => {handlePromptClick()}}
+            active={props.active} content={renderContent()} 
+        />
+
+}
+
+export default LabelExampleViewer

package/src/AnnoLabelInput.jsx

@@ -0,0 +1,99 @@
+import React, { Component } from 'react'
+import LabelInput from './LabelInput'
+import * as constraints from './utils/constraints'
+import * as annoStatus from './types/annoStatus'
+
+class AnnoLabelInput extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            top: 400,
+            left: 100,
+            label: undefined,
+            visibility: 'hidden',
+            possibleLabels: []
+        }
+        this.inputGroupRef = React.createRef()
+    }
+
+    componentWillMount() {
+        this.setPosition()
+    }
+
+    componentDidUpdate(prevProps) {
+        if (this.props.visible) {
+            this.setPosition()
+        }
+
+
+    }
+
+    /*************
+     * LOGIC     *
+     *************/
+    setPosition() {
+
+        if (this.props.mousePos) {
+            const top = this.props.mousePos.y + this.props.svg.top - 10
+            const left = this.props.mousePos.x + this.props.svg.left - 10
+            if (this.state.top !== top || this.state.left !== left) {
+                this.setState({
+                    top: top,
+                    left: left,
+                })
+            }
+        }
+    }
+
+    onClose() {
+        if (this.props.onClose) {
+            this.props.onClose()
+        }
+    }
+
+    annoLabelUpdate(anno) {
+        if (this.props.onLabelUpdate) {
+            this.props.onLabelUpdate(anno)
+        }
+    }
+
+    updateAnnoLabel(label) {
+        if (!constraints.allowedToLabel(
+            this.props.allowedActions, this.props.selectedAnno)) return
+        this.annoLabelUpdate({
+            ...this.props.selectedAnno,
+            labelIds: label,
+            status: this.props.selectedAnno.status !== annoStatus.NEW ? annoStatus.CHANGED : annoStatus.NEW
+        })
+    }
+
+
+    /*************
+     * RENDERING *
+    **************/
+    render() {
+        if (!this.props.visible) return null
+        return (
+            <div ref={this.inputGroupRef} style={{ position: 'fixed', top: this.state.top, left: this.state.left }}>
+                <LabelInput svg={this.props.svg}
+                    onClose={() => this.onClose()}
+                    initLabelIds={this.props.selectedAnno.labelIds}
+                    relatedId={this.props.selectedAnno.id}
+                    visible={this.props.visible}
+                    onLabelUpdate={label => this.updateAnnoLabel(label)}
+                    possibleLabelsProp={this.props.possibleLabels}
+                    multilabels={this.props.multilabels}
+                    disabled={!this.props.allowedActions.label}
+                    renderPopup
+                    focusOnRender
+                    open={true}
+                    defaultLabel={this.props.defaultLabel}
+                />
+            </div>
+        )
+    }
+
+}
+
+export default AnnoLabelInput

package/src/AnnoToolBar.jsx

@@ -0,0 +1,132 @@
+import React, {Component} from 'react'
+
+import * as transform from './utils/transform'
+
+class AnnoToolBar extends Component{
+
+    constructor(props){
+        super(props)
+        this.state = {
+            top: 400,
+            left: 100,
+            width: 50,
+            label: undefined,
+            visibility: 'hidden',
+            possibleLabels: []
+        }
+        this.inputGroupRef = React.createRef()
+    }
+
+    componentWillMount(){
+        this.setPosition()
+    }
+    
+    componentDidUpdate(prevProps){
+        if (this.props.visible){
+            this.setPosition()
+        } 
+
+        
+    }
+
+    /*************
+     * LOGIC     *
+     *************/
+    setPosition(){
+        if (this.props.selectedAnno){
+            // const center = transform.getCenter(this.props.selectedAnno.data, this.props.selectedAnno.type)
+            // const annoBox = transform.getBox(this.props.selectedAnno.data, this.props.selectedAnno.type)
+            let topPoint = transform.getTopPoint(this.props.selectedAnno.data)
+            topPoint = transform.getMostLeftPoint(topPoint)[0]
+            const inputRect = this.inputGroupRef.current.getBoundingClientRect()
+            let top = this.props.svg.top + (topPoint.y + this.props.svg.translateY) *this.props.svg.scale - 44
+            let left = this.props.svg.left + (topPoint.x + this.props.svg.translateX) *this.props.svg.scale - inputRect.width /2.0 - 1
+            // if (left < this.props.svg.left) left = this.props.svg.left
+            // if (left+inputRect.width > this.props.svg.left+this.props.svg.width){
+            //     left = this.props.svg.left+this.props.svg.width - inputRect.width
+            // }
+            if (top < 0) top = this.props.svg.top + (topPoint.y + this.props.svg.translateY + 10) *this.props.svg.scale 
+            if (this.state.top !== top || this.state.left !== left){  
+                this.setState({
+                    top,
+                    left,
+                    // width: annoBox[1].x - annoBox[0].x
+                })
+            }
+        }
+    }
+
+    onClose(){
+        if (this.props.onClose){
+            this.props.onClose()
+        }
+    }
+
+    handleClick(e){
+        if (this.props.onClick){
+            this.props.onClick(e)
+        }
+    }
+    
+    renderDaviIcon(){
+        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="60px"
+                onClick={e => this.handleClick(e)}
+            >
+            <g id="Info">
+                <path id="Maps" fill={this.props.color} d="M620.561,817.217c-1.568-3.62-3.771-7.101-4.611-10.885
+                    c-24.452-109.811-74.341-207.569-139.215-298.675c-27.507-38.628-55.814-77.404-77.438-119.371
+                    C324.363,242.85,402.696,58.71,574.209,26.508c145.509-27.32,282.953,75.871,296.543,222.773
+                    c4.659,50.356-7.471,97.96-32.152,141.022c-27.812,48.526-58.75,95.364-90.073,141.758
+                    c-50.917,75.411-91.062,155.558-113.421,244.091c-2.438,9.652-3.936,19.543-6.271,29.227c-0.992,4.104-3.023,7.961-4.584,11.93
+                    C623.021,817.277,621.789,817.247,620.561,817.217z"/>
+                <path id="Text" fillRule="evenodd" clipRule="evenodd" fill="#FFFFFF" d="M724.709,250.898
+                    c-0.055-3.974,0.047-7.949,0.033-11.923c-0.007-1.228-1.54-2.767-2.76-2.777c-2.428-0.021-4.862-0.015-7.29-0.015
+                    c-22.466,0.001-44.934,0.005-67.404,0.009c-2.475,0.001-3.658,1.154-3.658,3.588c-0.001,47.365-0.001,94.73-0.001,142.096
+                    c0,13.526,0,27.05,0.001,40.577c0,2.305,1.274,3.584,3.562,3.59c6.623,0.004,9.256-0.07,19.873,0.004
+                    c10.618,0.072,14.146,8.543,14.146,14.189c-0.002,5.645-4.233,13.055-14.299,13.367c-13.135,0.061-26.277-0.02-39.414-0.014
+                    c-14.575,0.004-29.146,0.004-43.722,0.02c-4.191-0.084-13.717-2.789-13.717-13.492s6.233-13.643,13.132-14.117
+                    c4.979,0.037,13.802,0.057,20.701,0.049c1.695,0,3.11-1.537,3.11-3.361c0.003-13.912-0.004-27.823-0.004-41.736
+                    c0-30.252,0-60.503,0.002-90.754c0.002-17.03,0.005-33.649,0.002-50.678c0-1.991-1.38-3.336-3.396-3.336
+                    c-24.79,0-49.577,0-74.362,0c-2.133,0-3.38,1.22-3.383,3.308c-0.006,3.754-0.011,7.509,0.005,11.262
+                    c-0.023,6.339-3.067,13.143-12.456,13.143c-9.389,0-14.337-4.647-14.915-13.23c-0.128-4.305,0.004-8.612,0.004-12.918
+                    c0-8.392,0-16.781,0-25.173c0-0.321,0.228-5.156,4.091-9.277c3.864-4.122,8.014-3.822,8.445-3.822
+                    c25.835,0.003,51.672,0.002,77.507,0.002c46.813,0.001,140.443,0.001,140.443,0.001s6.153-0.088,10.926-0.052
+                    c0.3-0.008,5.713,0.363,9.178,3.994c3.46,3.631,3.046,8.407,3.046,8.635c-0.007,12.862,0.079,25.725-0.003,38.587
+                    c-0.074,8.051-6.938,12.819-13.703,12.847C731.482,263.519,724.956,259.059,724.709,250.898z"/>
+            </g>
+        </svg>
+    }
+
+    /*************
+     * RENDERING *
+    **************/
+    render(){
+        if (!this.props.visible) return null
+        return (
+            <div ref={this.inputGroupRef} 
+                style={{
+                    position:'fixed', 
+                    top:this.state.top, 
+                    left:this.state.left,
+                    cursor: 'pointer',
+                }}
+            >
+            {/* <Button icon circular basic
+                onClick={e => this.handleClick(e)}
+            > */}
+                {/* <Icon name="pencil"
+                    onClick={e => this.handleClick(e)}
+                /> */}
+            {/* </Button> */}
+            {this.renderDaviIcon()}
+            </div>
+        )
+    }
+    
+}
+
+export default AnnoToolBar

package/src/Annotation/AnnoBar.jsx

@@ -0,0 +1,148 @@
+import React, { Component } from 'react'
+import * as transform from '../utils/transform'
+import * as modes from '../types/modes'
+
+const defaultFontSize = 10
+const defaultRectHeight = 15
+
+class AnnoBar extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            top: 0,
+            left: 0,
+            width: 50,
+            height: defaultRectHeight,
+            fontSize: defaultFontSize,
+        }
+        this.textRef = React.createRef()
+    }
+
+    /*************
+     * EVENTS    *
+    **************/
+    componentWillMount() {
+        if (this.props.mode !== modes.CREATE) this.setPosition()
+    }
+
+    componentDidUpdate() {
+        if (this.props.mode !== modes.CREATE) {
+            this.setPosition()
+        }
+    }
+
+    handleClick(e) {
+        e.preventDefault()
+        if (this.props.onClick) {
+            this.props.onClick(e)
+        }
+    }
+    /*************
+     * LOGIC     *
+     *************/
+    setPosition() {
+        // const center = transform.getCenter(this.props.anno.data, this.props.anno.type)
+        // const top = center.y
+        // const left = center.x 
+        // if (this.state.top !== top || this.state.left !== left){  
+        //     this.setState({
+        //         top,
+        //         left
+        //     })
+        // }
+        let topPoint = transform.getTopPoint(this.props.anno.data)
+        topPoint = transform.getMostLeftPoint(topPoint)[0]
+        if (this.textRef.current) {
+            const text = this.textRef.current.getBoundingClientRect()
+            const textPadding = 2
+            let rectWidth = (text.width + textPadding) / this.props.svg.scale
+            if (rectWidth !== this.state.width) {
+                this.setState({
+                    width: rectWidth,
+                    fontSize: Math.ceil(defaultFontSize / this.props.svg.scale),
+                    // height: Math.ceil(defaultFontSize/this.props.svg.scale)
+                })
+            }
+        }
+        let top = topPoint.y - 10
+        let left = topPoint.x + 7
+        if (top < 0) top = topPoint.y + 10
+        if (this.state.top !== top || this.state.left !== left) {
+            this.setState({
+                top,
+                left,
+                // width: annoBox[1].x - annoBox[0].x
+            })
+        }
+    }
+
+    /*************
+     * RENDERING *
+    **************/
+
+
+    render() {
+        let label = ''
+        if (!this.props.possibleLabels) return null
+        let labelObject
+        if (this.props.anno.labelIds && this.props.anno.labelIds.length > 0) {
+            this.props.anno.labelIds.forEach((lbl, idx) => {
+                labelObject = this.props.possibleLabels.find(el => {
+                    return el.id === lbl
+                })
+                if (idx > 0) label += ', '
+                label += labelObject.label
+            })
+        } else {
+            if (this.props.defaultLabel) {
+                if (Number.isInteger(this.props.defaultLabel)) {
+                    labelObject = this.props.possibleLabels.find(el => {
+                        return el.id === this.props.defaultLabel
+                    })
+                    label = labelObject.label
+                } else {
+                    label = this.props.defaultLabel
+                }
+            } else {
+                label = 'no label'
+            }
+        }
+        switch (this.props.mode) {
+            case modes.VIEW:
+                return (<g>
+                    <rect x={this.state.left} y={this.state.top - 6}
+                        width={this.state.width} height={this.state.height} rx="5"
+                        opacity='0.5'
+                        style={this.props.style}
+                    />
+                    <text x={this.state.left} y={this.state.top}
+                        fill="white"
+                        onClick={e => this.handleClick(e)}
+                        textAnchor="start"
+                        alignmentBaseline="central"
+                        ref={this.textRef}
+                        fontSize={this.state.fontSize + "pt"}
+                    // textLength="50"
+                    // style={{...this.props.style, strokeWidth:1}}
+                    >
+                        {label}
+                    </text>
+                    {/* This second rect is to prevent text from getting marked */}
+                    <rect x={this.state.left} y={this.state.top - 6}
+                        width={this.state.width}
+                        height={this.state.height} rx="5"
+                        opacity='0.01'
+                        style={this.props.style}
+                    />
+                </g>
+                )
+            default:
+                return null
+        }
+
+    }
+
+}
+
+export default AnnoBar