chore: load mask by pix

2025-03-17 20:25:03 +08:00
parent 9ac679d437
commit 2287196746
10 changed files with 956 additions and 648 deletions
@@ -0,0 +1,175 @@
+import IconFont from '@/components/icon-font';
+import { KeyMap } from '@/config/hotkeys';
+import {
+  ClearOutlined,
+  DownloadOutlined,
+  ExpandOutlined,
+  FormatPainterOutlined,
+  UndoOutlined
+} from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Button, Checkbox, Slider, Tooltip } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import React from 'react';
+
+interface ToolsBarProps {
+  disabled: boolean;
+  loading: boolean;
+  lineWidth: number;
+  uploadButton: React.ReactNode;
+  handleBrushSizeChange: (value: number) => void;
+  undo: () => void;
+  onReset: () => void;
+  handleFitView: () => void;
+}
+
+const ToolsBar: React.FC<ToolsBarProps> = (props) => {
+  const {
+    disabled,
+    loading,
+    lineWidth,
+    handleBrushSizeChange,
+    undo,
+    onReset,
+    uploadButton,
+    handleFitView
+  } = props;
+  const intl = useIntl();
+  return (
+    <div className="tools">
+      <Tooltip
+        placement="bottomLeft"
+        arrow={false}
+        overlayInnerStyle={{
+          background: 'var(--color-white-1)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start',
+          width: 160
+        }}
+        title={
+          <div className="flex-column" style={{ width: '100%' }}>
+            <span className="text-secondary">
+              {intl.formatMessage({ id: 'playground.image.brushSize' })}
+            </span>
+            <Slider
+              disabled={disabled}
+              style={{ marginBlock: '4px 6px', marginLeft: 0, flex: 1 }}
+              vertical={false}
+              defaultValue={lineWidth}
+              min={10}
+              max={100}
+              onChange={handleBrushSizeChange}
+            />
+          </div>
+        }
+      >
+        <Button size="middle" type="text">
+          <FormatPainterOutlined className="font-size-14" />
+        </Button>
+      </Tooltip>
+      <Tooltip
+        title={
+          <span>
+            [{KeyMap.UNDO.textKeybinding}]
+            <span className="m-l-5">
+              {intl.formatMessage({ id: 'common.button.undo' })}
+            </span>
+          </span>
+        }
+      >
+        <Button onClick={undo} size="middle" type="text" disabled={disabled}>
+          <UndoOutlined className="font-size-14" />
+        </Button>
+      </Tooltip>
+      <Tooltip title={intl.formatMessage({ id: 'common.button.clear' })}>
+        <Button onClick={onReset} size="middle" type="text" disabled={disabled}>
+          <ClearOutlined className="font-size-14" />
+        </Button>
+      </Tooltip>
+      {uploadButton}
+      <Tooltip title={intl.formatMessage({ id: 'playground.image.fitview' })}>
+        <Button
+          onClick={handleFitView}
+          size="middle"
+          type="text"
+          disabled={loading}
+        >
+          <ExpandOutlined className="font-size-14" />
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+interface ImageActionsBarProps {
+  disabled: boolean;
+  maskUpload?: any[];
+  isOriginal: boolean;
+  invertMask: boolean;
+  handleOnChangeMask: (e: CheckboxChangeEvent) => void;
+  downloadMask: () => void;
+  download: () => void;
+}
+
+const ImageActionsBar: React.FC<ImageActionsBarProps> = (props) => {
+  const intl = useIntl();
+  const {
+    disabled,
+    isOriginal,
+    invertMask,
+    handleOnChangeMask,
+    downloadMask,
+    download
+  } = props;
+  return (
+    <div className="tools">
+      {isOriginal && (
+        <>
+          <Tooltip
+            title={
+              <span style={{ whiteSpace: 'pre-wrap' }}>
+                {intl.formatMessage({
+                  id: 'playground.image.negativeMask.tips'
+                })}
+              </span>
+            }
+          >
+            <Checkbox
+              onChange={handleOnChangeMask}
+              className="flex-center"
+              checked={invertMask}
+              disabled={disabled}
+            >
+              <span className="font-size-12">
+                {intl.formatMessage({
+                  id: 'playground.image.negativeMask'
+                })}
+              </span>
+            </Checkbox>
+          </Tooltip>
+          <Tooltip
+            title={intl.formatMessage({
+              id: 'playground.image.saveMask'
+            })}
+          >
+            <Button onClick={downloadMask} size="middle" type="text">
+              <IconFont className="font-size-14" type="icon-save2"></IconFont>
+            </Button>
+          </Tooltip>
+        </>
+      )}
+      {!isOriginal && (
+        <Tooltip
+          title={intl.formatMessage({ id: 'playground.image.download' })}
+        >
+          <Button onClick={download} size="middle" type="text">
+            <DownloadOutlined className="font-size-14" />
+          </Button>
+        </Tooltip>
+      )}
+    </div>
+  );
+};
+
+export { ImageActionsBar, ToolsBar };