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

Commit

Permalink
Fix/drawzone fixes (#12)
Browse files Browse the repository at this point in the history 
* WIP

* fixes for DrawZone

* bump version

* Clean

* remove unused code
  • Loading branch information
@mbaumanndev
mbaumanndev authored Nov 30, 2021
1 parent 60c8f04 commit 9da298b
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 75 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@psycle/repsycle",
"version": "0.0.11",
"version": "0.0.12",
"description": "Psycle Research front-end toolkit",
"author": "Psycle Research",
"keywords": [
Expand Down
211 changes: 137 additions & 74 deletions src/draw-zone/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,20 +161,28 @@ export function useDraw(
}
}

function onDelKeyPress(this: SVGElement, event: KeyboardEvent) {
if (event.defaultPrevented) return
if (event.key === 'Delete') {
function onDelKeyPress(this: SVGElement, event: KeyboardEvent): boolean {
if (event.defaultPrevented) return false
if (event.key === 'Delete' && this.closest('svg')) {
event.preventDefault()
props.remove(this.dataset['id'] as string)

return true
}

return false
}

function onEscKeyPress(this: SVGElement, event: KeyboardEvent) {
if (event.defaultPrevented) return
if (event.key === 'Escape') {
function onEscKeyPress(this: SVGElement, event: KeyboardEvent): boolean {
if (event.defaultPrevented) return false
if (event.key === 'Escape' && this.closest('svg')) {
event.preventDefault()
this.dispatchEvent(new Event('deselect'))
;(this as any).instance.fire('deselect')

return true
}

return false
}

function endPolyDrawing(event: Event) {
Expand Down Expand Up @@ -209,10 +217,14 @@ export function useDraw(
})),
})

window.removeEventListener('keyup', onAbortPathDrawing)
window.removeEventListener('keyup', onEnterKeyPress)
window.removeEventListener('keyup', onAbortPathDrawing, {
capture: true,
})
window.removeEventListener('keyup', onEnterKeyPress, { capture: true })

newPoly?.fire('select')
if (newPoly) {
newPoly.fire('select')
}

onChange()
}
Expand Down Expand Up @@ -248,8 +260,12 @@ export function useDraw(

startPosition = null

window.removeEventListener('keyup', onAbortPathDrawing)
window.removeEventListener('keyup', onEnterKeyPress)
window.removeEventListener('keyup', onAbortPathDrawing, {
capture: true,
})
window.removeEventListener('keyup', onEnterKeyPress, {
capture: true,
})
}
}

Expand Down Expand Up @@ -287,8 +303,24 @@ export function useDraw(
rect.stroke(stroke)
rect.css('touch-action', 'none') // silence interactjs warning.

const rectDelKeyPress = onDelKeyPress.bind(rect.node)
const rectEscKeyPress = onEscKeyPress.bind(rect.node)
function rectDelKeyPress(ev: KeyboardEvent) {
const result = onDelKeyPress.call(rect.node, ev)

if (result) {
window.removeEventListener('keyup', rectDelKeyPress, {
capture: true,
})
}
}
function rectEscKeyPress(ev: KeyboardEvent) {
const result = onEscKeyPress.call(rect.node, ev)

if (result) {
window.removeEventListener('keyup', rectEscKeyPress, {
capture: true,
})
}
}

let circle: Circle | undefined
let handles: Use[] = []
Expand All @@ -303,8 +335,6 @@ export function useDraw(
rect.stroke({ color: blue })
rect.data('selected', true)

onChange()

const coords = getRectCoords(rect)

if (!disabled) {
Expand All @@ -313,11 +343,9 @@ export function useDraw(
circle?.remove()
circle = undefined
window.addEventListener('keyup', rectDelKeyPress, {
once: true,
capture: true,
})
window.addEventListener('keyup', rectEscKeyPress, {
once: true,
capture: true,
})

Expand Down Expand Up @@ -345,7 +373,11 @@ export function useDraw(

handles.push(handle)
}

document.addEventListener('dragstart', preventDrag)
}

onChange()
})
rect.on('deselect', (e) => {
if ((e as any).detail?.inst === rect) return
Expand All @@ -359,8 +391,12 @@ export function useDraw(
circle = undefined
document.removeEventListener('dragstart', preventDrag)

window.removeEventListener('keyup', rectDelKeyPress)
window.removeEventListener('keyup', rectEscKeyPress)
window.removeEventListener('keyup', rectDelKeyPress, {
capture: true,
})
window.removeEventListener('keyup', rectEscKeyPress, {
capture: true,
})

onChange()
})
Expand Down Expand Up @@ -534,25 +570,37 @@ export function useDraw(
let handles: Use[] = []
let rootMatrix: DOMMatrix

const polyDelKeyPress = onDelKeyPress.bind(poly.node)
const polyEscKeyPress = onEscKeyPress.bind(poly.node)
function polyDelKeyPress(ev: KeyboardEvent) {
const result = onDelKeyPress.call(poly.node, ev)

if (result) {
window.removeEventListener('keyup', polyDelKeyPress, {
capture: true,
})
}
}
function polyEscKeyPress(ev: KeyboardEvent) {
const result = onEscKeyPress.call(poly.node, ev)

if (result) {
window.removeEventListener('keyup', polyEscKeyPress, {
capture: true,
})
}
}

// Custom events.
poly.on('select', () => {
if (poly.data('selected') === true) return
// Deselect all

svg.each(function (this: Svg) {
this.fire('deselect', { inst: poly })
})
poly.stroke({ color: blue })
poly.data('selected', true)
window.addEventListener('keyup', polyDelKeyPress, {
once: true,
capture: true,
})
window.addEventListener('keyup', polyEscKeyPress, {
once: true,
capture: true,
})

Expand Down Expand Up @@ -683,8 +731,12 @@ export function useDraw(
circles.length = 0
document.removeEventListener('dragstart', preventDrag)

window.removeEventListener('keyup', polyDelKeyPress)
window.removeEventListener('keyup', polyEscKeyPress)
window.removeEventListener('keyup', polyDelKeyPress, {
capture: true,
})
window.removeEventListener('keyup', polyEscKeyPress, {
capture: true,
})

onChange()
})
Expand Down Expand Up @@ -1055,7 +1107,6 @@ export function useDraw(
],
})

newRect?.data('selected', true)
newRect?.fire('select')

onChange()
Expand Down Expand Up @@ -1113,11 +1164,9 @@ export function useDraw(
tmpPoints = [drawPoint(svg, startPosition.x, startPosition.y)]

window.addEventListener('keyup', onAbortPathDrawing, {
once: true,
capture: true,
})
window.addEventListener('keyup', onEnterKeyPress, {
once: true,
capture: true,
})
} else if (startPosition && tmpPoly) {
Expand Down Expand Up @@ -1160,10 +1209,13 @@ export function useDraw(
})),
})

