Skip to content
Next Next commit
Adding circle sector. This commit has bugs like circle size is random…
… and also the centre isn't properly selected
  • Loading branch information
saichander17 committed Nov 26, 2019
commit 521f9ee9ca223378a2db5c92c85e8d35f6cbf8ac
2 changes: 1 addition & 1 deletion src/Annotator/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default ({
showPointDistances,
pointDistancePrecision,
showTags = true,
enabledTools = ["select", "create-point", "create-box", "create-polygon"],
enabledTools = ["select", "create-point", "create-box", "create-polygon", "create-circle"],
regionTagList = [],
regionClsList = [],
imageTagList = [],
Expand Down
57 changes: 57 additions & 0 deletions src/Annotator/reducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const getRandomColor = () => {

const typesToSaveWithHistory = {
BEGIN_BOX_TRANSFORM: "Transform/Move Box",
BEGIN_CIRCLE_TRANSFORM: "Transform/Move Circle",
BEGIN_MOVE_POINT: "Move Point",
DELETE_REGION: "Delete Region"
}
Expand Down Expand Up @@ -183,6 +184,20 @@ export default (state: MainLayoutState, action: Action) => {
regionId: action.point.id
})
}
case "BEGIN_CIRCLE_TRANSFORM": {
debugger;
const { region, directions } = action
state = closeEditors(state)
if (directions[0] === 0 && directions[1] === 0) {
return setIn(state, ["mode"], { mode: "MOVE_REGION", regionId: region.id })
} else {
return setIn(state, ["mode"], {
mode: "RESIZE_CIRCLE",
regionId: region.id,
original: {x: x, y: y, radius: region.radius}
})
}
}
case "BEGIN_BOX_TRANSFORM": {
const { box, directions } = action
state = closeEditors(state)
Expand Down Expand Up @@ -309,6 +324,18 @@ export default (state: MainLayoutState, action: Action) => {
{ ...box, x: dx, w: dw, y: dy, h: dh }
)
}
case "RESIZE_CIRCLE": {
const { regionId } = state.mode
const [region, regionIndex] = getRegion(regionId)
if (!region) return setIn(state, ["mode"], null)
return setIn(
state,
["images", currentImageIndex, "regions", regionIndex],
{ ...region, radius: Math.sqrt(Math.pow(region.x - action.x,2) + Math.pow(region.y - action.y,2)) }
// region.radius+1
// Math.sqrt(Math.pow(region.x - x,2) + Math.pow(region.y - y,2))
)
}
case "DRAW_POLYGON": {
const { regionId } = state.mode
const [region, regionIndex] = getRegion(regionId)
Expand Down Expand Up @@ -397,6 +424,27 @@ export default (state: MainLayoutState, action: Action) => {
})
break
}
case "create-circle": {
state = saveToHistory(state, "Create Circle")
newRegion = {
type: "circle",
x: x,
y: x,
radius: 0.01,
highlighted: true,
editingLabels: false,
color: getRandomColor(),
id: getRandomId()
}
state = unselectRegions(state)
state = setIn(state, ["mode"], {
mode: "RESIZE_CIRCLE",
editLabelEditorAfter: true,
regionId: newRegion.id,
original: {x: x, y: y, radius: newRegion.radius}
})
break
}
}
}

