From 99558c4f14213f6dbb1d0cdfd435115f3df7a7f9 Mon Sep 17 00:00:00 2001 From: Nan Li Date: Thu, 9 Nov 2023 18:36:11 -0500 Subject: [PATCH] add "HAS_SETTINGS, DRAGGABLE, RESIZABLE" into config files to control drag, resize and settings --- source/common/utils.js | 4 +-- source/components/Eaglescope/Eaglescope.js | 1 - .../VisGridView/VisGridItem/VisGridItem.css | 14 +++++++++ .../VisGridView/VisGridItem/VisGridItem.js | 20 ++++++------- .../VisGridItemHeader/VisGridItemHeader.css | 2 +- .../VisGridItemHeader/VisGridItemHeader.js | 8 ++--- .../Layout/VisGridView/VisGridView.css | 11 +++++++ .../Layout/VisGridView/VisGridView.js | 29 ++++++++++++++----- source/components/Settings/Settings.js | 7 +++-- source/components/partials/tooltip.js | 11 +++---- 10 files changed, 73 insertions(+), 34 deletions(-) diff --git a/source/common/utils.js b/source/common/utils.js index 85d422d..1e4fdb5 100644 --- a/source/common/utils.js +++ b/source/common/utils.js @@ -109,7 +109,7 @@ export function fillMatrix(matrix, val, pos = [0, 0], size = [matrix[0].length, } // get layout for react-grid-layout -export function getLayoutConfig(chartsConfig, cols) { +export function getLayoutConfig(chartsConfig, cols, resiziable = false) { const layout = []; const matrix = createMatrix(cols); // sort charts by priority @@ -144,7 +144,7 @@ export function getLayoutConfig(chartsConfig, cols) { y: pos[1], w: size[0], h: size[1], - isResizable: false, + isResizable: resiziable, }); }); diff --git a/source/components/Eaglescope/Eaglescope.js b/source/components/Eaglescope/Eaglescope.js index 53606af..e67804d 100644 --- a/source/components/Eaglescope/Eaglescope.js +++ b/source/components/Eaglescope/Eaglescope.js @@ -36,7 +36,6 @@ function Eaglescope() { // handle progress bar useEffect(() => { if (!data) return; - console.log(config) if (filters.length > 0) { setProgressAttrs({ now: filteredData.length, diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItem.css b/source/components/Layout/VisGridView/VisGridItem/VisGridItem.css index 69a4192..b177517 100644 --- a/source/components/Layout/VisGridView/VisGridItem/VisGridItem.css +++ b/source/components/Layout/VisGridView/VisGridItem/VisGridItem.css @@ -3,4 +3,18 @@ position: relative; display: flex; height: 100%; +} +.place-holder { + background-color: #f1f1f1; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: row; +} +.chart-area { + color:#c4c3d1; + height: 45%; + width: 45%; } \ No newline at end of file diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItem.js b/source/components/Layout/VisGridView/VisGridItem/VisGridItem.js index 76ed059..fabf086 100644 --- a/source/components/Layout/VisGridView/VisGridItem/VisGridItem.js +++ b/source/components/Layout/VisGridView/VisGridItem/VisGridItem.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import VisGridItemContent from './VisGridItemContent/VisGridItemContent'; import VisGridItemHeader from './VisGridItemHeader/VisGridItemHeader'; import { DataContext } from '../../../../contexts/DataContext'; - +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; // css class import './VisGridItem.css'; @@ -15,7 +15,6 @@ function VisGridItem(props) { const onMouseLeaveHandle = () => { setHover(false); }; - const { data, filteredData, filters, addFiltersHandler, removeFiltersHandler, } = useContext(DataContext); @@ -23,18 +22,14 @@ function VisGridItem(props) { useEffect(() => { if (props.fullScreened) setHover(true); }, [props.fullScreened]); - - /* useEffect(() => { - console.log(props.layout); - }, [props.layout]); */ - + useEffect(() => {}, [props.isResizing]); return (
- - + + {props.isResizing?
+ +
: + />}
); } diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css b/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css index 8e6676f..e24b8be 100644 --- a/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css +++ b/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.css @@ -20,6 +20,6 @@ font-weight: bold; } -.draggable { +.name-header.draggable { cursor: move; } diff --git a/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js b/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js index 54eb20a..0a74158 100644 --- a/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js +++ b/source/components/Layout/VisGridView/VisGridItem/VisGridItemHeader/VisGridItemHeader.js @@ -7,11 +7,11 @@ import './VisGridItemHeader.css'; function VisGridItemHeader(props) { const { config } = useContext(ConfigContext); - console.log("config", config) const { THEME_COLOR: color } = config; - let dragHeader = "name-header draggable"; - if (config.DISABLE_DRAGGING){ - dragHeader = "name-header notDraggable"; + + let dragHeader = 'name-header'; + if (config.DRAGGABLE) { + dragHeader = 'name-header draggable'; } return (
.react-resizable-handle.react-resizable-handle-se { + bottom: 0; + right: 0; + cursor: se-resize; + opacity: 0; +} +.react-grid-item:hover > .react-resizable-handle.react-resizable-handle-se { + opacity: 1; +} + /* .react-grid-item { } */ diff --git a/source/components/Layout/VisGridView/VisGridView.js b/source/components/Layout/VisGridView/VisGridView.js index f1c5a34..69befaf 100644 --- a/source/components/Layout/VisGridView/VisGridView.js +++ b/source/components/Layout/VisGridView/VisGridView.js @@ -22,8 +22,12 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { const grid = config.UNIT_OF_GRID_VIEW; const margins = config.MARGIN_OF_GRID_VIEW; const visConfig = config.VISUALIZATION_VIEW_CONFIGURATION; - const draggableHandle = '.draggable'; - + const draggableHandle = config.GRAGGABLE ? '.draggable' : ''; + const isDraggable = config.DRAGGABLE || false; + const isResizable = config.RESIZABLE || false; + + const [isResizing, SetIsResizing] = useState(false); + const [resizingItemId, SetResizingItemId] = useState(null); const [appLayout, setAppLayout] = useState({ width: 0, currentCols: 0, @@ -31,7 +35,6 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { margin: 0, grid, }); - const self = useRef(); const updateViewSize = () => { @@ -45,7 +48,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { && margins[1] === appLayout.margins[1] ) return; const gridLayoutWidth = cols * grid[0] + (cols + 1) * margins[0]; - const updatedLayout = getLayoutConfig(visConfig, cols); + const updatedLayout = getLayoutConfig(visConfig, cols, isResizable); setAppLayout({ width: gridLayoutWidth, @@ -58,8 +61,15 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { const debouncedUpdateViewSize = debounce(updateViewSize, 100); + const onResizeStartHandle = (layout, oldItem) => { + SetIsResizing(true); + SetResizingItemId(oldItem.i); + }; + const onResizeStopHandle = () => { + SetIsResizing(false); + SetResizingItemId(null); + }; useEffect(() => { - // if (!appLayout.currentCols) updateViewSize(); updateViewSize(); window.addEventListener('resize', debouncedUpdateViewSize); return () => { @@ -71,7 +81,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { const rect = self.current.getBoundingClientRect(); const cols = parseInt((rect.width - margins[0]) / (grid[0] + margins[0]), 10); const gridLayoutWidth = cols * grid[0] + (cols + 1) * margins[0]; - const updatedLayout = getLayoutConfig(visConfig, cols); + const updatedLayout = getLayoutConfig(visConfig, cols, isResizable); setAppLayout({ width: gridLayoutWidth, @@ -81,7 +91,7 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { grid, }); }, [visConfig]); - + useEffect(() => {}, [isResizing, resizingItemId]); return (
{appLayout.layout.length > 0 && ( @@ -91,7 +101,11 @@ function VisGridView({ fullVisScreenHandler, fullScreened }) { width={appLayout.width} margin={margins} layout={appLayout.layout} + isDraggable={isDraggable} + isResizable={isResizable} draggableHandle={draggableHandle} + onResizeStart={onResizeStartHandle} + onResizeStop={onResizeStopHandle} > {appLayout.layout.map((item) => (
{visConfig.find((vis) => vis.id === item.i) && ( vis.id === item.i)} toggleFullScreen={fullVisScreenHandler} diff --git a/source/components/Settings/Settings.js b/source/components/Settings/Settings.js index 54f1059..df4a0b7 100644 --- a/source/components/Settings/Settings.js +++ b/source/components/Settings/Settings.js @@ -90,10 +90,10 @@ function Settings() { return ( <> {showNewVis && } - + )} +