window.removeEventListener('keyup', onAbortPathDrawing)
window.removeEventListener('keyup', onEnterKeyPress)
window.removeEventListener('keyup', onAbortPathDrawing, {
capture: true,
})
window.removeEventListener('keyup', onEnterKeyPress, {
capture: true,
})

poly?.data('selected', true)
poly?.fire('select')

onChange()
Expand Down Expand Up @@ -1336,7 +1388,6 @@ export default function DrawZone({
showMarker,
setForceRedraw,
})
const { clientX, clientY } = useMousePosition()
const [canMarkerBeVisible, setCanMarkerBeVisible] = useState(false)

useEffect(() => {
Expand Down Expand Up @@ -1429,11 +1480,6 @@ export default function DrawZone({
}
}, [svg, elements, forceRedraw])

const width = svgRef.current?.getBoundingClientRect().width
const height = svgRef.current?.getBoundingClientRect().height
const left = clientX - (svgRef.current?.getBoundingClientRect().left || 0)
const top = clientY - (svgRef.current?.getBoundingClientRect().top || 0)

return (
<div
style={{
Expand All @@ -1446,43 +1492,60 @@ export default function DrawZone({
>
<div ref={svgRef}>
{canMarkerBeVisible && showMarker && (
<>
<div
style={{
position: 'absolute',
top: '0',
bottom: '0',
transform: `translate3d(${left}px, 0px, 0px)`,
width: '1px',
background: `url(${src}) ${
left * -1
}px 0% / ${width}px ${height}px, #fff`,
backgroundBlendMode: 'difference',
zIndex: 20,
pointerEvents: 'none',
willChange: 'transform, background',
}}
/>
<div
style={{
position: 'absolute',
transform: `translate3d(0px, ${top}px, 0px)`,
right: '0',
left: '0',
height: '1px',
background: `url(${src}) 0% ${
top * -1
}px / ${width}px ${height}px, #fff`,
backgroundBlendMode: 'difference',
zIndex: 20,
pointerEvents: 'none',
willChange: 'transform, background',
}}
/>
</>
<Marker src={src} svgRef={svgRef} />
)}
{children}
</div>
</div>
)
}

type MarkerProps = {
readonly src: string
readonly svgRef: React.RefObject<HTMLDivElement>
}
function Marker({ src, svgRef }: MarkerProps): JSX.Element {
const { clientX, clientY } = useMousePosition()

const width = svgRef.current?.getBoundingClientRect().width
const height = svgRef.current?.getBoundingClientRect().height
const left = clientX - (svgRef.current?.getBoundingClientRect().left || 0)
const top = clientY - (svgRef.current?.getBoundingClientRect().top || 0)

return (
<>
<div
style={{
position: 'absolute',
top: '0',
bottom: '0',
transform: `translate3d(${left}px, 0px, 0px)`,
width: '1px',
background: `url(${src}) ${
left * -1
}px 0% / ${width}px ${height}px, #fff`,
backgroundBlendMode: 'difference',
zIndex: 20,
pointerEvents: 'none',
willChange: 'transform, background',
}}
/>
<div
style={{
position: 'absolute',
transform: `translate3d(0px, ${top}px, 0px)`,
right: '0',
left: '0',
height: '1px',
background: `url(${src}) 0% ${
top * -1
}px / ${width}px ${height}px, #fff`,
backgroundBlendMode: 'difference',
zIndex: 20,
pointerEvents: 'none',
willChange: 'transform, background',
}}
/>
</>
)
}

0 comments on commit 9da298b

Please sign in to comment.