vndangkhoa/openpencil
1
0
Fork 0
mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

refactor(canvas): remove dimension label overlay

Browse source 
remove the blue dimension/position label that appeared on selection,
drag, and scale interactions
This commit is contained in:
Fini 2026-02-21 04:47:20 +08:00
parent 7c32eea62c
commit ddaf4fe452
2 changed files with 11 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/canvas/fabric-canvas.tsx
View file

@ -5,7 +5,6 @@ import { useCanvasEvents } from './use-canvas-events'
import { useCanvasViewport } from './use-canvas-viewport' import { useCanvasViewport } from './use-canvas-viewport'
import { useCanvasSelection } from './use-canvas-selection' import { useCanvasSelection } from './use-canvas-selection'
import { useCanvasSync } from './use-canvas-sync' import { useCanvasSync } from './use-canvas-sync'
import { useDimensionLabel } from './use-dimension-label'
import { useFrameLabels } from './use-frame-labels' import { useFrameLabels } from './use-frame-labels'
import { useLayoutIndicator } from './use-layout-indicator' import { useLayoutIndicator } from './use-layout-indicator'
import { useCanvasHover } from './use-canvas-hover' import { useCanvasHover } from './use-canvas-hover'
@ -23,7 +22,7 @@ export default function FabricCanvas() {
useCanvasSync() useCanvasSync()
useCanvasHover() useCanvasHover()
useEnteredFrameOverlay() useEnteredFrameOverlay()
useDimensionLabel(containerRef)
useFrameLabels() useFrameLabels()
useLayoutIndicator() useLayoutIndicator()

16
src/canvas/use-dimension-label.ts
View file

@ -44,12 +44,18 @@ export function useDimensionLabel(
const bound = active.getBoundingRect() const bound = active.getBoundingRect()
// Detect if the user is actively dragging (moving) // Detect active interaction (dragging or scaling)
const transform = (canvas as unknown as { _currentTransform?: { action?: string } }) const transform = (canvas as unknown as { _currentTransform?: { action?: string } })
._currentTransform ._currentTransform
const isMoving = transform?.action === 'drag' const action = transform?.action
if (isMoving) { if (!action) {
// No active interaction — hide the label
label.style.display = 'none'
return
}
if (action === 'drag') {
// Show position in scene coordinates during drag // Show position in scene coordinates during drag
const vpt = canvas.viewportTransform const vpt = canvas.viewportTransform
const zoom = vpt[0] const zoom = vpt[0]
@ -57,12 +63,10 @@ export function useDimensionLabel(
const panY = vpt[5] const panY = vpt[5]
if (active instanceof fabric.ActiveSelection) { if (active instanceof fabric.ActiveSelection) {
// ActiveSelection: show bounding box top-left in scene coords
const sceneX = Math.round(((bound.left - panX) / zoom)) const sceneX = Math.round(((bound.left - panX) / zoom))
const sceneY = Math.round(((bound.top - panY) / zoom)) const sceneY = Math.round(((bound.top - panY) / zoom))
label.textContent = `X: ${sceneX} Y: ${sceneY}` label.textContent = `X: ${sceneX} Y: ${sceneY}`
} else { } else {
// Single object: show position relative to parent (document coords)
const obj = active as FabricObjectWithPenId const obj = active as FabricObjectWithPenId
const info = obj.penNodeId ? nodeRenderInfo.get(obj.penNodeId) : null const info = obj.penNodeId ? nodeRenderInfo.get(obj.penNodeId) : null
const offsetX = info?.parentOffsetX ?? 0 const offsetX = info?.parentOffsetX ?? 0
@ -72,7 +76,7 @@ export function useDimensionLabel(
label.textContent = `X: ${relX} Y: ${relY}` label.textContent = `X: ${relX} Y: ${relY}`
} }
} else { } else {
// Show dimensions when not moving (selected, scaling, etc.) // Show dimensions during scale/resize
const w = Math.round(active.getScaledWidth()) const w = Math.round(active.getScaledWidth())
const h = Math.round(active.getScaledHeight()) const h = Math.round(active.getScaledHeight())
label.textContent = `${w} \u00d7 ${h}` label.textContent = `${w} \u00d7 ${h}`