From e4e182517342ac4bab3542649cb5bcd6998363aa Mon Sep 17 00:00:00 2001
From: "lixinghua.vendor" <lixinghua.vendor@sensetime.com>
Date: Tue, 6 Sep 2022 19:47:55 +0800
Subject: [PATCH] feat: ScribbleTool add sidebar

---
 .../src/assets/attributeIcon/eraser.svg       |  6 ++
 .../src/assets/attributeIcon/eraser_a.svg     |  6 ++
 .../src/assets/attributeIcon/pen.svg          |  5 ++
 .../src/assets/attributeIcon/pen_a.svg        |  5 ++
 packages/lb-components/src/index.scss         | 25 +++++++
 .../sidebar/ScribbleSidebar/index.tsx         | 74 +++++++++++++++++++
 .../src/views/MainView/sidebar/index.tsx      | 11 ++-
 7 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 packages/lb-components/src/assets/attributeIcon/eraser.svg
 create mode 100644 packages/lb-components/src/assets/attributeIcon/eraser_a.svg
 create mode 100644 packages/lb-components/src/assets/attributeIcon/pen.svg
 create mode 100644 packages/lb-components/src/assets/attributeIcon/pen_a.svg
 create mode 100644 packages/lb-components/src/views/MainView/sidebar/ScribbleSidebar/index.tsx

diff --git a/packages/lb-components/src/assets/attributeIcon/eraser.svg b/packages/lb-components/src/assets/attributeIcon/eraser.svg
new file mode 100644
index 000000000..e770d230e
--- /dev/null
+++ b/packages/lb-components/src/assets/attributeIcon/eraser.svg
@@ -0,0 +1,6 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="6.34875" y="0.353553" width="4.5" height="8.47848" rx="2.25" transform="rotate(45 6.34875 0.353553)"
+    fill="#E6E6E6" stroke="#BAB8B8" stroke-width="0.5" />
+  <line x1="1.74547" y1="4.60767" x2="4.92401" y2="8.46733" stroke="#BAB8B8" stroke-width="0.5" />
+  <line x1="2.00061" y1="9.75" x2="10.0006" y2="9.75" stroke="#BAB8B8" stroke-width="0.5" />
+</svg>
diff --git a/packages/lb-components/src/assets/attributeIcon/eraser_a.svg b/packages/lb-components/src/assets/attributeIcon/eraser_a.svg
new file mode 100644
index 000000000..8db10f5c4
--- /dev/null
+++ b/packages/lb-components/src/assets/attributeIcon/eraser_a.svg
@@ -0,0 +1,6 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="6.34875" y="0.353553" width="4.5" height="8.47848" rx="2.25" transform="rotate(45 6.34875 0.353553)"
+    fill="#6272FB" stroke="#BAB8B8" stroke-width="0.5" />
+  <line x1="1.74547" y1="4.60767" x2="4.92401" y2="8.46733" stroke="#BAB8B8" stroke-width="0.5" />
+  <line x1="2.00061" y1="9.75" x2="10.0006" y2="9.75" stroke="#6272FB" stroke-width="0.5" />
+</svg>
diff --git a/packages/lb-components/src/assets/attributeIcon/pen.svg b/packages/lb-components/src/assets/attributeIcon/pen.svg
new file mode 100644
index 000000000..5a483a016
--- /dev/null
+++ b/packages/lb-components/src/assets/attributeIcon/pen.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="9.07153" y="1" width="3" height="10" rx="1" transform="rotate(45 9.07153 1)" fill="#BAB8B8" />
+  <path d="M1.06068 11.182L1.73311 8.67247L3.57023 10.5096L1.06068 11.182Z" fill="#BAB8B8" />
+  <circle cx="11.0002" cy="1" r="1" fill="#BAB8B8" />
+</svg>
diff --git a/packages/lb-components/src/assets/attributeIcon/pen_a.svg b/packages/lb-components/src/assets/attributeIcon/pen_a.svg
new file mode 100644
index 000000000..c84ddce6f
--- /dev/null
+++ b/packages/lb-components/src/assets/attributeIcon/pen_a.svg
@@ -0,0 +1,5 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="9.07153" y="1" width="3" height="10" rx="1" transform="rotate(45 9.07153 1)" fill="#6272FB" />
+  <path d="M1.06068 11.182L1.73311 8.67247L3.57023 10.5096L1.06068 11.182Z" fill="#6272FB" />
+  <circle cx="11.0002" cy="1" r="1" fill="#6272FB" />
+</svg>
diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss
index 7c5f3cd80..127a44e2f 100644
--- a/packages/lb-components/src/index.scss
+++ b/packages/lb-components/src/index.scss
@@ -521,6 +521,31 @@ $prefix: bee;
       );
     }
   }
