diff --git a/frontend/public/images/example.png b/frontend/public/images/example.png deleted file mode 100644 index 9e8f37e73..000000000 Binary files a/frontend/public/images/example.png and /dev/null differ diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/HiddenUploader.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/HiddenUploader.tsx new file mode 100644 index 000000000..4fc289602 --- /dev/null +++ b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/HiddenUploader.tsx @@ -0,0 +1,71 @@ +/** + * Datart + * + * Copyright 2021 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Upload } from 'antd'; +import { uploadBoardImage } from 'app/pages/DashBoardPage/pages/BoardEditor/slice/thunk'; +import { + forwardRef, + useCallback, + useContext, + useImperativeHandle, + useRef, +} from 'react'; +import { useDispatch } from 'react-redux'; +import { BoardContext } from '../../BoardProvider/BoardProvider'; + +interface HiddenUploaderProps { + onChange: (url: string) => void; +} + +export const HiddenUploader = forwardRef( + ({ onChange }: HiddenUploaderProps, ref) => { + const dispatch = useDispatch(); + const uploadRef = useRef(); + const { boardId } = useContext(BoardContext); + + useImperativeHandle(ref, () => uploadRef.current?.upload.uploader); + + const beforeUpload = useCallback( + async info => { + const formData = new FormData(); + formData.append('file', info); + dispatch( + uploadBoardImage({ + boardId, + fileName: info.name, + formData: formData, + resolve: onChange, + }), + ); + return false; + }, + [boardId, dispatch, onChange], + ); + + return ( + + ); + }, +); diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidget.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidget.tsx index 1624073b3..2765079aa 100644 --- a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidget.tsx +++ b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidget.tsx @@ -15,9 +15,16 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + import { Space } from 'antd'; import { WidgetContext } from 'app/pages/DashBoardPage/components/WidgetProvider/WidgetProvider'; -import { memo, useContext } from 'react'; +import { + editBoardStackActions, + editWidgetInfoActions, +} from 'app/pages/DashBoardPage/pages/BoardEditor/slice'; +import { memo, useCallback, useContext, useEffect, useRef } from 'react'; +import { useDispatch } from 'react-redux'; +import styled from 'styled-components/macro'; import { BoardContext } from '../../BoardProvider/BoardProvider'; import { FlexStyle, ZIndexStyle } from '../../WidgetComponents/constants'; import { EditMask } from '../../WidgetComponents/EditMask'; @@ -30,38 +37,99 @@ import { getWidgetBaseStyle, getWidgetTitle, } from '../../WidgetManager/utils/utils'; +import { WidgetInfoContext } from '../../WidgetProvider/WidgetInfoProvider'; +import { HiddenUploader } from './HiddenUploader'; import { ImageWidgetCore } from './ImageWidgetCore'; +import { Picture } from './Picture'; export const ImageWidget: React.FC<{ hideTitle: boolean }> = memo( ({ hideTitle }) => { + const dispatch = useDispatch(); const widget = useContext(WidgetContext); + const widgetInfo = useContext(WidgetInfoContext); const { editing } = useContext(BoardContext); const title = getWidgetTitle(widget.config.customConfig.props); title.title = widget.config.name; const { background, border, padding } = getWidgetBaseStyle( widget.config.customConfig.props, ); + const showBackground = + !background.image && background.color === 'transparent'; + const uploaderRef = useRef(); + + useEffect(() => { + if (widgetInfo.editing) { + uploaderRef.current?.onClick(); + } + }, [widgetInfo.editing]); + + const uploaderChange = useCallback( + (url: string) => { + dispatch( + editBoardStackActions.updateWidgetStyleConfigByPath({ + ancestors: [0, 0], + configItem: { + key: 'background', + comType: 'background', + label: 'background.background', + value: { ...background, image: url }, + }, + wid: widget.id, + }), + ); + dispatch(editWidgetInfoActions.closeWidgetEditing(widget.id)); + }, + [dispatch, widget.id, background], + ); + return ( - -
- {!hideTitle && } + <> + +
+ {!hideTitle && } -
- +
+ +
-
- {editing && } - - - - - - - + {editing && } + + + + + + + + {editing && ( + + )} + {editing && showBackground && ( + + + + )} + ); }, ); + +const ImageWidgetBackground = styled.div` + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +`; diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/Picture.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/Picture.tsx new file mode 100644 index 000000000..e96c1add4 --- /dev/null +++ b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/Picture.tsx @@ -0,0 +1,51 @@ +/** + * Datart + * + * Copyright 2021 + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import useI18NPrefix from 'app/hooks/useI18NPrefix'; +import styled from 'styled-components/macro'; + +export function Picture() { + const t = useI18NPrefix(`viz.board.setting`); + + return ( + + + + {t('dbClickToUpload')} + + + ); +} + +const Svg = styled.svg` + width: 60%; + height: 60%; + + path { + fill: ${p => p.theme.borderColorEmphasis}; + } + + text { + font-size: 120px; + fill: ${p => p.theme.borderColorBase}; + } +`; diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/imageConfig.ts b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/imageConfig.ts index 70f67e386..52a9dfb8b 100644 --- a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/imageConfig.ts +++ b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/imageConfig.ts @@ -96,15 +96,6 @@ export const widgetToolkit: ImageToolkit = { { ...initPaddingTpl() }, { ...initBorderTpl() }, ]; - widget.config.customConfig.props?.forEach(ele => { - if (ele.key === 'backgroundGroup') { - ele.rows?.forEach(row => { - if (row.key === 'background') { - row.value.image = '/images/example.png'; - } - }); - } - }); return widget; }, diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx index ffefa97b6..7f173af27 100644 --- a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx +++ b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx @@ -63,6 +63,7 @@ export const UploadDragger: React.FC<{ return ( ) { const id = action.payload; if (id) { - state[id].selected = false; state[id].editing = false; } else { for (let key of Object.keys(state)) { diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json index bfe926bdb..eefa32b46 100644 --- a/frontend/src/locales/en/translation.json +++ b/frontend/src/locales/en/translation.json @@ -999,6 +999,7 @@ "color": "Color", "image": "Image", "uploadTip": "Click to Upload", + "dbClickToUpload": "Double Click To Upload", "padding": "Padding", "paddingTop": "Padding Top", "paddingRight": "Padding Right", diff --git a/frontend/src/locales/zh/translation.json b/frontend/src/locales/zh/translation.json index 02422862a..546d7fddc 100644 --- a/frontend/src/locales/zh/translation.json +++ b/frontend/src/locales/zh/translation.json @@ -997,6 +997,7 @@ "color": "颜色", "image": "图片", "uploadTip": "点击上传", + "dbClickToUpload": "双击上传图片", "padding": "内边距", "paddingTop": "上边距", "paddingRight": "右边距",