X Tutup
Skip to content

Commit 073c1ff

Browse files
jinchanzjinchanz
committed
feat: add simulator select pane
1 parent 1a0525d commit 073c1ff

File tree

7 files changed

+377
-0
lines changed

7 files changed

+377
-0
lines changed

‎packages/plugin-simulator-size/.gitignore‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# project custom
2+
build
3+
dist
4+
lib
5+
es
6+
package-lock.json
7+
yarn.lock
8+
deploy-space/packages
9+
deploy-space/.env
10+
11+
12+
# IDE
13+
.vscode
14+
.idea
15+
16+
# Logs
17+
logs
18+
*.log
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*
22+
lerna-debug.log*
23+
24+
# Runtime data
25+
pids
26+
*.pid
27+
*.seed
28+
*.pid.lock
29+
30+
31+
# Directory for instrumented libs generated by jscoverage/JSCover
32+
lib-cov
33+
34+
# Coverage directory used by tools like istanbul
35+
coverage
36+
37+
# nyc test coverage
38+
.nyc_output
39+
40+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
41+
.grunt
42+
43+
# Bower dependency directory (https://bower.io/)
44+
bower_components
45+
46+
# node-waf configuration
47+
.lock-wscript
48+
49+
# Compiled binary addons (https://nodejs.org/api/addons.html)
50+
build/Release
51+
52+
# Dependency directories
53+
node_modules/
54+
jspm_packages/
55+
56+
# TypeScript v1 declaration files
57+
typings/
58+
59+
# Optional npm cache directory
60+
.npm
61+
62+
# Optional eslint cache
63+
.eslintcache
64+
65+
# Optional REPL history
66+
.node_repl_history
67+
68+
# Output of 'npm pack'
69+
*.tgz
70+
71+
# Yarn Integrity file
72+
.yarn-integrity
73+
74+
# dotenv environment variables file
75+
.env
76+
.env.test
77+
78+
# parcel-bundler cache (https://parceljs.org/)
79+
.cache
80+
81+
# next.js build output
82+
.next
83+
84+
# nuxt.js build output
85+
.nuxt
86+
87+
# vuepress build output
88+
.vuepress/dist
89+
90+
# Serverless directories
91+
.serverless/
92+
93+
# FuseBox cache
94+
.fusebox/
95+
96+
# DynamoDB Local files
97+
.dynamodb/
98+
99+
# mac config files
100+
.DS_Store
101+
102+
# codealike
103+
codealike.json
104+
.node

‎packages/plugin-simulator-size/README.md‎

Whitespace-only changes.

‎packages/plugin-simulator-size/build.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"externals": {
3+
"react": "React",
4+
"moment": "moment",
5+
"react-dom": "ReactDOM",
6+
"prop-types": "PropTypes",
7+
"@alifd/next": "Next",
8+
"@alilc/lowcode-engine": "AliLowCodeEngine"
9+
},
10+
"plugins": [
11+
[
12+
"@alilc/build-plugin-alt",
13+
{
14+
"type": "plugin"
15+
}
16+
],
17+
"build-plugin-component"
18+
]
19+
}

‎packages/plugin-simulator-size/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "@alilc/lowcode-plugin-simulator-select",
3+
"version": "1.0.0",
4+
"description": "画布切换",
5+
"main": "lib/index.js",
6+
"scripts": {
7+
"start": "build-scripts start",
8+
"build": "build-scripts build --skip-demo",
9+
"prepublishOnly": "npm run build",
10+
"test": "echo \"Error: no test specified\" && exit 1"
11+
},
12+
"keywords": [
13+
"lowcode",
14+
"simulator"
15+
],
16+
"dependencies": {
17+
"@alifd/next": "^1.25.0"
18+
},
19+
"devDependencies": {
20+
"@alib/build-scripts": "^0.1.18",
21+
"@alilc/build-plugin-alt": "^1.1.0",
22+
"@alilc/lowcode-engine": "^1.0.0",
23+
"@types/react": "^16.8.1",
24+
"build-plugin-component": "^1.1.0",
25+
"react": "^16.8.1",
26+
"react-dom": "^16.8.1"
27+
},
28+
"author": "mark.ck",
29+
"license": "ISC"
30+
}

‎packages/plugin-simulator-size/src/index.scss‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
.lp-simulator-pane {
2+
display: flex;
3+
align-items: center;
4+
margin: 0 8px;
5+
.lp-simulator-pane-item {
6+
display: inline-block;
7+
width: 32px;
8+
height: 32px;
9+
border-radius: 3px;
10+
padding: 6px;
11+
margin: 0 4px;
12+
cursor: pointer;
13+
&:hover {
14+
svg {
15+
opacity: 1;
16+
}
17+
}
18+
&.actived {
19+
background: #F2F2F2;
20+
}
21+
}
22+
svg {
23+
opacity: 0.6;
24+
}
25+
26+
.lp-simulator-width-setter {
27+
position: relative;
28+
width: 105px;
29+
height: 32px;
30+
margin-left: 12px;
31+
32+
.lp-simulator-width-input {
33+
width: 100%;
34+
border: 1px solid hsla(0,0%,100%,.1);
35+
border-radius: 4px;
36+
font-size: 14px;
37+
.next-input.next-medium .next-input-control {
38+
padding-right: 0;
39+
}
40+
}
41+
42+
}
43+
44+
}
45+
46+
// 根据不同的模拟器切换GUI样式
47+
.lc-simulator {
48+
49+
.lc-simulator-device-default {
50+
margin: auto;
51+
}
52+
// mobile
53+
.lc-simulator-device-phone {
54+
top: 16px;
55+
bottom: 16px;
56+
left: 50%;
57+
width: 375px;
58+
transform: translateX(-50%);
59+
margin: auto;
60+
}
61+
// pad
62+
.lc-simulator-device-tablet {
63+
top: 16px;
64+
bottom: 16px;
65+
left: 50%;
66+
width: 768px;
67+
transform: translateX(-50%);
68+
margin: auto;
69+
}
70+
// pc
71+
.lc-simulator-device-desktop {
72+
top: 16px;
73+
right: 16px;
74+
bottom: 16px;
75+
left: 16px;
76+
width: auto;
77+
margin: auto;
78+
}
79+
}

