github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2026-01-20 04:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆕 添加键盘快捷键功能和快捷键导航

Browse Source
This commit is contained in:
xujiang 2020-12-04 22:48:45 +08:00
parent 932c9bb816
commit 17423fa5e0
12 changed files with 130 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -68,6 +68,7 @@
"dom-to-image": "^2.6.0", "dom-to-image": "^2.6.0",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",
"http-server": "^0.12.3", "http-server": "^0.12.3",
"keymaster": "^1.6.2",
"qrcode.react": "^1.0.0", "qrcode.react": "^1.0.0",
"react": "^16.12.0", "react": "^16.12.0",
"react-codemirror2": "^7.2.1", "react-codemirror2": "^7.2.1",

4
src/components/BasicShop/BasicComponents/Carousel/schema.ts
View File

@ -79,7 +79,7 @@ const Carousel: ICarouselSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/1_1740bd7c3dc.png', url: 'http://49.234.61.19/uploads/1_1740bd7c3dc.png',
}, },
], ],
}, },
@ -93,7 +93,7 @@ const Carousel: ICarouselSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/2_1740bd8d525.png', url: 'http://49.234.61.19/uploads/2_1740bd8d525.png',
}, },
], ],
}, },

2
src/components/BasicShop/BasicComponents/Header/schema.ts
View File

@ -70,7 +70,7 @@ const Header: IHeaderSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/3_1740be8a482.png', url: 'http://49.234.61.19/uploads/3_1740be8a482.png',
}, },
], ],
logoText: '页头Header', logoText: '页头Header',

2
src/components/BasicShop/BasicComponents/Image/schema.ts
View File

@ -177,7 +177,7 @@ const Image: IImageSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/bg_174e470dc22.png', url: 'http://49.234.61.19/uploads/bg_174e470dc22.png',
}, },
], ],
round: 0, round: 0,

4
src/components/BasicShop/BasicComponents/List/schema.ts
View File

@ -90,7 +90,7 @@ const List: IListSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
}, },
], ],
}, },
@ -104,7 +104,7 @@ const List: IListSchema = {
uid: '002', uid: '002',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
}, },
], ],
}, },

6
src/components/BasicShop/BasicComponents/Tab/schema.ts
View File

@ -77,7 +77,7 @@ const Tab: ITabSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
}, },
], ],
}, },
@ -92,7 +92,7 @@ const Tab: ITabSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/2_1740c7033a9.png', url: 'http://49.234.61.19/uploads/2_1740c7033a9.png',
}, },
], ],
}, },
@ -107,7 +107,7 @@ const Tab: ITabSchema = {
uid: '001', uid: '001',
name: 'image.png', name: 'image.png',
status: 'done', status: 'done',
url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png',
}, },
], ],
}, },

2
src/pages/document.ejs
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link href="http://io.nainor.com/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon"> <link href="http://49.234.61.19/uploads/logo_1742fd359da.png" rel="shortcut icon" type="image/vnd.microsoft.icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5编辑器之神-Dooring</title> <title>H5编辑器之神-Dooring</title>
<meta name="description" content="Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。"> <meta name="description" content="Dooring是一款功能强大，开源免费的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。">

32
src/pages/editor/Container.tsx
View File

