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:
parent
b0aa0e2c41
commit
1260a8df8b
@ -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(),
|
||||||
|
@ -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']) {
|
||||||
|
Loading…
Reference in New Issue
Block a user