Skip to content

Commit

Permalink
Fix: bugs that related to old image not removed when choose a new file
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhanziyang
zhanziyang committed Jul 16, 2018
1 parent 195132e commit a768ca0
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 62 deletions.
19 changes: 11 additions & 8 deletions docs/simple-test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ <h1>Vue-Croppa Simple Test</h1>
<input type="checkbox" id="prevent" v-model="preventWhiteSpace"> prevent whitespace</label>
<br>
<button @click="croppa.refresh()">REFRESH</button>
<button @click="croppa.remove()">REMOVE</button>
<button @click="croppa.chooseFile()">CHOOSE</button>
<br>
<button @click="croppa.rotate()">ROTATE</button>
<button @click="croppa.flipX()">FLIP-X</button>
Expand Down Expand Up @@ -141,15 +143,15 @@ <h1>Vue-Croppa Simple Test</h1>
sliderVal: 0,
sliderMin: 0,
sliderMax: 0,
preventWhiteSpace: true,
preventWhiteSpace: false,
noSticker: true,
loading: false,
compressRate: '',
borderRadius: 0,
showPreview: false,
videoEnabled: false,
replaceDrop: false,
autoSizing: true
autoSizing: false
},

mounted: function () {
Expand Down Expand Up @@ -198,7 +200,7 @@ <h1>Vue-Croppa Simple Test</h1>

onDraw: function (ctx) {
if (this.noSticker) return
console.log('drawn')
// console.log('drawn')
ctx.save()
ctx.globalAlpha = 0.5
ctx.drawImage(document.querySelector('.addon'), 100, 100, 400, 400)
Expand All @@ -216,11 +218,12 @@ <h1>Vue-Croppa Simple Test</h1>
},

onInitialLoaded: function () {
console.log('loadedd')
// console.log('loadedd')
// this.applyMetadata.call(this)
},

onNewImageDrawn() {
// console.log('new-image-drawn event')
this.sliderVal = this.croppa.scaleRatio
this.sliderMin = this.croppa.scaleRatio / 2
this.sliderMax = this.croppa.scaleRatio * 2
Expand All @@ -230,11 +233,11 @@ <h1>Vue-Croppa Simple Test</h1>
},

onMove() {
console.log('move', this.croppa.dragging ? 'dragging' : 'not dragging')
console.log('move with', this.croppa.dragging ? ' dragging' : 'out dragging')
},

onZoom() {
console.log('zoom', this.croppa.scrolling ? 'scrolling' : 'not scrolling')
console.log('zoom with', this.croppa.scrolling ? ' scrolling' : 'out scrolling')
if (this.sliderMax && this.croppa.scaleRatio >= this.sliderMax) {
this.croppa.scaleRatio = this.sliderMax
} else if (this.sliderMin && this.croppa.scaleRatio <= this.sliderMin) {
Expand All @@ -250,11 +253,11 @@ <h1>Vue-Croppa Simple Test</h1>
},

onLoadingStart() {
console.log('loading start')
// console.log('loading start')
},

onLoadingEnd() {
console.log('loading end')
// console.log('loading end')
},

promisedBlob() {
Expand Down
58 changes: 32 additions & 26 deletions docs/src/croppa/vue-croppa.js
View file

Large diffs are not rendered by default.

51 changes: 28 additions & 23 deletions src/cropper.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ export default {
this.scaleRatio = val / this.naturalWidth
if (this.hasImage()) {
if (Math.abs(val - oldVal) > (val * (1 / 100000))) {
this.$emit(events.ZOOM_EVENT)
this.emitEvent(events.ZOOM_EVENT)
this._draw()
}
}
Expand All @@ -302,9 +302,9 @@ export default {
loading (val) {
if (this.passive) return
if (val) {
this.$emit(events.LOADING_START)
this.emitEvent(events.LOADING_START_EVENT)
} else {
this.$emit(events.LOADING_END)
this.emitEvent(events.LOADING_END_EVENT)
}
},
autoSizing (val) {
Expand All @@ -318,6 +318,11 @@ export default {
},
methods: {
emitEvent (...args) {
console.log(args[0])
this.$emit(...args);
},
getCanvas () {
return this.canvas
},
Expand All @@ -340,7 +345,7 @@ export default {
this._preventMovingToWhiteSpace()
}
if (this.imgData.startX !== oldX || this.imgData.startY !== oldY) {
this.$emit(events.MOVE_EVENT)
this.emitEvent(events.MOVE_EVENT)
this._draw()
}
},
Expand Down Expand Up @@ -473,6 +478,7 @@ export default {
},
remove () {
if (!this.imageSet) return
this._setPlaceholders()
let hadImage = this.img != null
Expand All @@ -489,15 +495,14 @@ export default {
this.scaleRatio = null
this.userMetadata = null
this.imageSet = false
this.loading = false
this.chosenFile = null
if (this.video) {
this.video.pause()
this.video = null
}
if (hadImage) {
this.$emit(events.IMAGE_REMOVE_EVENT)
this.emitEvent(events.IMAGE_REMOVE_EVENT)
}
},
Expand All @@ -513,7 +518,7 @@ export default {
},
emitNativeEvent (evt) {
this.$emit(evt.type, evt);
this.emitEvent(evt.type, evt);
},
_setContainerSize () {
Expand Down Expand Up @@ -550,7 +555,7 @@ export default {
this.chosenFile = null
this._setInitial()
if (!this.passive) {
this.$emit(events.INIT_EVENT, this)
this.emitEvent(events.INIT_EVENT, this)
}
},
Expand Down Expand Up @@ -651,12 +656,12 @@ export default {
}
this.currentIsInitial = true
if (u.imageLoaded(img)) {
// this.$emit(events.INITIAL_IMAGE_LOADED_EVENT)
// this.emitEvent(events.INITIAL_IMAGE_LOADED_EVENT)
this._onload(img, +img.dataset['exifOrientation'], true)
} else {
this.loading = true
img.onload = () => {
// this.$emit(events.INITIAL_IMAGE_LOADED_EVENT)
// this.emitEvent(events.INITIAL_IMAGE_LOADED_EVENT)
this._onload(img, +img.dataset['exifOrientation'], true)
}
Expand All @@ -667,6 +672,9 @@ export default {
},
_onload (img, orientation = 1, initial) {
if (this.imageSet) {
this.remove()
}
this.originalImage = img
this.img = img
Expand All @@ -677,7 +685,7 @@ export default {
this._setOrientation(orientation)
if (initial) {
this.$emit(events.INITIAL_IMAGE_LOADED_EVENT)
this.emitEvent(events.INITIAL_IMAGE_LOADED_EVENT)
}
},
Expand Down Expand Up @@ -747,16 +755,16 @@ export default {
_onNewFileIn (file) {
this.currentIsInitial = false
this.loading = true
this.$emit(events.FILE_CHOOSE_EVENT, file)
this.emitEvent(events.FILE_CHOOSE_EVENT, file)
this.chosenFile = file;
if (!this._fileSizeIsValid(file)) {
this.loading = false
this.$emit(events.FILE_SIZE_EXCEED_EVENT, file)
this.emitEvent(events.FILE_SIZE_EXCEED_EVENT, file)
return false
}
if (!this._fileTypeIsValid(file)) {
this.loading = false
this.$emit(events.FILE_TYPE_MISMATCH_EVENT, file)
this.emitEvent(events.FILE_TYPE_MISMATCH_EVENT, file)
let type = file.type || file.name.toLowerCase().split('.').pop()
return false
}
Expand Down Expand Up @@ -790,7 +798,7 @@ export default {
fileData = null;
img.onload = () => {
this._onload(img, orientation)
this.$emit(events.NEW_IMAGE)
this.emitEvent(events.NEW_IMAGE_EVENT)
}
}
}
Expand Down Expand Up @@ -1076,8 +1084,8 @@ export default {
this.emitNativeEvent(evt)
if (this.passive) return
if (!this.fileDraggedOver || !u.eventHasFile(evt)) return
if (this.hasImage() && this.replaceDrop) {
this.remove()
if (this.hasImage() && !this.replaceDrop) {
return
}
this.fileDraggedOver = false
Expand Down Expand Up @@ -1196,10 +1204,10 @@ export default {
// this._clip(this._createImageClipPath)
}
this.$emit(events.DRAW, ctx)
this.emitEvent(events.DRAW_EVENT, ctx)
if (!this.imageSet) {
this.imageSet = true
this.$emit(events.NEW_IMAGE_DRAWN)
this.emitEvent(events.NEW_IMAGE_DRAWN_EVENT)
}
this.rotating = false
},
Expand Down Expand Up @@ -1385,10 +1393,7 @@ export default {
@for $i from 2 through $circleCount {
.sk-circle#{$i} .sk-circle-indicator {
animation-delay: - $animationDuration + $animationDuration / $circleCount *
(
$i - 1
);
animation-delay: -$animationDuration + $animationDuration / $circleCount * ($i - 1);
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions src/events.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ export default {
FILE_CHOOSE_EVENT: 'file-choose',
FILE_SIZE_EXCEED_EVENT: 'file-size-exceed',
FILE_TYPE_MISMATCH_EVENT: 'file-type-mismatch',
NEW_IMAGE: 'new-image',
NEW_IMAGE_DRAWN: 'new-image-drawn',
NEW_IMAGE_EVENT: 'new-image',
NEW_IMAGE_DRAWN_EVENT: 'new-image-drawn',
IMAGE_REMOVE_EVENT: 'image-remove',
MOVE_EVENT: 'move',
ZOOM_EVENT: 'zoom',
DRAW: 'draw',
DRAW_EVENT: 'draw',
INITIAL_IMAGE_LOADED_EVENT: 'initial-image-loaded',
LOADING_START: 'loading-start',
LOADING_END: 'loading-end'
LOADING_START_EVENT: 'loading-start',
LOADING_END_EVENT: 'loading-end'
}

0 comments on commit a768ca0

Please sign in to comment.