From 17423fa5e00292b28f955855329340f2f9f56baa Mon Sep 17 00:00:00 2001 From: xujiang Date: Fri, 4 Dec 2020 22:48:45 +0800 Subject: [PATCH] =?UTF-8?q?:new:=20=E6=B7=BB=E5=8A=A0=E9=94=AE=E7=9B=98?= =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE=E5=8A=9F=E8=83=BD=E5=92=8C=E5=BF=AB?= =?UTF-8?q?=E6=8D=B7=E9=94=AE=E5=AF=BC=E8=88=AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + .../BasicComponents/Carousel/schema.ts | 4 +- .../BasicComponents/Header/schema.ts | 2 +- .../BasicShop/BasicComponents/Image/schema.ts | 2 +- .../BasicShop/BasicComponents/List/schema.ts | 4 +- .../BasicShop/BasicComponents/Tab/schema.ts | 6 +- src/pages/document.ejs | 2 +- src/pages/editor/Container.tsx | 32 ++--------- .../components/CanvasControl/index.less | 31 +++++++++- .../editor/components/CanvasControl/index.tsx | 35 ++++++++++-- src/pages/editor/models/editorModal.js | 56 +++++++++++++++++-- yarn.lock | 5 ++ 12 files changed, 130 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index d4b7f14..4462c06 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "dom-to-image": "^2.6.0", "file-saver": "^2.0.2", "http-server": "^0.12.3", + "keymaster": "^1.6.2", "qrcode.react": "^1.0.0", "react": "^16.12.0", "react-codemirror2": "^7.2.1", diff --git a/src/components/BasicShop/BasicComponents/Carousel/schema.ts b/src/components/BasicShop/BasicComponents/Carousel/schema.ts index 09622d3..1f6df83 100644 --- a/src/components/BasicShop/BasicComponents/Carousel/schema.ts +++ b/src/components/BasicShop/BasicComponents/Carousel/schema.ts @@ -79,7 +79,7 @@ const Carousel: ICarouselSchema = { uid: '001', name: 'image.png', 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', name: 'image.png', status: 'done', - url: 'http://io.nainor.com/uploads/2_1740bd8d525.png', + url: 'http://49.234.61.19/uploads/2_1740bd8d525.png', }, ], }, diff --git a/src/components/BasicShop/BasicComponents/Header/schema.ts b/src/components/BasicShop/BasicComponents/Header/schema.ts index a9d664c..1b8d116 100644 --- a/src/components/BasicShop/BasicComponents/Header/schema.ts +++ b/src/components/BasicShop/BasicComponents/Header/schema.ts @@ -70,7 +70,7 @@ const Header: IHeaderSchema = { uid: '001', name: 'image.png', status: 'done', - url: 'http://io.nainor.com/uploads/3_1740be8a482.png', + url: 'http://49.234.61.19/uploads/3_1740be8a482.png', }, ], logoText: '页头Header', diff --git a/src/components/BasicShop/BasicComponents/Image/schema.ts b/src/components/BasicShop/BasicComponents/Image/schema.ts index 6464a0a..e2cc8b3 100644 --- a/src/components/BasicShop/BasicComponents/Image/schema.ts +++ b/src/components/BasicShop/BasicComponents/Image/schema.ts @@ -177,7 +177,7 @@ const Image: IImageSchema = { uid: '001', name: 'image.png', status: 'done', - url: 'http://io.nainor.com/uploads/bg_174e470dc22.png', + url: 'http://49.234.61.19/uploads/bg_174e470dc22.png', }, ], round: 0, diff --git a/src/components/BasicShop/BasicComponents/List/schema.ts b/src/components/BasicShop/BasicComponents/List/schema.ts index 9ec72ae..41f38e0 100644 --- a/src/components/BasicShop/BasicComponents/List/schema.ts +++ b/src/components/BasicShop/BasicComponents/List/schema.ts @@ -90,7 +90,7 @@ const List: IListSchema = { uid: '001', name: 'image.png', 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', name: 'image.png', status: 'done', - url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', + url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png', }, ], }, diff --git a/src/components/BasicShop/BasicComponents/Tab/schema.ts b/src/components/BasicShop/BasicComponents/Tab/schema.ts index 9ba1794..49c21e6 100644 --- a/src/components/BasicShop/BasicComponents/Tab/schema.ts +++ b/src/components/BasicShop/BasicComponents/Tab/schema.ts @@ -77,7 +77,7 @@ const Tab: ITabSchema = { uid: '001', name: 'image.png', 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', name: 'image.png', 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', name: 'image.png', status: 'done', - url: 'http://io.nainor.com/uploads/1_1740c6fbcd9.png', + url: 'http://49.234.61.19/uploads/1_1740c6fbcd9.png', }, ], }, diff --git a/src/pages/document.ejs b/src/pages/document.ejs index 3e58547..a648eb8 100644 --- a/src/pages/document.ejs +++ b/src/pages/document.ejs @@ -2,7 +2,7 @@ - + H5编辑器之神-Dooring diff --git a/src/pages/editor/Container.tsx b/src/pages/editor/Container.tsx index 13d4611..31b6a2c 100644 --- a/src/pages/editor/Container.tsx +++ b/src/pages/editor/Container.tsx @@ -16,9 +16,9 @@ import Calibration from 'components/Calibration'; import DynamicEngine, { componentsType } from 'components/DynamicEngine'; import FormEditor from 'components/PanelComponents/FormEditor'; -import template1 from 'components/BasicShop/BasicComponents/template'; -import mediaTpl1 from 'components/BasicShop/MediaComponents/template'; -import graphTpl1 from 'components/BasicShop/VisualComponents/template'; +import template from 'components/BasicShop/BasicComponents/template'; +import mediaTpl from 'components/BasicShop/MediaComponents/template'; +import graphTpl from 'components/BasicShop/VisualComponents/template'; import schemaH5 from 'components/BasicShop/schema'; import { ActionCreators, StateWithHistory } from 'redux-undo'; @@ -56,30 +56,6 @@ const Container = (props: { const context = useContext(dooringContext); 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 let canvasId = 'js_canvas'; @@ -170,7 +146,7 @@ const Container = (props: { }; }, [dispatch]); - const importTpl = data => { + const importTpl = (data: any) => { dispatch({ type: 'editorModal/importTplData', payload: data, diff --git a/src/pages/editor/components/CanvasControl/index.less b/src/pages/editor/components/CanvasControl/index.less index 8339951..00c5db1 100644 --- a/src/pages/editor/components/CanvasControl/index.less +++ b/src/pages/editor/components/CanvasControl/index.less @@ -1,8 +1,8 @@ .sliderWrap { position: absolute; display: inline-block; - right: 10px; - bottom: 10px; + right: 46px; + bottom: 100px; height: 32px; line-height: 30px; 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; + } + } +} diff --git a/src/pages/editor/components/CanvasControl/index.tsx b/src/pages/editor/components/CanvasControl/index.tsx index 4aa003a..6106d8d 100644 --- a/src/pages/editor/components/CanvasControl/index.tsx +++ b/src/pages/editor/components/CanvasControl/index.tsx @@ -1,5 +1,6 @@ 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'; interface CanvasControlProps { @@ -8,27 +9,53 @@ interface CanvasControlProps { backSize(event: MouseEvent): void; } +const fastMenu = ( +
+
快捷键
+
+ + command + c + ctrl + c + + 复制组件 +
+
+ + delete + backspace + + 删除组件 +
+
+); + const CanvasControl = (props: CanvasControlProps) => { const { scaleNum, handleSlider, backSize } = props; + console.log(scaleNum); return (
+ - {scaleNum * 100}% + {Math.floor(scaleNum * 10) * 10}% - + + + + + diff --git a/src/pages/editor/models/editorModal.js b/src/pages/editor/models/editorModal.js index 318e7b9..6856249 100644 --- a/src/pages/editor/models/editorModal.js +++ b/src/pages/editor/models/editorModal.js @@ -1,12 +1,10 @@ /* - * @Description: - * @Version: 2.0 - * @Autor: dragon - * @Date: 2020-09-24 10:11:24 - * @LastEditors: dragon - * @LastEditTime: 2020-10-08 16:12:26 + * @Description: 添加键盘快捷键 + * @Version: 2.1 + * @Autor: xuxiaoxi */ import { uuid } from '@/utils/tool'; +import key from 'keymaster'; const pointData = localStorage.getItem('userData') || '[]'; function overSave(name, data) { @@ -78,6 +76,38 @@ export default { 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) { overSave('userData', []); return { @@ -92,5 +122,19 @@ export default { setup({ dispatch, history }) { return history.listen(({ pathname, query }) => {}); }, + keyEvent({ dispatch, state }) { + // 复制 + key('⌘+c, ctrl+c', () => { + dispatch({ + type: 'editorModal/keyboardCopyPointData', + }); + }); + // 删除 + key('delete, backspace', () => { + dispatch({ + type: 'editorModal/keyboardDelPointData', + }); + }); + }, }, }; diff --git a/yarn.lock b/yarn.lock index 8bf67ff..b459cb7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8774,6 +8774,11 @@ keygrip@~1.1.0: dependencies: 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: version "3.1.0" resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"