0
# Component Events
1

2
Event system providing real-time feedback for drag and resize operations, plus lifecycle events for component activation state.
3

4
## Capabilities
5

6
### Lifecycle Events
7

8
Events related to component activation state and user interaction.
9

10
```javascript { .api }
11
/**
12
 * Component lifecycle events
13
 */
14
interface LifecycleEvents {
15
  /** Emitted when component becomes active (gains focus/selection) */
16
  activated(): void;
17
  
18
  /** Emitted when component becomes inactive (loses focus/selection) */
19
  deactivated(): void;
20
  
21
  /** Emitted for v-model support when active state changes */
22
  'update:active'(active: boolean): void;
23
}
24
```
25

26
**Usage Examples:**
27

28
```vue
29
<template>
30
  <vue-draggable-resizable
31
    @activated="onActivated"
32
    @deactivated="onDeactivated"
33
    :prevent-deactivation="preventDeactivate"
34
  >
35
    Click me to activate
36
  </vue-draggable-resizable>
37
</template>
38

39
<script>
40
export default {
41
  data() {
42
    return {
43
      isActive: false,
44
      preventDeactivate: false
45
    };
46
  },
47
  methods: {
48
    onActivated() {
49
      console.log('Component activated');
50
      this.isActive = true;
51
      // Show selection UI, enable keyboard shortcuts, etc.
52
    },
53
    
54
    onDeactivated() {
55
      console.log('Component deactivated');
56
      this.isActive = false;
57
      // Hide selection UI, disable keyboard shortcuts, etc.
58
    }
59
  }
60
}
61
</script>
62
```
63

64
**V-Model Support:**
65

66
```vue
67
<template>
68
  <!-- Two-way binding with active state -->
69
  <vue-draggable-resizable
70
    v-model:active="isElementActive"
71
  >
72
    Element with v-model binding
73
  </vue-draggable-resizable>
74
  
75
  <p>Element is {{ isElementActive ? 'active' : 'inactive' }}</p>
76
</template>
77

78
<script>
79
export default {
80
  data() {
81
    return {
82
      isElementActive: false
83
    };
84
  }
85
}
86
</script>
87
```
88

89
### Drag Events
90

91
Events fired during drag operations providing position feedback.
92

93
```javascript { .api }
94
/**
95
 * Drag operation events with position coordinates
96
 */
97
interface DragEvents {
98
  /** 
99
   * Emitted continuously during drag operation
100
   * @param left - Current X position (left coordinate)
101
   * @param top - Current Y position (top coordinate)
102
   */
103
  dragging(left: number, top: number): void;
104
  
105
  /** 
106
   * Emitted when drag operation completes
107
   * @param left - Final X position (left coordinate)
108
   * @param top - Final Y position (top coordinate)
109
   */
110
  dragStop(left: number, top: number): void;
111
}
112
```
113

114
**Usage Examples:**
115

116
```vue
117
<template>
118
  <vue-draggable-resizable
119
    @dragging="onDragging"
120
    @dragStop="onDragStop"
121
    :x="elementX"
122
    :y="elementY"
123
  >
124
    Drag me around
125
  </vue-draggable-resizable>
126
  
127
  <div>Position: {{ elementX }}, {{ elementY }}</div>
128
</template>
129

130
<script>
131
export default {
132
  data() {
133
    return {
134
      elementX: 100,
135
      elementY: 50,
136
      dragHistory: []
137
    };
138
  },
139
  methods: {
140
    onDragging(left, top) {
141
      // Update position display in real-time
142
      this.elementX = left;
143
      this.elementY = top;
144
      
145
      // Track drag path
146
      this.dragHistory.push({ x: left, y: top, timestamp: Date.now() });
147
      
148
      // Send position updates to server
149
      this.throttledPositionUpdate(left, top);
150
    },
151
    
152
    onDragStop(left, top) {
153
      console.log(`Drag completed at: ${left}, ${top}`);
154
      
155
      // Save final position
156
      this.savePosition(left, top);
157
      
158
      // Clear drag history
159
      this.dragHistory = [];
160
    },
161
    
162
    throttledPositionUpdate: _.throttle(function(x, y) {
163
      // Update server every 100ms during drag
164
      this.$emit('position-changed', { x, y });
165
    }, 100)
166
  }
167
}
168
</script>
169
```
170

171
### Resize Events
172

173
Events fired during resize operations providing size and position feedback.
174

