Skip to content

Commit

Permalink
Thinner grid cell borders (#6525)
Browse files Browse the repository at this point in the history
**Details:**
- Removing the "insertion dots"
- Aligning the outer edge of the grid cells with the selection outline
- Making the grid cell borders thinner

**Before**
<img width="697" alt="image"
src="https://github.com/user-attachments/assets/f1f85fa5-ab84-4c71-84d8-3a5fa0c183dd">

**Now**
<img width="675" alt="image"
src="https://github.com/user-attachments/assets/5aa74828-8336-4c48-8ab0-bdf79139e92b">
  • Loading branch information
balazsbajorics authored Oct 14, 2024
1 parent aebb64f commit ddd55e0
Showing 1 changed file with 5 additions and 61 deletions.
66 changes: 5 additions & 61 deletions editor/src/components/canvas/controls/grid-controls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -870,62 +870,6 @@ const GridControl = React.memo<GridControlProps>(({ grid }) => {
: undefined,
}}
/>
<React.Fragment>
<div
style={{
position: 'absolute',
top: -1,
bottom: -1,
left: -1,
right: -1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div style={{ width: 2, height: 2, backgroundColor: dotgridColor }} />
</div>
<div
style={{
width: 2,
height: 2,
backgroundColor: dotgridColor,
position: 'absolute',
top: -1,
left: -1,
}}
/>
<div
style={{
width: 2,
height: 2,
backgroundColor: dotgridColor,
position: 'absolute',
bottom: -1,
left: -1,
}}
/>
<div
style={{
width: 2,
height: 2,
backgroundColor: dotgridColor,
position: 'absolute',
top: -1,
right: -1,
}}
/>
<div
style={{
width: 2,
height: 2,
backgroundColor: dotgridColor,
position: 'absolute',
bottom: -1,
right: -1,
}}
/>
</React.Fragment>
</React.Fragment>
</div>
)
Expand Down Expand Up @@ -1676,16 +1620,16 @@ function gridKeyFromPath(path: ElementPath): string {
return `grid-${EP.toString(path)}`
}

const placeholderBorderBaseWidth = 2

const borderWidth = 1
function gridPlaceholderBorder(color: string, scale: number): string {
return `${placeholderBorderBaseWidth / scale}px solid ${color}`
return `${borderWidth / scale}px solid ${color}`
}

const borderExtension = 0.5
function gridPlaceholderTopOrLeftPosition(scale: number): string {
return `${-placeholderBorderBaseWidth / scale}px`
return `${-borderExtension / scale}px`
}

function gridPlaceholderWidthOrHeight(scale: number): string {
return `calc(100% + ${(placeholderBorderBaseWidth * 2) / scale}px)`
return `calc(100% + ${(borderExtension * 2) / scale}px)`
}

0 comments on commit ddd55e0

Please sign in to comment.