Skip to content

Commit cd190da

Browse files
WindRunnerMaxWindRunnerMax
committed
feat: normalize image tool
1 parent 19a6275 commit cd190da

4 files changed

Lines changed: 47 additions & 14 deletions

File tree

‎packages/react/public/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,26 @@
99
<body>
1010
<% if (process.env.NODE_ENV === 'production') { %>
1111
<script
12-
src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/react/17.0.2/umd/react.production.min.js"
12+
src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"
1313
type="application/javascript"
1414
referrerpolicy="no-referrer"
1515
crossorigin
1616
></script>
1717
<script
18-
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/react-dom/17.0.2/umd/react-dom.production.min.js"
18+
src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"
1919
type="application/javascript"
2020
referrerpolicy="no-referrer"
2121
crossorigin
2222
></script>
2323
<% } else { %>
2424
<script
25-
src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-y/react/17.0.2/umd/react.development.js"
25+
src="https://unpkg.com/react@17.0.2/umd/react.development.js"
2626
type="application/javascript"
2727
referrerpolicy="no-referrer"
2828
crossorigin
2929
></script>
3030
<script
31-
src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/react-dom/17.0.2/umd/react-dom.development.js"
31+
src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
3232
type="application/javascript"
3333
referrerpolicy="no-referrer"
3434
crossorigin

‎packages/react/src/components/header/components/left.tsx‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react";
44
import type { Editor } from "sketching-core";
55
import { DRAG_KEY, EDITOR_EVENT } from "sketching-core";
66
import type { DeltaLike } from "sketching-delta";
7-
import { DEFAULT_BORDER_COLOR, RECT_ATTRS } from "sketching-plugin";
7+
import { DEFAULT_BORDER_COLOR, IMAGE_MODE, RECT_ATTRS } from "sketching-plugin";
88
import { cs, TSON } from "sketching-utils";
99

1010
import { CursorIcon } from "../../../static/cursor";
@@ -13,8 +13,7 @@ import { ImageIcon } from "../../../static/image";
1313
import { RectIcon } from "../../../static/rect";
1414
import { TextIcon } from "../../../static/text";
1515
import styles from "../index.m.scss";
16-
import { NAV_ENUM } from "../utils/constant";
17-
import { uploadImage } from "../utils/upload";
16+
import { DEFAULT_IMAGE, NAV_ENUM } from "../utils/constant";
1817

1918
export const Left: FC<{
2019
editor: Editor;
@@ -44,11 +43,14 @@ export const Left: FC<{
4443
editor.canvas.insert.start(deltaLike);
4544
}
4645
if (index === NAV_ENUM.IMAGE) {
47-
uploadImage().then(src => {
48-
const deltaLike: DeltaLike = { key: NAV_ENUM.IMAGE, ...empty };
49-
deltaLike.attrs = { src };
50-
editor.canvas.insert.start(deltaLike);
51-
});
46+
const deltaLike: DeltaLike = { key: NAV_ENUM.IMAGE, ...empty };
47+
deltaLike.attrs = {
48+
src: DEFAULT_IMAGE,
49+
mode: IMAGE_MODE.COVER,
50+
[RECT_ATTRS.BORDER_WIDTH]: "1",
51+
[RECT_ATTRS.BORDER_COLOR]: "#DADADA",
52+
};
53+
editor.canvas.insert.start(deltaLike);
5254
}
5355
setActive(index);
5456
});
@@ -65,6 +67,24 @@ export const Left: FC<{
6567
e.dataTransfer.setData(DRAG_KEY, TSON.encode(deltaLike) || "");
6668
};
6769

70+
const onDragImage = (e: React.DragEvent<HTMLDivElement>) => {
71+
if (active !== NAV_ENUM.DEFAULT) return false;
72+
const deltaLike: DeltaLike = {
73+
key: NAV_ENUM.IMAGE,
74+
x: 0,
75+
y: 0,
76+
width: 100,
77+
height: 100,
78+
attrs: {
79+
src: DEFAULT_IMAGE,
80+
mode: IMAGE_MODE.COVER,
81+
[RECT_ATTRS.BORDER_WIDTH]: "1",
82+
[RECT_ATTRS.BORDER_COLOR]: "#DADADA",
83+
},
84+
};
85+
e.dataTransfer.setData(DRAG_KEY, TSON.encode(deltaLike) || "");
86+
};
87+
6888
const onDragText = (e: React.DragEvent<HTMLDivElement>) => {
6989
if (active !== NAV_ENUM.DEFAULT) return false;
7090
const deltaLike: DeltaLike = {
@@ -115,6 +135,9 @@ export const Left: FC<{
115135
{RectIcon}
116136
</div>
117137
<div
138+
draggable={active === NAV_ENUM.DEFAULT}
139+
onDragStart={onDragImage}
140+
onDragEnd={onDragEnd}
118141
className={cs(styles.op, active === NAV_ENUM.IMAGE && styles.active)}
119142
onClick={() => switchIndex(NAV_ENUM.IMAGE)}
120143
>

‎packages/react/src/components/header/utils/constant.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,13 @@ export const NAV_ENUM = {
55
TEXT: "text",
66
IMAGE: "image",
77
} as const;
8+
9+
const svgToBase64 = (svgString: string) => {
10+
const cleanedSvg = svgString.replace(/\s+/g, " ").trim();
11+
const base64 = btoa(unescape(encodeURIComponent(cleanedSvg)));
12+
return `data:image/svg+xml;base64,${base64}`;
13+
};
14+
15+
export const DEFAULT_IMAGE = svgToBase64(
16+
`<svg class="icon" viewBox="-530 -530 2048 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"><path d="M0 192c0-70.6 57.4-128 128-128h768c70.6 0 128 57.4 128 128v640c0 70.6-57.4 128-128 128H128c-70.6 0-128-57.4-128-128V192z m647.6 213c-9-13.2-23.8-21-39.6-21s-30.8 7.8-39.6 21l-174 255.2-53-66.2c-9.2-11.4-23-18-37.4-18s-28.4 6.6-37.4 18l-128 160c-11.6 14.4-13.8 34.2-5.8 50.8S157.6 832 176 832h672c17.8 0 34.2-9.8 42.4-25.6s7.2-34.8-2.8-49.4l-240-352zM224 384a96 96 0 1 0 0-192 96 96 0 1 0 0 192z" fill="#BBBBBB"></path></svg>`
17+
);

‎packages/react/src/components/right-panel/components/image/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ export const Image: FC<{ editor: Editor; state: DeltaState }> = ({ editor, state
4444
min={0}
4545
max={10}
4646
size="mini"
47-
onChange={v => onChange(RECT_ATTRS.BORDER_WIDTH, v.toString())}
47+
onChange={v => onChange(RECT_ATTRS.BORDER_WIDTH, (v || 0).toString())}
4848
defaultValue={state.getAttr(RECT_ATTRS.BORDER_WIDTH) || 0}
4949
/>
5050
</div>
5151
<div className={styles.title}>图像</div>
5252
<div className={styles.item}>
5353
<div>图片</div>
5454
<div className={styles.uploadImage} onClick={onPickImage}>
55-
选择
55+
上传图片
5656
</div>
5757
</div>
5858
<div className={styles.item}>

0 commit comments

Comments
 (0)