‎packages/plugin-simulator-size/src/index.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import React from 'react';
2+
import { NumberPicker, Icon } from '@alifd/next';
3+
import { ILowCodePluginContext, project, material } from '@alilc/lowcode-engine';
4+
5+
import './index.scss';
6+
7+
const isNewEngineVersion = !!material;
8+
9+
const devices = [
10+
{ key: 'desktop' },
11+
{ key: 'tablet' },
12+
{ key: 'phone' },
13+
];
14+
15+
const CustomIcon = Icon.createFromIconfontCN({
16+
scriptUrl: 'https://at.alicdn.com/t/font_2896595_33xhsbg9ux5.js',
17+
});
18+
19+
export class SimulatorPane extends React.Component {
20+
static displayName = 'SimulatorPane';
21+
22+
state = {
23+
actived: 'desktop',
24+
currentWidth: null
25+
};
26+
27+
componentDidMount() {
28+
if (isNewEngineVersion) {
29+
project.onSimulatorRendererReady(() => {
30+
const currentWidth = document.querySelector('.lc-simulator-canvas')?.clientWidth || this.state.currentWidth || 0;
31+
this.setState({
32+
currentWidth
33+
});
34+
});
35+
} else {
36+
// 兼容老版本引擎
37+
// @ts-ignore
38+
project.onRendererReady(() => {
39+
const currentWidth = document.querySelector('.lc-simulator-canvas')?.clientWidth || this.state.currentWidth || 0;
40+
this.setState({
41+
currentWidth
42+
});
43+
});
44+
}
45+
}
46+
47+
change = (device: string) => {
48+
const simulator = project.simulator;
49+
// 切换画布
50+
simulator?.set('device', device);
51+
if (document.querySelector('.lc-simulator-canvas')?.style) {
52+
document.querySelector('.lc-simulator-canvas').style.width = null;
53+
}
54+
setTimeout(() => {
55+
const currentWidth = document.querySelector('.lc-simulator-canvas')?.clientWidth || this.state.currentWidth || 0;
56+
this.setState({
57+
actived: device,
58+
currentWidth
59+
});
60+
}, 0);
61+
}
62+
63+
renderItemSVG(device: string) {
64+
switch (device) {
65+
case 'desktop':
66+
return <CustomIcon size="large" type="iconic_PC_Select" />;
67+
case 'tablet':
68+
return <CustomIcon size="large" type="iconic_Tablet_Select" />;
69+
case 'phone':
70+
return <CustomIcon size="large" type="iconic_smartphone" />;
71+
default:
72+
return <CustomIcon size="large" type="iconic_PC_Select" />;
73+
}
74+
}
75+
76+
render() {
77+
const currentWidth = this.state.currentWidth || 0;
78+
return (
79+
<div className="lp-simulator-pane">
80+
{
81+
devices.map((item, index) => {
82+
return (
83+
<span
84+
key={item.key}
85+
className={`lp-simulator-pane-item ${this.state.actived === item.key ? 'actived' : ''}`}
86+
onClick={this.change.bind(this, item.key)}
87+
>
88+
{this.renderItemSVG(item.key)}
89+
</span>
90+
)
91+
})
92+
}
93+
<div className='lp-simulator-width-setter'>
94+
<NumberPicker className="lp-simulator-width-input" addonTextAfter="px" value={currentWidth} placeholder="请输入" onChange={(value) => {
95+
this.setState({
96+
currentWidth: value
97+
});
98+
}} onPressEnter={(event: any) => {
99+
const value = event?.target?.value;
100+
if (document.querySelector('.lc-simulator-canvas')?.style) {
101+
document.querySelector('.lc-simulator-canvas').style.width = `${value}px`
102+
}
103+
this.setState({
104+
currentWidth: value
105+
});
106+
}} />
107+
</div>
108+
</div>
109+
);
110+
}
111+
}
112+
export default (ctx: ILowCodePluginContext) => {
113+
const simulatorPaneRef = React.createRef<SimulatorPane>();
114+
115+
return {
116+
name: 'SimulatorPane',
117+
// 插件的初始化函数，在引擎初始化之后会立刻调用
118+
init() {
119+
// 往引擎增加工具条
120+
ctx.skeleton.add({
121+
area: 'top',
122+
name: 'SimulatorPane',
123+
type: 'Widget',
124+
props: {
125+
description: '切换画布尺寸',
126+
align: "center",
127+
},
128+
content: (
129+
<SimulatorPane
130+
ref={simulatorPaneRef}
131+
/>
132+
),
133+
});
134+
}
135+
};
136+
};

‎packages/plugin-simulator-size/tsconfig.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "lib"
5+
},
6+
"include": [
7+
"./src/"
8+
]
9+
}

0 commit comments

Comments
 (0)
X Tutup