f19ebbafe9
* dip * dip * scroll * fixes * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * dip * solve for canvas glitches * dip * dip * dip * adjust scroll speed * dip * dip(code clean up) * dip * dip * ---dip * dip * dip * dip * middle ware for dropping multiple widgets. * adding scroll to drag for canvas selection. * fixing drag disabled and modal widget(detach from layout) drops * firefox and safari fixes * rebase conflicts. * fixing broken specs. * fixing specs and adding jest tests. * show border and disable resize when multiple widgets are selected. * selection box grab cursor * merge conflicts. * code clean up * fixing specs. * fixed a bug and failed specs. * fixing rerenders. * code clean up * code review comments * always have the drag point inside the widget. * fetching snap spaces instead of calculating. * remove widget_move action * fixing bugs with add widget parent height updation. * fixing specs. * List widget conflict fixes. * fixing canvas drop persistence. * Adding click to drag for modals and fixing few issues.
54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import {
|
|
CONTAINER_GRID_PADDING,
|
|
GridDefaults,
|
|
} from "constants/WidgetConstants";
|
|
const GRID_POINT_SIZE = 1;
|
|
const WrappedDragLayer = styled.div<{
|
|
columnWidth: number;
|
|
rowHeight: number;
|
|
noPad: boolean;
|
|
}>`
|
|
position: absolute;
|
|
pointer-events: none;
|
|
left: ${(props) =>
|
|
props.noPad ? "0" : `${CONTAINER_GRID_PADDING - GRID_POINT_SIZE}px;`};
|
|
top: ${(props) =>
|
|
props.noPad ? "0" : `${CONTAINER_GRID_PADDING - GRID_POINT_SIZE}px;`};
|
|
height: ${(props) =>
|
|
props.noPad
|
|
? `100%`
|
|
: `calc(100% - ${(CONTAINER_GRID_PADDING - GRID_POINT_SIZE) * 2}px)`};
|
|
width: ${(props) =>
|
|
props.noPad
|
|
? `100%`
|
|
: `calc(100% - ${(CONTAINER_GRID_PADDING - GRID_POINT_SIZE) * 2}px)`};
|
|
|
|
background-image: radial-gradient(
|
|
circle at ${GRID_POINT_SIZE}px ${GRID_POINT_SIZE}px,
|
|
${(props) => props.theme.colors.grid} ${GRID_POINT_SIZE}px,
|
|
transparent 0
|
|
);
|
|
background-size: ${(props) =>
|
|
props.columnWidth - GRID_POINT_SIZE / GridDefaults.DEFAULT_GRID_COLUMNS}px
|
|
${(props) => props.rowHeight}px;
|
|
`;
|
|
|
|
type DragLayerProps = {
|
|
parentRowHeight: number;
|
|
parentColumnWidth: number;
|
|
noPad: boolean;
|
|
};
|
|
|
|
function DragLayerComponent(props: DragLayerProps) {
|
|
return (
|
|
<WrappedDragLayer
|
|
columnWidth={props.parentColumnWidth}
|
|
noPad={props.noPad}
|
|
rowHeight={props.parentRowHeight}
|
|
/>
|
|
);
|
|
}
|
|
export default DragLayerComponent;
|