Skip to content

Commit f834f01

Browse files
chenshenhaichenshenhai
committed
feat: add header of idraw design
1 parent 026052d commit f834f01

File tree

22 files changed

+482
-55
lines changed

22 files changed

+482
-55
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,8 @@
1010
},
1111
"[json]": {
1212
"editor.defaultFormatter": "esbenp.prettier-vscode"
13+
},
14+
"[less]": {
15+
"editor.defaultFormatter": "esbenp.prettier-vscode"
1316
}
1417
}

‎packages/design/dev/data.ts

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import type { DesignData } from '../src';
2+
3+
const data: DesignData = {
4+
components: [
5+
{
6+
uuid: 'demo-xxx-001',
7+
type: 'component',
8+
name: 'demo',
9+
x: 50,
10+
y: 50,
11+
w: 100,
12+
h: 100,
13+
desc: {
14+
bgColor: '#1f1f1f',
15+
children: [
16+
{
17+
uuid: 'group-001-0014',
18+
type: 'circle',
19+
x: -40,
20+
y: 0,
21+
w: 100,
22+
h: 100,
23+
desc: {
24+
bgColor: '#f44336'
25+
}
26+
},
27+
{
28+
uuid: 'group-001-0015',
29+
type: 'circle',
30+
x: -20,
31+
y: 0,
32+
w: 100,
33+
h: 100,
34+
desc: {
35+
bgColor: '#ff9800'
36+
}
37+
},
38+
{
39+
uuid: 'group-001-0016',
40+
type: 'circle',
41+
x: 0,
42+
y: 0,
43+
w: 100,
44+
h: 100,
45+
desc: {
46+
bgColor: '#ffc106'
47+
}
48+
},
49+
{
50+
uuid: 'group-001-0017',
51+
type: 'circle',
52+
x: 20,
53+
y: 0,
54+
w: 100,
55+
h: 100,
56+
desc: {
57+
bgColor: '#cddc39'
58+
}
59+
},
60+
{
61+
uuid: 'group-001-0018',
62+
type: 'circle',
63+
x: 40,
64+
y: 0,
65+
w: 100,
66+
h: 100,
67+
desc: {
68+
bgColor: '#4caf50'
69+
}
70+
}
71+
]
72+
}
73+
},
74+
{
75+
uuid: 'demo-xxx-002',
76+
type: 'component',
77+
name: 'demo',
78+
x: 50,
79+
y: 50,
80+
w: 100,
81+
h: 100,
82+
desc: {
83+
bgColor: '#f0f0f0',
84+
children: [
85+
{
86+
uuid: 'group-001-0014',
87+
type: 'circle',
88+
x: -40,
89+
y: 0,
90+
w: 100,
91+
h: 100,
92+
desc: {
93+
bgColor: '#f44336'
94+
}
95+
},
96+
{
97+
uuid: 'group-001-0015',
98+
type: 'circle',
99+
x: -20,
100+
y: 0,
101+
w: 100,
102+
h: 100,
103+
desc: {
104+
bgColor: '#ff9800'
105+
}
106+
},
107+
{
108+
uuid: 'group-001-0016',
109+
type: 'circle',
110+
x: 0,
111+
y: 0,
112+
w: 100,
113+
h: 100,
114+
desc: {
115+
bgColor: '#ffc106'
116+
}
117+
},
118+
{
119+
uuid: 'group-001-0017',
120+
type: 'circle',
121+
x: 20,
122+
y: 0,
123+
w: 100,
124+
h: 100,
125+
desc: {
126+
bgColor: '#cddc39'
127+
}
128+
},
129+
{
130+
uuid: 'group-001-0018',
131+
type: 'circle',
132+
x: 40,
133+
y: 0,
134+
w: 100,
135+
h: 100,
136+
desc: {
137+
bgColor: '#4caf50'
138+
}
139+
}
140+
]
141+
}
142+
}
143+
],
144+
modules: [],
145+
pages: []
146+
};
147+
148+
export default data;

‎packages/design/dev/main.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,26 @@
1-
import React from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import { createRoot } from 'react-dom/client';
33
import { Design } from '../src/index';
44

55
const dom = document.querySelector('#lab') as HTMLDivElement;
66
const root = createRoot(dom);
77

8-
root.render(<Design />);
8+
const App = () => {
9+
// const style = { margin: 0, padding: 0 }
10+
// const [width, setWidth] = useState<number>(window.innerWidth);
11+
// const [height, setHeight] = useState<number>(window.innerHeight);
12+
// useEffect(() => {
13+
// window.addEventListener('resize', () => {
14+
// setWidth(window.innerWidth);
15+
// setHeight(window.innerHeight);
16+
// });
17+
// }, []);
18+
19+
const style = { margin: 40 };
20+
const width = 1000;
21+
const height = 600;
22+
23+
return <Design width={width} height={height} style={style} />;
24+
};
25+
26+
root.render(<App />);

