feat: rotate float picture

nusr · Mar 8, 2024 · 44b8732 · 44b8732
1 parent ba1ba3e
commit 44b8732
Show file tree

Hide file tree

Showing 14 changed files with 410 additions and 311 deletions.
diff --git a/scripts/icon/rotate.png b/scripts/icon/rotate.png
diff --git a/src/containers/FloatElement/ContextMenu.tsx b/src/containers/FloatElement/ContextMenu.tsx
@@ -11,11 +11,13 @@ import {
   isSameRange,
 } from '@/util';
 import { FloatElementItem } from '@/containers/store';
+import { IWindowSize } from '@/types';
 
 type Props = FloatElementItem & {
   controller: IController;
   menuLeft: number;
   menuTop: number;
+  resetResize: (size: IWindowSize) => void;
   hideContextMenu: () => void;
 };
 
@@ -67,7 +69,12 @@ export const FloatElementContextMenu: React.FunctionComponent<Props> = memo(
       type,
       chartType,
       title,
+      resetResize,
       hideContextMenu,
+      originHeight,
+      originWidth,
+      width,
+      height,
     } = props;
     const [ref] = useClickOutside(hideContextMenu);
     const selectData = () => {
@@ -220,6 +227,19 @@ export const FloatElementContextMenu: React.FunctionComponent<Props> = memo(
           </React.Fragment>
         ) : null}
         <Button onClick={saveAsPicture}>Save as Picture</Button>
+        <Button
+          disabled={width === originWidth && height === originHeight}
+          onClick={() => {
+            hideContextMenu();
+            controller.transaction(() => {
+              controller.updateFloatElement(uuid, 'height', originHeight);
+              controller.updateFloatElement(uuid, 'width', originWidth);
+            });
+            resetResize({ width: originWidth, height: originHeight });
+          }}
+        >
+          Reset Size
+        </Button>
       </div>
     );
   },

diff --git a/src/containers/FloatElement/FloatElement.module.css b/src/containers/FloatElement/FloatElement.module.css
@@ -9,7 +9,7 @@
 }
 
 .float-element.active {
-  border: 1px dashed var(--primaryColor);
+  border-style: dashed;
   border-style: dashed;
   cursor: move;
   z-index: var(--middleZIndex);
@@ -72,23 +72,33 @@
 }
 .scale-dot {
   border-radius: 50%;
-  background-color: var(--primaryColor);
+  background-color: var(--white);
   width: 10px;
   height: 10px;
-  border: 2px solid var(--white);
+  border: 1px solid var(--borderColor);
   box-sizing: content-box;
 }
+.rotate-icon {
+  color: var(--white);
+  background-color: var(--borderColor);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 .top {
   top: -16px;
   left: 50%;
-  margin-left: -10px;
+  margin-left: -16px;
   cursor: ns-resize;
 }
 .bottom {
   bottom: -16px;
   left: 50%;
-  margin-left: -10px;
+  margin-left: -16px;
   cursor: ns-resize;
 }
 .top-right {
@@ -120,12 +130,20 @@
 .left {
   left: -16px;
   top: 50%;
-  margin-top: -10px;
+  margin-top: -16px;
   cursor: ew-resize;
 }
 .rotate {
   top: -48px;
   left: 50%;
-  margin-left: -10px;
-  cursor: ns-resize;
-}
+  margin-left: -16px;
+  cursor: grabbing;
+}
+.rotate::after {
+  position: absolute;
+  content: '';
+  top: 14px;
+  height: 28px;
+  width: 1px;
+  background-color: var(--borderColor);
+}