@ -16,9 +16,9 @@ import Calibration from 'components/Calibration';
import DynamicEngine, { componentsType } from 'components/DynamicEngine'; import DynamicEngine, { componentsType } from 'components/DynamicEngine';
import FormEditor from 'components/PanelComponents/FormEditor'; import FormEditor from 'components/PanelComponents/FormEditor';
import template1 from 'components/BasicShop/BasicComponents/template'; import template from 'components/BasicShop/BasicComponents/template';
import mediaTpl1 from 'components/BasicShop/MediaComponents/template'; import mediaTpl from 'components/BasicShop/MediaComponents/template';
import graphTpl1 from 'components/BasicShop/VisualComponents/template'; import graphTpl from 'components/BasicShop/VisualComponents/template';
import schemaH5 from 'components/BasicShop/schema'; import schemaH5 from 'components/BasicShop/schema';
import { ActionCreators, StateWithHistory } from 'redux-undo'; import { ActionCreators, StateWithHistory } from 'redux-undo';
@ -56,30 +56,6 @@ const Container = (props: {
const context = useContext(dooringContext); const context = useContext(dooringContext);
const curPoint = pstate ? pstate.curPoint : {}; const curPoint = pstate ? pstate.curPoint : {};
const template = useMemo(() => {
if (context.theme === 'h5') {
return template1;
} else {
return template2;
}
}, [context.theme]);
const mediaTpl = useMemo(() => {
if (context.theme === 'h5') {
return mediaTpl1;
} else {
return mediaTpl2;
}
}, [context.theme]);
const graphTpl = useMemo(() => {
if (context.theme === 'h5') {
return graphTpl1;
} else {
return graphTpl2;
}
}, [context.theme]);
// 指定画布的id // 指定画布的id
let canvasId = 'js_canvas'; let canvasId = 'js_canvas';
@ -170,7 +146,7 @@ const Container = (props: {
}; };
}, [dispatch]); }, [dispatch]);
const importTpl = data => { const importTpl = (data: any) => {
dispatch({ dispatch({
type: 'editorModal/importTplData', type: 'editorModal/importTplData',
payload: data, payload: data,

31
src/pages/editor/components/CanvasControl/index.less
View File

@ -1,8 +1,8 @@
.sliderWrap { .sliderWrap {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
right: 10px; right: 46px;
bottom: 10px; bottom: 100px;
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
background: #ffffff; background: #ffffff;
@ -35,3 +35,30 @@
} }
} }
} }
.fastMenu {
.boardTit {
text-align: center;
line-height: 2;
font-weight: bold;
}
.keyRow {
margin: 10px;
display: flex;
.key {
margin-right: 30px;
code {
display: inline-block;
border: 1px solid #f0f0f0;
border-radius: 2px;
padding: 0 3px;
color: rgba(94, 41, 41, 0.6);
font-size: 12px;
margin-right: 3px;
}
}
.text {
margin-left: auto;
color: #888;
}
}
}

35
src/pages/editor/components/CanvasControl/index.tsx
View File

@ -1,5 +1,6 @@
import React, { MouseEvent } from 'react'; import React, { MouseEvent } from 'react';
import { ExpandOutlined, ReloadOutlined } from '@ant-design/icons'; import { Popover } from 'antd';
import { ExpandOutlined, InsertRowBelowOutlined } from '@ant-design/icons';
import styles from './index.less'; import styles from './index.less';
interface CanvasControlProps { interface CanvasControlProps {
@ -8,27 +9,53 @@ interface CanvasControlProps {
backSize(event: MouseEvent<HTMLDivElement>): void; backSize(event: MouseEvent<HTMLDivElement>): void;
} }
const fastMenu = (
<div className={styles.fastMenu}>
<div className={styles.boardTit}>快捷键</div>
<div className={styles.keyRow}>
<span className={styles.key}>
<code>command + c</code>
<code>ctrl + c</code>
</span>
<span className={styles.text}>复制组件</span>
</div>
<div className={styles.keyRow}>
<span className={styles.key}>
<code>delete</code>
<code>backspace</code>
</span>
<span className={styles.text}>删除组件</span>
</div>
</div>
);
const CanvasControl = (props: CanvasControlProps) => { const CanvasControl = (props: CanvasControlProps) => {
const { scaleNum, handleSlider, backSize } = props; const { scaleNum, handleSlider, backSize } = props;
console.log(scaleNum);
return ( return (
<div className={styles.sliderWrap}> <div className={styles.sliderWrap}>
<span <span
className={styles.sliderBtn} className={styles.sliderBtn}
onClick={handleSlider.bind(this, 1)} onClick={handleSlider.bind(this, 1)}
style={ style={
scaleNum === 1 ? { pointerEvents: 'none' } : { display: 'initial', marginLeft: '13px' } scaleNum === 1.5 ? { pointerEvents: 'none' } : { display: 'initial', marginLeft: '13px' }
} }
> >
+ +
</span> </span>
<span>{scaleNum * 100}%</span> <span>{Math.floor(scaleNum * 10) * 10}%</span>
<span <span
className={styles.sliderBtn} className={styles.sliderBtn}
style={scaleNum === 0.1 ? { pointerEvents: 'none' } : { display: 'initial' }} style={scaleNum === 0.5 ? { pointerEvents: 'none' } : { display: 'initial' }}
onClick={handleSlider.bind(this, 0)} onClick={handleSlider.bind(this, 0)}
> >
- -
</span> </span>
<span className={styles.backSize}>
<Popover placement="bottom" title={null} content={fastMenu} trigger="hover">
<InsertRowBelowOutlined />
</Popover>
</span>
<span className={styles.backSize}> <span className={styles.backSize}>
<ExpandOutlined onClick={backSize} /> <ExpandOutlined onClick={backSize} />
</span> </span>

56
src/pages/editor/models/editorModal.js
View File

@ -1,12 +1,10 @@
/* /*
* @Description: * @Description: 添加键盘快捷键
* @Version: 2.0 * @Version: 2.1
* @Autor: dragon * @Autor: xuxiaoxi
* @Date: 2020-09-24 10:11:24
* @LastEditors: dragon
* @LastEditTime: 2020-10-08 16:12:26
*/ */
import { uuid } from '@/utils/tool'; import { uuid } from '@/utils/tool';
import key from 'keymaster';
const pointData = localStorage.getItem('userData') || '[]'; const pointData = localStorage.getItem('userData') || '[]';
function overSave(name, data) { function overSave(name, data) {
@ -78,6 +76,38 @@ export default {
curPoint: null, curPoint: null,
}; };
}, },
keyboardCopyPointData(state) {
if (state.curPoint) {
const { id } = state.curPoint;
const pointData = [];
state.pointData.forEach(item => {
pointData.push({ ...item });
if (item.id === id) {
pointData.push({ ...item, id: uuid(6, 10) });
}
});
overSave('userData', pointData);
return {
...state,
pointData,
};
}
return state;
},
keyboardDelPointData(state) {
if (state.curPoint) {
const { id } = state.curPoint;
const pointData = state.pointData.filter(item => item.id !== id);
overSave('userData', pointData);
return {
...state,
pointData,
curPoint: null,
};
}
return state;
},
clearAll(state) { clearAll(state) {
overSave('userData', []); overSave('userData', []);
return { return {
@ -92,5 +122,19 @@ export default {
setup({ dispatch, history }) { setup({ dispatch, history }) {
return history.listen(({ pathname, query }) => {}); return history.listen(({ pathname, query }) => {});
}, },
keyEvent({ dispatch, state }) {
// 复制
key('⌘+c, ctrl+c', () => {
dispatch({
type: 'editorModal/keyboardCopyPointData',
});
});
// 删除
key('delete, backspace', () => {
dispatch({
type: 'editorModal/keyboardDelPointData',
});
});
},
}, },
}; };

5
yarn.lock
View File

@ -8774,6 +8774,11 @@ keygrip@~1.1.0:
dependencies: dependencies:
tsscmp "1.0.6" tsscmp "1.0.6"
keymaster@^1.6.2:
version "1.6.2"
resolved "https://registry.yarnpkg.com/keymaster/-/keymaster-1.6.2.tgz#e1ae54d0ea9488f9f60b66b668f02e9a1946c6eb"
integrity sha1-4a5U0OqUiPn2C2a2aPAumhlGxus=
keyv@^3.0.0: keyv@^3.0.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9" resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"