poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Uprava editoru

Browse Source
This commit is contained in:
Michal Kváček
2023-10-31 17:29:51 +01:00
parent 1ed35552d5
commit 3e7ee9e686
7 changed files with 141 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/photos/PhotoCarousel.vue
-80
View File
@@ -1,80 +0,0 @@
<script setup>
import PhotoDetail from "components/photos/PhotoDetail.vue";
import {onMounted, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
const props = defineProps({
photos: {
type: Array,
required: true
},
coverPhotoUrl: {
type: String,
required: false
},
carouselTitle: {
type: String,
required: false
},
defaultTitle: {
type: String,
required: false
}
})
const $route = useRoute();
const photoId = parseInt($route.query.photo);
const displayedPhoto = ref(null);
const emits = defineEmits(["open-detail"]);
watch(() => props.photos, (newVal) => {
if (newVal.length === 0) return;
displayedPhoto.value = props.coverPhotoUrl || newVal[0].url;
}, {immediate: true});
const openDetail = ({photo, idx, allPhotos}) => {
emits("open-detail", {photo, idx, allPhotos});
}
onMounted(() => {
const idx = props.photos.findIndex(p => p.id === photoId);
if (idx >= 0) {
const photo = props.photos[idx];
openDetail({photo, allPhotos: props.photos, idx});
}
});
</script>
<template>
<q-carousel
v-if="photos.length > 0"
animated
v-model="displayedPhoto"
arrows
swipeable
height="auto"
infinite
v-bind="$attrs"
>
<q-carousel-slide style="padding: 0" v-for="(photo, idx) in photos" :key="photo.url" :name="photo.url">
<q-img :src="photo.url">
<span class="absolute-top text-right">
<q-btn
round
icon="zoom_in"
class="bg-blue-grey-9 text-white q-ma-md all-pointer-events"
@click="openDetail({photo, idx, allPhotos: photos})" />
</span>
<div class="absolute-bottom custom-caption">
<div class="text-h5" v-if="carouselTitle"> {{ carouselTitle }} </div>
<div class="text-subtitle1" v-if="photos.length > 0">
<q-btn rounded @click.prevent="openDetail({photo: photos[0], idx: 0, allPhotos: photos})">{{photos.length}} fotografií</q-btn>
</div>
</div>
</q-img>
</q-carousel-slide>
</q-carousel>
</template>
src/components/photos/PhotoDetail.vue
-261
View File
@@ -1,261 +0,0 @@
<script setup>
import EmbeddedMap from "components/map/EmbeddedMap.vue";
import {computed, ref, watch} from "vue";
import {formatDatetime} from "src/composables/datetimeUtils";
import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css'
import {useQuasar} from "quasar";
import {useRouter} from "vue-router";
const props = defineProps({
photos: {
type: Array,
required: false,
default: () => []
},
openedIndex: {
type: Number,
required: false,
},
modelValue: {
type: Boolean,
required: false,
default: false
},
defaultTitle: {
type: String,
required: false
}
});
const $q = useQuasar();
const $router = useRouter();
const imageFullscreen = ref(false);
const isMaximized = computed(() => $q.screen.width <= $q.screen.sizes.sm);
const displayedPhotoIndex = ref(null);
watch(() => props.openedIndex, (newVal) => {
displayedPhotoIndex.value = newVal;
}, {immediate: true});
const photo = computed(() => props.photos[displayedPhotoIndex.value]);
const emit = defineEmits(["update:modelValue"])
const isDetailOpened = computed({
get() {
return props.modelValue;
},
set(newVal) {
emit("update:modelValue", newVal);
}
});
const nextPhoto = () => {
if (imageFullscreen.value) return;
if (displayedPhotoIndex.value < props.photos.length - 1) {
displayedPhotoIndex.value++;
scrollToPhoto();
}
}
const prevPhoto = () => {
if (imageFullscreen.value) return;
if (displayedPhotoIndex.value > 0) {
displayedPhotoIndex.value--;
scrollToPhoto();
}
}
const openDetail = (idx) => {
displayedPhotoIndex.value = idx;
scrollToPhoto();
};
watch(() => displayedPhotoIndex.value, (newVal) => {
const photo = props.photos[newVal];
$router.replace({query: {photo: photo.id}});
}, {immediate: true});
const removePhotoFromQueries = () => {
$router.replace({query: {photo: undefined}});
}
const showExtra = ref(false);
const scrollArea = ref(null);
const infoWrapper = ref(null);
const scrollToPhoto = () => {
scrollArea.value.setScrollPosition('vertical', 0, 500);
}
const showExtraInfo = () => {
if (showExtra.value) {
showExtra.value = false;
scrollToPhoto();
} else {
showExtra.value = true;
const scrollAreaHeight = infoWrapper.value.offsetTop;
scrollArea.value.setScrollPosition('vertical', scrollAreaHeight, 500);
}
}
</script>
<template>
<q-dialog
v-model="isDetailOpened"
full-width
:maximized="isMaximized"
no-route-dismiss
@hide="removePhotoFromQueries"
>
<q-card>
<q-scroll-area ref="scrollArea" style="height: 95vh">
<q-card-section class="bg-black text-white" v-if="isMaximized">
<div class="row">
<div class="col">
<strong>{{ photo.name || defaultTitle }}</strong>
</div>
<div class="col-1 text-right">
<q-btn round text-color="white" size="sm" icon="close" @click="isDetailOpened = false"/>
</div>
</div>
</q-card-section>
<div class="fixed-top-right q-mt-md q-mr-md z-max" v-else>
<q-btn round size="sm" icon="close" @click="isDetailOpened = false"/>
</div>
<q-card-section :class="{'q-pa-none': isMaximized}">
<div :class="{'relative-position': true, 'image-full-height': imageFullscreen}">
<div
class="text-center"
v-touch-swipe.mouse.right="prevPhoto"
v-touch-swipe.mouse.left="nextPhoto"
@keyup.left="prevPhoto"
@keyup.right="nextPhoto">
<inner-image-zoom
:move-type="isMaximized ? 'drag' : 'pan'"
:zoomScale="0.75"
:hide-hint="true"
:after-zoom-in="() => imageFullscreen = true"
:after-zoom-out="() => imageFullscreen = false"
:src="photo.url"
/>
</div>
<template v-if="!imageFullscreen">
<q-btn
class="absolute all-pointer-events"
round
flat
icon="info"
:text-color="showExtra ? 'primary' : 'white'"
style="background: rgba(0, 0, 0, 0.25); bottom: 16px; left: 8px"
@click="showExtraInfo"
/>
<q-btn
class="absolute all-pointer-events"
style="background: rgba(0, 0, 0, 0.25); top: 50%; left: 8px;"
@click="prevPhoto"
v-if="displayedPhotoIndex > 0 && !isMaximized"
icon="chevron_left"
text-color="white"
flat
rounded
/>
<q-btn
class="absolute all-pointer-events"
style="background: rgba(0, 0, 0, 0.25); top: 50%; right: 8px;"
@click="nextPhoto"
v-if="displayedPhotoIndex < photos.length - 1 && !isMaximized"
icon-right="chevron_right"
text-color="white"
flat
rounded
/>
</template>
</div>
<div class="row" v-show="!imageFullscreen">
<div class="col-3 col-md-1 q-pa-sm" v-for="(thumb, idx) in photos" :key="thumb.thumbnailUrl">
<q-img
:src="thumb.thumbnailUrl"
@click="openDetail(idx)"
:class='{"shadow-5": true, "active-thumbnail": idx === displayedPhotoIndex}'
/>
</div>
</div>
<div class="row" ref="infoWrapper">
<div class="col-12 q-my-md" v-if="showExtra">
<EmbeddedMap
v-if="photo.gpsLatitude && photo.gpsLongitude"
class="q-mx-sm"
:gps-latitude="photo.gpsLatitude"
:gps-longitude="photo.gpsLongitude"
/>
<strong v-if="photo.name !== '' && !isMaximized">{{ photo.name }}</strong>
<p v-if="photo.description !== ''">{{ photo.description }}</p>
<q-list dense>
<q-item v-if="photo.pointOfInterest">
<q-item-section avatar>
<q-avatar icon="marker"></q-avatar>
</q-item-section>
<q-item-section>
{{ photo.pointOfInterest.name }}
</q-item-section>
</q-item>
<q-item v-if="photo.exposedAt">
<q-item-section avatar>
<q-avatar icon="photo_camera"></q-avatar>
</q-item-section>
<q-item-section>
{{ formatDatetime(photo.exposedAt) }}
</q-item-section>
</q-item>
<q-item v-if="photo.gpsAltitude">
<q-item-section avatar>
<q-avatar icon="height"/>
</q-item-section>
<q-item-section>
Nadmořská výška: {{ photo.gpsAltitude }} m
<br>
<template v-if="photo.terrainElevation">
Výška terénu: {{ photo.terrainElevation }} m
<br>
Výška nad zemí: {{ photo.gpsAltitude - photo.terrainElevation }} m
</template>
</q-item-section>
</q-item>
</q-list>
</div>
</div>
</q-card-section>
</q-scroll-area>
</q-card>
</q-dialog>
</template>
<style>
.active-thumbnail {
outline: solid 2px
}
.iiz {
width: 100%;
}
.image-full-height .iiz {
height: calc(95vh - 65px) !important;
}
.iiz__img {
max-height: 90vh !important;
margin: 0 auto;
}
.iiz__img--hidden {
height: 100vh;
}
</style>
src/components/photos/PhotosEditorList.vue
+3 -3
View File
@@ -111,7 +111,7 @@ const batchOptionsProps = computed(() => ({
</script>
<template>
<div class="row q-mb-lg">
<div class="row" style="margin-bottom: 150px">
<div class="col-6 col-sm-4 col-md-4 col-lg-3" v-for="(photo, idx) in photos" :key="photo.id">
<q-card :class='{"q-ma-sm": true, "shadow-1": !batchEdit[photo.id], "shadow-10": batchEdit[photo.id]}'>
<q-img :src="photo.thumbnailUrl" @click="handleImageClick(photo, idx)" style="cursor: pointer">
@@ -143,8 +143,8 @@ const batchOptionsProps = computed(() => ({
<q-card-actions>
<q-checkbox v-model="checkAll" label="Vybrat vše"/>
<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="rotate_90_degrees_ccw" :color="isBatchEditAllowed ? 'secondary' : 'grey'" @click="batchRotate('counterClockwise')"/>
<q-btn v-bind="batchOptionsProps" icon="rotate_90_degrees_cw" :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/photos/editor/crop.js
+34 -31
View File
@@ -8,45 +8,48 @@ export const croppedArea = ref(null);
export const selectedAspectRatio = ref(null);
watch(() => selectedAspectRatio.value, (newVal) => {
cropper.setAspectRatio(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 setCropData = () => {
const [w, h] = cropperImgSizes.value;
console.log("crop end");
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)},
]
[
{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);
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);
}
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/photo.js
-12
View File
@@ -1,12 +0,0 @@
import {ref} from "vue";
import {flight} from "src/composables/objects/flight";
export const openPhotoDetail = ref(false);
export const photoData = ref(null);
export const openDetail = ({photo, idx, allPhotos}) => {
openPhotoDetail.value = true;
photoData.value = {photo, idx, allPhotos};
}
export const openPhotoFromList = ({photo, idx}) => {
openDetail({photo, idx, allPhotos: flight.value.photos});
}
src/pages/profile/flight/FlightDetailPage.vue
-5
View File
@@ -69,11 +69,6 @@ const copyLinkToClipboard = () => {
<FlightDetailSkeleton v-if="loading || !flight"/>
<q-card class="flight-detail-card" v-else>
<!-- <PhotoCarousel-->
<!-- :cover-photo-url="flight.coverPhoto?.url"-->
<!-- :carousel-title="flightName(flight)"-->
<!-- :photos="flight.photos"-->
<!-- />-->
<q-img :src="flight.coverPhoto.url" v-if="flight.coverPhoto">
<div class="absolute-bottom custom-caption">
<div class="text-h5"> {{ flightName(flight) }} </div>
src/pages/profile/flight/PhotoEditorPage.vue
+104 -74
View File
@@ -1,6 +1,6 @@
<script setup>
import {useRoute} from "vue-router";
import {computed, onMounted, ref, watch} from "vue";
import {onMounted, ref, watch} from "vue";
import {usePhotosStore} from "stores/Photo";
import {useAppStore} from "stores/App";
import {flightName} from "src/composables/objects/flight";
@@ -9,14 +9,14 @@ import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/edito
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 {debounce, throttle, 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");
const editorTab = ref("rotate");
// adjustments
const defaultAdjustments = {
@@ -28,19 +28,16 @@ const defaultAdjustments = {
};
const adjustment = ref({...defaultAdjustments});
const croppedAdjusted = ref("");
const croppedAdjustedUnrotated = ref("");
const uncroppedAdjusted = ref("");
const croppedUnadjusted = ref("");
watch(() => [adjustment.value, croppedAreaForPreview.value], debounce(() => {
croppedAdjusted.value = getPreviewUrl(photoId, {...adjustment.value, ...croppedAreaForPreview.value});
croppedAdjustedUnrotated.value = getPreviewUrl(photoId, {...adjustment.value, rotate: 0, ...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);
});
}, 200), {deep: true, immediate: true});
const savePhotoAdjustment = (photoId) => {
const adjustmentInput = {...adjustment.value, crop: croppedArea.value};
@@ -64,6 +61,7 @@ onMounted(() => {
}
if (photoAdjustment) {
rotate.value = photoAdjustment.rotate;
croppedArea.value = {
left: photoAdjustment.cropLeft,
top: photoAdjustment.cropTop,
@@ -92,51 +90,57 @@ onMounted(() => {
<template v-if="!loading">
<q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
<VuePictureCropper
v-if="editorTab === 'rotate_crop'"
:img="uncroppedAdjusted"
:boxStyle="{
v-if="editorTab === '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"
:options="{
viewMode: 1,
autoCropArea: 1,
dragMode: 'none',
zoomable: false,
draggable: false,
rotatable: false,
}"
@cropend="setCropData"
@ready="cropperReady"
/>
<div class="overflow-hidden relative-position" v-else-if="editorTab === 'rotate'">
<div class="rotate-overlay"></div>
<q-img :src="croppedAdjustedUnrotated" fit="contain" :style="`transform: rotate(${adjustment.rotate}deg)`"/>
</div>
<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="{
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">
before-class="overflow-hidden"
after-class="overflow-hidden">
<template #before>
<img
:width="splitterWidth"
class="absolute-top-left"
:src="croppedUnadjusted"
alt="before"
:width="splitterWidth"
class="absolute-top-left"
:src="croppedUnadjusted"
alt="before"
/>
</template>
<template #after>
<img
:width="splitterWidth"
class="absolute-top-right"
:src="croppedAdjusted"
alt="after"
:width="splitterWidth"
class="absolute-top-right"
:src="croppedAdjusted"
alt="after"
/>
</template>
</q-splitter>
@@ -154,7 +158,8 @@ onMounted(() => {
<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-tab name="rotate" icon="rotate" label="Otočit"/>
<q-tab name="crop" icon="crop" label="Oříznout"/>
</q-tabs>
<q-separator/>
@@ -167,12 +172,13 @@ onMounted(() => {
</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"
v-model="adjustment.contrast"
:min="0.5"
:max="1.5"
:step="0.01"
label-always
@dblclick="adjustment.contrast=1"
:label="true"
/>
</q-item-section>
</q-item>
@@ -183,12 +189,13 @@ onMounted(() => {
</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"
v-model="adjustment.brightness"
:min="0.5"
:max="1.5"
:step="0.01"
:label="true"
label-always
@dblclick="adjustment.brightness = 1"
/>
</q-item-section>
</q-item>
@@ -199,12 +206,13 @@ onMounted(() => {
</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"
v-model="adjustment.saturation"
:min="0"
:max="2"
:step="0.05"
:label="true"
label-always
@dblclick="adjustment.saturation = 1"
/>
</q-item-section>
</q-item>
@@ -218,44 +226,52 @@ onMounted(() => {
</q-item-section>
<q-item-section>
<q-slider
v-model="adjustment.sharpness"
:min="-3"
:max="8"
:step="1"
:label="true"
@dblclick="adjustment.sharpness=1"
v-model="adjustment.sharpness"
:min="-3"
:max="8"
:step="1"
:label="true"
label-always
snap
@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-tab-panel name="rotate">
<q-list>
<q-item>
<q-item-section avatar>
<q-icon name="flip_camera_android"/>
<q-btn round flat icon="rotate_left" @click="adjustment.rotate -= 0.1"/>
</q-item-section>
<q-item-section>
<q-slider
<q-slider
v-model="adjustment.rotate"
:min="-90"
:max="90"
:min="-45"
:max="45"
:step="0.1"
:label="true"
label-always
@dblclick="adjustment.rotate=0"
/>
/>
</q-item-section>
<q-item-section avatar>
<q-btn round flat icon="rotate_right" @click="adjustment.rotate += 0.1"/>
</q-item-section>
</q-item>
</q-list>
</q-tab-panel>
<q-tab-panel name="crop">
<q-btn-toggle
no-caps
spread
v-model="selectedAspectRatio"
toggle-color="primary"
:options="aspectRatioOptions"
class="q-ma-lg"
/>
</q-tab-panel>
</q-tab-panels>
</q-card-section>
<q-card-actions>
@@ -265,3 +281,17 @@ onMounted(() => {
</q-card>
</template>
</template>
<style>
.rotate-overlay {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
z-index: 888;
background-size: 60px 60px;
background-image: linear-gradient(to right, rgba(61, 4, 4, 0.5) 1px, transparent 1px),
linear-gradient(to bottom, rgba(61, 4, 4, 0.5) 1px, transparent 1px);
}
</style>