add photo rotate

src/components/PhotoCropper.vue

@@ -10,17 +10,23 @@
 				ref="cropper"
 			/>
 
-			<n-space vertical justify="space-between">
+			<n-space vertical justify="space-between" class="options_panel">
 				<div>
 					<h2>Preview</h2>
-					<n-image
+					<div class="preview_wrapper">
-						class="preview"
+						<n-image
-						height="200"
+							class="preview"
-						:src="preview_data_url"
+							:src="preview_data_url"
-					/>
+						/>
+					</div>
 				</div>
 
-				<n-checkbox v-model:checked="lock_aspect_ratio">lock aspect ratio to flip chart size?</n-checkbox>
+				<h2 style="margin-top: 3em;">Options</h2>
+
+				rotate by {{ rotate_angle }}°
+				<n-slider v-model:value="rotate_angle" @update:value="update_rotate" :step="1" :min="-180" :max="180" />
+				<n-checkbox :disabled="free_transform" v-model:checked="lock_aspect_ratio">lock aspect ratio to flip chart size</n-checkbox>
+				<n-checkbox v-model:checked="free_transform">free transform handles</n-checkbox>
 			</n-space>
 		</n-space>
   </div>
@@ -45,7 +51,9 @@ export default {
 		return {
 			preview_data_url: null,
 			lock_aspect_ratio: true,
-			bbox: []
+			free_transform: false,
+			bbox: [],
+			rotate_angle: 0,
 		}
 	},
 	computed: {
@@ -83,21 +91,52 @@ export default {
 			this.preview_data_url = canvas.toDataURL()
 			this.bbox = this.coordinates_to_bbox(coordinates)
 		},
+		update_rotate() {
+			this.$refs.cropper.appliedImageTransforms= {
+				rotate: this.rotate_angle,
+				flip: {
+					horizontal: false,
+					vertical: false,
+				},
+			}
+		},
 		getResult() {
-			return JSON.parse(JSON.stringify(this.bbox))
+			return {
+				bbox: JSON.parse(JSON.stringify(this.bbox)),
+				rotate: -this.rotate_angle
+			}
 		}
 	}
 }
 </script>
 
 <style scoped>
+h2 {
+	font-weight: bold;
+	font-size: 1.2em;
+	color: #999;
+}
+
+.options_panel {
+	display: inline;
+	background-color: #f5f5f5;
+	padding: 1.5em;
+	border-radius: 1em;
+}
+
 .cropper {
 	height: 600px;
 	width: 600px;
+	max-width: 80vw;
 	background: #DDD;
 }
 
+.preview_wrapper {
+	width: 20vw;
+	height: 20vw;
+}
+
 .preview {
-	max-width: 300px;
+	object-fit: contain;
 }
 </style>

src/components/PhotoSelectModal.vue

@@ -31,7 +31,7 @@
 								<PhotoItem
 									v-for="photo in photos[group.id]"
 									:key="photo.id"
-									width="100"
+									width="150"
 									:src="photo.cropped_image !== null ? photo.cropped_image : photo.original_image"
 									:can_select="true"
 									:init_selection="is_photo_selected(photo.id)"

src/views/ManagePhotos.vue

@@ -36,13 +36,13 @@
 			:mask-closable="false" 
 		>
 			<n-card
-				style="width: 95vw; height: 90vh;"
+				style="width: 95vw; min-height: 90vh;"
 				title="Adjust Photo Cropping"
 				:bordered="true"
 			>
 
 				<PhotoCropper
-					style="max-width:900px;margin:auto;"
+					style="max-width:75vw;margin:auto;"
 					:src="current_photo_src"
 					ref="cropper"
 				/>
@@ -248,11 +248,14 @@ export default {
 			}
 		},
 		changeCrop() {
-			let bbox = this.$refs.cropper.getResult()
+			let results = this.$refs.cropper.getResult()
+			let bbox = results.bbox
+			let rotate = results.rotate
 			if (bbox && this.current_photo) {
 				this.$store.dispatch('updatePhoto', {
 					id: this.current_photo,
-					bbox_coords: bbox
+					bbox_coords: bbox,
+					rotate: rotate
 				}).then(()=>{
 					setTimeout(()=>{
 						this.$store.dispatch('cropPhoto', {