Expand Down Expand Up @@ -439,6 +487,14 @@ export default (state: MainLayoutState, action: Action) => {
}
}
}
case "RESIZE_CIRCLE": {
if (state.mode.editLabelEditorAfter) {
return {
...modifyRegion(state.mode.regionId, { editingLabels: true }),
mode: null
}
}
}
case "MOVE_REGION":
case "MOVE_POLYGON_POINT": {
return { ...state, mode: null }
Expand Down Expand Up @@ -553,6 +609,7 @@ export default (state: MainLayoutState, action: Action) => {
}
case "MOVE_POLYGON_POINT":
case "RESIZE_BOX":
case "RESIZE_CIRCLE":
case "MOVE_REGION": {
return setIn(state, ["mode"], null)
}
Expand Down
10 changes: 8 additions & 2 deletions src/IconTools/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import {
faDrawPolygon,
faVectorSquare,
faHandPaper,
faSearch
faSearch,
faCircle
} from "@fortawesome/free-solid-svg-icons"
import SmallToolButton, { SelectedTool } from "../SmallToolButton"
import { makeStyles } from "@material-ui/core/styles"
Expand Down Expand Up @@ -41,7 +42,7 @@ export default ({
showTags,
selectedTool,
onClickTool,
enabledTools = ["select", "create-point", "create-box", "create-polygon"]
enabledTools = ["select", "create-point", "create-box", "create-polygon", "create-circle"]
}: Props) => {
const classes = useStyles()
return (
Expand Down Expand Up @@ -99,6 +100,11 @@ export default ({
name="Add Polygon"
icon={<FontAwesomeIcon size="xs" fixedWidth icon={faDrawPolygon} />}
/>
<SmallToolButton
id="create-circle"
name="Add Circle"
icon={<FontAwesomeIcon size="xs" fixedWidth icon={faCircle} />}
/>
{/* <SmallToolButton
id="create-pixel"
name="Add Pixel Region"
Expand Down
33 changes: 32 additions & 1 deletion src/ImageCanvas/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import type {
PixelRegion,
Point,
Polygon,
Box
Box,
Circle
} from "./region-tools.js"
import { getEnclosingBox } from "./region-tools.js"
import { makeStyles } from "@material-ui/core/styles"
Expand Down Expand Up @@ -53,6 +54,7 @@ type Props = {
onCloseRegionEdit: Region => any,
onDeleteRegion: Region => any,
onBeginBoxTransform: (Box, [number, number]) => any,
onBeginCircleTransform: (Circle) => any,
onBeginMovePolygonPoint: (Polygon, index: number) => any,
onAddPolygonPoint: (Polygon, point: [number, number], index: number) => any,
onSelectRegion: Region => any,
Expand Down Expand Up @@ -84,6 +86,7 @@ export default ({
onChangeRegion,
onBeginRegionEdit,
onCloseRegionEdit,
onBeginCircleTransform,
onBeginBoxTransform,
onBeginMovePolygonPoint,
onAddPolygonPoint,
Expand Down Expand Up @@ -232,6 +235,7 @@ export default ({
switch (region.type) {
case "point": {
context.save()
// debugger;

context.beginPath()
context.strokeStyle = region.color
Expand Down Expand Up @@ -282,6 +286,17 @@ export default ({
context.restore()
break
}
case "circle": {
context.save()
context.shadowColor = "black"
context.shadowBlur = 4
context.strokeStyle = region.color
context.beginPath();
context.arc(region.x * iw, region.y * ih, region.radius * Math.sqrt(Math.pow(iw,2) + Math.pow(ih,2)) , 0, 2 * Math.PI);
context.stroke()
context.restore()
break
}
case "pixel": {
context.save()

Expand Down Expand Up @@ -566,6 +581,22 @@ export default ({
}}
/>
))}
{
r.type === "circle" &&
!dragWithPrimary &&
!zoomWithPrimary &&
!r.locked &&
r.highlighted &&
<div
key={1}
{...mouseEvents}
onMouseDown={e => {
if (e.button === 0)
return onBeginCircleTransform(r)
mouseEvents.onMouseDown(e)
}}
/>
}
{r.type === "polygon" &&
!dragWithPrimary &&
!zoomWithPrimary &&
Expand Down
16 changes: 16 additions & 0 deletions src/ImageCanvas/region-tools.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,14 @@ export type Polygon = {|
open?: boolean,
points: Array<[number, number]>
|}
export type Circle = {|
...$Exact<BaseRegion>,
type: "circle",
radius: number,
// x and y indicate the coordinates of the centre of the circle
x: number,
y: number
|}

export type Region = Point | PixelRegion | Box | Polygon

Expand Down Expand Up @@ -90,6 +98,14 @@ export const getEnclosingBox = (region: Region) => {
return box
}
}
case "circle": {
return {
x: region.x-region.radius,
y: region.y-region.radius,
w: region.x+region.radius,
h: region.y+region.radius
}
}
}
throw new Error("unknown region")
}
Expand Down
5 changes: 5 additions & 0 deletions src/MainLayout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,11 @@ export default ({ state, dispatch }: Props) => {
onBeginRegionEdit={action("OPEN_REGION_EDITOR", "region")}
onCloseRegionEdit={action("CLOSE_REGION_EDITOR", "region")}
onDeleteRegion={action("DELETE_REGION", "region")}
onBeginCircleTransform={action(
"BEGIN_CIRCLE_TRANSFORM",
"circle",
"directions"
)}
onBeginBoxTransform={action(
"BEGIN_BOX_TRANSFORM",
"box",
Expand Down
7 changes: 7 additions & 0 deletions src/MainLayout/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ export type Mode =
freedom: [number, number],
original: { x: number, y: number, w: number, h: number }
|}
| {|
mode: "RESIZE_CIRCLE",
editLabelEditorAfter?: boolean,
regionId: string,
original: {x: number, y: number, radius: number}
|}
| {| mode: "MOVE_REGION" |}

export type MainLayoutState = {|
Expand Down Expand Up @@ -69,6 +75,7 @@ export type Action =
| {| type: "CLOSE_POLYGON", polygon: Polygon |}
| {| type: "SELECT_REGION", region: Region |}
| {| type: "BEGIN_MOVE_POINT", point: Point |}
| {| type: "BEGIN_CIRCLE_TRANSFORM", region: Circle, directions: [number, number] |}
| {| type: "BEGIN_BOX_TRANSFORM", box: Box, directions: [number, number] |}
| {| type: "BEGIN_MOVE_POLYGON_POINT", polygon: Polygon, pointIndex: number |}
| {|
Expand Down