msyavuz commented on code in PR #45090:
URL: https://github.com/apache/superset/pull/45090#discussion_r4348036376
##########
superset-frontend/src/features/canvas/CanvasGrid.tsx:
##########
@@ -160,26 +149,44 @@ export default function CanvasGrid({
[customizationScopes, values.customization],
);
+ // How deeply a grid is nested, so its handles can sit clear of the handles
+ // of the widgets inside it: a container's own box starts where its first
+ // child's does, and the container's handles are painted last.
+ // What the server resolves placement from, as opposed to the rectangles it
+ // resolved last time; the drop preview needs these to agree with it.
+ const storedLayouts = useMemo(
Review Comment:
`storedLayouts` comes from `result.definition.nodes`, which only changes
when the definition is refetched, but `place` doesn't trigger a refetch after a
successful write. `resolve_grid` stores the pushed-down `row` for explicit
siblings that collide, so after one drop pushes `trend` from row 1 to row 5,
the next drag's preview still resolves `trend` from row 1. The preview then
disagrees with what the server does until the next poll.
##########
superset-frontend/src/features/canvas/useCanvasLayout.ts:
##########
@@ -0,0 +1,252 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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 { useCallback, useEffect, useRef, useState } from 'react';
+import { getClientErrorObject, SupersetClient } from '@superset-ui/core';
+import { t } from '@apache-superset/core/translation';
+import { DRAFT_TOKEN_HEADER } from './useCanvasDefinition';
+import type {
+ ApplyOperationsResult,
+ CanvasDefinitionResult,
+ GridPlacement,
+} from './types';
+
+/** The newest layout this client knows of, and the revision it belongs to. */
+interface AppliedLayout {
+ revision: number;
+ placements: Record<string, GridPlacement>;
+}
+
+export interface CanvasLayout {
+ /** Placements to render: the newest local ones, else the server's. */
+ placements: Record<string, GridPlacement>;
+ /**
+ * The newest revision the server is known to hold — the one the last write
+ * returned, else the one the definition was fetched at. Never an optimistic
+ * guess, so it is safe to send back as the revision a request is based on
+ * (a draft commit, say, which requires an exact match).
+ */
+ revision: number;
+ /**
+ * Whether a layout write is in flight or queued, so `revision` is about to
+ * move. A caller that sends `revision` to the server — publishing a draft —
+ * must wait for this to clear, or it names a revision that is already stale
+ * and loses the writes that had not landed.
+ */
+ saving: boolean;
+ /** Persist a node's new placement. A no-op when the user can't edit. */
+ place: (nodeId: string, placement: GridPlacement) => void;
+ /** Why the last write failed, for a dismissable notice. */
+ error?: string;
+ dismissError: () => void;
+}
+
+/**
+ * Persists drag and resize as `place` operations.
+ *
+ * The moved widget appears where it was dropped straight away, then takes the
+ * placements the server resolved — which may differ, since the server pushes
+ * overlapping widgets down.
+ *
+ * Each write is based on the newest revision the server has *confirmed*, taken
+ * from the previous write's response rather than from the definition. The
+ * definition's revision only advances when a refetch lands, and that refetch
+ * is driven by a realtime nudge; without one (no realtime service, a dropped
+ * socket) it would stay put and every drag after the first would collide with
+ * the user's own previous drag.
+ *
+ * A write while another is still in flight is queued rather than sent with a
+ * revision the server hasn't reached yet, so dragging quickly coalesces into
+ * one follow-up request instead of conflicting.
+ */
+export function useCanvasLayout(
+ canvasId: number,
+ result: CanvasDefinitionResult,
+ reload: () => void,
+ draftToken?: string,
+): CanvasLayout {
+ const [applied, setApplied] = useState<AppliedLayout>();
+ const [error, setError] = useState<string>();
+ // Mirrors `writing`/`queued` as state, since callers render against it.
+ const [saving, setSaving] = useState(false);
+ const { revision, canEdit } = result;
+
+ // Last revision the server acknowledged. Never an optimistic guess, so a
+ // write is never based on a revision the server hasn't reached.
+ const confirmed = useRef<number>();
+ // The definition's own revision, for the write that hasn't had a response
+ // yet (first drag after a load or a refetch).
+ const fetched = useRef(revision);
+ const writing = useRef(false);
+ // Newest intent per node while a write is in flight; sent as one batch.
+ const queued = useRef(new Map<string, GridPlacement>());
+ // The definition's placements, for an optimistic view that has no newer
+ // local layout to build on.
+ const fetchedPlacements = useRef(result.placements);
+ // The last layout the server acknowledged, without any optimistic overlay.
+ // A failed write falls back to this rather than to the fetched definition,
+ // which may be several acknowledged drags behind.
+ const acknowledged = useRef<AppliedLayout>();
+
+ useEffect(() => {
+ fetched.current = revision;
+ fetchedPlacements.current = result.placements;
+ }, [revision, result.placements]);
+
+ useEffect(() => {
+ // A different canvas, or switching between a draft and the published
+ // canvas, shares none of this state -- a draft counts its own revisions
+ // from zero, so a revision confirmed on one surface means nothing on the
+ // other.
+ confirmed.current = undefined;
+ acknowledged.current = undefined;
+ writing.current = false;
+ queued.current.clear();
+ setApplied(undefined);
+ setError(undefined);
+ setSaving(false);
+ }, [canvasId, draftToken]);
+
+ const send = useCallback(
+ (ops: Map<string, GridPlacement>) => {
+ writing.current = true;
+ setSaving(true);
+ const base = Math.max(fetched.current, confirmed.current ?? 0);
+ const placeOps = [...ops].map(([id, layout]) => ({
+ op: 'place',
+ id,
+ layout,
+ }));
+ // While a draft is open the layout belongs to the draft, not the
+ // published canvas: same operations, but its own route, its own
+ // revision field, and the token that authorizes it.
+ const target = draftToken
+ ? {
+ endpoint: '/api/v1/canvas/draft',
+ headers: { [DRAFT_TOKEN_HEADER]: draftToken },
+ jsonPayload: { revision: base, ops: placeOps },
+ }
+ : {
+ endpoint: `/api/v1/canvas/${canvasId}/definition`,
+ jsonPayload: { base_revision: base, ops: placeOps },
+ };
+ SupersetClient.request({ ...target, method: 'PATCH' })
+ .then(({ json }) => {
+ const written = json?.result as ApplyOperationsResult | undefined;
+ if (!written) return;
+ confirmed.current = written.revision;
Review Comment:
In-flight responses have no generation check: if `canvasId` or `draftToken`
changes while a PATCH is pending (for example Discard, which is still enabled
during a save, or navigating away), the reset effect runs first, then the old
response writes the other surface's revision into
`confirmed`/`acknowledged`/`applied`, and the new surface's next write is based
on that wrong revision (a draft counts from 0, so it gets a 409 or the wrong
layout shows).
##########
superset-frontend/src/features/canvas/CanvasGridSurface.tsx:
##########
@@ -0,0 +1,698 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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.
+ */
+
+/**
+ * @fileoverview One grid of a canvas, with drag and resize built in.
+ *
+ * There is no edit mode: a user who may edit gets a drag grip and a resize
+ * corner on each widget, on the canvas as they view it. A user who may not
+ * gets the same grid with no handles. Dragging never covers the widget's own
+ * surface, so a filter or chart underneath stays clickable.
+ *
+ * While a gesture is live the widget follows the pointer and a dashed outline
+ * marks the cells it would take; releasing persists exactly those cells.
+ */
+
+import {
+ PointerEvent as ReactPointerEvent,
+ KeyboardEvent as ReactKeyboardEvent,
+ ReactNode,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { css, styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
+import { Icons } from '@superset-ui/core/components';
+import {
+ GridMetrics,
+ gridDelta,
+ movedPlacement,
+ NO_DELTA,
+ RESIZE_CORNERS,
+ type ResizeCorner,
+ resizedPlacement,
+ samePlacement,
+} from './gridGeometry';
+import { previewGrid, type GridLayout } from './resolveGrid';
+import type { GridPlacement, SpanConstraints } from './types';
+
+type GestureKind = 'move' | 'resize';
+
+interface Gesture {
+ nodeId: string;
+ kind: GestureKind;
+ pointerId: number;
+ startX: number;
+ startY: number;
+ /**
+ * Page scroll when the widget was grabbed. Pointer coordinates are relative
+ * to the viewport, so scrolling mid-gesture moves the content under a still
+ * pointer; without this the drag would report no movement at all.
+ */
+ startScrollX: number;
+ startScrollY: number;
+ dx: number;
+ dy: number;
+ /**
+ * Where the widget sat when it was grabbed. The gesture resolves against
+ * this, not against the current placement: a write landing mid-gesture (a
+ * sibling's drop pushing this one down, or a draft poll) would otherwise
+ * move the ground under the pointer and persist the drop relative to a row
+ * the user never aimed at.
+ */
+ origin: GridPlacement;
+ /**
+ * Whether this gesture is actually dragging yet. One begun on a handle is
+ * armed at once; one begun on the widget body waits until the pointer has
+ * travelled `DRAG_THRESHOLD`, so a press that turns out to be a click
+ * reaches the widget underneath instead of nudging it.
+ */
+ armed: boolean;
+ /** For a resize, the corner being dragged; the opposite one stays put. */
+ corner: ResizeCorner;
+}
+
+/** Pixels of travel before a press on a widget body becomes a drag. */
+const DRAG_THRESHOLD = 4;
+
+/**
+ * Presses already claimed by a grid, so one that bubbles through nested grids
+ * starts exactly one gesture: the innermost grid's.
+ */
+const claimedPresses = new WeakSet<Event>();
+
+/** A gesture's movement over the page content, scrolling included. */
+const travelled = (gesture: Gesture, clientX: number, clientY: number) => ({
+ dx: clientX - gesture.startX + (window.scrollX - gesture.startScrollX),
+ dy: clientY - gesture.startY + (window.scrollY - gesture.startScrollY),
+});
+
+const Grid = styled.div<GridMetrics>`
+ display: grid;
+ grid-template-columns: repeat(${({ columns }) => columns}, minmax(0, 1fr));
+ grid-auto-rows: ${({ rowUnit }) => rowUnit}px;
+ gap: ${({ gap }) => gap}px;
+`;
+
+const GridItem = styled.div<{
+ placement?: GridPlacement;
+ dragging?: boolean;
+ offset?: { x: number; y: number };
+}>`
+ ${({ placement, dragging, offset }) => css`
+ min-width: 0;
+ min-height: 0;
+ position: relative;
+ ${
+ placement &&
+ css`
+ grid-column: ${placement.col} / span ${placement.colSpan};
+ grid-row: ${placement.row} / span ${placement.rowSpan};
+ `
+ }
+ ${
+ dragging &&
+ offset &&
+ css`
+ /* Follow the pointer without reflowing the grid under it. */
+ transform: translate(${offset.x}px, ${offset.y}px);
+ z-index: 2;
+ opacity: 0.85;
+ `
+ }
+ `}
+`;
+
+/**
+ * Where the widget being dragged will land. No error state: the neighbours
+ * are already rendered where they will end up, so an overlap shows as them
+ * moving aside rather than as a warning colour here.
+ */
+const DropPreview = styled.div<{ placement: GridPlacement }>`
+ ${({ theme, placement }) => css`
+ grid-column: ${placement.col} / span ${placement.colSpan};
+ grid-row: ${placement.row} / span ${placement.rowSpan};
+ border: 2px dashed ${theme.colorPrimary};
+ border-radius: ${theme.borderRadius}px;
+ background: ${theme.colorPrimaryBg};
+ pointer-events: none;
+ z-index: 1;
+ `}
+`;
+
+/**
+ * Wraps a widget so its handles can sit on top of it. The handles stay hidden
+ * until the pointer is over the widget or a handle has focus, so a canvas at
+ * rest looks the same whether or not the user may edit it.
+ *
+ * Only the innermost hovered widget shows its handles and its outline:
+ * `:hover` matches every ancestor, so a container would otherwise light up
+ * alongside whichever of its children the pointer is actually over.
+ */
+const Interactive = styled.div`
+ ${({ theme }) => css`
+ height: 100%;
+ position: relative;
+ border-radius: ${theme.borderRadius}px;
+ transition: box-shadow ${theme.motionDurationMid};
+
+ /* Direct children only: hovering a container must not reveal the
+ handles of every widget nested inside it. */
+ & > .canvas-handle {
+ opacity: 0;
+ /*
+ * Transparent is not absent: without this a hidden handle still wins
+ * the hit test over whatever it happens to sit above.
+ */
+ pointer-events: none;
+ transition: opacity ${theme.motionDurationMid};
+ }
+
+ &:hover:not(:has(.canvas-interactive:hover)) {
+ /* Borderless widgets (a metric tile, say) otherwise give no clue which
+ widget the handles belong to. */
+ box-shadow: 0 0 0 1px ${theme.colorBorder};
+ }
+
+ &:hover:not(:has(.canvas-interactive:hover)) > .canvas-handle,
+ & > .canvas-handle:focus-visible {
+ opacity: 1;
+ pointer-events: auto;
+ }
+ `}
+`;
+
+/** Step between a container's handles and its children's, in size units. */
+const HANDLE_STEP = 8;
+/** Size units a handle itself needs, so an offset can leave room for it. */
+const HANDLE_BOX = 7;
+
+/**
+ * How far a nested grid's handles sit from the widget's edge.
+ *
+ * Nesting steps the offset so a container's handle never lands exactly on its
+ * child's, but it is clamped to the widget's own rendered box: pushing past
+ * that would put the handle over the *next* widget, where it would take
+ * presses meant for that one.
+ */
+const handleOffset = (
+ sizeUnit: number,
+ depth: number,
+ extent: number,
+): number => {
+ const room = Math.max(sizeUnit, extent - sizeUnit * HANDLE_BOX);
+ return Math.min(sizeUnit * (1 + depth * HANDLE_STEP), room);
+};
+
+/**
+ * The widget itself, kept inside the cells it was given.
+ *
+ * A widget renders at its natural height — a table with every row, say — so
+ * without this it spills past its own box and over whatever is below. The
+ * handles are siblings rather than children, so they stay pinned to the box
+ * while the content scrolls behind them.
+ */
+const Content = styled.div`
+ height: 100%;
+ overflow: auto;
+`;
+
+const Grip = styled.button<{ depth: number; extent: number }>`
+ ${({ theme, depth, extent }) => css`
+ position: absolute;
+ top: ${handleOffset(theme.sizeUnit, depth, extent)}px;
+ /* Deeper handles above shallower ones: the innermost wins a shared spot.
*/
+ z-index: ${3 + depth};
+ /*
+ * Left of both the north-east resize corner (4 units at the corner) and a
+ * widget's own controls, which step aside to 5 units while a plan is open
+ * and are 8 units wide (see WithQuery's .canvas-widget-controls). These
+ * handles sit above them in the stack, so overlapping would swallow
+ * presses meant for the menu.
+ */
+ right: ${theme.sizeUnit * 14}px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: ${theme.sizeUnit / 2}px;
+ border: 1px solid ${theme.colorBorder};
+ border-radius: ${theme.borderRadiusSM}px;
+ background: ${theme.colorBgElevated};
+ color: ${theme.colorTextSecondary};
+ cursor: grab;
+ touch-action: none;
+
+ &:active {
+ cursor: grabbing;
+ }
+ `}
+`;
+
+/** Human-readable names for the four corners, for the handle labels. */
+const CORNER_NAMES: Record<ResizeCorner, () => string> = {
+ nw: () => t('top left'),
+ ne: () => t('top right'),
+ sw: () => t('bottom left'),
+ se: () => t('bottom right'),
+};
+
+const ResizeCorner = styled.button<{
+ corner: ResizeCorner;
+ depth: number;
+ extent: number;
+}>`
+ ${({ theme, corner, depth, extent }) => {
+ const west = corner === 'nw' || corner === 'sw';
+ const north = corner === 'nw' || corner === 'ne';
+ /*
+ * Stepped like the grip: a container's box shares its edges with its
+ * first and last child's, and the container's handles paint later, so
+ * sharing the pixel would make the child's corner unreachable.
+ */
+ const inset =
+ depth === 0 ? 0 : handleOffset(theme.sizeUnit, depth - 1, extent);
+ return css`
+ position: absolute;
+ ${west ? 'left' : 'right'}: ${inset}px;
+ ${north ? 'top' : 'bottom'}: ${inset}px;
+ z-index: ${3 + depth};
+ width: ${theme.sizeUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
+ padding: 0;
+ border: none;
+ background: transparent;
+ cursor: ${west === north ? 'nwse-resize' : 'nesw-resize'};
+ touch-action: none;
+
+ /* A two-line corner, the conventional resize affordance. */
+ &::after {
+ content: '';
+ position: absolute;
+ ${west ? 'left' : 'right'}: ${theme.sizeUnit / 2}px;
+ ${north ? 'top' : 'bottom'}: ${theme.sizeUnit / 2}px;
+ width: ${theme.sizeUnit * 2}px;
+ height: ${theme.sizeUnit * 2}px;
+ border-${west ? 'left' : 'right'}: 2px solid
${theme.colorTextTertiary};
+ border-${north ? 'top' : 'bottom'}: 2px solid
+ ${theme.colorTextTertiary};
+ }
+ `;
+ }}
+`;
+
+/** The grid's content width, kept current as the viewport changes. */
+function useElementWidth(): [(element: HTMLDivElement | null) => void, number]
{
+ const [element, setElement] = useState<HTMLDivElement | null>(null);
+ const [width, setWidth] = useState(0);
+
+ useEffect(() => {
+ if (!element) return undefined;
+ const measure = () => setWidth(element.clientWidth);
+ measure();
+ if (typeof ResizeObserver === 'undefined') return undefined;
+ const observer = new ResizeObserver(measure);
+ observer.observe(element);
+ return () => observer.disconnect();
+ }, [element]);
+
+ return [setElement, width];
+}
+
+export interface CanvasGridSurfaceProps {
+ childIds: string[];
+ columns: number;
+ gap: number;
+ rowUnit: number;
+ placements: Record<string, GridPlacement>;
+ /**
+ * Each child's stored layout. The preview resolves from these, as the
+ * server does: an auto-placed child has no `col`/`row`, and resolving from
+ * the rectangle it currently occupies would pin it there in the preview
+ * while the server still places it freely.
+ */
+ layouts: Record<string, GridLayout>;
+ constraints: Record<string, SpanConstraints>;
+ /** Whether the user may drag and resize these widgets. */
+ editable: boolean;
+ /**
+ * How deeply this grid is nested. A container's box begins where its first
+ * child's does and its handles paint last, so without an offset per level a
+ * container's grip would sit over its child's and swallow the click.
+ */
+ depth: number;
+ onPlace: (nodeId: string, placement: GridPlacement) => void;
+ renderNode: (nodeId: string) => ReactNode;
+}
+
+export default function CanvasGridSurface({
+ childIds,
+ columns,
+ gap,
+ rowUnit,
+ placements,
+ layouts,
+ constraints,
+ editable,
+ depth,
+ onPlace,
+ renderNode,
+}: CanvasGridSurfaceProps) {
+ const [gridRef, width] = useElementWidth();
+ const [gesture, setGesture] = useState<Gesture>();
+ // The handlers read the gesture directly, so committing never runs as a
+ // side effect inside a state updater.
+ const live = useRef<Gesture>();
+
+ const update = useCallback((next: Gesture | undefined) => {
+ live.current = next;
+ setGesture(next);
+ }, []);
+
+ /** Where `from` would land given a pointer delta, in whole grid units. */
+ const targetOf = useCallback(
+ (
+ nodeId: string,
+ kind: GestureKind,
+ from: GridPlacement,
+ dx: number,
+ dy: number,
+ corner: ResizeCorner = 'se',
+ ) => {
+ const metrics: GridMetrics = { columns, gap, rowUnit };
+ const delta = width > 0 ? gridDelta(dx, dy, width, metrics) : NO_DELTA;
+ return kind === 'move'
+ ? movedPlacement(from, delta, columns)
+ : resizedPlacement(from, delta, columns, constraints[nodeId], corner);
+ },
+ [width, columns, gap, rowUnit, constraints],
+ );
+
+ /**
+ * Persists `next` for `nodeId`, where `from` is the placement the gesture
+ * resolved against.
+ *
+ * Both no-op checks matter. A gesture that moved nothing resolves back to
+ * `from`, and sending that would write the geometry the widget had when it
+ * was grabbed over anything that landed while the button was held -- a plain
+ * click on a handle would revert a draft poll or another editor's resize.
+ * Comparing with the current placement then drops a gesture that happens to
+ * land exactly where the widget already sits.
+ */
+ const commit = useCallback(
+ (nodeId: string, next: GridPlacement | undefined, from: GridPlacement) => {
+ const placement = placements[nodeId];
+ if (!next || !placement) return;
+ if (samePlacement(next, from) || samePlacement(next, placement)) return;
+ onPlace(nodeId, next);
+ },
+ [onPlace, placements],
+ );
+
+ const begin =
+ (
+ nodeId: string,
+ kind: GestureKind,
+ armed = true,
+ corner: ResizeCorner = 'se',
+ ) =>
+ (event: ReactPointerEvent<HTMLElement>) => {
+ if (event.button !== 0) return;
+ // One gesture at a time. A second finger on another handle also reports
+ // button 0, and letting it replace the live gesture would strand the
+ // first pointer: its move and up events fail the pointerId guards, so
+ // its drag would be dropped without ever being committed.
+ if (live.current) return;
+ const origin = placements[nodeId];
+ if (!origin) return;
+ // A deferred press does not stop propagation -- a click has to reach
+ // the widget -- so it bubbles to this grid and to every grid containing
+ // it, and each would start its own gesture. The innermost runs first
+ // and claims the press; the rest stand down.
+ if (claimedPresses.has(event.nativeEvent)) return;
+ claimedPresses.add(event.nativeEvent);
+ if (armed) {
+ event.preventDefault();
+ event.stopPropagation();
+ // A handle owns the pointer from the first move. A deferred press
+ // must not, or the release and the click after it would be
+ // retargeted here from whatever was actually pressed.
+ event.currentTarget.setPointerCapture(event.pointerId);
+ }
+ update({
+ nodeId,
+ kind,
+ pointerId: event.pointerId,
+ startX: event.clientX,
+ startY: event.clientY,
+ startScrollX: window.scrollX,
+ startScrollY: window.scrollY,
+ dx: 0,
+ dy: 0,
+ origin,
+ armed,
+ corner,
+ });
+ };
+
+ const onPointerMove = (event: ReactPointerEvent<HTMLElement>) => {
+ const { current } = live;
+ if (!current || current.pointerId !== event.pointerId) return;
+ const moved = travelled(current, event.clientX, event.clientY);
+ // A deferred gesture arms only once the pointer has really travelled.
+ const armed =
+ current.armed || Math.hypot(moved.dx, moved.dy) >= DRAG_THRESHOLD;
+ if (!armed) return;
Review Comment:
A body press that never arms is not captured, so if the pointer leaves the
widget before crossing the threshold, or a child stops `pointerup` from
propagating, no up, cancel or lost-capture event reaches this wrapper;
`live.current` then stays set and the `if (live.current) return` guard blocks
every later drag and resize in this grid until something else clears it, so an
unarmed gesture also needs a window-level `pointerup` listener (or an
equivalent) to release it.
##########
superset-frontend/src/features/canvas/CanvasGridSurface.tsx:
##########
@@ -0,0 +1,698 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you 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.
+ */
+
+/**
+ * @fileoverview One grid of a canvas, with drag and resize built in.
+ *
+ * There is no edit mode: a user who may edit gets a drag grip and a resize
+ * corner on each widget, on the canvas as they view it. A user who may not
+ * gets the same grid with no handles. Dragging never covers the widget's own
+ * surface, so a filter or chart underneath stays clickable.
+ *
+ * While a gesture is live the widget follows the pointer and a dashed outline
+ * marks the cells it would take; releasing persists exactly those cells.
+ */
+
+import {
+ PointerEvent as ReactPointerEvent,
+ KeyboardEvent as ReactKeyboardEvent,
+ ReactNode,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import { css, styled } from '@apache-superset/core/theme';
+import { t } from '@apache-superset/core/translation';
+import { Icons } from '@superset-ui/core/components';
+import {
+ GridMetrics,
+ gridDelta,
+ movedPlacement,
+ NO_DELTA,
+ RESIZE_CORNERS,
+ type ResizeCorner,
+ resizedPlacement,
+ samePlacement,
+} from './gridGeometry';
+import { previewGrid, type GridLayout } from './resolveGrid';
+import type { GridPlacement, SpanConstraints } from './types';
+
+type GestureKind = 'move' | 'resize';
+
+interface Gesture {
+ nodeId: string;
+ kind: GestureKind;
+ pointerId: number;
+ startX: number;
+ startY: number;
+ /**
+ * Page scroll when the widget was grabbed. Pointer coordinates are relative
+ * to the viewport, so scrolling mid-gesture moves the content under a still
+ * pointer; without this the drag would report no movement at all.
+ */
+ startScrollX: number;
+ startScrollY: number;
+ dx: number;
+ dy: number;
+ /**
+ * Where the widget sat when it was grabbed. The gesture resolves against
+ * this, not against the current placement: a write landing mid-gesture (a
+ * sibling's drop pushing this one down, or a draft poll) would otherwise
+ * move the ground under the pointer and persist the drop relative to a row
+ * the user never aimed at.
+ */
+ origin: GridPlacement;
+ /**
+ * Whether this gesture is actually dragging yet. One begun on a handle is
+ * armed at once; one begun on the widget body waits until the pointer has
+ * travelled `DRAG_THRESHOLD`, so a press that turns out to be a click
+ * reaches the widget underneath instead of nudging it.
+ */
+ armed: boolean;
+ /** For a resize, the corner being dragged; the opposite one stays put. */
+ corner: ResizeCorner;
+}
+
+/** Pixels of travel before a press on a widget body becomes a drag. */
+const DRAG_THRESHOLD = 4;
+
+/**
+ * Presses already claimed by a grid, so one that bubbles through nested grids
+ * starts exactly one gesture: the innermost grid's.
+ */
+const claimedPresses = new WeakSet<Event>();
+
+/** A gesture's movement over the page content, scrolling included. */
+const travelled = (gesture: Gesture, clientX: number, clientY: number) => ({
+ dx: clientX - gesture.startX + (window.scrollX - gesture.startScrollX),
+ dy: clientY - gesture.startY + (window.scrollY - gesture.startScrollY),
+});
+
+const Grid = styled.div<GridMetrics>`
+ display: grid;
+ grid-template-columns: repeat(${({ columns }) => columns}, minmax(0, 1fr));
+ grid-auto-rows: ${({ rowUnit }) => rowUnit}px;
+ gap: ${({ gap }) => gap}px;
+`;
+
+const GridItem = styled.div<{
+ placement?: GridPlacement;
+ dragging?: boolean;
+ offset?: { x: number; y: number };
+}>`
+ ${({ placement, dragging, offset }) => css`
+ min-width: 0;
+ min-height: 0;
+ position: relative;
+ ${
+ placement &&
+ css`
+ grid-column: ${placement.col} / span ${placement.colSpan};
+ grid-row: ${placement.row} / span ${placement.rowSpan};
+ `
+ }
+ ${
+ dragging &&
+ offset &&
+ css`
+ /* Follow the pointer without reflowing the grid under it. */
+ transform: translate(${offset.x}px, ${offset.y}px);
+ z-index: 2;
+ opacity: 0.85;
+ `
+ }
+ `}
+`;
+
+/**
+ * Where the widget being dragged will land. No error state: the neighbours
+ * are already rendered where they will end up, so an overlap shows as them
+ * moving aside rather than as a warning colour here.
+ */
+const DropPreview = styled.div<{ placement: GridPlacement }>`
+ ${({ theme, placement }) => css`
+ grid-column: ${placement.col} / span ${placement.colSpan};
+ grid-row: ${placement.row} / span ${placement.rowSpan};
+ border: 2px dashed ${theme.colorPrimary};
+ border-radius: ${theme.borderRadius}px;
+ background: ${theme.colorPrimaryBg};
+ pointer-events: none;
+ z-index: 1;
+ `}
+`;
+
+/**
+ * Wraps a widget so its handles can sit on top of it. The handles stay hidden
+ * until the pointer is over the widget or a handle has focus, so a canvas at
+ * rest looks the same whether or not the user may edit it.
+ *
+ * Only the innermost hovered widget shows its handles and its outline:
+ * `:hover` matches every ancestor, so a container would otherwise light up
+ * alongside whichever of its children the pointer is actually over.
+ */
+const Interactive = styled.div`
+ ${({ theme }) => css`
+ height: 100%;
+ position: relative;
+ border-radius: ${theme.borderRadius}px;
+ transition: box-shadow ${theme.motionDurationMid};
+
+ /* Direct children only: hovering a container must not reveal the
+ handles of every widget nested inside it. */
+ & > .canvas-handle {
+ opacity: 0;
+ /*
+ * Transparent is not absent: without this a hidden handle still wins
+ * the hit test over whatever it happens to sit above.
+ */
+ pointer-events: none;
+ transition: opacity ${theme.motionDurationMid};
+ }
+
+ &:hover:not(:has(.canvas-interactive:hover)) {
+ /* Borderless widgets (a metric tile, say) otherwise give no clue which
+ widget the handles belong to. */
+ box-shadow: 0 0 0 1px ${theme.colorBorder};
+ }
+
+ &:hover:not(:has(.canvas-interactive:hover)) > .canvas-handle,
+ & > .canvas-handle:focus-visible {
+ opacity: 1;
+ pointer-events: auto;
+ }
+ `}
+`;
+
+/** Step between a container's handles and its children's, in size units. */
+const HANDLE_STEP = 8;
+/** Size units a handle itself needs, so an offset can leave room for it. */
+const HANDLE_BOX = 7;
+
+/**
+ * How far a nested grid's handles sit from the widget's edge.
+ *
+ * Nesting steps the offset so a container's handle never lands exactly on its
+ * child's, but it is clamped to the widget's own rendered box: pushing past
+ * that would put the handle over the *next* widget, where it would take
+ * presses meant for that one.
+ */
+const handleOffset = (
+ sizeUnit: number,
+ depth: number,
+ extent: number,
+): number => {
+ const room = Math.max(sizeUnit, extent - sizeUnit * HANDLE_BOX);
+ return Math.min(sizeUnit * (1 + depth * HANDLE_STEP), room);
+};
+
+/**
+ * The widget itself, kept inside the cells it was given.
+ *
+ * A widget renders at its natural height — a table with every row, say — so
+ * without this it spills past its own box and over whatever is below. The
+ * handles are siblings rather than children, so they stay pinned to the box
+ * while the content scrolls behind them.
+ */
+const Content = styled.div`
+ height: 100%;
+ overflow: auto;
+`;
+
+const Grip = styled.button<{ depth: number; extent: number }>`
+ ${({ theme, depth, extent }) => css`
+ position: absolute;
+ top: ${handleOffset(theme.sizeUnit, depth, extent)}px;
+ /* Deeper handles above shallower ones: the innermost wins a shared spot.
*/
+ z-index: ${3 + depth};
+ /*
+ * Left of both the north-east resize corner (4 units at the corner) and a
+ * widget's own controls, which step aside to 5 units while a plan is open
+ * and are 8 units wide (see WithQuery's .canvas-widget-controls). These
+ * handles sit above them in the stack, so overlapping would swallow
+ * presses meant for the menu.
+ */
+ right: ${theme.sizeUnit * 14}px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: ${theme.sizeUnit / 2}px;
+ border: 1px solid ${theme.colorBorder};
+ border-radius: ${theme.borderRadiusSM}px;
+ background: ${theme.colorBgElevated};
+ color: ${theme.colorTextSecondary};
+ cursor: grab;
+ touch-action: none;
+
+ &:active {
+ cursor: grabbing;
+ }
+ `}
+`;
+
+/** Human-readable names for the four corners, for the handle labels. */
+const CORNER_NAMES: Record<ResizeCorner, () => string> = {
+ nw: () => t('top left'),
+ ne: () => t('top right'),
+ sw: () => t('bottom left'),
+ se: () => t('bottom right'),
+};
+
+const ResizeCorner = styled.button<{
+ corner: ResizeCorner;
+ depth: number;
+ extent: number;
+}>`
+ ${({ theme, corner, depth, extent }) => {
+ const west = corner === 'nw' || corner === 'sw';
+ const north = corner === 'nw' || corner === 'ne';
+ /*
+ * Stepped like the grip: a container's box shares its edges with its
+ * first and last child's, and the container's handles paint later, so
+ * sharing the pixel would make the child's corner unreachable.
+ */
+ const inset =
+ depth === 0 ? 0 : handleOffset(theme.sizeUnit, depth - 1, extent);
+ return css`
+ position: absolute;
+ ${west ? 'left' : 'right'}: ${inset}px;
+ ${north ? 'top' : 'bottom'}: ${inset}px;
+ z-index: ${3 + depth};
+ width: ${theme.sizeUnit * 4}px;
+ height: ${theme.sizeUnit * 4}px;
+ padding: 0;
+ border: none;
+ background: transparent;
+ cursor: ${west === north ? 'nwse-resize' : 'nesw-resize'};
+ touch-action: none;
+
+ /* A two-line corner, the conventional resize affordance. */
+ &::after {
+ content: '';
+ position: absolute;
+ ${west ? 'left' : 'right'}: ${theme.sizeUnit / 2}px;
+ ${north ? 'top' : 'bottom'}: ${theme.sizeUnit / 2}px;
+ width: ${theme.sizeUnit * 2}px;
+ height: ${theme.sizeUnit * 2}px;
+ border-${west ? 'left' : 'right'}: 2px solid
${theme.colorTextTertiary};
+ border-${north ? 'top' : 'bottom'}: 2px solid
+ ${theme.colorTextTertiary};
+ }
+ `;
+ }}
+`;
+
+/** The grid's content width, kept current as the viewport changes. */
+function useElementWidth(): [(element: HTMLDivElement | null) => void, number]
{
+ const [element, setElement] = useState<HTMLDivElement | null>(null);
+ const [width, setWidth] = useState(0);
+
+ useEffect(() => {
+ if (!element) return undefined;
+ const measure = () => setWidth(element.clientWidth);
+ measure();
+ if (typeof ResizeObserver === 'undefined') return undefined;
+ const observer = new ResizeObserver(measure);
+ observer.observe(element);
+ return () => observer.disconnect();
+ }, [element]);
+
+ return [setElement, width];
+}
+
+export interface CanvasGridSurfaceProps {
+ childIds: string[];
+ columns: number;
+ gap: number;
+ rowUnit: number;
+ placements: Record<string, GridPlacement>;
+ /**
+ * Each child's stored layout. The preview resolves from these, as the
+ * server does: an auto-placed child has no `col`/`row`, and resolving from
+ * the rectangle it currently occupies would pin it there in the preview
+ * while the server still places it freely.
+ */
+ layouts: Record<string, GridLayout>;
+ constraints: Record<string, SpanConstraints>;
+ /** Whether the user may drag and resize these widgets. */
+ editable: boolean;
+ /**
+ * How deeply this grid is nested. A container's box begins where its first
+ * child's does and its handles paint last, so without an offset per level a
+ * container's grip would sit over its child's and swallow the click.
+ */
+ depth: number;
+ onPlace: (nodeId: string, placement: GridPlacement) => void;
+ renderNode: (nodeId: string) => ReactNode;
+}
+
+export default function CanvasGridSurface({
+ childIds,
+ columns,
+ gap,
+ rowUnit,
+ placements,
+ layouts,
+ constraints,
+ editable,
+ depth,
+ onPlace,
+ renderNode,
+}: CanvasGridSurfaceProps) {
+ const [gridRef, width] = useElementWidth();
+ const [gesture, setGesture] = useState<Gesture>();
+ // The handlers read the gesture directly, so committing never runs as a
+ // side effect inside a state updater.
+ const live = useRef<Gesture>();
+
+ const update = useCallback((next: Gesture | undefined) => {
+ live.current = next;
+ setGesture(next);
+ }, []);
+
+ /** Where `from` would land given a pointer delta, in whole grid units. */
+ const targetOf = useCallback(
+ (
+ nodeId: string,
+ kind: GestureKind,
+ from: GridPlacement,
+ dx: number,
+ dy: number,
+ corner: ResizeCorner = 'se',
+ ) => {
+ const metrics: GridMetrics = { columns, gap, rowUnit };
+ const delta = width > 0 ? gridDelta(dx, dy, width, metrics) : NO_DELTA;
+ return kind === 'move'
+ ? movedPlacement(from, delta, columns)
+ : resizedPlacement(from, delta, columns, constraints[nodeId], corner);
+ },
+ [width, columns, gap, rowUnit, constraints],
+ );
+
+ /**
+ * Persists `next` for `nodeId`, where `from` is the placement the gesture
+ * resolved against.
+ *
+ * Both no-op checks matter. A gesture that moved nothing resolves back to
+ * `from`, and sending that would write the geometry the widget had when it
+ * was grabbed over anything that landed while the button was held -- a plain
+ * click on a handle would revert a draft poll or another editor's resize.
+ * Comparing with the current placement then drops a gesture that happens to
+ * land exactly where the widget already sits.
+ */
+ const commit = useCallback(
+ (nodeId: string, next: GridPlacement | undefined, from: GridPlacement) => {
+ const placement = placements[nodeId];
+ if (!next || !placement) return;
+ if (samePlacement(next, from) || samePlacement(next, placement)) return;
+ onPlace(nodeId, next);
+ },
+ [onPlace, placements],
+ );
+
+ const begin =
+ (
+ nodeId: string,
+ kind: GestureKind,
+ armed = true,
+ corner: ResizeCorner = 'se',
+ ) =>
+ (event: ReactPointerEvent<HTMLElement>) => {
+ if (event.button !== 0) return;
+ // One gesture at a time. A second finger on another handle also reports
+ // button 0, and letting it replace the live gesture would strand the
+ // first pointer: its move and up events fail the pointerId guards, so
+ // its drag would be dropped without ever being committed.
+ if (live.current) return;
+ const origin = placements[nodeId];
+ if (!origin) return;
+ // A deferred press does not stop propagation -- a click has to reach
+ // the widget -- so it bubbles to this grid and to every grid containing
+ // it, and each would start its own gesture. The innermost runs first
+ // and claims the press; the rest stand down.
+ if (claimedPresses.has(event.nativeEvent)) return;
+ claimedPresses.add(event.nativeEvent);
+ if (armed) {
+ event.preventDefault();
+ event.stopPropagation();
+ // A handle owns the pointer from the first move. A deferred press
+ // must not, or the release and the click after it would be
+ // retargeted here from whatever was actually pressed.
+ event.currentTarget.setPointerCapture(event.pointerId);
+ }
+ update({
+ nodeId,
+ kind,
+ pointerId: event.pointerId,
+ startX: event.clientX,
+ startY: event.clientY,
+ startScrollX: window.scrollX,
+ startScrollY: window.scrollY,
+ dx: 0,
+ dy: 0,
+ origin,
+ armed,
+ corner,
+ });
+ };
+
+ const onPointerMove = (event: ReactPointerEvent<HTMLElement>) => {
+ const { current } = live;
+ if (!current || current.pointerId !== event.pointerId) return;
+ const moved = travelled(current, event.clientX, event.clientY);
+ // A deferred gesture arms only once the pointer has really travelled.
+ const armed =
+ current.armed || Math.hypot(moved.dx, moved.dy) >= DRAG_THRESHOLD;
+ if (!armed) return;
+ if (!current.armed) {
+ // It is a drag after all, so take the pointer from here on.
+ event.currentTarget.setPointerCapture(event.pointerId);
+ }
+ update({ ...current, ...moved, armed });
+ };
+
+ const onPointerUp = (event: ReactPointerEvent<HTMLElement>) => {
+ const { current } = live;
+ if (!current || current.pointerId !== event.pointerId) return;
+ update(undefined);
+ // From the release event's own position: the pointer can travel between
+ // the last move event and the release, and the drop belongs where the
+ // user let go.
+ if (!current.armed) return;
+ const { dx, dy } = travelled(current, event.clientX, event.clientY);
+ commit(
+ current.nodeId,
+ targetOf(
+ current.nodeId,
+ current.kind,
+ current.origin,
+ dx,
+ dy,
+ current.corner,
+ ),
+ current.origin,
+ );
+ };
+
+ // Only the pointer that owns the gesture may cancel it, so a second
+ // pointer going away elsewhere doesn't discard this one.
+ const onPointerCancel = (event: ReactPointerEvent<HTMLElement>) => {
+ const { current } = live;
+ if (!current || current.pointerId !== event.pointerId) return;
+ update(undefined);
+ };
+
+ // Losing capture ends the gesture even when no up or cancel event arrives,
+ // which is what happens if the handle is unmounted mid-drag.
+ const onLostPointerCapture = (event: ReactPointerEvent<HTMLElement>) => {
+ const { current } = live;
+ if (!current || current.pointerId !== event.pointerId) return;
+ update(undefined);
+ };
+
+ // A gesture whose node stops being placeable, or that editing has stopped
+ // allowing, can never be released by its own handle: that handle is gone,
+ // so its up and cancel events never fire. Without this the gesture would
+ // persist, leaving the drop preview on screen and -- because only one
+ // gesture may be live at a time -- blocking every later drag and resize.
+ useEffect(() => {
+ const { current } = live;
+ if (!current) return;
+ // `childIds` as well as `placements`: placements are canvas-wide, so a
+ // node moved into another container is still placed, just not here -- and
+ // its handle has unmounted, so it can never release the gesture itself.
+ if (
+ !editable ||
+ !placements[current.nodeId] ||
+ !childIds.includes(current.nodeId)
+ ) {
+ update(undefined);
+ }
+ }, [editable, placements, childIds, update]);
+
+ /**
+ * Arrow keys do what dragging that handle does, one cell at a time, so the
+ * layout is reachable without a pointer: the grip moves the widget, the
+ * resize corner resizes it.
+ */
+ const onKeyDown =
+ (nodeId: string, kind: GestureKind, corner: ResizeCorner = 'se') =>
+ (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+ const steps: Record<string, [number, number]> = {
+ ArrowLeft: [-1, 0],
+ ArrowRight: [1, 0],
+ ArrowUp: [0, -1],
+ ArrowDown: [0, 1],
+ };
+ const step = steps[event.key];
+ if (!step) return;
+ event.preventDefault();
+ const placement = placements[nodeId];
+ if (!placement) return;
+ const delta = { cols: step[0], rows: step[1] };
+ commit(
+ nodeId,
+ kind === 'move'
+ ? movedPlacement(placement, delta, columns)
+ : resizedPlacement(
+ placement,
+ delta,
+ columns,
+ constraints[nodeId],
+ corner,
+ ),
+ placement,
+ );
+ };
+
+ const handlers = {
+ onPointerMove,
+ onPointerUp,
+ onPointerCancel,
+ onLostPointerCapture,
+ };
+
+ const preview = gesture?.armed
+ ? targetOf(
+ gesture.nodeId,
+ gesture.kind,
+ gesture.origin,
+ gesture.dx,
+ gesture.dy,
+ gesture.corner,
+ )
+ : undefined;
+ // Where every widget sits for the layout being previewed. Runs the same
+ // rules the server will apply on the drop, so the neighbours move aside
+ // under the pointer and nothing jumps once the write lands.
+ const shown =
+ preview && gesture
+ ? previewGrid(
+ childIds,
+ layouts,
+ placements,
+ gesture.nodeId,
+ preview,
+ columns,
+ )
+ : placements;
+
+ return (
+ <Grid
+ ref={gridRef}
+ columns={columns}
+ gap={gap}
+ rowUnit={rowUnit}
+ data-test="canvas-grid-surface"
+ >
+ {preview && gesture && !samePlacement(preview, gesture.origin) && (
+ <DropPreview placement={preview} data-test="canvas-drop-preview" />
+ )}
+ {childIds.map(childId => {
+ const dragging = gesture?.armed && gesture.nodeId === childId;
+ // Neighbours follow the previewed layout, so they move aside while
+ // the pointer is still down. The widget being dragged stays anchored
+ // where it was grabbed, and the pointer offset below moves it.
+ const placed = dragging ? placements[childId] : shown[childId];
+ // Rows plus the gaps between them: how tall this widget renders.
+ const extent = placed
+ ? placed.rowSpan * rowUnit + (placed.rowSpan - 1) * gap
+ : 0;
+ return (
+ <GridItem
+ key={childId}
+ placement={dragging && gesture ? gesture.origin : placed}
+ dragging={dragging && gesture?.kind === 'move'}
+ offset={dragging ? { x: gesture.dx, y: gesture.dy } : undefined}
+ data-test="canvas-node"
+ data-node-id={childId}
+ >
+ <Interactive
+ className="canvas-interactive"
+ {...(editable && placements[childId]
+ ? {
+ onPointerDown: begin(childId, 'move', false),
Review Comment:
Making the whole wrapper a deferred drag source means any press-and-drag
inside a widget turns into a widget move after 4px, including dragging the
`Content` overflow scrollbar, a range-filter slider, or selecting text in a
table, so in Plan mode those controls can no longer be used by dragging.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