‎packages/design/src/context.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { createContext } from 'react';
2+
import { DesignData } from './types';
3+
4+
export interface DesignContext {
5+
data: DesignData;
6+
}
7+
8+
export function createDesignData(): DesignData {
9+
return {
10+
components: [],
11+
modules: [],
12+
pages: []
13+
};
14+
}
15+
16+
export function createDesignContextValue(opts?: { data?: DesignData }): DesignContext {
17+
return {
18+
data: opts?.data || createDesignData()
19+
};
20+
}
21+
22+
const Context = createContext<DesignContext>(createDesignContextValue());
23+
24+
export const Provider = Context.Provider;

‎packages/design/src/css/icons/index.less

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1-
@import "../../css/variable.less";
1+
@import '../../css/variable.less';
22

33
@mod-name: ~'@{prefix}-icon';
44

55
.@{mod-name} {
6-
display: flex;
7-
text-align: center;
6+
font-size: 16;
7+
display: inline-flex;
88
align-items: center;
99
justify-content: center;
10-
font-size: 16;
11-
}
10+
color: inherit;
11+
font-style: normal;
12+
line-height: 0;
13+
text-align: center;
14+
text-transform: none;
15+
16+
svg {
17+
justify-content: center;
18+
}
19+
}

‎packages/design/src/css/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@
66
@import "./modules/header.less";
77
@import "./modules/sketch.less";
88
@import "./modules/toolbar.less";
9+
@import "./modules/panel-layer.less";

‎packages/design/src/css/modules/header.less

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
@import "../variable.less";
1+
@import '../variable.less';
2+
3+
@mod-header: ~'@{prefix}-mod-header';
4+
5+
.@{mod-header} {
6+
display: flex;
7+
align-items: center;
8+
justify-content: space-between;
9+
height: 100%;
10+
box-sizing: border-box;
11+
padding: 0 20px;
12+
13+
.@{mod-header}-theme-switch {
14+
display: flex;
15+
}
16+
}

‎packages/design/src/css/modules/panel-layer.less

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@import "../variable.less";
2+
3+
@mod-panel-layer: ~'@{prefix}-mod-panel-layer';
4+
5+
.@{mod-panel-layer} {
6+
height: 100%;
7+
width: 100%;
8+
display: flex;
9+
flex-flow: column;
10+
11+
.@{mod-panel-layer}-header {
12+
height: 40px;
13+
}
14+
15+
.@{mod-panel-layer}-content {
16+
flex: 1;
17+
}
18+
19+
.@{mod-panel-layer}-footer {
20+
height: 40px;
21+
}
22+
23+
}

‎packages/design/src/css/modules/sketch.less

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22

33
@mod-sketch: ~'@{prefix}-mod-sketch';
44

5+
// @mod-sketch-header-height: 36px;
6+
57
.@{mod-sketch} {
8+
display: flex;
69
position: relative;
710
overflow: hidden;
811
box-shadow: 0 0 0 1px #0000001a,0px 0px .5px #0000002e, 0px 3px 8px #0000001a, 0px 1px 3px #0000001a;
@@ -15,4 +18,20 @@
1518
min-width: 400px;
1619
transform: translateX(-50%);
1720
}
21+
22+
.@{mod-sketch}-header {
23+
position: absolute;
24+
top: 0;
25+
left: 0;
26+
right: 0;
27+
// height: @mod-sketch-header-height;
28+
}
29+
30+
.@{mod-sketch}-content {
31+
position: absolute;
32+
// top: @mod-sketch-header-height;
33+
bottom: 0;
34+
left: 0;
35+
right: 0;
36+
}
1837
}

‎packages/design/src/icons/dark.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import classnames from 'classnames';
3+
import { iconClassName } from './util';
4+
import type { IconProps } from './util';
5+
6+
const Dark = (props: IconProps) => {
7+
const { className, style } = props;
8+
return (
9+
<span className={classnames([iconClassName, className])} style={style}>
10+
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor">
11+
<path d="M516.266667 938.666667h-38.4c-234.666667-21.333333-405.333333-230.4-384-465.066667 17.066667-204.8 179.2-366.933333 384-384 17.066667 0 34.133333 8.533333 42.666666 21.333333 8.533333 12.8 8.533333 34.133333-4.266666 46.933334-85.333333 115.2-59.733333 273.066667 55.466666 358.4 89.6 68.266667 213.333333 68.266667 302.933334 0 12.8-8.533333 29.866667-12.8 46.933333-4.266667 12.8 8.533333 21.333333 25.6 21.333333 42.666667-8.533333 115.2-64 217.6-153.6 290.133333-81.066667 59.733333-174.933333 93.866667-273.066666 93.866667zM396.8 187.733333c-123.733333 42.666667-213.333333 153.6-221.866667 290.133334-17.066667 187.733333 119.466667 354.133333 307.2 371.2 89.6 8.533333 179.2-17.066667 247.466667-76.8 46.933333-38.4 81.066667-89.6 102.4-145.066667-106.666667 38.4-226.133333 21.333333-320-46.933333-119.466667-93.866667-166.4-251.733333-115.2-392.533334z"></path>
12+
</svg>
13+
</span>
14+
);
15+
};
16+
17+
export default Dark;

0 commit comments

Comments
 (0)