Skip to content
This repository has been archived by the owner on May 27, 2024. It is now read-only.

Commit

Permalink
Fix rect draw outside canvas (#15)
Browse files Browse the repository at this point in the history 
* upgrade storybook

* Draw limit to border

* v0.0.15-beta

* v0.0.15-beta.2

* fixed
  • Loading branch information
@mbaumanndev
mbaumanndev authored Dec 29, 2021
1 parent 8736b67 commit 403fd54
Show file tree
Hide file tree
Showing 4 changed files with 788 additions and 749 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@psycle/repsycle",
"version": "0.0.14",
"version": "0.0.15",
"description": "Psycle Research front-end toolkit",
"author": "Psycle Research",
"keywords": [
Expand Down Expand Up @@ -38,10 +38,10 @@
"@rollup/plugin-commonjs": "^20.0.0",
"@rollup/plugin-node-resolve": "^13.0.4",
"@rollup/plugin-typescript": "^8.3.0",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-links": "^6.3.12",
"@storybook/react": "^6.3.12",
"@storybook/addon-actions": "^6.4.9",
"@storybook/addon-essentials": "^6.4.9",
"@storybook/addon-links": "^6.4.9",
"@storybook/react": "^6.4.9",
"babel-loader": "^8.2.2",
"install-peers-cli": "^2.2.0",
"prettier": "^2.4.1",
Expand Down
128 changes: 128 additions & 0 deletions src/draw-zone/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -536,6 +536,134 @@ export function ScaleOut({}) {
)
}

export function ScaleInRect({}) {
const originalElements = [
{
id: 'rect1',
points: [
{ x: 125, y: 94 },
{ x: 250, y: 1 },
],
color: '#00ff00',
},
]
const [scale, setScale] = useState(1)
const mode = 'draw'
const [move, setMove] = useState(false)
const [elements, setElements] = useState<Array<Partial<ChangedElement>>>([])
const [showMarker, setShowMarker] = useState(false)
const [orignalSize, setOriginalSize] = useState<Size>()

useEffect(() => {
if (orignalSize) {
setElements(
originalElements.map(
(element) =>
({
...element,
points: element.points.map((point) => ({
x: point.x / orignalSize.width,
y: point.y / orignalSize.height,
})),
} as ChangedElement),
),
)
}
}, [orignalSize])

return (
<div>
<div>
<button onClick={() => setScale((old) => old - 0.25)}>
Reduire
</button>
<button onClick={() => setScale((old) => old + 0.25)}>
Agrandir
</button>
<button onClick={() => setMove((m) => !m)}>
{move ? 'Déplacer actif' : 'Déplacer inactif'}
</button>
<button onClick={() => setShowMarker((s) => !s)}>
{showMarker ? 'Cacher' : 'Afficher'} marqueur
</button>
</div>
<div
style={{
backgroundColor: '#aaa',
width: '500px',
height: '500px',
}}
>
<DrawZone
src="https://picsum.photos/seed/drawzone/5000/4000"
elements={elements}
onChange={(elements: ChangedElement[]) =>
setElements(elements)
}
remove={(id) =>
setElements((el) => el.filter((e) => e.id !== id))
}
scale={scale}
mode={move ? 'move' : mode}
showMarker={showMarker}
setOriginalSize={setOriginalSize}
sizeMode="fit"
>
{elements.map((element, index) => {
const elem = element as ChangedElement

if (!elem.selected) return null

return (
<div
key={index}
style={{
position: 'absolute',
zIndex: 10,
top: elem.rect
? `${elem.rect.y}%`
: `${elem.points[0].y * 100}%`,
left: elem.rect
? `${elem.rect.x}%`
: `${elem.points[0].x * 100}%`,
border:
elem.rect && elem.selected
? '1px dashed black'
: 'none',
width:
elem.rect && elem.selected
? `${elem.rect.width}%`
: 'auto',
height:
elem.rect && elem.selected
? `${elem.rect.height}%`
: 'auto',
pointerEvents: 'none',
}}
>
<button
style={{
pointerEvents: 'auto',
}}
onClick={() => {
setElements(
elements.filter(
(_, idx) => index !== idx,
),
)
}}
>
supprimer
</button>
</div>
)
})}
</DrawZone>
</div>
</div>
)
}

export function None({}) {
const [scale, setScale] = useState(1)
const mode = 'none'
Expand Down
23 changes: 10 additions & 13 deletions src/draw-zone/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -919,6 +919,8 @@ export function useDraw(
if (e.defaultPrevented) return
if (!svg) return

if (!svg.node.contains(e.target as Node)) return

if (props.mode === 'draw' && !props.disabled) {
const svgRect = svg.node.getBoundingClientRect()

Expand Down Expand Up @@ -975,18 +977,12 @@ export function useDraw(
if (!svg || !startPosition) return

if (props.mode === 'draw' && !props.disabled) {
if (!svg.node.contains(e.target as Node)) {
overlayRect = undefined
overlayRect2 = undefined
return
}

if (overlayRect && overlayRect2) {
const svgRect = svg.node.getBoundingClientRect()

const currentPosition: Point = {
x: e.clientX - svgRect.left,
y: e.clientY - svgRect.top,
const currentPosition = {
x: Math.max(Math.min(e.clientX, svgRect.right), svgRect.left) - svgRect.left,
y: Math.max(Math.min(e.clientY, svgRect.bottom), svgRect.top) - svgRect.top,
}

const minX =
Expand Down Expand Up @@ -1070,7 +1066,7 @@ export function useDraw(
}
}

function onMouseUp(e: globalThis.MouseEvent) {
function onMouseUp(this: Window, e: globalThis.MouseEvent) {
if (e.defaultPrevented) return
if (!svg) return

Expand All @@ -1093,8 +1089,8 @@ export function useDraw(

const svgRect = svg.node.getBoundingClientRect()
const currentPosition = {
x: e.clientX - svgRect.left,
y: e.clientY - svgRect.top,
x: Math.max(Math.min(e.clientX, svgRect.right), svgRect.left) - svgRect.left,
y: Math.max(Math.min(e.clientY, svgRect.bottom), svgRect.top) - svgRect.top,
}

// Prevent adding very small rects (mis-clicks).
Expand Down Expand Up @@ -1347,12 +1343,13 @@ export function useDraw(

svg.on('mousedown', onMouseDown as unknown as EventListener)
svg.on('mouseup', onMouseUp as unknown as EventListener)
window.addEventListener('mouseup', onMouseUp)
svg.on('click', onClick as unknown as EventListener)
window.addEventListener('mousemove', onMouseMove)

return () => {
svg.off('mousedown', onMouseDown as unknown as EventListener)
svg.off('mouseup', onMouseUp as unknown as EventListener)
window.removeEventListener('mouseup', onMouseUp)
svg.off('click', onClick as unknown as EventListener)
window.removeEventListener('mousemove', onMouseMove)
}
Expand Down
Loading

0 comments on commit 403fd54

Please sign in to comment.