Skip to content

Commit b3d19c1

Browse files
chenshenhaichenshenhai
committedDec 8, 2023
feat: update element demo
1 parent 141f8df commit b3d19c1

31 files changed

+293
-450
lines changed
 

‎.prettierrc.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": false,
4+
"endOfLine": "auto",
5+
"singleQuote": true,
6+
"semi": true,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"printWidth": 160
10+
}

‎.vscode/extensions.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"rvest.vs-code-prettier-eslint",
4+
"dbaeumer.vscode-eslint",
5+
"esbenp.prettier-vscode"
6+
]
7+
}

‎.vscode/settings.json

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
3+
{
4+
"editor.formatOnSave": true,
5+
"eslint.format.enable": true,
6+
"prettier.configPath": ".prettierrc.json",
7+
"[typescript]": {
8+
"editor.defaultFormatter": "esbenp.prettier-vscode"
9+
},
10+
"[typescriptreact]": {
11+
"editor.defaultFormatter": "esbenp.prettier-vscode"
12+
},
13+
"[json]": {
14+
"editor.defaultFormatter": "esbenp.prettier-vscode"
15+
},
16+
"[less]": {
17+
"editor.defaultFormatter": "esbenp.prettier-vscode"
18+
},
19+
"[css]": {
20+
"editor.defaultFormatter": "esbenp.prettier-vscode"
21+
},
22+
"[svg]": {
23+
"editor.defaultFormatter": "esbenp.prettier-vscode"
24+
},
25+
"[html]": {
26+
"editor.defaultFormatter": "esbenp.prettier-vscode"
27+
}
28+
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@vitejs/plugin-vue-jsx": "^3.1.0",
1919
"@vue/compiler-sfc": "^3.3.8",
2020
"less": "^4.2.0",
21+
"prettier": "^3.1.0",
2122
"typescript": "^5.2.2",
2223
"vite": "^5.0.0",
2324
"vue-tsc": "^1.8.22"

‎public/demo/api-scrollLeft/data.js

-63
This file was deleted.

‎public/demo/api-scrollLeft/index.js

-20
This file was deleted.

‎public/demo/api-scrollTop/data.js

-63
This file was deleted.

‎public/demo/api-scrollTop/index.js

-20
This file was deleted.

‎public/demo/basic/data.js

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export default {
22
// bgColor: '#f0f0f0',
33
elements: [
44
{
5+
uuid: '98e31597-b745-7d6f-4164-920b8a4e8f36',
56
name: "rect-001",
67
x: 40,
78
y: 80,
@@ -16,6 +17,7 @@ export default {
1617
},
1718
},
1819
{
20+
uuid: '28774435-b994-1016-1c17-95912f719bab',
1921
name: "rect-002",
2022
x: 120,
2123
y: 120,
@@ -31,6 +33,7 @@ export default {
3133
},
3234
},
3335
{
36+
uuid: '3685edf6-cf77-6c96-6d6a-ad58ffcbb291',
3437
name: "rect-003",
3538
x: 300,
3639
y: 200,
@@ -46,6 +49,7 @@ export default {
4649
},
4750
},
4851
{
52+
uuid: '44dbb2c1-3588-385c-6b46-327c6adb438a',
4953
name: "rect-004",
5054
x: 400 - 20,
5155
y: 300 - 20,

‎public/demo/basic/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import data from './data';
44
const app = document.querySelector('#app');
55
const options = {
66
width: 500,
7-
height: 400,
8-
contextWidth: 500,
9-
contextHeight: 400,
7+
height: 400,
108
devicePixelRatio: 2,
119
}
1210
const idraw = new iDraw(app, options);
1311
idraw.setData(data)
14-
idraw.selectElementByIndex(0);
12+
idraw.selectElements([
13+
data.elements[0].uuid
14+
])

‎public/demo/config/data.js

-79
This file was deleted.

‎public/demo/config/import-map.json

-6
This file was deleted.

‎public/demo/config/index.css

-22
This file was deleted.

‎public/demo/config/index.html

-1
This file was deleted.

‎public/demo/config/index.js

-28
This file was deleted.

‎public/demo/elem-circle/index.js

+6-9
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const data = {
33
// bgColor: '#f0f0f0',
44
elements: [
55
{
6+
uuid: 'b0124555-768d-9fb7-eaa3-24ce35ccea4e',
67
name: "circle-001",
78
x: 160,
89
y: 100,
@@ -11,9 +12,8 @@ const data = {
1112
angle: 0,
1213
type: "circle",
1314
detail: {
14-
bgColor: "#d5f5f9",
15-
borderRadius: 10,
16-
borderWidth: 4,
15+
background: "#d5f5f9",
16+
borderWidth: 10,
1717
borderColor: "#3f51b5",
1818
},
1919
},
@@ -23,10 +23,7 @@ const data = {
2323
const app = document.querySelector('#app');
2424
const idraw = new iDraw(app, {
2525
width: 600,
26-
height: 400,
27-
contextWidth: 600,
28-
contextHeight: 400,
29-
devicePixelRatio: 4,
26+
height: 400,
27+
devicePixelRatio: 2,
3028
});
31-
idraw.setData(data)
32-
idraw.selectElementByIndex(0);
29+
idraw.setData(data)

‎public/demo/api-scrollLeft/index.css ‎public/demo/elem-group/index.css

File renamed without changes.

‎public/demo/api-scrollLeft/index.html ‎public/demo/elem-group/index.html

File renamed without changes.

‎public/demo/elem-group/index.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { iDraw, createUUID } from 'idraw';
2+
const data = {
3+
// bgColor: '#f0f0f0',
4+
elements: [
5+
{
6+
uuid: createUUID(),
7+
name: "rect-001",
8+
x: 120,
9+
y: 120,
10+
w: 300,
11+
h: 200,
12+
type: "group",
13+
detail: {
14+
background: "#d5f5f9",
15+
borderWidth: 2,
16+
borderColor: "#3f51b5",
17+
children: [
18+
{
19+
uuid: createUUID(),
20+
name: "rect-001",
21+
x: 50,
22+
y: 50,
23+
w: 100,
24+
h: 50,
25+
type: "rect",
26+
detail: {
27+
background: "#8bc34a",
28+
borderRadius: 10,
29+
borderWidth: 4,
30+
borderColor: "#386a3a",
31+
},
32+
},
33+
{
34+
uuid: createUUID(),
35+
name: "circle-001",
36+
x: 150,
37+
y: 80,
38+
w: 100,
39+
h: 100,
40+
angle: 0,
41+
type: "circle",
42+
detail: {
43+
background: "#ff9800",
44+
},
45+
},
46+
]
47+
},
48+
},
49+
],
50+
}
51+
52+
const app = document.querySelector('#app');
53+
const idraw = new iDraw(app, {
54+
width: 600,
55+
height: 400,
56+
devicePixelRatio: 2,
57+
});
58+
idraw.setData(data)

‎public/demo/elem-html/index.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { iDraw } from 'idraw';
22
const data = {
33
elements: [
44
{
5+
uuid: '30f03c9b-dd1c-08d9-6398-93f8c2b9a4d0',
56
name: "html-001",
67
x: 200,
78
y: 120,
@@ -64,10 +65,7 @@ const data = {
6465
const app = document.querySelector('#app');
6566
const idraw = new iDraw(app, {
6667
width: 600,
67-
height: 400,
68-
contextWidth: 600,
69-
contextHeight: 400,
70-
devicePixelRatio: 4,
68+
height: 400,
69+
devicePixelRatio: 2,
7170
});
72-
idraw.setData(data)
73-
idraw.selectElementByIndex(0);
71+
idraw.setData(data)

‎public/demo/elem-image/index.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { iDraw } from 'idraw';
22
const data = {
33
elements: [
44
{
5+
uuid: '18604608-9452-fbe5-3fc0-8be9e33e067a',
56
name: "rect-001",
67
x: 160,
78
y: 100,
@@ -19,10 +20,7 @@ const data = {
1920
const app = document.querySelector('#app');
2021
const idraw = new iDraw(app, {
2122
width: 600,
22-
height: 400,
23-
contextWidth: 600,
24-
contextHeight: 400,
25-
devicePixelRatio: 4,
23+
height: 400,
24+
devicePixelRatio: 2,
2625
});
27-
idraw.setData(data)
28-
idraw.selectElementByIndex(0);
26+
idraw.setData(data)

‎public/demo/api-scrollTop/index.css ‎public/demo/elem-path/index.css

File renamed without changes.

‎public/demo/api-scrollTop/index.html ‎public/demo/elem-path/index.html

File renamed without changes.

‎public/demo/elem-path/index.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { iDraw } from 'idraw';
2+
const data = {
3+
elements: [
4+
{
5+
uuid: '41d437b8-afbd-2d3d-14bc-912e26d3491f',
6+
x: 100,
7+
y: 100,
8+
w: 80,
9+
h: 80,
10+
angle: 0,
11+
type: 'path',
12+
detail: {
13+
commands: [
14+
{ type: 'M', params: [10, 30] },
15+
{ type: 'A', params: [20, 20, 0, 0, 1, 50, 30] },
16+
{ type: 'A', params: [20, 20, 0, 0, 1, 90, 30] },
17+
{ type: 'Q', params: [90, 60, 50, 90] },
18+
{ type: 'Q', params: [10, 60, 10, 30] },
19+
{ type: 'z', params: [] }
20+
],
21+
fill: '#FF00006F',
22+
stroke: '#000000',
23+
strokeWidth: 1,
24+
originX: 10,
25+
originY: 10,
26+
originH: 80,
27+
originW: 80
28+
}
29+
}
30+
]
31+
};
32+
33+
const app = document.querySelector('#app');
34+
const idraw = new iDraw(app, {
35+
width: 600,
36+
height: 400,
37+
devicePixelRatio: 2
38+
});
39+
idraw.setData(data);

‎public/demo/elem-rect/index.js

+6-8
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const data = {
33
// bgColor: '#f0f0f0',
44
elements: [
55
{
6+
uuid: '8b1fd36e-30b8-f6ab-05e6-7f7773e32c99',
67
name: "rect-001",
78
x: 160,
89
y: 120,
@@ -11,9 +12,9 @@ const data = {
1112
angle: 30,
1213
type: "rect",
1314
detail: {
14-
bgColor: "#d5f5f9",
15-
borderRadius: 10,
16-
borderWidth: 2,
15+
background: "#d5f5f9",
16+
borderRadius: 20,
17+
borderWidth: 10,
1718
borderColor: "#3f51b5",
1819
},
1920
},
@@ -24,9 +25,6 @@ const app = document.querySelector('#app');
2425
const idraw = new iDraw(app, {
2526
width: 600,
2627
height: 400,
27-
contextWidth: 600,
28-
contextHeight: 400,
29-
devicePixelRatio: 4,
28+
devicePixelRatio: 2,
3029
});
31-
idraw.setData(data)
32-
idraw.selectElementByIndex(0);
30+
idraw.setData(data)

‎public/demo/elem-svg/index.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { iDraw } from 'idraw';
22
const data = {
33
elements: [
44
{
5+
uuid: '5db6061d-c813-ac42-7837-9e5a69a5abea',
56
name: "rect-001",
67
x: 160,
78
y: 100,
@@ -19,10 +20,7 @@ const data = {
1920
const app = document.querySelector('#app');
2021
const idraw = new iDraw(app, {
2122
width: 600,
22-
height: 400,
23-
contextWidth: 600,
24-
contextHeight: 400,
25-
devicePixelRatio: 4,
23+
height: 400,
24+
devicePixelRatio: 2,
2625
});
27-
idraw.setData(data)
28-
idraw.selectElementByIndex(0);
26+
idraw.setData(data)

‎public/demo/elem-text/index.js

+8-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { iDraw } from 'idraw';
2-
const data = {
3-
// bgColor: '#f0f0f0',
2+
const data = {
43
elements: [
54
{
5+
uuid: '44dbb2c1-3588-385c-6b46-327c6adb438a',
66
name: "rect-001",
77
x: 160,
88
y: 80,
@@ -11,10 +11,12 @@ const data = {
1111
angle: 0,
1212
type: "text",
1313
detail: {
14-
text: 'Hello World',
14+
text: 'Hello\r\nWorld',
1515
color: "#3f51b5",
1616
fontSize: 60,
17+
lineHeight: 80,
1718
textAlign: 'center',
19+
verticalAlign: 'middle',
1820
borderRadius: 10,
1921
borderWidth: 2,
2022
borderColor: "#3f51b5",
@@ -26,10 +28,7 @@ const data = {
2628
const app = document.querySelector('#app');
2729
const idraw = new iDraw(app, {
2830
width: 600,
29-
height: 400,
30-
contextWidth: 600,
31-
contextHeight: 400,
32-
devicePixelRatio: 4,
31+
height: 400,
32+
devicePixelRatio: 2,
3333
});
34-
idraw.setData(data)
35-
idraw.selectElementByIndex(0);
34+
idraw.setData(data)

‎src/config.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"hash": "faa0b6420cecd9cb813d74cc0f"
2+
"hash": "c4a8876eb32dca8798da831478"
33
}

‎src/constant/demo-list.ts

+109-99
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,162 @@
11
type TypeDemoItem = {
22
name: string;
33
key: string;
4-
exclude?: string[]
5-
}
4+
exclude?: string[];
5+
};
66

77
type TypeDemoList = {
88
name: String;
9-
list: TypeDemoItem[]
10-
}[]
9+
list: TypeDemoItem[];
10+
}[];
1111

1212
const demoList: TypeDemoList = [
1313
{
1414
name: 'Quick Start',
1515
list: [
1616
{
1717
name: 'Basic',
18-
key: 'basic',
19-
},
20-
{
21-
name: 'Options',
22-
key: 'options',
23-
},
24-
{
25-
name: 'Config',
26-
key: 'config',
27-
},
18+
key: 'basic'
19+
}
20+
// {
21+
// name: 'Options',
22+
// key: 'options',
23+
// },
24+
// {
25+
// name: 'Config',
26+
// key: 'config',
27+
// },
2828
]
2929
},
3030
{
31-
name: 'Elements\' Types',
31+
name: "Elements' Types",
3232
list: [
3333
{
3434
name: 'Text',
3535
key: 'elem-text',
36-
exclude: ['data.js'],
36+
exclude: ['data.js']
3737
},
3838
{
3939
name: 'Rect',
4040
key: 'elem-rect',
41-
exclude: ['data.js'],
41+
exclude: ['data.js']
4242
},
4343
{
4444
name: 'Circle',
4545
key: 'elem-circle',
46-
exclude: ['data.js'],
46+
exclude: ['data.js']
47+
},
48+
{
49+
name: 'Group',
50+
key: 'elem-group',
51+
exclude: ['data.js']
4752
},
4853
{
4954
name: 'Image',
5055
key: 'elem-image',
51-
exclude: ['data.js'],
56+
exclude: ['data.js']
5257
},
5358
{
5459
name: 'SVG',
5560
key: 'elem-svg',
56-
exclude: ['data.js'],
61+
exclude: ['data.js']
5762
},
5863
{
5964
name: 'HTML',
6065
key: 'elem-html',
61-
exclude: ['data.js'],
66+
exclude: ['data.js']
6267
},
68+
{
69+
name: 'Path',
70+
key: 'elem-path',
71+
exclude: ['data.js']
72+
}
6373
]
6474
},
6575
{
6676
name: 'iDraw API',
6777
list: [
6878
{
6979
name: 'setData',
70-
key: 'api-setData',
80+
key: 'api-setData'
7181
},
7282
{
7383
name: 'getData',
74-
key: 'api-getData',
75-
},
76-
{
77-
name: 'resetSize',
78-
key: 'api-resetSize',
79-
},
80-
{
81-
name: 'selectElement',
82-
key: 'api-selectElement',
83-
},
84-
{
85-
name: 'selectElementByIndex',
86-
key: 'api-selectElementByIndex',
87-
},
88-
{
89-
name: 'getSelectedElements',
90-
key: 'api-getSelectedElements',
91-
},
92-
{
93-
name: 'updateElement',
94-
key: 'api-updateElement',
95-
},
96-
{
97-
name: 'addElement',
98-
key: 'api-addElement',
99-
},
100-
{
101-
name: 'deleteElement',
102-
key: 'api-deleteElement',
103-
},
104-
{
105-
name: 'moveDownElement',
106-
key: 'api-moveDownElement',
107-
},
108-
{
109-
name: 'moveUpElement',
110-
key: 'api-moveUpElement',
111-
},
112-
{
113-
name: 'insertElementBefore',
114-
key: 'api-insertElementBefore',
115-
},
116-
{
117-
name: 'insertElementAfter',
118-
key: 'api-insertElementAfter',
119-
},
120-
{
121-
name: 'insertElementBeforeIndex',
122-
key: 'api-insertElementBeforeIndex',
123-
},
124-
{
125-
name: 'insertElementAfterIndex',
126-
key: 'api-insertElementAfterIndex',
127-
},
128-
{
129-
name: 'scale',
130-
key: 'api-scale',
131-
},
132-
{
133-
name: 'scrollLeft',
134-
key: 'api-scrollLeft',
135-
},
136-
{
137-
name: 'scrollTop',
138-
key: 'api-scrollTop',
139-
},
140-
{
141-
name: 'on',
142-
key: 'api-on',
143-
},
144-
{
145-
name: 'off',
146-
key: 'api-off',
147-
},
84+
key: 'api-getData'
85+
}
86+
// {
87+
// name: 'resetSize',
88+
// key: 'api-resetSize',
89+
// },
90+
// {
91+
// name: 'selectElement',
92+
// key: 'api-selectElement',
93+
// },
94+
// {
95+
// name: 'selectElementByIndex',
96+
// key: 'api-selectElementByIndex',
97+
// },
98+
// {
99+
// name: 'getSelectedElements',
100+
// key: 'api-getSelectedElements',
101+
// },
102+
// {
103+
// name: 'updateElement',
104+
// key: 'api-updateElement',
105+
// },
106+
// {
107+
// name: 'addElement',
108+
// key: 'api-addElement',
109+
// },
110+
// {
111+
// name: 'deleteElement',
112+
// key: 'api-deleteElement',
113+
// },
114+
// {
115+
// name: 'moveDownElement',
116+
// key: 'api-moveDownElement',
117+
// },
118+
// {
119+
// name: 'moveUpElement',
120+
// key: 'api-moveUpElement',
121+
// },
122+
// {
123+
// name: 'insertElementBefore',
124+
// key: 'api-insertElementBefore',
125+
// },
126+
// {
127+
// name: 'insertElementAfter',
128+
// key: 'api-insertElementAfter',
129+
// },
130+
// {
131+
// name: 'insertElementBeforeIndex',
132+
// key: 'api-insertElementBeforeIndex',
133+
// },
134+
// {
135+
// name: 'insertElementAfterIndex',
136+
// key: 'api-insertElementAfterIndex',
137+
// },
138+
// {
139+
// name: 'scale',
140+
// key: 'api-scale',
141+
// },
142+
// {
143+
// name: 'scrollLeft',
144+
// key: 'api-scrollLeft',
145+
// },
146+
// {
147+
// name: 'scrollTop',
148+
// key: 'api-scrollTop',
149+
// },
150+
// {
151+
// name: 'on',
152+
// key: 'api-on',
153+
// },
154+
// {
155+
// name: 'off',
156+
// key: 'api-off',
157+
// },
148158
]
149-
},
150-
]
159+
}
160+
];
151161

152-
export default demoList;
162+
export default demoList;

0 commit comments

Comments
 (0)
Please sign in to comment.