radames commited on
Commit
21b9697
1 Parent(s): f7cc2fd

constrain mask

Browse files
Files changed (1) hide show
  1. frontend/src/lib/PaintFrame.svelte +9 -5
frontend/src/lib/PaintFrame.svelte CHANGED
@@ -1,6 +1,6 @@
1
  <script lang="ts">
2
  import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
3
- import { FRAME_SIZE } from '$lib/constants';
4
 
5
  import { drag } from 'd3-drag';
6
  import { select } from 'd3-selection';
@@ -116,21 +116,25 @@
116
  }
117
  return selection.on('pointermove', handlePointerMove).on('pointerleave', handlePointerLeave);
118
  }
 
 
 
 
119
  function maskingHandler() {
120
  let lastx: number;
121
  let lasty: number;
122
  function dragstarted(event: Event) {
123
  if (isLoading) return;
124
- const x = event.x / transform.k;
125
- const y = event.y / transform.k;
126
  lastx = x;
127
  lasty = y;
128
  }
129
 
130
  function dragged(event: Event) {
131
  if (isLoading) return;
132
- const x = event.x / transform.k;
133
- const y = event.y / transform.k;
134
  drawLine({ x, y, lastx, lasty });
135
  lastx = x;
136
  lasty = y;
 
1
  <script lang="ts">
2
  import LoadingIcon from '$lib/Icons/LoadingIcon.svelte';
3
+ import { FRAME_SIZE, GRID_SIZE } from '$lib/constants';
4
 
5
  import { drag } from 'd3-drag';
6
  import { select } from 'd3-selection';
 
116
  }
117
  return selection.on('pointermove', handlePointerMove).on('pointerleave', handlePointerLeave);
118
  }
119
+ function constraintCursor(pos: number) {
120
+ const x = Math.min(Math.max(pos, GRID_SIZE), FRAME_SIZE - GRID_SIZE);
121
+ return x;
122
+ }
123
  function maskingHandler() {
124
  let lastx: number;
125
  let lasty: number;
126
  function dragstarted(event: Event) {
127
  if (isLoading) return;
128
+ const x = constraintCursor(event.x / transform.k);
129
+ const y = constraintCursor(event.y / transform.k);
130
  lastx = x;
131
  lasty = y;
132
  }
133
 
134
  function dragged(event: Event) {
135
  if (isLoading) return;
136
+ const x = constraintCursor(event.x / transform.k);
137
+ const y = constraintCursor(event.y / transform.k);
138
  drawLine({ x, y, lastx, lasty });
139
  lastx = x;
140
  lasty = y;