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_GAP = 12;
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 [isPanning, setIsPanning] = useState(false);
const [panStart, setPanStart] = useState<Position>({ x: 0, y: 0 });
@ -698,39 +701,39 @@ export function CanvasWorkspace() {
const imageResizeHandleStyles = isImageNode
? {
topRight: {
width: 16,
height: 16,
right: -8,
top: -8,
width: IMAGE_HANDLE_SIZE,
height: IMAGE_HANDLE_SIZE,
right: -IMAGE_HANDLE_OFFSET,
top: -IMAGE_HANDLE_OFFSET,
borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`,
border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff",
},
bottomRight: {
width: 16,
height: 16,
right: -8,
bottom: -8,
width: IMAGE_HANDLE_SIZE,
height: IMAGE_HANDLE_SIZE,
right: -IMAGE_HANDLE_OFFSET,
bottom: -IMAGE_HANDLE_OFFSET,
borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`,
border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff",
},
bottomLeft: {
width: 16,
height: 16,
left: -8,
bottom: -8,
width: IMAGE_HANDLE_SIZE,
height: IMAGE_HANDLE_SIZE,
left: -IMAGE_HANDLE_OFFSET,
bottom: -IMAGE_HANDLE_OFFSET,
borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`,
border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff",
},
topLeft: {
width: 16,
height: 16,
left: -8,
top: -8,
width: IMAGE_HANDLE_SIZE,
height: IMAGE_HANDLE_SIZE,
left: -IMAGE_HANDLE_OFFSET,
top: -IMAGE_HANDLE_OFFSET,
borderRadius: 999,
border: `3px solid ${SELECTION_COLOR}`,
border: `${SELECTION_STROKE_WIDTH}px solid ${SELECTION_COLOR}`,
backgroundColor: "#ffffff",
},
}

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

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