debug rotate (c1de50a7) · Commits · certic / Vue Jama

src/components/editors/ImageResourceEditor.vue

+73 −29

Original line number	Diff line number	Diff line
		<template>
		<v-card class="jama-image-editor ma-0 pa-0 flex justify-center">
		<v-card-actions class="flex justify-center pa-0 pt-2">
		<v-card-actions class="flex justify-center pa-0 pt-2 actions">
		<template v-if="!preview">
		<v-btn
		:disabled="loading"
		@@ -39,7 +39,7 @@
		</template>
		</v-card-actions>
		<v-card-text
		v-if="imageDimensions && maxWidth"
		v-if="rotatedImageDimensions && maxWidth"
		class="text-center ma-0 pa-0 d-flex justify-center"
		@mousemove="mouseMove($event)"
		@mouseup="dragEnd($event)"
		@@ -269,7 +269,7 @@ const DRAG_SE = 'SE';
		const DRAG_SW = 'SW';
		const DRAG_NE = 'NE';
		const DRAG_NW = 'NW';
		const DEFAULT_CROP = 10;
		const DEFAULT_CROP = 0;


		export default {
		@@ -285,16 +285,17 @@ export default {

		data() {
		return {
		maxHeight: null,
		maxWidth: null,
		maxHeight: 800,
		maxWidth: 800,
		imageDimensions: null,
		cropTop: DEFAULT_CROP,
		cropRight: DEFAULT_CROP,
		cropBottom: DEFAULT_CROP,
		cropLeft: DEFAULT_CROP,
		rotation: 0,
		margin: 100,
		margin: 5,
		renderedImageDimensions: null,
		rotatedImageDimensions: null,
		dragPos: {},
		dragDirections: {
		north: DRAG_N,
		@@ -319,9 +320,16 @@ export default {
		computed: {
		scale() {
		const wRatio = this.maxWidth / this.imageDimensions.width;
		const hRatio = this.maxHeight / this.imageDimensions.height
		const hRatio = this.maxHeight / this.imageDimensions.height;
		return Math.min(wRatio, hRatio, 1)
		},

		rotationScale() {
		const wRatio = this.maxWidth / this.rotatedImageDimensions.width;
		const hRatio = this.maxHeight / this.rotatedImageDimensions.height;
		return Math.min(wRatio, hRatio, 1)
		},

		endPoint() {
		return this.$jamaClient.endPoint.replace('rpc/', 'resources/thumb/')
		},
		@@ -333,19 +341,16 @@ export default {
		return this.endPoint + this.resource.hash + '/rotate/' + this.normalizedRotation + '/scale/' + this.scale + '/crop/0,0,0,0'
		},

		imgWidth() {
		return Math.ceil(this.imageDimensions.width * this.scale)
		},
		imgHeight() {
		return Math.ceil(this.imageDimensions.height * this.scale)
		},

		getImageCSS() {

		return 'width:' + this.renderedImageDimensions.width + 'px;'
		+ 'height:' + this.renderedImageDimensions.height + 'px;'
		let w = this.rotatedImageDimensions.width * this.rotationScale;
		let h = this.rotatedImageDimensions.height * this.rotationScale;

		return 'width:' + w + 'px;'
		+ 'height:' + h + 'px;'
		+ 'background-image:url("' + this.scaledAndRotatedImageUrl + '");'
		+ 'background-size: ' + this.renderedImageDimensions.width + 'px ' + this.renderedImageDimensions.height + 'px;'
		+ 'background-size:' + w + 'px ' + h + 'px;'
		+ 'margin:' + this.margin + 'px!important';
		},

		@@ -358,12 +363,12 @@ export default {

		cropWidth() {
		let c = Number(this.cropLeft) + Number(this.cropRight);
		return this.renderedImageDimensions.width - (c * this.scale)
		return this.maxWidth - (c * this.scale)
		},

		cropHeight() {
		let c = Number(this.cropTop) + Number(this.cropBottom);
		return this.renderedImageDimensions.height - (c * this.scale)
		return (this.rotatedImageDimensions.height * this.maxHeight / this.rotatedImageDimensions.width) - (c * this.scale)
		},

		getCropBoxCSS() {
		@@ -397,9 +402,10 @@ export default {
		this.resetZoom();
		this.fetchImage();
		},
		// rotation() {
		// this.updateRenderedDimensions()
		// }
		rotation() {

		this.updateRotatedImageDimension();
		}
		},

		mounted() {
		@@ -412,15 +418,47 @@ export default {

		methods: {

		updateRotatedImageDimension() {

		let r = Math.abs(this.rotation);

		if (r >= 180)
		r = this.rotation - 180;
		if (r > 90) {
		r = 90 - r % 90;
		}

		let radianRotation = r * Math.PI / 180;

		let w = 0;
		let h = 0;
		if(r === 90){
		w = this.imageDimensions.height;
		h = this.imageDimensions.width;
		}
		else {
		w = (this.imageDimensions.width * Math.cos(radianRotation)) + (this.imageDimensions.height * Math.sin(radianRotation))
		h = (this.imageDimensions.width * Math.sin(radianRotation)) + (this.imageDimensions.height * Math.cos(radianRotation))
		}

		if (r <= 90) {
		this.rotatedImageDimensions = {
		width: w,
		height: h
		}
		} else {
		this.rotatedImageDimensions = {
		width: h,
		height: w
		}
		}
		},

		fetchImage() {
		this.loading = false;
		fetch(this.resource.urls.iiif).then((r) => r.json().then((json) => {
		this.imageDimensions = {width: json.width, height: json.height};
		if (!this.maxWidth) {//get div dimensions only once
		this.maxWidth = document.querySelector('.jama-image-editor').clientWidth - 2 * this.margin;
		this.maxHeight = document.querySelector('.jama-image-editor').clientHeight - 2 * this.margin;
		}
		this.renderedImageDimensions = {width: this.imgWidth, height: this.imgHeight};
		this.updateRotatedImageDimension();
		})).catch((error) => {
		this.$jamaAlert(error);
		this.loading = false;
		@@ -629,9 +667,9 @@ export default {
		<style lang="scss" scoped>

		.jama-image-editor {
		max-width: 100%;
		max-height: 100vh;
		overflow-x: hidden;
		//max-width: 800px !important;
		//max-height: 800px !important;
		//overflow-x: hidden;
		}

		#form {
		@@ -644,8 +682,14 @@ export default {
		background-color: white;
		}

		.actions {
		z-index: 500;
		}

		#img-viewer {
		position: relative;
		//max-width: 800px;
		//max-height: 800px;
		}

		input[type=color] {