Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrades to corner radius handler to appear on four sides in rectangle #230

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Upgrades to corner radius handler to appear on four sides in rectangle #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/forms/grida-react-canvas/action.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,7 @@ export type EditorSurface_StartGesture = {
gesture:
| Pick<GestureScale, "type" | "direction" | "selection">
| Pick<GestureRotate, "type" | "selection">
| Pick<GestureCornerRadius, "type" | "node_id">
| Pick<GestureCornerRadius, "type" | "node_id" | "direction">
| Pick<GestureCurve, "type" | "control" | "node_id" | "segment">
| Pick<GestureTranslateVertex, "type" | "node_id" | "vertex">;
};
Expand Down
3 changes: 2 additions & 1 deletion apps/forms/grida-react-canvas/provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2363,12 +2363,13 @@ export function useEventTarget() {

// #region drag resize handle
const startCornerRadiusGesture = useCallback(
(selection: string) => {
(selection: string, direction: cmath.CardinalDirection) => {
dispatch({
type: "surface/gesture/start",
gesture: {
type: "corner-radius",
node_id: selection,
direction,
},
});
},
Expand Down
14 changes: 7 additions & 7 deletions apps/forms/grida-react-canvas/reducers/event-target.reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -873,27 +873,27 @@ export default function eventTargetReducer<S extends IDocumentEditorState>(
break;
}
case "corner-radius": {
const { node_id } = draft.gesture;
const { node_id, direction } = draft.gesture;
const [dx, dy] = delta;
const d = -Math.round(dx);
const d = (direction.includes("e") ? -1 : 1 ) * Math.round(dx);
const node = document.__getNodeById(draft, node_id);

if (!("cornerRadius" in node)) {
return;
}

// TODO: get accurate fixed width
// TODO: also handle by height
const fixed_width =
typeof node.width === "number" ? node.width : undefined;
const maxRaius = fixed_width ? fixed_width / 2 : undefined;
typeof node.width === "number" ? node.width : 0;
const fixed_height =
typeof node.height === "number" ? node.height : 0;
const maxRadius = Math.min(fixed_width, fixed_height) / 2;

const nextRadius =
(typeof node.cornerRadius == "number" ? node.cornerRadius : 0) +
d;

const nextRadiusClamped = Math.floor(
Math.min(maxRaius ?? Infinity, Math.max(0, nextRadius))
Math.min(maxRadius ?? Infinity, Math.max(0, nextRadius))
);
draft.document.nodes[node_id] = nodeReducer(node, {
type: "node/change/cornerRadius",
Expand Down
3 changes: 2 additions & 1 deletion apps/forms/grida-react-canvas/reducers/surface.reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default function surfaceReducer<S extends IDocumentEditorState>(
//
}
case "corner-radius": {
const { node_id } = gesture;
const { node_id, direction } = gesture;

return produce(state, (draft) => {
self_selectNode(draft, "reset", node_id);
Expand All @@ -140,6 +140,7 @@ export default function surfaceReducer<S extends IDocumentEditorState>(
movement: cmath.vector2.zero,
initial_bounding_rectangle: cdom.getNodeBoundingRect(node_id)!,
node_id: node_id,
direction,
};
});
}
Expand Down
1 change: 1 addition & 0 deletions apps/forms/grida-react-canvas/state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ export type GestureCornerRadius = IGesture & {
type: "corner-radius";
node_id: string;
initial_bounding_rectangle: cmath.Rectangle | null;
direction: cmath.CardinalDirection;
};

export type GestureDraw = IGesture & {
Expand Down
9 changes: 7 additions & 2 deletions apps/forms/grida-react-canvas/viewport/surface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,7 +504,12 @@ function NodeOverlay({
)}
{supports.cornerRadius(node.type) &&
!supports.children(node.type) && (
<NodeOverlayCornerRadiusHandle anchor="se" node_id={node_id} />
<>
<NodeOverlayCornerRadiusHandle anchor="ne" node_id={node_id} />
<NodeOverlayCornerRadiusHandle anchor="se" node_id={node_id} />
<NodeOverlayCornerRadiusHandle anchor="sw" node_id={node_id} />
<NodeOverlayCornerRadiusHandle anchor="nw" node_id={node_id} />
</>
)}
<LayerOverlayRotationHandle anchor="nw" node_id={node_id} />
<LayerOverlayRotationHandle anchor="ne" node_id={node_id} />
Expand Down Expand Up @@ -540,7 +545,7 @@ function NodeOverlayCornerRadiusHandle({
const bind = useSurfaceGesture({
onDragStart: ({ event }) => {
event.preventDefault();
startCornerRadiusGesture(node_id);
startCornerRadiusGesture(node_id, anchor);
},
});

Expand Down