175
```javascript { .api }
176
/**
177
 * Resize operation events with dimension and position data
178
 */
179
interface ResizeEvents {
180
  /** 
181
   * Emitted continuously during resize operation
182
   * @param left - Current X position (left coordinate)
183
   * @param top - Current Y position (top coordinate)
184
   * @param width - Current width
185
   * @param height - Current height
186
   */
187
  resizing(left: number, top: number, width: number, height: number): void;
188
  
189
  /** 
190
   * Emitted when resize operation completes
191
   * @param left - Final X position (left coordinate)
192
   * @param top - Final Y position (top coordinate)
193
   * @param width - Final width
194
   * @param height - Final height
195
   */
196
  resizeStop(left: number, top: number, width: number, height: number): void;
197
}
198
```
199

200
**Usage Examples:**
201

202
```vue
203
<template>
204
  <vue-draggable-resizable
205
    @resizing="onResizing"
206
    @resizeStop="onResizeStop"
207
    :w="elementWidth"
208
    :h="elementHeight"
209
  >
210
    <div>Size: {{ elementWidth }}x{{ elementHeight }}</div>
211
  </vue-draggable-resizable>
212
</template>
213

214
<script>
215
export default {
216
  data() {
217
    return {
218
      elementWidth: 200,
219
      elementHeight: 150,
220
      minArea: 5000,
221
      maxArea: 50000
222
    };
223
  },
224
  methods: {
225
    onResizing(left, top, width, height) {
226
      // Update size display in real-time
227
      this.elementWidth = width;
228
      this.elementHeight = height;
229
      
230
      // Validate size constraints
231
      const area = width * height;
232
      if (area < this.minArea) {
233
        console.warn('Element too small!');
234
      } else if (area > this.maxArea) {
235
        console.warn('Element too large!');
236
      }
237
      
238
      // Update layout of other elements
239
      this.updateLayout({ left, top, width, height });
240
    },
241
    
242
    onResizeStop(left, top, width, height) {
243
      console.log(`Resize completed: ${width}x${height} at ${left},${top}`);
244
      
245
      // Save dimensions
246
      this.saveDimensions(width, height);
247
      
248
      // Trigger layout recalculation
249
      this.$nextTick(() => {
250
        this.recalculateLayout();
251
      });
252
    },
253
    
254
    updateLayout(bounds) {
255
      // Update other components based on new size
256
      this.$emit('element-resized', bounds);
257
    }
258
  }
259
}
260
</script>
261
```
262

263
### Event Usage Patterns
264

265
Common patterns for handling component events effectively.
266

267
```javascript { .api }
268
/**
269
 * Common event handling patterns and utilities
270
 */
271
interface EventPatterns {
272
  /** Debounced event handler to reduce update frequency */
273
  debouncedHandler: (delay: number, callback: Function) => Function;
274
  
275
  /** Event handler with validation and constraints */
276
  constrainedHandler: (validator: Function, callback: Function) => Function;
277
  
278
  /** Event handler with state synchronization */
279
  syncedHandler: (stateProperty: string, callback: Function) => Function;
280
}
281
```
282

283
**Usage Examples:**
284

285
```vue
286
<template>
287
  <vue-draggable-resizable
288
    @dragging="debouncedDragHandler"
289
    @resizing="constrainedResizeHandler"
290
    @activated="syncActivationState"
291
  >
292
    Advanced event handling
293
  </vue-draggable-resizable>
294
</template>
295

296
<script>
297
import { debounce } from 'lodash';
298

299
export default {
300
  data() {
301
    return {
302
      position: { x: 0, y: 0 },
303
      size: { width: 200, height: 150 },
304
      isActive: false
305
    };
306
  },
307
  
308
  methods: {
309
    // Debounced drag handler to reduce server calls
310
    debouncedDragHandler: debounce(function(left, top) {
311
      this.position = { x: left, y: top };
312
      this.saveToServer();
313
    }, 300),
314
    
315
    constrainedResizeHandler(left, top, width, height) {
316
      // Apply business logic constraints
317
      const aspectRatio = this.originalWidth / this.originalHeight;
318
      const constrainedHeight = width / aspectRatio;
319
      
320
      if (Math.abs(height - constrainedHeight) > 10) {
321
        // Emit correction event if aspect ratio is wrong
322
        this.$emit('aspect-ratio-corrected', {
323
          original: { width, height },
324
          corrected: { width, height: constrainedHeight }
325
        });
326
      }
327
      
328
      this.size = { width, height };
329
    },
330
    
331
    syncActivationState() {
332
      this.isActive = true;
333
      // Sync with global state management
334
      this.$store.commit('setActiveElement', this.$el);
335
    }
336
  }
337
}
338
</script>
339
```