diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9e347706..5c3d68b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,6 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-### [5.0.3](https://github.com/starwit/react-image-annotate/compare/5.0.2...5.0.3) (2024-03-18)
-
-### [5.0.2](https://github.com/starwit/react-image-annotate/compare/5.0.1...5.0.2) (2024-03-18)
-
### [5.0.1](https://github.com/starwit/react-image-annotate/compare/4.3.5...5.0.1) (2024-02-29)
## [5.0.0](https://github.com/starwit/react-image-annotate/compare/4.3.4...5.0.0) (2024-02-14)
diff --git a/src/workspace/ResizePanel/index.jsx b/src/workspace/ResizePanel/index.jsx
deleted file mode 100644
index 28f7485b..00000000
--- a/src/workspace/ResizePanel/index.jsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React from "react";
-import { DraggableCore } from "react-draggable";
-import debounce from "lodash.debounce";
-import $ from "cash-dom";
-import classNames from "classnames/bind";
-import style from "./index.module.css";
-let cx = classNames.bind(style);
-
-class ResizePanel extends React.Component {
- constructor(props) {
- super(props);
- this.state = { size: 0 };
-
- this.contentRef = React.createRef();
- this.wrapperRef = React.createRef();
- this.validateSize = debounce(this.validateSize, 100).bind(this);
- }
-
- isHorizontal = () =>
- this.props.direction === "w" || this.props.direction === "e";
-
- componentDidMount() {
- const content = this.contentRef.current;
- const actualContent = content.children[0];
- let initialSize = this.isHorizontal()
- ? $(actualContent).outerWidth(true)
- : $(actualContent).outerHeight(true);
-
- // Initialize the size value based on the content's current size
- this.setState({ size: initialSize });
- this.validateSize();
- }
-
- validateSize() {
- const isHorizontal = this.isHorizontal();
- const content = this.contentRef.current;
- const wrapper = this.wrapperRef.current;
- if (!content || !wrapper) return;
- const actualContent = content.children[0];
- let containerParent = wrapper.parentElement;
-
- //
- // Or if our size doesn't equal the actual content size, then we
- // must have pushed past the min size of the content, so resize back
- //let minSize = isHorizontal ? $(actualContent).outerWidth(true) : $(actualContent).outerHeight(true);
- let minSize = isHorizontal
- ? actualContent.scrollWidth
- : actualContent.scrollHeight;
-
- let margins = isHorizontal
- ? $(actualContent).outerWidth(true) - $(actualContent).outerWidth()
- : $(actualContent).outerHeight(true) - $(actualContent).outerHeight();
- minSize += margins;
-
- if (this.state.size !== minSize) {
- this.setState({
- ...this.state,
- size: minSize
- });
- } else {
- // If our resizing has left the parent container's content overflowing
- // then we need to shrink back down to fit
- let overflow = isHorizontal
- ? containerParent.scrollWidth - containerParent.clientWidth
- : containerParent.scrollHeight - containerParent.clientHeight;
-
- if (overflow) {
- this.setState({
- ...this.state,
- size: isHorizontal
- ? actualContent.clientWidth - overflow
- : actualContent.clientHeight - overflow
- });
- }
- }
- }
-
- handleDrag = (e, ui) => {
- const { direction } = this.props;
- const factor = direction === "e" || direction === "s" ? -1 : 1;
-
- // modify the size based on the drag delta
- let delta = this.isHorizontal() ? ui.deltaX : ui.deltaY;
- this.setState((s, p) => ({ size: Math.max(10, s.size - delta * factor) }));
- };
-
- handleDragEnd = (e, ui) => {
- this.validateSize();
- };
-
- render() {
- const dragHandlers = {
- onDrag: this.handleDrag,
- onStop: this.handleDragEnd
- };
- const { direction } = this.props;
- const isHorizontal = this.isHorizontal();
-
- let containerClass = cx({
- ContainerHorizontal: isHorizontal,
- ContainerVertical: !isHorizontal
- });
-
- if (this.props.containerClass) {
- containerClass += ` ${this.props.containerClass}`;
- }
-
- let containerStyle = { ...this.props.style } || {};
- if (this.state.size !== 0) {
- containerStyle.flexGrow = 0;
- containerStyle[isHorizontal ? "width" : "height"] = "auto";
- }
-
- let handleClasses =
- this.props.handleClass ||
- cx({
- ResizeHandleHorizontal: isHorizontal,
- ResizeHandleVertical: !isHorizontal
- });
-
- let resizeBarClasses =
- this.props.borderClass ||
- cx({
- ResizeBarHorizontal: isHorizontal,
- ResizeBarVertical: !isHorizontal
- });
-
- let contentStyle = isHorizontal
- ? { width: this.state.size + "px" }
- : { height: this.state.size + "px" };
- let contentClassName = cx("ResizeContent", {
- ResizeContentHorizontal: isHorizontal,
- ResizeContentVertical: !isHorizontal
- });
-
- let content = [
-
- {React.Children.only(this.props.children)}
-
- ];
-
- let handle = (
-
-
-
- );
-
- // Insert the handle at the beginning of the content if our directio is west or north
- if (direction === "w" || direction === "n") {
- content.unshift(handle);
- } else {
- content.push(handle);
- }
-
- return (
-
- {content}
-
- );
- }
-}
-
-export default ResizePanel;
\ No newline at end of file
diff --git a/src/workspace/ResizePanel/index.module.css b/src/workspace/ResizePanel/index.module.css
deleted file mode 100644
index 985242f1..00000000
--- a/src/workspace/ResizePanel/index.module.css
+++ /dev/null
@@ -1,104 +0,0 @@
-.Container {
- display: flex;
- align-items: stretch;
-}
-.ContainerHorizontal {
- composes: Container;
- flex-flow: row nowrap;
-}
-.ContainerVertical {
- composes: Container;
- flex-flow: column nowrap;
-}
-.ResizeContent {
- flex-grow: 1;
- align-self: stretch;
- display: flex;
-}
-.ResizeContentVertical {
- flex-flow: column;
-}
-.ResizeContentHorizontal {
- flex-flow: row;
-}
-
-.ResizeBarHorizontal {
- cursor: ew-resize;
- width: 20px;
- margin-left: -10px;
- margin-right: -10px;
- background: transparent;
- display: flex;
- z-index: 10;
- align-items: center ;
- align-content: center ;
- justify-content: center;
-
-}
-
-.ResizeBarVertical {
- cursor: ns-resize;
- height: 20px;
- margin-top: -10px;
- margin-bottom: -10px;
- background: transparent;
- display: flex;
- z-index: 10;
- align-items: center ;
- align-content: center ;
- justify-content: center;
-
-}
-.ResizeHandleHorizontal {
- cursor: ew-resize;
- width: 12px;
- height: 50px;
- background: white;
- border: 2px solid lightgray;
- border-radius: 8px;
- text-align: center;
- z-index: 10;
- overflow: hidden;
- display: flex;
- align-items: center ;
-
-}
-
-.ResizeHandleVertical {
- cursor: ns-resize;
- width:50px;
- height: 12px;
- border-radius: 8px;
- background: white;
- border: 2px solid lightgray;
- z-index: 10;
- overflow: hidden;
- display: flex;
- justify-content: center;
-
-}
-
-.ResizeHandleHorizontal>span, .ResizeHandleVertical>span {
- display: inline-block;
- overflow: hidden;
- font-size: 12px;
- font-weight: bold;
- font-family: sans-serif;
- letter-spacing: 1px;
- color: #b3b3b3;
- text-shadow: 1px 0 1px rgb(90, 90, 90);
-}
-.ResizeHandleHorizontal>span {
- line-height: 4px;
-}
-.ResizeHandleVertical>span {
- text-align: center;
- line-height: 12px;
- margin-top: -3px;
-}
-.ResizeHandleHorizontal>span::after{
- content: '. . . . . . . .';
-}
-.ResizeHandleVertical>span::after{
- content: '......';
-}
\ No newline at end of file
diff --git a/src/workspace/SidebarBox/index.jsx b/src/workspace/SidebarBox/index.jsx
index 9161cd06..6dc14242 100644
--- a/src/workspace/SidebarBox/index.jsx
+++ b/src/workspace/SidebarBox/index.jsx
@@ -1,16 +1,15 @@
// @flow
-import React, {useState, memo, useCallback} from "react"
+import React, { useState, memo, useCallback } from "react"
import Paper from "@mui/material/Paper"
-import {createTheme, styled, ThemeProvider} from "@mui/material/styles"
+import { createTheme, styled, ThemeProvider } from "@mui/material/styles"
import ExpandIcon from "@mui/icons-material/ExpandMore"
import IconButton from "@mui/material/IconButton"
import Collapse from "@mui/material/Collapse"
import classnames from "classnames"
import useEventCallback from "use-event-callback"
import Typography from "@mui/material/Typography"
-import {useIconDictionary} from "../icon-dictionary.js"
-import ResizePanel from "../ResizePanel"
+import { useIconDictionary } from "../icon-dictionary.js"
import styles from "./styles.js"
const theme = createTheme()
@@ -86,15 +85,13 @@ export const SidebarBox = ({
content
) : null
) : (
-
-
+
{content}
-
)}