Merge pull request #45 from PsycleResearch/fix/add-boundaries-to-coordinates

fix: Add boundaries to coordinates

Author: mbaumanndev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psycle/repsycle",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "Psycle Research front-end toolkit",
   "author": "Psycle Research",
   "keywords": [

src/draw-zone/components.tsx

@@ -32,7 +32,7 @@ import {
     Svg,
     Use,
 } from '@svgdotjs/svg.js'
-import { bgrToHex, uuid4 } from '../helpers'
+import { bgrToHex, clamp, uuid4 } from '../helpers'
 import { isTouchDevice } from '../utils'
 
 import { Interactable } from '@interactjs/types'
@@ -203,8 +203,8 @@ function DrawZoneInner({
             onChange(
                 elements.map((element) => {
                     const points = element.points.map(({ x, y }) => ({
-                        x: Math.round(x),
-                        y: Math.round(y),
+                        x: clamp(Math.round(x), 0, pictureSize.width),
+                        y: clamp(Math.round(y), 0, pictureSize.height),
                     }))
                     const minX = Math.min(...points.map(({ x }) => x))
                     const minY = Math.min(...points.map(({ y }) => y))
@@ -226,7 +226,7 @@ function DrawZoneInner({
                 }),
             )
         },
-        [contentHidden, onChange, shape],
+        [contentHidden, onChange, shape, pictureSize],
     )
 
     return (

src/helpers.ts

@@ -1,4 +1,4 @@
-import { BGR } from "./types"
+import { BGR } from './types'
 
 export function uuid4() {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
@@ -15,6 +15,10 @@ export function hasValue(e: unknown): boolean {
     return e !== undefined && e !== null
 }
 
+export function clamp(num: number, min: number, max: number) {
+    return Math.max(min, Math.min(max, num))
+}
+
 interface TruncateOptions {
     length?: number | null
     ending?: string | null