fix: missing spacing after dragging (#1671)

* fix: missing spacing after dragging

* fix: avoid scrollbar

* Update Grid.tsx

remove unused code
This commit is contained in:
Dunqing 2023-04-19 23:00:02 +08:00 committed by GitHub
parent b0aa0e2c41
commit 1260a8df8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 11 deletions

View File

@ -15,6 +15,8 @@ const breakRemoveOnGrid = (s: Schema) => s['x-component'] === 'Grid';
const breakRemoveOnRow = (s: Schema) => s['x-component'] === 'Grid.Row'; const breakRemoveOnRow = (s: Schema) => s['x-component'] === 'Grid.Row';
const ColDivider = (props) => { const ColDivider = (props) => {
const dragIdRef = useRef<string | null>(null);
const { isOver, setNodeRef } = useDroppable({ const { isOver, setNodeRef } = useDroppable({
id: props.id, id: props.id,
data: props.data, data: props.data,
@ -64,6 +66,7 @@ const ColDivider = (props) => {
if (!isDragging) { if (!isDragging) {
return; return;
} }
dragIdRef.current = event.active.id;
const el = dividerRef.current; const el = dividerRef.current;
const prev = el.previousElementSibling as HTMLDivElement; const prev = el.previousElementSibling as HTMLDivElement;
const next = el.nextElementSibling as HTMLDivElement; const next = el.nextElementSibling as HTMLDivElement;
@ -73,13 +76,22 @@ const ColDivider = (props) => {
if (!isDragging) { if (!isDragging) {
return; return;
} }
if (dragIdRef.current === event.active.id) {
dragIdRef.current = dragIdRef.current + '_move';
}
const el = dividerRef.current; const el = dividerRef.current;
const prev = el.previousElementSibling as HTMLDivElement; const prev = el.previousElementSibling as HTMLDivElement;
const next = el.nextElementSibling as HTMLDivElement; const next = el.nextElementSibling as HTMLDivElement;
prev.style.width = `calc(${clientWidths[0]}px + ${event.delta.x}px)`; prev.style.width = `${clientWidths[0] + event.delta.x}px`;
next.style.width = `calc(${clientWidths[1]}px - ${event.delta.x}px)`; next.style.width = `${clientWidths[1] - event.delta.x}px`;
}, },
onDragEnd(event) { onDragEnd(event) {
if (!dragIdRef.current) return;
if (dragIdRef.current?.startsWith(event.active.id)) {
if (!dragIdRef.current.endsWith('_move')) {
return;
}
}
if (clientWidths[0] <= 0 || clientWidths[1] <= 0) { if (clientWidths[0] <= 0 || clientWidths[1] <= 0) {
return; return;
} }
@ -92,10 +104,12 @@ const ColDivider = (props) => {
const next = el.nextElementSibling as HTMLDivElement; const next = el.nextElementSibling as HTMLDivElement;
prevSchema['x-component-props'] = prevSchema['x-component-props'] || {}; prevSchema['x-component-props'] = prevSchema['x-component-props'] || {};
nextSchema['x-component-props'] = nextSchema['x-component-props'] || {}; nextSchema['x-component-props'] = nextSchema['x-component-props'] || {};
prevSchema['x-component-props']['width'] = const dividerWidth = (el.clientWidth * (props.cols.length + 1)) / props.cols.length;
(100 * (prev?.clientWidth + 24 + 24 / props.cols.length)) / el.parentElement.clientWidth; const preWidth = ((100 * (prev.getBoundingClientRect().width + dividerWidth)) / el.parentElement.clientWidth).toFixed(2);
nextSchema['x-component-props']['width'] = const nextWidth = ((100 * (next.getBoundingClientRect().width + dividerWidth)) / el.parentElement.clientWidth).toFixed(2);
(100 * (next?.clientWidth + 24 + 24 / props.cols.length)) / el.parentElement.clientWidth;
prevSchema['x-component-props']['width'] = preWidth;
nextSchema['x-component-props']['width'] = nextWidth;
dn.emit('batchPatch', { dn.emit('batchPatch', {
schemas: [ schemas: [
{ {
@ -126,6 +140,7 @@ const ColDivider = (props) => {
className={cls( className={cls(
'nb-col-divider', 'nb-col-divider',
css` css`
flex-shrink: 0;
width: var(--nb-spacing); width: var(--nb-spacing);
`, `,
)} )}
@ -141,9 +156,8 @@ const ColDivider = (props) => {
: css` : css`
&::before { &::before {
content: ' '; content: ' ';
width: 12px; width: 100%;
height: 100%; height: 100%;
left: 6px;
position: absolute; position: absolute;
cursor: col-resize; cursor: col-resize;
} }
@ -370,6 +384,7 @@ Grid.Row = observer(() => {
className={cls( className={cls(
'nb-grid-row', 'nb-grid-row',
css` css`
overflow-x: hidden;
margin: 0 calc(-1 * var(--nb-spacing)); margin: 0 calc(-1 * var(--nb-spacing));
display: flex; display: flex;
position: relative; position: relative;
@ -419,7 +434,7 @@ Grid.Col = observer((props: any) => {
let width = ''; let width = '';
if (cols?.length) { if (cols?.length) {
const w = schema?.['x-component-props']?.['width'] || 100 / cols.length; const w = schema?.['x-component-props']?.['width'] || 100 / cols.length;
width = `calc(${w}% - var(--nb-spacing) * 2 / ${cols.length})`; width = `calc(${w}% - var(--nb-spacing) * ${(cols.length + 1) / cols.length})`;
} }
const { setNodeRef } = useDroppable({ const { setNodeRef } = useDroppable({
id: field.address.toString(), id: field.address.toString(),

View File

@ -135,10 +135,10 @@ export class Designable {
this.on('insertAdjacent', async ({ onSuccess, current, position, schema, wrap, wrapped, removed }) => { this.on('insertAdjacent', async ({ onSuccess, current, position, schema, wrap, wrapped, removed }) => {
let schemas = []; let schemas = [];
if (wrapped?.['x-component'] === 'Grid.Col') { if (wrapped?.['x-component'] === 'Grid.Col') {
schemas = updateColumnSize(wrapped.parent); schemas = schemas.concat(updateColumnSize(wrapped.parent));
} }
if (removed?.['x-component'] === 'Grid.Col') { if (removed?.['x-component'] === 'Grid.Col') {
schemas = updateColumnSize(removed.parent); schemas = schemas.concat(updateColumnSize(removed.parent));
} }
refresh(); refresh();
if (!current['x-uid']) { if (!current['x-uid']) {