+  .#{$prefix}-scribble {
+    padding: 20px;
+    width: 100%;
+    &__select {
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      img {
+        width: 12px;
+        margin: 0px 10px;
+      }
+    }
+    &__silder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &__circle {
+      display: block;
+      width: 5px;
+      height: 5px;
+      background: #d9d9d9;
+      border-radius: 50%;
+    }
+  }
 }
 
 .#{$prefix}-tips {
diff --git a/packages/lb-components/src/views/MainView/sidebar/ScribbleSidebar/index.tsx b/packages/lb-components/src/views/MainView/sidebar/ScribbleSidebar/index.tsx
new file mode 100644
index 000000000..cad69b84a
--- /dev/null
+++ b/packages/lb-components/src/views/MainView/sidebar/ScribbleSidebar/index.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import { Slider } from 'antd';
+import penActivate from '@/assets/attributeIcon/pen_a.svg';
+import pen from '@/assets/attributeIcon/pen.svg';
+import eraserActivate from '@/assets/attributeIcon/eraser_a.svg';
+import eraser from '@/assets/attributeIcon/eraser.svg';
+import { getClassName } from '@/utils/dom';
+
+interface IProps {
+  // toolInstance?: GraphToolInstance;
+  // stepInfo?: IStepInfo;
+  onChange: (tool: number, values: number) => void;
+}
+
+enum ESwitchTool {
+  Pen = 1, // 笔
+  Ereser = 2, // 橡皮刷
+}
+
+const ScribbleSidebar: React.FC<IProps> = (props) => {
+  const { onChange } = props;
+  // 查看时候默认值
+  // const initValue = toolInstance?.weight || 20;
+  // const initTool = toolInstance?.brushTool || ESwitchTool.Pen;
+  const [silderValue, setSilderValue] = useState(20);
+  const [selectTool, setSelectTool] = useState(ESwitchTool.Pen);
+
+  const changeValue = () => {
+    onChange(selectTool, silderValue);
+  };
+
+  return (
+    <div className={getClassName('scribble')}>
+      <div className={getClassName('scribble', 'select')}>
+        <img
+          src={selectTool === ESwitchTool.Pen ? penActivate : pen}
+          onClick={() => {
+            setSilderValue(20);
+            setSelectTool(ESwitchTool.Pen);
+            changeValue();
+          }}
+        />
+        <img
+          src={selectTool === ESwitchTool.Ereser ? eraserActivate : eraser}
+          onClick={() => {
+            setSilderValue(20);
+            setSelectTool(ESwitchTool.Ereser);
+            changeValue();
+          }}
+        />
+      </div>
+      <div className={getClassName('scribble', 'silder')}>
+        <span className={getClassName('scribble', 'circle')} />
+        <Slider
+          onChange={(v) => {
+            setSilderValue(v);
+            changeValue();
+          }}
+          min={1}
+          max={50}
+          style={{ width: '60%' }}
+          value={silderValue}
+        />
+        <span
+          className={getClassName('scribble', 'circle')}
+          style={{ width: '10px', height: '10px' }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ScribbleSidebar;
diff --git a/packages/lb-components/src/views/MainView/sidebar/index.tsx b/packages/lb-components/src/views/MainView/sidebar/index.tsx
index dd10c7ab2..a68dce076 100644
--- a/packages/lb-components/src/views/MainView/sidebar/index.tsx
+++ b/packages/lb-components/src/views/MainView/sidebar/index.tsx
@@ -20,6 +20,7 @@ import TagSidebar, { expandIconFuc } from './TagSidebar';
 import TextToolSidebar from './TextToolSidebar';
 import ToolStyle from './ToolStyle';
 import { cTool } from '@labelbee/lb-annotation';
+import ScribbleSidebar from './ScribbleSidebar';
 
 const { EVideoToolName } = cTool;
 
@@ -140,8 +141,15 @@ const Sidebar: React.FC<IProps> = ({ sider }) => {
 
   const textToolSideBar = <TextToolSidebar />;
 
-  const horizontal = <div className={`${sidebarCls}__horizontal`} />;
+  const scribbleSidebar = (
+    <ScribbleSidebar
+      onChange={(t, i) => {
+        // 接收
+      }}
+    />
+  );
 
+  const horizontal = <div className={`${sidebarCls}__horizontal`} />;
   if (sider) {
     if (typeof sider === 'function') {
       return (
@@ -178,6 +186,7 @@ const Sidebar: React.FC<IProps> = ({ sider }) => {
     return (
       <div className={`${sidebarCls}`}>
         {toolIcon}
+        {scribbleSidebar}
         {horizontal}
         {attributeList}
         {annotationText}