lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: align canvas selection border and handle stroke
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-02-21 00:38:15 +08:00
parent 484b1a104d
commit 2d09e39878
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
components/canvas/CanvasWorkspace.tsx
View File

@ -40,6 +40,9 @@ export function CanvasWorkspace() {
const SNAP_THRESHOLD = 10; const SNAP_THRESHOLD = 10;
const SNAP_GAP = 12; const SNAP_GAP = 12;
const SELECTION_COLOR = "#27a8ff"; const SELECTION_COLOR = "#27a8ff";
const SELECTION_STROKE_WIDTH = 2;
const IMAGE_HANDLE_SIZE = 12;
const IMAGE_HANDLE_OFFSET = IMAGE_HANDLE_SIZE / 2;
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [isPanning, setIsPanning] = useState(false); const [isPanning, setIsPanning] = useState(false);
const [panStart, setPanStart] = useState<Position>({ x: 0, y: 0 }); const [panStart, setPanStart] = useState<Position>({ x: 0, y: 0 });
@ -698,39 +701,39 @@ export function CanvasWorkspace() {
const imageResizeHandleStyles = isImageNode const imageResizeHandleStyles = isImageNode
? { ? {
topRight: { topRight: {
width: 16, width: IMAGE_HANDLE_SIZE,
height: 16, height: IMAGE_HANDLE_SIZE,
right: -8, right: -IMAGE_HANDLE_OFFSET,
top: -8, top: -IMAGE_HANDLE_OFFSET,
borderRadius: 999, borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`, border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
}, },
bottomRight: { bottomRight: {
width: 16, width: IMAGE_HANDLE_SIZE,
height: 16, height: IMAGE_HANDLE_SIZE,
right: -8, right: -IMAGE_HANDLE_OFFSET,
bottom: -8, bottom: -IMAGE_HANDLE_OFFSET,
borderRadius: 999, borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`, border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
}, },
bottomLeft: { bottomLeft: {
width: 16, width: IMAGE_HANDLE_SIZE,
height: 16, height: IMAGE_HANDLE_SIZE,
left: -8, left: -IMAGE_HANDLE_OFFSET,
bottom: -8, bottom: -IMAGE_HANDLE_OFFSET,
borderRadius: 999, borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`, border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
}, },
topLeft: { topLeft: {
width: 16, width: IMAGE_HANDLE_SIZE,
height: 16, height: IMAGE_HANDLE_SIZE,
left: -8, left: -IMAGE_HANDLE_OFFSET,
top: -8, top: -IMAGE_HANDLE_OFFSET,
borderRadius: 999, borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`, border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
}, },
} }

2
components/canvas/nodes/ImageNode.tsx
View File

@ -1477,7 +1477,7 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
className={cn( className={cn(
"relative w-full h-full bg-card rounded-[4px] overflow-hidden border shadow-sm transition-colors", "relative w-full h-full bg-card rounded-[4px] overflow-hidden border shadow-sm transition-colors",
isSelected isSelected
? "rounded-none border-[1.5px] border-[#27a8ff] shadow-none" ? "rounded-none border-[2px] border-[#27a8ff] shadow-none"
: "border-transparent" : "border-transparent"
)} )}
onMouseEnter={() => setIsHovered(true)} onMouseEnter={() => setIsHovered(true)}