Pridan fotoeditor

src/components/flights/FlightTrackMap.vue

@@ -17,7 +17,7 @@ const poisWithGPS = computed(() => flight.value.track.map(poi => poi.pointOfInte
 
 const mapMarkers = [flight.value.takeoffAirport].concat(poisWithGPS.value).concat([flight.value.landingAirport]);
 const pointsOfInterests = computed(() => mapMarkers
-  .filter(marker => marker.gpsLatitude && marker.gpsLongiture)
+  .filter(marker => marker.gpsLatitude && marker.gpsLongitude)
   .map(
     marker => ({label: marker.name, position: {lat: marker.gpsLatitude, lng: marker.gpsLongitude}})
   ));

src/components/map/MapWithMarkers.vue

@@ -27,9 +27,6 @@ const props = defineProps({
 })
 
 const track = ref([]);
-const speed = ref([]);
-const elevation = ref([]);
-
 const bounds = computed(() => {
   const photosTransformed = props.photos.map(p => ({position: {lat: p.gpsLatitude, lng: p.gpsLongitude}}));
   const allData = [...props.markers, ...track.value, ...photosTransformed];

src/components/photos/PhotosList.vue

@@ -73,9 +73,9 @@ const openBatchEdit = () => {
   emits('batch-edit', photos);
 }
 
-const batchRotate = (angle) => {
+const batchRotate = (direction) => {
   const photos = selectedPhotos.value;
-  emits("batch-rotate", {photos, angle});
+  emits("batch-rotate", {photos, direction});
 }
 
 const isBatchEditAllowed = computed(() => Object.values(batchEdit.value).filter(v => v).length > 0);
@@ -139,9 +139,9 @@ const batchOptionsProps = computed(() => ({
             <q-icon name="gps_fixed" v-if="photo.gpsLatitude && photo.gpsLongitude"/>
             <q-icon name="gps_off" v-else/>
           </div>
-
-          <q-btn flat icon="edit" color="blue" @click="openEdit(photo)"></q-btn>
-          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)"></q-btn>
+          <q-btn flat icon="edit" color="black" :to="{name: 'photoEditor', params: {id: photo.id}}" />
+          <q-btn flat icon="info" color="blue" @click="openEdit(photo)" />
+          <q-btn flat icon="delete" color="red" @click="confirmPhotoDelete(photo.id)" />
         </q-card-actions>
       </q-card>
     </div>
@@ -151,9 +151,9 @@ const batchOptionsProps = computed(() => ({
     <q-card>
       <q-card-actions>
         <q-checkbox v-model="checkAll" label="Vybrat vše"/>
-        <q-btn v-bind="batchOptionsProps" icon="edit" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
-        <q-btn v-bind="batchOptionsProps" icon="rotate_left" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate(90)"/>
-        <q-btn v-bind="batchOptionsProps" icon="rotate_right" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate(-90)"/>
+        <q-btn v-bind="batchOptionsProps" icon="info" :color="isBatchEditAllowed ? 'primary' : 'grey'" @click="openBatchEdit"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_left" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
+        <q-btn v-bind="batchOptionsProps" icon="rotate_right" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('clockwise')"/>
         <q-btn v-bind="batchOptionsProps" icon="delete" :color="isBatchEditAllowed ? 'red' : 'grey'" @click="confirmBatchPhotoDelete"/>
       </q-card-actions>
     </q-card>

src/composables/objects/flight.js

@@ -3,7 +3,6 @@ import {useFlightsStore} from "stores/Flights";
 import {ref} from "vue";
 import {storeToRefs} from "pinia";
 import {confirmObject} from "src/composables/dialog";
-import {useAppStore} from "stores/App";
 
 export const flightName = (flight) => {
   const date = formatDatetime(flight.takeoffDatetime, FORMAT_DATE);

src/composables/photos/editor/crop.js

@@ -0,0 +1,52 @@
+import {computed, ref, watch} from "vue";
+import {cropper} from "vue-picture-cropper";
+import {roundWithPrecision} from "src/composables/utils";
+import {photoAspectRatio} from "src/composables/photos/editor/photo";
+
+export const cropperImgSizes = computed(() => [cropper.getImageData().width, cropper.getImageData().height]);
+export const croppedArea = ref(null);
+export const selectedAspectRatio = ref(null);
+
+watch(() => selectedAspectRatio.value, (newVal) => {
+    cropper.setAspectRatio(newVal);
+})
+
+export const setCropData = () => {
+    const [w, h] = cropperImgSizes.value;
+
+    const cropData = cropper.getCropBoxData();
+    croppedArea.value = {
+        left: roundWithPrecision(cropData.left / w, 5),
+        top: roundWithPrecision(cropData.top / h, 5),
+        width: roundWithPrecision(cropData.width / w, 5),
+        height: roundWithPrecision(cropData.height / h, 5)
+    };
+}
+
+export const aspectRatioOptions = computed(() =>
+    [
+        {label: '16:9', value: roundWithPrecision(16 / 9, 5)},
+        {label: '4:3', value: roundWithPrecision(4 / 3, 5)},
+        {label: '9:16', value: roundWithPrecision(9 / 16, 5)},
+        {label: '3:4', value: roundWithPrecision(3 / 4, 5)},
+        {label: '1:1', value: 1},
+        {label: 'Volný', value: null},
+        {label: 'Původní', value: roundWithPrecision(photoAspectRatio.value, 5)},
+    ]
+);
+
+export const cropperReady = (e) => {
+    if (croppedArea.value) {
+        const [w, h] = cropperImgSizes.value;
+        selectedAspectRatio.value = roundWithPrecision((croppedArea.value.width * w) / (croppedArea.value.height * h), 5);
+
+        cropper.setCropBoxData({
+            left: croppedArea.value.left * w,
+            top: croppedArea.value.top * h,
+            width: croppedArea.value.width * w,
+            height: croppedArea.value.height * h
+        });
+    } else {
+        selectedAspectRatio.value = roundWithPrecision(photoAspectRatio.value, 5);
+    }
+}

src/composables/photos/editor/photo.js

@@ -0,0 +1,16 @@
+import {computed, ref} from "vue";
+import {usePhotosStore} from "stores/Photo";
+
+export const loading = ref(true);
+export const photo = ref(null);
+export const fetchPhoto = (id) => {
+    loading.value = true;
+    return usePhotosStore().fetchDetail(id)
+        .then(resp => {
+            photo.value = resp;
+            return resp;
+        })
+        .finally(() => loading.value = false);
+};
+
+export const photoAspectRatio = computed(() => photo.value.width / photo.value.height);

src/composables/photos/editor/preview.js

@@ -0,0 +1,18 @@
+import {computed} from "vue";
+import {croppedArea} from "src/composables/photos/editor/crop";
+
+export const getPreviewUrl = (photoId, adjustments) => {
+    const url = new URL(`${process.env.API_URL}/photo/editor-preview/${photoId}`);
+    url.search = new URLSearchParams(adjustments).toString();
+    return url.toString();
+};
+
+export const croppedAreaForPreview = computed(() => {
+    if (!croppedArea.value) return {};
+    return {
+        crop_left: croppedArea.value.left || 0,
+        crop_top: croppedArea.value.top || 0,
+        crop_width: croppedArea.value.width || 1,
+        crop_height: croppedArea.value.height || 1
+    }
+});

src/composables/photos/editor/splitter.js

@@ -0,0 +1,10 @@
+import {computed, ref} from "vue";
+import {photoAspectRatio} from "src/composables/photos/editor/photo";
+
+export const compare = ref(false);
+
+export const splitterWidth = ref(750);  // TODO: doresit onresize a zmenu velikosti
+export const splitter = ref(50);
+export const onResize = (info) => {
+    splitterWidth.value = info.width < 750 ? info.width : 750;
+}

src/composables/utils.js

@@ -0,0 +1,4 @@
+export const roundWithPrecision = (number, precision) => {
+  const factor = Math.pow(10, precision);
+  return Math.round(number * factor) / factor;
+}

src/graphql/fragments/photo.js

@@ -13,6 +13,8 @@ export const FRAGMENT_PHOTO_FULL_INFO = gql`
       id
       name
     }
+    width
+    height
     isFlightCover
     gpsLatitude
     gpsLongitude

src/graphql/mutations/photo.js

@@ -1,5 +1,6 @@
 import gql from "graphql-tag";
 import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
 
 export const UPLOAD_PHOTO = gql`
 mutation uploadPhoto($input: UploadPhotoInput!) {
@@ -21,16 +22,49 @@ mutation editPhoto($id: Int!, $input: EditPhotoInput!) {
   ${FRAGMENT_PHOTO_FULL_INFO}
 `;
 
-export const ROTATE_PHOTO = gql`
-mutation rotatePhoto($id: Int!, $angle: Int!) {
-    rotatePhoto(id: $id, angle: $angle) {
+export const CHANGE_PHOTO_ORIENTATION = gql`
+mutation changeOrientation($id: Int!, $direction: String!) {
+    changeOrientation(id: $id, direction: $direction) {
       ...photoFullInfo
+
+      flight {
+        ...flightListInfo
+      }
     }
   }
 
   ${FRAGMENT_PHOTO_FULL_INFO}
+  ${FRAGMENT_FLIGHT_LIST_INFO}
 `;
 
+export const ADJUST_PHOTO = gql`
+mutation adjustPhoto($id: Int!, $adjustment: AdjustmentInput!) {
+    adjustPhoto(id: $id, adjustment: $adjustment) {
+      ...photoFullInfo
+
+      adjustment {
+        contrast
+        saturation
+        brightness
+        rotate
+        sharpness
+        cropLeft
+        cropTop
+        cropWidth
+        cropHeight
+      }
+
+      flight {
+        ...flightListInfo
+      }
+    }
+  }
+
+  ${FRAGMENT_PHOTO_FULL_INFO}
+  ${FRAGMENT_FLIGHT_LIST_INFO}
+`;
+
+// TODO: ^^ udelat z toho asi jeden fragment a pouzit i v query GET_PHOTO
 
 export const DELETE_PHOTO = gql`
 mutation deletePhoto($id: Int!) {

src/graphql/queries/photo.js

@@ -0,0 +1,30 @@
+import gql from "graphql-tag";
+import {FRAGMENT_PHOTO_FULL_INFO} from "src/graphql/fragments/photo";
+import {FRAGMENT_FLIGHT_LIST_INFO} from "src/graphql/fragments/flight_list";
+
+export const PHOTO_DETAIL = gql`
+query photo($id: Int!) {
+  photo(id: $id) {
+    ...photoFullInfo
+
+    adjustment {
+      contrast
+      saturation
+      brightness
+      rotate
+      sharpness
+      cropLeft
+      cropTop
+      cropWidth
+      cropHeight
+    }
+
+    flight {
+      ...flightListInfo
+    }
+  }
+}
+
+${FRAGMENT_PHOTO_FULL_INFO}
+${FRAGMENT_FLIGHT_LIST_INFO}
+`;

src/pages/profile/flight/EditFlightPage.vue

@@ -101,10 +101,10 @@ const deletePhoto = (id) => {
   });
 }
 
-const rotatePhotos = ({photos, angle}) => {
+const rotatePhotos = ({photos, direction}) => {
   const promises = [];
   for (const photo of photos) {
-    promises.push(usePhotosStore().rotate(photo.id, angle));
+    promises.push(usePhotosStore().changeOrientation(photo.id, direction));
   }
 
   let success = 0;

src/pages/profile/flight/PhotoEditorPage.vue

@@ -0,0 +1,267 @@
+<script setup>
+import {useRoute} from "vue-router";
+import {computed, onMounted, ref, watch} from "vue";
+import {usePhotosStore} from "stores/Photo";
+import {useAppStore} from "stores/App";
+import {flightName} from "src/composables/objects/flight";
+import VuePictureCropper, {cropper} from 'vue-picture-cropper';
+import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
+import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
+import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
+import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
+import {debounce, useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
+
+const $route = useRoute();
+const $q = useQuasar();
+const photoId = parseInt($route.params.id);
+const noCacheTimestamp = ref((new Date()).getTime());
+const editorTab = ref("colors");
+
+// adjustments
+const defaultAdjustments = {
+  saturation: 1,
+  brightness: 1,
+  contrast: 1,
+  sharpness: 1,
+  rotate: 0,
+};
+const adjustment = ref({...defaultAdjustments});
+const croppedAdjusted = ref("");
+const uncroppedAdjusted = ref("");
+const croppedUnadjusted = ref("");
+
+watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
+  croppedAdjusted.value = getPreviewUrl(photoId, {...adjustment.value, ...croppedAreaForPreview.value});
+  uncroppedAdjusted.value = getPreviewUrl(photoId, {...adjustment.value});
+  croppedUnadjusted.value = getPreviewUrl(photoId, {rotate: adjustment.value.rotate, ...croppedAreaForPreview.value});
+}, 100), {deep: true, immediate: true});
+
+watch(() => adjustment.value.rotate, (newVal) => {
+  if (!cropper) return;
+  cropper.rotateTo(newVal);
+});
+
+const savePhotoAdjustment = (photoId) => {
+  const adjustmentInput = {...adjustment.value, crop: croppedArea.value};
+  usePhotosStore().adjust(photoId, adjustmentInput).then((data) => {
+    noCacheTimestamp.value = (new Date()).getTime();
+    photo.value = data;
+
+    $q.notify(successObject("Fotka úspěšně upravena"));
+  });
+};
+
+onMounted(() => {
+  fetchPhoto(photoId).then(() => {
+    const flightNameFormatted = flightName(photo.value.flight);
+
+    if (photo.value.adjustment) {
+      const photoAdjustment = photo.value.adjustment;
+      const src = photoAdjustment || defaultAdjustments;
+      for (const i in defaultAdjustments) {
+        adjustment.value[i] = src[i];
+      }
+
+      if (photoAdjustment) {
+        croppedArea.value = {
+          left: photoAdjustment.cropLeft,
+          top: photoAdjustment.cropTop,
+          width: photoAdjustment.cropWidth,
+          height: photoAdjustment.cropHeight
+        };
+      }
+    }
+    useAppStore().setBreadcrumbs([
+      {to: {name: "myFlights"}, label: "Moje lety"},
+      {to: {name: "flightDetail", params: {id: photo.value.flightId}}, label: flightNameFormatted},
+      {to: {name: "flightEdit", params: {id: photo.value.flightId, step: 'photos'}}, label: "Fotografie"},
+      {label: "Foto editor"}
+    ]);
+  })
+
+  useAppStore().setPageTitle("Foto editor");
+});
+</script>
+
+<template>
+  <q-resize-observer @resize="onResize" :debounce="100"/>
+
+  <template v-if="loading">Nacitani</template>
+
+  <template v-if="!loading">
+    <q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
+      <VuePictureCropper
+          v-if="editorTab === 'rotate_crop'"
+          :img="uncroppedAdjusted"
+          :boxStyle="{
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#f8f8f8',
+            margin: 'auto',
+          }"
+          :options="{
+            viewMode: 1,
+            autoCropArea: 1,
+            dragMode: 'none',
+            zoomable: false,
+            draggable: false,
+          }"
+          @cropend="setCropData"
+          @ready="cropperReady"
+      />
+
+      <div class="overflow-hidden" v-else>
+        <q-img fit="contain" :src="croppedAdjusted" v-show="!compare"/>
+        <q-splitter
+            v-show="compare"
+            v-model="splitter"
+            :limits="[0, 100]"
+            :style="{
+              height: Math.round(splitterWidth / photoAspectRatio) + 'px',
+              width: splitterWidth.value + 'px'
+            }"
+            before-class="overflow-hidden"
+            after-class="overflow-hidden">
+          <template #before>
+            <img
+                :width="splitterWidth"
+                class="absolute-top-left"
+                :src="croppedUnadjusted"
+                alt="before"
+            />
+          </template>
+          <template #after>
+            <img
+                :width="splitterWidth"
+                class="absolute-top-right"
+                :src="croppedAdjusted"
+                alt="after"
+            />
+          </template>
+        </q-splitter>
+
+        <div class="text-right q-pt-md q-pr-md">
+
+          <q-btn flat icon="compare" @click="compare = !compare" :text-color="compare ? 'primary' : 'grey-5'">
+            <q-tooltip>Klikni pro porovnání</q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+
+      <q-card-section>
+        <q-separator/>
+        <q-tabs v-model="editorTab">
+          <q-tab name="colors" icon="palette" label="Barvy"/>
+          <q-tab name="details" icon="deblur" label="Detialy"/>
+          <q-tab name="rotate_crop" icon="crop_rotate" label="Oříznout a otočit"/>
+        </q-tabs>
+        <q-separator/>
+
+        <q-tab-panels v-model="editorTab" animated>
+          <q-tab-panel name="colors">
+            <q-list>
+              <q-item>
+                <q-item-section avatar>
+                  <q-icon name="contrast"/>
+                </q-item-section>
+                <q-item-section>
+                  <q-slider
+                      v-model="adjustment.contrast"
+                      :min="0.5"
+                      :max="1.5"
+                      :step="0.01"
+                      @dblclick="adjustment.contrast=1"
+                      :label="true"
+                  />
+                </q-item-section>
+              </q-item>
+
+              <q-item>
+                <q-item-section avatar>
+                  <q-icon name="brightness_6"/>
+                </q-item-section>
+                <q-item-section>
+                  <q-slider
+                      v-model="adjustment.brightness"
+                      :min="0.5"
+                      :max="1.5"
+                      :step="0.01"
+                      :label="true"
+                      @dblclick="adjustment.brightness = 1"
+                  />
+                </q-item-section>
+              </q-item>
+
+              <q-item>
+                <q-item-section avatar>
+                  <q-icon name="palette"/>
+                </q-item-section>
+                <q-item-section>
+                  <q-slider
+                      v-model="adjustment.saturation"
+                      :min="0"
+                      :max="2"
+                      :step="0.05"
+                      :label="true"
+                      @dblclick="adjustment.saturation = 1"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-tab-panel>
+          <q-tab-panel name="details">
+            <q-list>
+              <q-item>
+                <q-item-section avatar>
+                  <q-icon name="deblur"/>
+                </q-item-section>
+                <q-item-section>
+                  <q-slider
+                      v-model="adjustment.sharpness"
+                      :min="-3"
+                      :max="8"
+                      :step="1"
+                      :label="true"
+                      @dblclick="adjustment.sharpness=1"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-tab-panel>
+          <q-tab-panel name="rotate_crop">
+            <q-btn-toggle
+                no-caps
+                spread
+                v-model="selectedAspectRatio"
+                toggle-color="primary"
+                :options="aspectRatioOptions"
+                class="q-ma-lg"
+            />
+            <q-list>
+              <q-item>
+                <q-item-section avatar>
+                  <q-icon name="flip_camera_android"/>
+                </q-item-section>
+                <q-item-section>
+                  <q-slider
+                      v-model="adjustment.rotate"
+                      :min="-90"
+                      :max="90"
+                      :step="0.1"
+                      :label="true"
+                      @dblclick="adjustment.rotate=0"
+                  />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card-section>
+      <q-card-actions>
+        <q-space/>
+        <q-btn color="primary" icon="save" @click="savePhotoAdjustment(photoId)">Uložit</q-btn>
+      </q-card-actions>
+    </q-card>
+  </template>
+</template>

src/router/routes.js

@@ -50,6 +50,8 @@ const routes = [
       {path: 'letadla/:id', name: "aircraftDetail", component: () => import('pages/profile/aircraft/AircraftDetailPage.vue')},
       {path: 'letadla/:id/edit', name: "aircraftEdit", component: () => import('pages/profile/aircraft/EditAircraftPage.vue')},
 
+      {path: 'foto-editor/:id', name: "photoEditor", component: () => import("pages/profile/flight/PhotoEditorPage.vue")},
+
       {path: 'udalosti', name: "events", component: () => import('pages/profile/event/EventsPage.vue')},
       {path: 'udalosti/novy', name: "addEvent", component: () => import('pages/profile/event/NewEventPage.vue')},
       {path: 'udalosti/:id', name: "eventDetail", component: () => import('pages/profile/event/EventDetailPage.vue')},

src/stores/Photo.js

@@ -1,6 +1,7 @@
 import {defineStore} from "pinia";
 import {apolloWrapper} from "src/graphql/apollo";
-import {DELETE_PHOTO, EDIT_PHOTO, ROTATE_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
+import {ADJUST_PHOTO, CHANGE_PHOTO_ORIENTATION, DELETE_PHOTO, EDIT_PHOTO, UPLOAD_PHOTO} from "src/graphql/mutations/photo";
+import {PHOTO_DETAIL} from "src/graphql/queries/photo";
 
 export const usePhotosStore = defineStore('Photos', {
   state: () => ({
@@ -8,6 +9,11 @@ export const usePhotosStore = defineStore('Photos', {
   }),
 
   actions: {
+    fetchDetail(id) {
+      return apolloWrapper.query(PHOTO_DETAIL, {id}).then(({data}) => {
+        return data.photo;
+      });
+    },
     upload(flightId, formData) {
       if (!flightId) {
         console.error("No flightId specified for photo upload! Aborting");
@@ -35,16 +41,25 @@ export const usePhotosStore = defineStore('Photos', {
         return data.editPhoto;
       }).finally(() => this.isMutationRunning = false);
     },
-    rotate(id, angle) {
+
+    changeOrientation(id, direction) {
       this.isMutationRunning = true;
-      return apolloWrapper.mutate(ROTATE_PHOTO, {id, angle}).then(({data}) => {
-        return data.rotatePhoto;
+      return apolloWrapper.mutate(CHANGE_PHOTO_ORIENTATION, {id, direction}).then(({data}) => {
+        return data.changeOrientation;
+      }).finally(() => this.isMutationRunning = false);
+    },
+
+    adjust(id, adjustment) {
+      this.isMutationRunning = true;
+      return apolloWrapper.mutate(ADJUST_PHOTO, {id, adjustment}).then(({data}) => {
+        return data.adjustPhoto;
       }).finally(() => this.isMutationRunning = false);
     },
     delete(photoId) {
+      this.isMutationRunning = true;
       return apolloWrapper.mutate(DELETE_PHOTO, {id: photoId}).then(({data}) => {
         return data.deletePhoto;
-      });
+      }).finally(() => this.isMutationRunning = false);
     }
   }
 });