39 |
46 |
47 | );
48 | })}
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/packages/EditorTools/MagneticLine/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './MagneticLine';
2 |
--------------------------------------------------------------------------------
/packages/EditorTools/MagneticLine/props.ts:
--------------------------------------------------------------------------------
1 | import { MagneticLineType } from '../types/MagneticLine';
2 |
3 | export interface MagneticLineProps {
4 | lines?: MagneticLineType[] | null;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/EditorTools/constants/AxleDirection.ts:
--------------------------------------------------------------------------------
1 | export enum AxleDirection {
2 | x = 'x',
3 | y = 'y',
4 | }
5 |
--------------------------------------------------------------------------------
/packages/EditorTools/constants/EditorBox.ts:
--------------------------------------------------------------------------------
1 | import { POINT_TYPE } from '../enum/point-type';
2 |
3 | /**
4 | * 锚点鼠标样式
5 | */
6 | export const POINT_CURSORS = ['nwse', 'ns', 'nesw', 'ew'];
7 |
8 | /** 拉伸点集合 */
9 | export const POINT_LIST = [
10 | {
11 | point: POINT_TYPE.LEFT_TOP,
12 | className: 'left-top',
13 | },
14 | {
15 | point: POINT_TYPE.LEFT_CENTER,
16 | className: 'left-center',
17 | },
18 | {
19 | point: POINT_TYPE.LEFT_BOTTOM,
20 | className: 'left-bottom',
21 | },
22 | {
23 | point: POINT_TYPE.RIGHT_TOP,
24 | className: 'right-top',
25 | },
26 | {
27 | point: POINT_TYPE.RIGHT_CENTER,
28 | className: 'right-center',
29 | },
30 | {
31 | point: POINT_TYPE.RIGHT_BOTTOM,
32 | className: 'right-bottom',
33 | },
34 | {
35 | point: POINT_TYPE.TOP_CENTER,
36 | className: 'top-center',
37 | },
38 | {
39 | point: POINT_TYPE.BOTTOM_CENTER,
40 | className: 'bottom-center',
41 | },
42 | ];
43 |
44 | /** 中间点最大的间隔 */
45 | export const MIN_SPACING = 24;
46 | /** 中间点的宽度 */
47 | export const VERTICAL_AXIS_WIDTH = 8;
48 | export const HORIZONTAL_AXIS_WIDTH = 18;
49 |
50 | export const prefixCls = 'magic-editor-box';
51 |
52 | /**
53 | * 拉伸类型
54 | */
55 | export const ScaleTypeMap = {
56 | default: 'default',
57 | maskCover: 'mask-cover',
58 | maskContain: 'mask-contain',
59 | } as const;
60 |
--------------------------------------------------------------------------------
/packages/EditorTools/constants/Magnetic.ts:
--------------------------------------------------------------------------------
1 | export const DISTANCE = 3;
2 |
3 | export const ZOOM_LEVEL = 1;
4 |
--------------------------------------------------------------------------------
/packages/EditorTools/constants/Points.ts:
--------------------------------------------------------------------------------
1 | import { POINT_TYPE } from '../enum/point-type';
2 |
3 | /**
4 | * 所有的锚点
5 | */
6 | export const ALL_POINT: POINT_TYPE[] = [
7 | POINT_TYPE.LEFT_TOP,
8 | POINT_TYPE.TOP_CENTER,
9 | POINT_TYPE.RIGHT_TOP,
10 | POINT_TYPE.RIGHT_CENTER,
11 | POINT_TYPE.RIGHT_BOTTOM,
12 | POINT_TYPE.BOTTOM_CENTER,
13 | POINT_TYPE.LEFT_BOTTOM,
14 | POINT_TYPE.LEFT_CENTER,
15 | ];
16 |
17 | /**
18 | * 中心的锚点
19 | */
20 | export const CENTER_POINT = [
21 | POINT_TYPE.TOP_CENTER,
22 | POINT_TYPE.LEFT_CENTER,
23 | POINT_TYPE.RIGHT_CENTER,
24 | POINT_TYPE.BOTTOM_CENTER,
25 | ];
26 |
--------------------------------------------------------------------------------
/packages/EditorTools/core/MaskContainScaleHandler.ts:
--------------------------------------------------------------------------------
1 | import { RectData, Coordinate } from '../types/Editor';
2 | import { getMaskInCanvasRectData } from '../helper/math';
3 | import ScaleHandler from './ScaleHandler';
4 | import type { ScaleHandlerOptions } from './ScaleHandler';
5 | import { POINT_TYPE } from '../enum/point-type';
6 |
7 | export default class MaskContainScaleHandler {
8 | /** 矩形数据 */
9 | private readonly rectData: RectData;
10 |
11 | /** 拉伸函数实例 */
12 | private scaleHandler: ScaleHandler;
13 |
14 | constructor(
15 | rectData: RectData,
16 | pointType: POINT_TYPE,
17 | options: ScaleHandlerOptions
18 | ) {
19 | this.rectData = rectData;
20 | this.scaleHandler = new ScaleHandler(
21 | getMaskInCanvasRectData(this.rectData),
22 | pointType,
23 | options
24 | );
25 | }
26 |
27 | /**
28 | * 拉伸
29 | * */
30 | public onScale(mousePosition: Coordinate): RectData {
31 | const newMaskDataInEditArea = this.scaleHandler.onScale(mousePosition);
32 |
33 | const { width, height } = this.rectData;
34 | const rateW = newMaskDataInEditArea.width / width;
35 | const rateH = newMaskDataInEditArea.height / height;
36 |
37 | const rate = Math.min(rateW, rateH);
38 | /** 新宽高 */
39 | const newWidth = width * rate;
40 | const newHeight = height * rate;
41 |
42 | /** 让图片居中显示 */
43 | const offsetX = (newWidth - newMaskDataInEditArea.width) / 2;
44 | const offsetY = (newHeight - newMaskDataInEditArea.height) / 2;
45 | /** 新坐标 */
46 | const newX = newMaskDataInEditArea.x + -offsetX;
47 | const newY = newMaskDataInEditArea.y + -offsetY;
48 |
49 | return {
50 | x: newX,
51 | y: newY,
52 | width: newWidth,
53 | height: newHeight,
54 | mask: {
55 | width: newMaskDataInEditArea.width,
56 | height: newMaskDataInEditArea.height,
57 | x: offsetX,
58 | y: offsetY,
59 | },
60 | anchor: { x: 0.5, y: 0.5 },
61 | };
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/packages/EditorTools/core/RotateHandler.ts:
--------------------------------------------------------------------------------
1 | import { RectData, Coordinate } from '../types/Editor';
2 | import {
3 | toAngle,
4 | getRectCenter,
5 | getMaskInCanvasRectData,
6 | } from '../helper/math';
7 |
8 | export default class RotateHandler {
9 | /** 旋转角度 */
10 | private readonly startRotate: number;
11 |
12 | /** 矩形数据 */
13 | private readonly rectCenterData: Coordinate;
14 |
15 | /** 鼠标在画布中开始坐标 */
16 | private readonly mouseStartData: Coordinate;
17 |
18 | constructor(rectData: RectData, mouseStartData: Coordinate, angle: number) {
19 | /** 计算可视区域到画布的矩形信息，也就是mask到基于画布的信息 */
20 | rectData = getMaskInCanvasRectData(rectData);
21 | this.rectCenterData = getRectCenter(rectData);
22 | this.mouseStartData = mouseStartData;
23 | this.startRotate = angle;
24 | }
25 |
26 | /**
27 | * 旋转
28 | * */
29 | public onRotate(mousePosition: Coordinate): number {
30 | const { x: centerX, y: centerY } = this.rectCenterData;
31 | const { x: startX, y: startY } = this.mouseStartData;
32 | /** 旋转前的角度 */
33 | const rotateDegreeBefore = toAngle(
34 | Math.atan2(startY - centerY, startX - centerX)
35 | );
36 | /** 旋转后的角度 */
37 | const rotateDegreeAfter = toAngle(
38 | Math.atan2(mousePosition.y - centerY, mousePosition.x - centerX)
39 | );
40 |
41 | /** 获取旋转的角度值，需要加上开始的角度*/
42 | return rotateDegreeAfter - rotateDegreeBefore + this.startRotate;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/EditorTools/core/dragAction.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 传输参数
3 | * */
4 | export interface DragExecutor {
5 | /** 鼠标按下触发事件 */
6 | init?: (event: MouseEvent) => void;
7 | /** 鼠标移动触发事件 */
8 | move?: (moveEvent: MouseEvent) => void;
9 | /** 鼠标抬起触发事件 */
10 | end?: (endEvent: MouseEvent) => void;
11 | }
12 |
13 | /**
14 | * drag事件
15 | **/
16 | const dragAction = (event: MouseEvent, executors: DragExecutor) => {
17 | executors.init?.(event);
18 | const startMove = (moveEvent: MouseEvent) => {
19 | executors.move?.(moveEvent);
20 | };
21 |
22 | const endMove = (endEvent: MouseEvent) => {
23 | executors.end?.(endEvent);
24 | document.removeEventListener('mousemove', startMove);
25 | document.removeEventListener('mouseup', endMove);
26 | };
27 |
28 | document.addEventListener('mousemove', startMove);
29 | document.addEventListener('mouseup', endMove);
30 | };
31 |
32 | export default dragAction;
33 |
--------------------------------------------------------------------------------
/packages/EditorTools/enum/point-type.ts:
--------------------------------------------------------------------------------
1 | /** 枚举位置 */
2 | export enum POINT_TYPE {
3 | LEFT_TOP = 'leftTop',
4 | RIGHT_TOP = 'rightTop',
5 | LEFT_BOTTOM = 'leftBottom',
6 | RIGHT_BOTTOM = 'rightBottom',
7 | TOP_CENTER = 'topCenter',
8 | RIGHT_CENTER = 'rightCenter',
9 | BOTTOM_CENTER = 'bottomCenter',
10 | LEFT_CENTER = 'leftCenter',
11 | ROTATE = 'rotate',
12 | }
13 |
--------------------------------------------------------------------------------
/packages/EditorTools/helper/magneticLine.ts:
--------------------------------------------------------------------------------
1 | import { Coordinate, Size } from '../types/Editor';
2 | import { Range, LineData } from '../types/MagneticLine';
3 |
4 | /**
5 | * 将一组对齐吸附线进行去重：同位置的的多条对齐吸附线仅留下一条，取该位置所有对齐吸附线的最大值和最小值为新的范围
6 | * @param lines 一组对齐吸附线信息
7 | */
8 | export function uniqAlignLines(lines: LineData[]) {
9 | const map: Record...
11 | */
12 | .multiple-line-omit {
13 | display: box !important;
14 | overflow: hidden;
15 | text-overflow: ellipsis;
16 | -webkit-line-clamp: var(--line, 2);
17 | -webkit-box-orient: vertical;
18 | }
19 |
20 | /** 马赛克背景 */
21 | .mosaic-background {
22 | background-image: linear-gradient(
23 | 45deg,
24 | #ecf0f5 25%,
25 | transparent 25%,
26 | transparent 75%,
27 | #ecf0f5 75%,
28 | #ecf0f5 100%
29 | ),
30 | linear-gradient(
31 | 45deg,
32 | #ecf0f5 25%,
33 | white 25%,
34 | white 75%,
35 | #ecf0f5 75%,
36 | #ecf0f5 100%
37 | );
38 | background-position: 0 0, 8px 8px;
39 | background-size: 16px 16px;
40 | }
41 |
--------------------------------------------------------------------------------
/src/assets/styles/index.less:
--------------------------------------------------------------------------------
1 | @import './common.less';
2 |
3 | @import './reset.less';
4 |
5 | @import './setting.less';
6 |
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
--------------------------------------------------------------------------------
/src/assets/styles/reset.less:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html,
7 | body,
8 | div,
9 | span,
10 | applet,
11 | object,
12 | iframe,
13 | h1,
14 | h2,
15 | h3,
16 | h4,
17 | h5,
18 | h6,
19 | p,
20 | blockquote,
21 | pre,
22 | a,
23 | abbr,
24 | acronym,
25 | address,
26 | big,
27 | cite,
28 | code,
29 | del,
30 | dfn,
31 | em,
32 | img,
33 | ins,
34 | kbd,
35 | q,
36 | s,
37 | samp,
38 | small,
39 | strike,
40 | strong,
41 | sub,
42 | sup,
43 | tt,
44 | var,
45 | b,
46 | u,
47 | i,
48 | center,
49 | dl,
50 | dt,
51 | dd,
52 | ol,
53 | ul,
54 | li,
55 | fieldset,
56 | form,
57 | label,
58 | legend,
59 | table,
60 | caption,
61 | tbody,
62 | tfoot,
63 | thead,
64 | tr,
65 | th,
66 | td,
67 | article,
68 | aside,
69 | canvas,
70 | details,
71 | embed,
72 | figure,
73 | figcaption,
74 | footer,
75 | header,
76 | hgroup,
77 | menu,
78 | nav,
79 | output,
80 | ruby,
81 | section,
82 | summary,
83 | time,
84 | mark,
85 | audio,
86 | video {
87 | margin: 0;
88 | padding: 0;
89 | font: inherit;
90 | font-size: 100%;
91 | vertical-align: baseline;
92 | border: 0;
93 | }
94 |
95 | /* HTML5 display-role reset for older browsers */
96 | article,
97 | aside,
98 | details,
99 | figcaption,
100 | figure,
101 | footer,
102 | header,
103 | hgroup,
104 | menu,
105 | nav,
106 | section {
107 | display: block;
108 | }
109 |
110 | body {
111 | line-height: 1;
112 | }
113 |
114 | ol,
115 | ul {
116 | list-style: none;
117 | }
118 |
119 | blockquote,
120 | q {
121 | quotes: none;
122 | }
123 |
124 | blockquote::before,
125 | blockquote::after,
126 | q::before,
127 | q::after {
128 | content: '';
129 | content: none;
130 | }
131 |
132 | table {
133 | border-collapse: collapse;
134 | border-spacing: 0;
135 | }
136 |
--------------------------------------------------------------------------------
/src/assets/styles/setting.less:
--------------------------------------------------------------------------------
1 | .setting-row {
2 | height: 36px;
3 | }
4 |
5 | .title-text {
6 | color: #222529;
7 | font-weight: 700;
8 | font-size: 12px;
9 | }
10 |
11 | .locked {
12 | cursor: not-allowed;
13 | opacity: 0.5;
14 | }
15 |
16 | .attribute-row {
17 | display: flex;
18 | align-items: center;
19 | justify-content: space-between;
20 | width: 100%;
21 | margin-bottom: 10px;
22 | padding: 0 10px;
23 | background-color: #f3f4f6;
24 | border-radius: 4px;
25 |
26 | .icon-item {
27 | display: inline-block;
28 | width: 30px;
29 | height: 30px;
30 | margin-right: 5px;
31 | line-height: 30px;
32 | text-align: center;
33 | border-radius: 4px;
34 | cursor: pointer;
35 |
36 | &:hover {
37 | color: #000;
38 | background-color: #e5e7eb;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/ContextMenu/ContextMenu.module.less:
--------------------------------------------------------------------------------
1 | .menu {
2 | position: fixed;
3 | z-index: 50;
4 | z-index: 1000;
5 | min-width: 200px;
6 | padding: 4px;
7 | background-color: white;
8 | border: 1px solid #e5e7eb;
9 | border-radius: 4px;
10 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
11 | }
12 |
13 | .sub-menu {
14 | position: absolute;
15 | z-index: 1001;
16 | padding: 4px;
17 | background-color: white;
18 | border-radius: 4px;
19 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
20 | }
21 |
22 | .menu-item {
23 | position: relative;
24 | display: flex;
25 | align-items: center;
26 | justify-content: space-between;
27 | min-width: 200px;
28 | max-width: 80%;
29 | height: 40px;
30 | padding: 0 8px;
31 | border-radius: 4px;
32 | cursor: pointer;
33 | user-select: none;
34 |
35 | &:not(.menu-item-disabled):hover {
36 | background-color: #eff6ff;
37 | }
38 | }
39 |
40 | .menu-item-info {
41 | display: flex;
42 | gap: 4px;
43 | align-items: center;
44 | justify-content: left;
45 | }
46 |
47 | .menu-item-label {
48 | max-width: 160px;
49 | overflow: hidden;
50 | font-size: 14px;
51 | white-space: nowrap;
52 | text-overflow: ellipsis;
53 | }
54 |
55 | .menu-item-shortcut {
56 | margin-left: 8px;
57 | color: #9ca3af;
58 | font-size: 12px;
59 | }
60 |
61 | .menu-item-active {
62 | background-color: #eff6ff;
63 | }
64 |
65 | .menu-item-disabled {
66 | cursor: not-allowed;
67 | opacity: 0.5;
68 | }
69 |
70 | .divider {
71 | height: 1px;
72 | margin: 4px 0;
73 | background-color: #e5e7eb;
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/ContextMenu/ContextMenu.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import {
3 | createContainerById,
4 | removeContainerById,
5 | render,
6 | } from '@/utils/portalRender';
7 | import { useEscapeClose, useGlobalClick } from '@/hooks';
8 | import ContextMenuContent from './ContextMenuContent';
9 | import Style from './ContextMenu.module.less';
10 | import { MenuItem } from './props';
11 |
12 | export interface ContextMenuProps {
13 | items: MenuItem[];
14 | x: number;
15 | y: number;
16 | }
17 |
18 | export default function ContextMenu(props: ContextMenuProps) {
19 | const { items, x, y } = props;
20 |
21 | const [position, setPosition] = useState({ x, y });
22 | const menuRef = useRef
61 |
65 | );
66 | }
67 |
68 | const CONTEXT_MENU_ID = 'magic-context-menu';
69 |
70 | ContextMenu.show = function show(props: ContextMenuProps) {
71 | const container = createContainerById(CONTEXT_MENU_ID);
72 | const content =
62 |
64 |
48 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/ContextMenu/SubMenu.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState, RefObject } from 'react';
2 | import ContextMenuContent from './ContextMenuContent';
3 | import { MenuItem } from './props';
4 | import Style from './ContextMenu.module.less';
5 |
6 | interface SubMenuProps {
7 | items: MenuItem[];
8 | parentRef: RefObject
49 | {item.icon}
50 | {item.label}
51 |
52 |
53 | {item.shortcut && (
54 |
55 | {item.shortcut}
56 |
57 | )}
58 | {item.children && (
59 | <>
60 |
61 |
47 |
49 | );
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/ContextMenu/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './ContextMenu';
2 | export type { ContextMenuProps } from './ContextMenu';
3 |
--------------------------------------------------------------------------------
/src/components/ContextMenu/props.ts:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 |
3 | export interface MenuItem {
4 | label: string;
5 | onClick?: () => void;
6 | shortcut?: string;
7 | icon?: ReactNode;
8 | disabled?: boolean;
9 | children?: MenuItem[];
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/Crop/Crop.module.less:
--------------------------------------------------------------------------------
1 | .crop {
2 | position: relative;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | width: 100%;
7 | height: 100%;
8 | background: rgba(0, 0, 0, 0.1);
9 | }
10 |
11 | .editor_area {
12 | position: relative;
13 | }
14 |
15 | .grid_box,
16 | .img_box {
17 | position: absolute;
18 | top: 0;
19 | }
20 |
21 | .img {
22 | width: 100%;
23 | height: 100%;
24 | object-fit: contain;
25 | user-select: none;
26 | -webkit-user-drag: none;
27 | }
28 |
29 | .grid_vertical_line {
30 | position: absolute;
31 | top: 0;
32 | width: 1px;
33 | height: 100%;
34 | background-image: linear-gradient(
35 | to top,
36 | rgba(255, 255, 255, 1) 0%,
37 | rgba(255, 255, 255, 1) 50%,
38 | transparent 50%
39 | );
40 | background-repeat: repeat-y;
41 | background-size: 1px 8px;
42 | }
43 |
44 | .grid_horizontal_line {
45 | position: absolute;
46 | left: 0;
47 | width: 100%;
48 | height: 1px;
49 | background-image: linear-gradient(
50 | to right,
51 | rgba(255, 255, 255, 1) 0%,
52 | rgba(255, 255, 255, 1) 50%,
53 | transparent 50%
54 | );
55 | background-repeat: repeat-x;
56 | background-size: 8px 1px;
57 | }
58 |
59 | .editor_box {
60 | cursor: move;
61 | }
62 |
63 | .btn_box {
64 | position: absolute;
65 | right: 16px;
66 | bottom: 16px;
67 |
68 | .confirm {
69 | margin-left: 10px;
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/Crop/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Crop';
2 |
--------------------------------------------------------------------------------
/src/components/Editor/Editor.module.less:
--------------------------------------------------------------------------------
1 | .editor {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | width: 100%;
6 | }
7 |
8 | .hidden {
9 | display: none;
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/Editor/Editor.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react';
2 | import cls from 'classnames';
3 | import { MagneticLine, MagneticLineType } from '@p/EditorTools';
4 | import EditorControl from './EditorControl';
5 | import { LayerStrucType } from '@/types/model';
6 | import Hover from './Hover';
7 | import RichText from './RichText';
8 | import { magic } from '@/store';
9 | import Style from './Editor.module.less';
10 |
11 | interface EditorProps {
12 | isMultiple?: boolean;
13 | zoomLevel?: number;
14 | activedLayers: LayerStrucType[];
15 | magneticLines?: MagneticLineType[] | null;
16 | }
17 |
18 | function Editor(props: EditorProps) {
19 | const {
20 | isMultiple = false,
21 | activedLayers,
22 | zoomLevel = 1,
23 | magneticLines,
24 | } = props;
25 |
26 | const model = activedLayers[0];
27 |
28 | const getEditorControl = () => {
29 | if (activedLayers.length === 0) return null;
30 |
31 | if (isMultiple) {
32 | return 多选框
;
33 | }
34 |
35 | return
44 | {/* 编辑框 */}
45 | {getEditorControl()}
46 |
47 | {/* hover 框 */}
48 |
58 | );
59 | }
60 |
61 | export default observer(Editor);
62 |
--------------------------------------------------------------------------------
/src/components/Editor/EditorControl/EditorControl.module.less:
--------------------------------------------------------------------------------
1 | .editor_control {
2 | cursor: move;
3 | }
4 |
5 | .pointer_events_none {
6 | pointer-events: none;
7 | }
8 |
9 | .preview_size {
10 | position: absolute;
11 | z-index: 10;
12 | padding: 2px 4px;
13 | color: #fff;
14 | font-size: 14px;
15 | white-space: nowrap;
16 | background: #191919;
17 | border-radius: 3px;
18 | user-select: none;
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/Editor/EditorControl/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './EditorControl';
2 |
--------------------------------------------------------------------------------
/src/components/Editor/Hover/Hover.module.less:
--------------------------------------------------------------------------------
1 | .hover_wrap {
2 | position: absolute;
3 | border: 2px solid #0f0;
4 | pointer-events: none;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/Editor/Hover/Hover.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react';
2 | import { useStores } from '@/store';
3 | import { getLayerOuterStyles } from '@/helpers/Styles';
4 |
5 | import style from './Hover.module.less';
6 |
7 | function Hover() {
8 | const { magic, OS } = useStores();
9 | const { activedLayers, hoveredLayer } = magic;
10 | const zoomLevel = OS.zoomLevel;
11 |
12 | const isActived = activedLayers.some(cmp => cmp.id === hoveredLayer?.id);
13 |
14 | if (!hoveredLayer || isActived) {
15 | return null;
16 | }
17 | const hoverStyle = getLayerOuterStyles(hoveredLayer, zoomLevel);
18 |
19 | return ;
20 | }
21 |
22 | export default observer(Hover);
23 |
--------------------------------------------------------------------------------
/src/components/Editor/Hover/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Hover';
2 |
--------------------------------------------------------------------------------
/src/components/Editor/RichText/RichText.module.less:
--------------------------------------------------------------------------------
1 | .rich_text_contariner {
2 | position: absolute;
3 | visibility: hidden;
4 | }
5 |
6 | .rich_text_main {
7 | outline: none;
8 |
9 | :global {
10 | .ql-editor {
11 | padding: 0;
12 | overflow: visible;
13 | white-space: break-spaces;
14 | outline: none;
15 | cursor: text;
16 | // user-select: none;
17 | line-break: anywhere;
18 | }
19 |
20 | .ql-clipboard {
21 | position: absolute;
22 | top: 50%;
23 | left: -100000px;
24 | height: 1px;
25 | overflow-y: hidden;
26 | }
27 | }
28 | }
29 |
30 | .show {
31 | visibility: visible;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/Editor/RichText/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './RichText';
2 |
--------------------------------------------------------------------------------
/src/components/Editor/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Editor';
2 |
--------------------------------------------------------------------------------
/src/components/LayerBaseSetting/Flip/Flip.module.less:
--------------------------------------------------------------------------------
1 | .popover_flip {
2 | :global {
3 | .ant-popover-arrow {
4 | display: none;
5 | }
6 |
7 | .ant-popover-inner {
8 | padding: 8px 0;
9 | }
10 |
11 | .ant-popover-title {
12 | margin: 0;
13 | }
14 | }
15 | }
16 |
17 | .flip_option_item {
18 | padding: 10px 12px;
19 | font-size: 12px;
20 | border-radius: 8px;
21 | cursor: pointer;
22 |
23 | &:hover {
24 | background-color: #e5e7eb;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/LayerBaseSetting/Flip/Flip.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Popover } from 'antd';
3 | import cls from 'classnames';
4 | import { LayerStrucType } from '@/types/model';
5 |
6 | import Style from './Flip.module.less';
7 |
8 | interface FlipProps {
9 | model: LayerStrucType;
10 | className: string;
11 | }
12 |
13 | export default function Flip(props: FlipProps) {
14 | const { model, className } = props;
15 |
16 | const [flipPopoverOpen, setFlipPopoverOpen] = useState(false);
17 |
18 | const onFlipPopoverOpenChange = (open: boolean) => {
19 | const value = model.isLock ? false : open;
20 | setFlipPopoverOpen(value);
21 | };
22 |
23 | const handleFlipX = () => {
24 | !model.isLock && model.flipX();
25 | setFlipPopoverOpen(false);
26 | };
27 |
28 | const handleFlipY = () => {
29 | !model.isLock && model.flipY();
30 | setFlipPopoverOpen(false);
31 | };
32 |
33 | const flipOptions = (
34 | <>
35 |
36 | 水平翻转
37 |
38 |
39 | 垂直翻转
40 |
41 |
42 | );
43 |
44 | return (
45 |
56 | {actionList.map(action => (
57 |
73 | );
74 |
75 | /** popover 的元素渲染 */
76 | const renderChildren = children || (
77 | {
63 | handleClickMenu(action);
64 | }}
65 | >
66 | {action.icon && (
67 |
71 | ))}
72 | {action.icon}
68 | )}
69 | {action.name}
70 |
78 | {Array.from({ length: 3 }, (_, index) => (
79 |
80 | ))}
81 |
82 | );
83 |
84 | return (
85 |
14 | {isImageFill && (
15 | 
16 | )}
17 | {isColorFill && (
18 |
19 | )}
20 |
21 | );
22 | }
23 |
24 | export default observer(Back);
25 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Back/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Back';
2 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Group/Group.tsx:
--------------------------------------------------------------------------------
1 | export default function Group() {
2 | return Group
;
3 | }
4 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Group/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Group';
2 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Image/Image.module.less:
--------------------------------------------------------------------------------
1 | .image_container {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | }
6 |
7 | .image {
8 | width: 100%;
9 | height: 100%;
10 | object-fit: contain;
11 | user-select: none;
12 | -webkit-user-drag: none;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Image/Image.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react';
2 | import { ImageStruc } from '@/models/LayerStruc';
3 | import { LayerProps } from '../Layer';
4 | import Style from './Image.module.less';
5 |
6 | interface ImageProps extends LayerProps
13 |
14 |
15 | );
16 | }
17 |
18 | export default observer(Image);
19 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Image/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Image';
2 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Layer.module.less:
--------------------------------------------------------------------------------
1 | .layer {
2 | position: absolute;
3 | overflow: hidden;
4 | }
5 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Layer.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentType, CSSProperties } from 'react';
2 | import { observer } from 'mobx-react';
3 | import { LayerTypeEnum } from '@/constants/LayerTypeEnum';
4 | import { LayerStrucType } from '@/types/model';
5 | import Image from './Image';
6 | import Text from './Text';
7 | import Group from './Group';
8 | import Back from './Back';
9 | import Shape from './Shape';
10 | import Style from './Layer.module.less';
11 | import { useStores } from '@/store';
12 | import { getLayerOuterStyles, getLayerInnerStyles } from '@/helpers/Styles';
13 | import { moveHandle } from '@/utils/move';
14 | import { NodeNameplate } from '@/constants/NodeNamePlate';
15 |
16 | const LayerCmpMap = {
17 | [LayerTypeEnum.BACKGROUND]: Back,
18 | [LayerTypeEnum.GROUP]: Group,
19 | [LayerTypeEnum.TEXT]: Text,
20 | [LayerTypeEnum.IMAGE]: Image,
21 | [LayerTypeEnum.SHAPE]: Shape,
22 | };
23 |
24 | export interface LayerProps
94 |
96 | );
97 | }
98 |
99 | export default observer(Layer);
100 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Shape/Shape.tsx:
--------------------------------------------------------------------------------
1 | import { ShapeStruc } from '@/models/LayerStruc';
2 | import { LayerProps } from '../Layer';
3 |
4 | interface ShapeProps
5 | extends LayerProps
77 | {/* 文字主体 */}
78 |
86 |
87 | );
88 | }
89 |
90 | export default observer(Text);
91 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/Text/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Text';
2 |
--------------------------------------------------------------------------------
/src/components/Renderer/Layer/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Layer';
2 |
--------------------------------------------------------------------------------
/src/components/Renderer/Renderer.module.less:
--------------------------------------------------------------------------------
1 | .renderer {
2 | position: relative;
3 | width: auto;
4 | height: 100%;
5 | overflow: hidden;
6 | transform-origin: top left;
7 | pointer-events: none;
8 | }
9 |
10 | .editable {
11 | pointer-events: auto;
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Renderer/Renderer.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties } from 'react';
2 | import cls from 'classnames';
3 | import { observer } from 'mobx-react';
4 | import SceneStruc from '@/models/SceneStruc';
5 | import Layer from './Layer';
6 | import Style from './Renderer.module.less';
7 |
8 | interface RendererProps {
9 | zoomLevel?: number;
10 |
11 | scene: SceneStruc;
12 |
13 | editable?: boolean;
14 |
15 | style?: CSSProperties;
16 |
17 | className?: string;
18 | }
19 |
20 | function Renderer(props: RendererProps) {
21 | const { scene, zoomLevel = 1, editable, style, className } = props;
22 | const { layers } = scene;
23 |
24 | return (
25 |
31 | {layers?.map(layer => (
32 |
35 | );
36 | }
37 |
38 | export default observer(Renderer);
39 |
--------------------------------------------------------------------------------
/src/components/Renderer/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Renderer';
2 |
--------------------------------------------------------------------------------
/src/components/SettingContainer/SettingContainer.module.less:
--------------------------------------------------------------------------------
1 | .setting_container {
2 | height: 100%;
3 | }
4 |
5 | .title {
6 | height: 48px;
7 | padding: 0 24px;
8 | font-weight: 700;
9 | font-size: 14px;
10 | line-height: 48px;
11 | border-bottom: 1px solid rgb(229, 231, 235);
12 | }
13 |
14 | .content {
15 | height: calc(100% - 48px);
16 | padding: 16px;
17 | overflow-y: auto;
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/SettingContainer/SettingContainer.tsx:
--------------------------------------------------------------------------------
1 | import Style from './SettingContainer.module.less';
2 |
3 | interface SettingContainerProps {
4 | title: string;
5 | children?: React.ReactElement[] | React.ReactElement;
6 | }
7 |
8 | export default function SettingContainer(props: SettingContainerProps) {
9 | const { title, children } = props;
10 | return (
11 |
12 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/SettingContainer/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './SettingContainer';
2 |
--------------------------------------------------------------------------------
/src/components/SliderNumberInput/SliderNumberInput.module.less:
--------------------------------------------------------------------------------
1 | .slider_number_input {
2 | display: flex;
3 | gap: 10px;
4 | align-items: center;
5 | width: 100%;
6 | }
7 |
8 | .slider {
9 | flex: 1;
10 | }
11 |
12 | .input_number {
13 | width: 50px;
14 | height: 26px;
15 |
16 | :global {
17 | .ant-input-number-handler-wrap {
18 | width: 15px;
19 | }
20 |
21 | .ant-input-number-input {
22 | padding: 0 6px;
23 | }
24 |
25 | .ant-input-number-input-wrap,
26 | .ant-input-number-input {
27 | height: 100%;
28 | }
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/SliderNumberInput/SliderNumberInput.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { Slider, InputNumber } from 'antd';
3 | import Style from './SliderNumberInput.module.less';
4 |
5 | interface SliderNumberInputProps {
6 | prefixIcon?: ReactNode;
7 | min?: number;
8 | max?: number;
9 | value?: number;
10 | onChange?: (val: number) => void;
11 | }
12 |
13 | export default function SliderNumberInput(props: SliderNumberInputProps) {
14 | const { prefixIcon, value, min = 0, max = 100, onChange } = props;
15 |
16 | const inputChange = (value: number | null) => {
17 | onChange?.(Number(value));
18 | };
19 |
20 | return (
21 | {title}
13 | {children}
14 |
22 | {prefixIcon}
23 |
24 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/SliderNumberInput/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './SliderNumberInput';
2 |
--------------------------------------------------------------------------------
/src/components/Upload/Upload.tsx:
--------------------------------------------------------------------------------
1 | import { ReactElement, cloneElement, useRef } from 'react';
2 |
3 | interface UploadProps {
4 | children: ReactElement;
5 | accept?: string[];
6 | multiple?: boolean;
7 | onChange?: (files: File[]) => void;
8 | }
9 |
10 | export default function Upload(props: UploadProps) {
11 | const { children, multiple, accept, onChange } = props;
12 |
13 | const inputRef = useRef
48 |
71 |
73 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/src/layout/Header/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Header';
2 |
--------------------------------------------------------------------------------
/src/layout/Layout.module.less:
--------------------------------------------------------------------------------
1 | .layout {
2 | height: 100vh;
3 | }
4 |
5 | .main {
6 | display: flex;
7 | height: calc(100% - 60px);
8 | }
9 |
--------------------------------------------------------------------------------
/src/layout/Layout.tsx:
--------------------------------------------------------------------------------
1 | import Header from './Header';
2 | import Material from './Material';
3 | import Stage from './Stage';
4 | import Setting from './Setting';
5 |
6 | import Style from './Layout.module.less';
7 |
8 | export default function Layout() {
9 | return (
10 |
49 |
53 |
50 | {magic.name}
51 |
52 |
54 |
57 |
58 |
60 |
61 |
11 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Back/Back.module.less:
--------------------------------------------------------------------------------
1 | .title {
2 | margin-bottom: 8px;
3 | padding: 6px 0;
4 | border-bottom: 1px solid #e6e9f0;
5 | }
6 |
7 | .color_wrapper {
8 | display: grid;
9 | grid-gap: 8px;
10 | grid-template-columns: repeat(auto-fill, 40px);
11 | padding: 0 3px;
12 | }
13 |
14 | .color_item {
15 | height: 40px;
16 | border-radius: 4px;
17 | cursor: pointer;
18 |
19 | &:hover {
20 | transform: scale(1.1);
21 | transition: transform 0.3s;
22 | }
23 | }
24 |
25 | .picture_wrapper {
26 | margin-top: 10px;
27 | }
28 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Back/Back.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode } from 'react';
2 | import { observer } from 'mobx-react';
3 | import { Button } from 'antd';
4 | import Upload from '@/components/Upload';
5 | import { BackColorList } from '@/config/ColorList';
6 | import { fileToBase64 } from '@/utils/file';
7 | import { useStores } from '@/store';
8 | import Style from './Back.module.less';
9 |
10 | interface BackContentProps {
11 | title: string;
12 | children: ReactNode;
13 | className?: string;
14 | }
15 |
16 | function BackContent(props: BackContentProps) {
17 | const { title, children, className } = props;
18 |
19 | return (
20 |
14 |
18 |
21 |
24 | );
25 | }
26 |
27 | function Back() {
28 | const { magic } = useStores();
29 |
30 | const { activedScene } = magic;
31 |
32 | const addBackImage = async (files: File[]) => {
33 | const file = files[0];
34 | if (!file) return;
35 | const dataUrl = await fileToBase64(file);
36 | activedScene?.updateSceneBack({ fillType: 'Image', url: dataUrl });
37 | };
38 |
39 | const addBackColor = (color: string) => {
40 | activedScene?.updateSceneBack({ fillType: 'Color', color });
41 | };
42 |
43 | return (
44 | {title}
22 | {children}
23 |
45 |
46 |
59 |
60 |
61 |
62 |
65 |
66 |
67 |
68 | );
69 | }
70 |
71 | export default observer(Back);
72 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Back/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Back';
2 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Image/Image.tsx:
--------------------------------------------------------------------------------
1 | import { observer } from 'mobx-react';
2 | import { Button } from 'antd';
3 | import { fileToBase64 } from '@/utils/file';
4 | import Upload from '@/components/Upload';
5 | import { makeImage } from '@/utils/image';
6 | import { magic } from '@/store';
7 |
8 | function Image() {
9 | const { activedScene } = magic;
10 | const addImage = async (files: File[]) => {
11 | const file = files[0];
12 | if (!file) return;
13 | const url = await fileToBase64(file);
14 | const { width, height } = await makeImage(url);
15 |
16 | activedScene?.addImage({
17 | name: file.name,
18 | width,
19 | height,
20 | url,
21 | mimeType: file.type,
22 | });
23 | };
24 |
25 | return (
26 | -
47 | {BackColorList.map(color => (
48 |
- addBackColor(color)} 55 | /> 56 | ))} 57 |
16 | {ShapeList.map((shape, index) => (
17 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Shape/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Shape';
2 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Text/Text.module.less:
--------------------------------------------------------------------------------
1 | .text {
2 | position: relative;
3 | }
4 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Text/Text.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from 'antd';
2 | import { magic } from '@/store';
3 | import Style from './Text.module.less';
4 |
5 | export default function Text() {
6 | const { activedScene } = magic;
7 |
8 | return (
9 | addShape(shape)}
19 | className={Style.shape_item}
20 | key={`${shape.name}-${index}`}
21 | >
22 |
24 | ))}
25 |
10 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/layout/Material/Content/Text/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Text';
2 |
--------------------------------------------------------------------------------
/src/layout/Material/Material.module.less:
--------------------------------------------------------------------------------
1 | .material {
2 | width: 300px;
3 | min-width: 300px;
4 | height: 100%;
5 | border-right: 1px solid #d9d9d9;
6 | }
7 |
--------------------------------------------------------------------------------
/src/layout/Material/Material.tsx:
--------------------------------------------------------------------------------
1 | import { useStores } from '@/store';
2 | import { MATERIAL_MENUS } from './constants';
3 | import SidebarMenu from './SidebarMenu';
4 | import Style from './Material.module.less';
5 |
6 | export default function Material() {
7 | const { material } = useStores();
8 | return (
9 |
10 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/layout/Material/SidebarMenu/SidebarMenu.module.less:
--------------------------------------------------------------------------------
1 | .sidebar_menu {
2 | display: flex;
3 | height: 100%;
4 | }
5 |
6 | .menu {
7 | height: 100%;
8 | border-right: 1px solid #d9d9d9;
9 |
10 | :global {
11 | .ant-tabs {
12 | width: 68px;
13 | }
14 |
15 | .ant-tabs-tab {
16 | display: flex;
17 | flex-direction: column;
18 | align-items: center;
19 | justify-content: center;
20 | box-sizing: border-box;
21 | width: 68px;
22 | margin-top: 14px;
23 | padding: 8px 0 !important;
24 | cursor: pointer;
25 | }
26 |
27 | .ant-tabs-ink-bar {
28 | display: none;
29 | }
30 |
31 | .ant-tabs-content-holder {
32 | border: 0;
33 | }
34 | }
35 | }
36 |
37 | .menu_content {
38 | display: flex;
39 | flex-direction: column;
40 | align-items: center;
41 | justify-content: center;
42 | }
43 |
44 | .content {
45 | flex: 1;
46 | padding: 20px;
47 | }
48 |
--------------------------------------------------------------------------------
/src/layout/Material/SidebarMenu/SidebarMenu.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, createElement } from 'react';
2 | import { Tabs } from 'antd';
3 | import { observer } from 'mobx-react';
4 | import MaterialStore from '@/store/Material';
5 | import { MenuItemModel } from '@/types/material';
6 |
7 | import Style from './SidebarMenu.module.less';
8 |
9 | interface MenuProps {
10 | /** 侧边栏store */
11 | materialStore: MaterialStore;
12 |
13 | /** 菜单配置项 */
14 | options: MenuItemModel[];
15 | }
16 |
17 | function SidebarMenu(props: MenuProps) {
18 | const { options = [], materialStore } = props;
19 |
20 | const { activeMenu } = materialStore;
21 |
22 | /** 切换菜单 */
23 | const handleSwitchMenu = menuKey => {
24 | materialStore.changeMenu(menuKey);
25 | };
26 |
27 | /** 当前激活的菜单配置 */
28 | const actived = useMemo(
29 | () => options.find(item => item.name === activeMenu),
30 | [activeMenu, options]
31 | );
32 |
33 | /** 需要展示的菜单 */
34 | const showOptions = useMemo(
35 | () => options.filter(item => !item.hiddenLabel),
36 | [options]
37 | );
38 |
39 | const items = useMemo(
40 | () =>
41 | showOptions.map(item => ({
42 | key: item.name,
43 | label: (
44 |
45 |
46 | {item.label}
47 |
48 | ),
49 | children: null,
50 | })),
51 | [showOptions]
52 | );
53 |
54 | return (
55 |
56 | {/* 菜单区域 */}
57 |
70 | );
71 | }
72 |
73 | export default observer(SidebarMenu);
74 |
--------------------------------------------------------------------------------
/src/layout/Material/SidebarMenu/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './SidebarMenu';
2 |
--------------------------------------------------------------------------------
/src/layout/Material/constants.ts:
--------------------------------------------------------------------------------
1 | import { MaterialEnum } from '@/constants/MaterialEnum';
2 | import { MenuItemModel } from '@/types/material';
3 | import Image from './Content/Image';
4 | import Back from './Content/Back';
5 | import Text from './Content/Text';
6 | import Shape from './Content/Shape';
7 |
8 | export const MATERIAL_MENUS: MenuItemModel[] = [
9 | {
10 | label: '图片',
11 | name: MaterialEnum.IMAGE,
12 | component: Image,
13 | icon: 'icon-left-image',
14 | },
15 | {
16 | label: '背景',
17 | name: MaterialEnum.BACK,
18 | component: Back,
19 | icon: 'icon-left-background',
20 | },
21 | {
22 | label: '文字',
23 | name: MaterialEnum.TEXT,
24 | component: Text,
25 | icon: 'icon-left-text',
26 | },
27 | {
28 | label: '图形',
29 | name: MaterialEnum.SHAPE,
30 | component: Shape,
31 | icon: 'icon-left-element',
32 | },
33 | ];
34 |
--------------------------------------------------------------------------------
/src/layout/Material/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Material';
2 |
--------------------------------------------------------------------------------
/src/layout/Setting/Canvas/Canvas.module.less:
--------------------------------------------------------------------------------
1 | .row_layout {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | }
6 |
7 | .background_color {
8 | margin-top: 10px;
9 | }
10 |
--------------------------------------------------------------------------------
/src/layout/Setting/Canvas/Canvas.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import { observer } from 'mobx-react';
3 | import cls from 'classnames';
4 | import { Button, ColorPicker } from 'antd';
5 | import { Color } from 'antd/es/color-picker';
6 | import SettingContainer from '@/components/SettingContainer';
7 | // import { BackgroundStruc } from '@/models/LayerStruc';
8 | // import { SettingProps } from '../Setting';
9 | import { magic } from '@/store';
10 | import Style from './Canvas.module.less';
11 | import { BackColorList } from '@/config/ColorList';
12 |
13 | // interface CanvasProps extends SettingProps
58 |
65 |
66 |
67 | {actived && createElement(actived.component)}
68 |
69 |
37 |
48 |
49 |
38 |
43 |
44 |
47 | 画布尺寸
39 |
40 | {width} x {height} px
41 |
42 |
52 |
59 | 背景色
53 |
14 |
16 |
44 |
59 |
60 |
45 |
58 | e.stopPropagation()}
51 | >
52 |
55 | 裁剪
56 |
57 | 选择多个组件
;
37 | }
38 | const layer = activedLayers[0];
39 |
40 | const LayerSetting = SettingMap[layer.type] as ComponentType<
41 | SettingProps{getSettingRender()}
;
50 | }
51 |
52 | export default observer(Setting);
53 |
--------------------------------------------------------------------------------
/src/layout/Setting/Shape/Shape.tsx:
--------------------------------------------------------------------------------
1 | import SettingContainer from '@/components/SettingContainer';
2 | import LayerBaseSetting from '@/components/LayerBaseSetting';
3 |
4 | import { ShapeStruc } from '@/models/LayerStruc';
5 | import { SettingProps } from '../Setting';
6 |
7 | interface ShapeProps extends SettingProps
14 |
16 |
20 |
21 | setTextAlign(TextAlignEnum.Left)}
23 | className={cls(
24 | 'iconfont icon-09zuoduiqi',
25 | 'icon-item',
26 | Style.icon_item,
27 | { [Style.text_style_active]: textAlign === TextAlignEnum.Left }
28 | )}
29 | />
30 |
31 |
32 |
33 | setTextAlign(TextAlignEnum.Center)}
35 | className={cls(
36 | 'iconfont icon-11juzhongduiqi',
37 | 'icon-item',
38 | Style.icon_item,
39 | { [Style.text_style_active]: textAlign === TextAlignEnum.Center }
40 | )}
41 | />
42 |
43 |
44 |
45 | setTextAlign(TextAlignEnum.Right)}
47 | className={cls(
48 | 'iconfont icon-10youduiqi',
49 | 'icon-item',
50 | Style.icon_item,
51 | { [Style.text_style_active]: textAlign === TextAlignEnum.Right }
52 | )}
53 | />
54 |
55 |
56 |
57 | setTextAlign(TextAlignEnum.Justify)}
59 | className={cls(
60 | 'iconfont icon-12liangduanduiqi',
61 | 'icon-item',
62 | Style.icon_item,
63 | { [Style.text_style_active]: textAlign === TextAlignEnum.Justify }
64 | )}
65 | />
66 |
67 |
68 | );
69 | }
70 |
71 | export default observer(TextAlign);
72 |
--------------------------------------------------------------------------------
/src/layout/Setting/Text/TextColor.tsx:
--------------------------------------------------------------------------------
1 | import { ColorPicker } from 'antd';
2 | import cls from 'classnames';
3 | import { observer } from 'mobx-react';
4 | import { TextProps } from './Text';
5 | import Style from './Text.module.less';
6 |
7 | function TextColor(props: TextProps) {
8 | const { model } = props;
9 |
10 | const changeColor = (_value, color: string) => {
11 | model.update({ color });
12 | };
13 |
14 | return (
15 |
16 |
22 | );
23 | }
24 |
25 | export default observer(TextColor);
26 |
--------------------------------------------------------------------------------
/src/layout/Setting/Text/TextFamilyWithSize.tsx:
--------------------------------------------------------------------------------
1 | import { InputNumber, Select } from 'antd';
2 | import { observer } from 'mobx-react';
3 | import { font } from '@/store';
4 | import { TextProps } from './Text';
5 |
6 | import { MAX_FONT_SIZE, MIN_FONT_SIZE } from '@/constants/FontSize';
7 |
8 | import Style from './Text.module.less';
9 |
10 | function TextFamilyWithSize(props: TextProps) {
11 | const { model } = props;
12 |
13 | const changeFamily = (family: string) => {
14 | model.update({ fontFamily: family });
15 | };
16 |
17 | const changeFontsize = (fontSize: number | null) => {
18 | if (fontSize === null) return;
19 | model.update({ fontSize });
20 | };
21 |
22 | return (
23 |
24 |
31 |
38 | );
39 | }
40 |
41 | export default observer(TextFamilyWithSize);
42 |
--------------------------------------------------------------------------------
/src/layout/Setting/Text/TextStyle.tsx:
--------------------------------------------------------------------------------
1 | import { Tooltip } from 'antd';
2 | import cls from 'classnames';
3 | import { observer } from 'mobx-react';
4 |
5 | import { TextProps } from './Text';
6 | import Style from './Text.module.less';
7 | import {
8 | FontWeightEnum,
9 | FontStyleEnum,
10 | TextDecorationEnum,
11 | } from '@/constants/Font';
12 |
13 | function TextStyle(props: TextProps) {
14 | const { model } = props;
15 |
16 | const { fontWeight, fontStyle, textDecoration } = model;
17 |
18 | const setFontWeight = () => {
19 | const newFontWeight =
20 | fontWeight === FontWeightEnum.Bold
21 | ? FontWeightEnum.Normal
22 | : FontWeightEnum.Bold;
23 | model.update({ fontWeight: newFontWeight });
24 | };
25 |
26 | const setFontStyle = () => {
27 | const newFontStyle =
28 | fontStyle === FontStyleEnum.Italic
29 | ? FontStyleEnum.Normal
30 | : FontStyleEnum.Italic;
31 | model.update({ fontStyle: newFontStyle });
32 | };
33 |
34 | const setTextDecoration = (type: TextDecorationEnum) => {
35 | const newTextDecoration =
36 | textDecoration !== type ? type : TextDecorationEnum.None;
37 |
38 | model.update({ textDecoration: newTextDecoration });
39 | };
40 |
41 | return (
42 |
43 |
44 |
53 |
54 |
55 |
56 |
65 |
66 |
67 |
68 | setTextDecoration(TextDecorationEnum.Underline)}
70 | className={cls(
71 | 'iconfont icon-03xiahuaxian',
72 | 'icon-item',
73 | Style.icon_item,
74 | {
75 | [Style.text_style_active]:
76 | textDecoration === TextDecorationEnum.Underline,
77 | }
78 | )}
79 | />
80 |
81 |
82 |
83 | setTextDecoration(TextDecorationEnum.LineThrough)}
85 | className={cls(
86 | 'iconfont icon-04shanchuxian',
87 | 'icon-item',
88 | Style.icon_item,
89 | {
90 | [Style.text_style_active]:
91 | textDecoration === TextDecorationEnum.LineThrough,
92 | }
93 | )}
94 | />
95 |
96 |
97 | );
98 | }
99 |
100 | export default observer(TextStyle);
101 |
--------------------------------------------------------------------------------
/src/layout/Setting/Text/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Text';
2 |
--------------------------------------------------------------------------------
/src/layout/Setting/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Setting';
2 |
--------------------------------------------------------------------------------
/src/layout/Stage/Canvas/Canvas.module.less:
--------------------------------------------------------------------------------
1 | .canvas {
2 | position: relative;
3 | }
4 |
5 | .renderer_wrapper {
6 | position: relative;
7 | width: 100%;
8 | height: 100%;
9 | background-color: #f5f5f5;
10 | }
11 |
--------------------------------------------------------------------------------
/src/layout/Stage/Canvas/Canvas.tsx:
--------------------------------------------------------------------------------
1 | import { CSSProperties, forwardRef, Ref } from 'react';
2 | import { observer } from 'mobx-react';
3 | import Renderer from '@/components/Renderer';
4 | import Editor from '@/components/Editor';
5 | import { CANVAS_REF } from '@/constants/Refs';
6 | import { useStores } from '@/store';
7 | import Style from './Canvas.module.less';
8 | import { NodeNameplate } from '@/constants/NodeNamePlate';
9 |
10 | interface CanvasProps {
11 | canvasWidth: number;
12 | canvasHeight: number;
13 | style?: CSSProperties;
14 | }
15 |
16 | function Canvas(props: CanvasProps, ref: Ref
39 |
46 |
47 |
69 |
88 | );
89 | }
90 |
91 | export default observer(forwardRef(Scene));
92 |
--------------------------------------------------------------------------------
/src/layout/Stage/Scenes/Scene/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Scene';
2 |
3 | export type { SceneProps } from './Scene';
4 |
--------------------------------------------------------------------------------
/src/layout/Stage/Scenes/Scenes.module.less:
--------------------------------------------------------------------------------
1 | .scenes {
2 | position: absolute;
3 | bottom: 0;
4 | left: 0;
5 | width: 100%;
6 | height: 150px;
7 | overflow: auto;
8 | background-color: #fff;
9 | box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.08), 0 4px 12px 0 rgba(0, 0, 0, 0.04);
10 | }
11 |
12 | .scenes_content {
13 | display: inline-flex;
14 | align-items: center;
15 | height: 100%;
16 | padding: 0 20px;
17 | }
18 |
19 | .add_item {
20 | display: flex;
21 | align-items: center;
22 | justify-content: center;
23 | width: 80px;
24 | height: 130px;
25 | background: #f3f3f3;
26 | border-radius: 3px;
27 | cursor: pointer;
28 |
29 | &:hover {
30 | background: #e4e7e8;
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/layout/Stage/Scenes/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Scenes';
2 |
--------------------------------------------------------------------------------
/src/layout/Stage/Stage.module.less:
--------------------------------------------------------------------------------
1 | .stage {
2 | position: relative;
3 | flex: 1;
4 | min-width: 250px;
5 | padding-bottom: 150px;
6 | background-color: #f6f7f9;
7 | user-select: none;
8 | }
9 |
10 | .canvas_wrapper {
11 | position: relative;
12 | display: flex;
13 | align-items: center;
14 | justify-content: center;
15 | height: 100%;
16 | padding: 20px;
17 | overflow: scroll;
18 | }
19 |
20 | .crop_wrapper {
21 | position: absolute;
22 | top: 0;
23 | right: 0;
24 | bottom: 0;
25 | left: 0;
26 | }
27 |
--------------------------------------------------------------------------------
/src/layout/Stage/Stage.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useRef } from 'react';
2 | import { observer } from 'mobx-react';
3 | import Canvas from './Canvas';
4 | import Scenes from './Scenes/Scenes';
5 | import Crop from '@/components/Crop';
6 | import useResizeObserver from '@/hooks/useResizeObserver';
7 | import { CANVAS_WRAPPER } from '@/constants/Refs';
8 | import { NodeNameplate } from '@/constants/NodeNamePlate';
9 | import { useStores } from '@/store';
10 | import Style from './Stage.module.less';
11 |
12 | function Stage() {
13 | const { OS, magic } = useStores();
14 |
15 | const { activedLayers, activedScene, isOpenImageCrop } = magic;
16 |
17 | const { zoomLevel } = OS;
18 |
19 | const cropRef = useRef magic.activeScene(scene)}
72 | className={cls(actived && Style.actived)}
73 | style={sceneWrapperStyle}
74 | {...otherProps}
75 | >
76 |
80 |
81 |
77 |
79 |
59 |
80 | );
81 | }
82 |
83 | export default observer(Stage);
84 |
--------------------------------------------------------------------------------
/src/layout/Stage/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Stage';
2 |
--------------------------------------------------------------------------------
/src/layout/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Layout';
2 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import App from './App';
4 | import './assets/styles/index.less';
5 |
6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
7 |
65 |
71 |
72 | {isOpenImageCrop && (
73 |
78 |
74 |
76 | )}
77 |