Fix previews in image edit dialogs not updating

master
JannisX11 2022-08-07 13:56:43 +02:00
parent fbb9ec232a
commit 773efda5f9
2 changed files with 31 additions and 7 deletions

View File

@ -350,7 +350,7 @@
}
.dialog_sidebar .dialog_sidebar_actions li i {
margin-top: 1px;
margin-right: 4px;
margin-right: 8px;
margin-left: -28px;
flex-shrink: 0;
pointer-events: none;
@ -1393,7 +1393,7 @@
max-height: 30px;
overflow: hidden;
}
div.texture_adjust_previews img {
div.texture_adjust_previews img, div.texture_adjust_previews canvas {
max-height: 400px;
width: 400px;
margin: auto;

View File

@ -58,6 +58,11 @@ BARS.defineActions(function() {
let ctx = canvas.getContext('2d');
ctx.filter = `brightness(${this.brightness / 100}) contrast(${this.contrast / 100})`;
ctx.drawImage(original_imgs[i], 0, 0);
let ref_ctx = this.$refs.canvas[i].getContext('2d');
ref_ctx.clearRect(0, 0, texture.width, texture.height);
ref_ctx.drawImage(canvas, 0, 0);
}, {no_undo: true, use_cache: true});
})
},
@ -67,8 +72,8 @@ BARS.defineActions(function() {
},
template: `
<div>
<div class="texture_adjust_previews checkerboard" :class="{folded: !show_preview}">
<img v-for="texture in textures" :src="texture.source" />
<div class="texture_adjust_previews checkerboard" ref="preview_list" :class="{folded: !show_preview}">
<canvas v-for="(texture, i) in textures" :height="texture.height" :width="texture.width" ref="canvas" />
</div>
<div class="tool texture_adjust_preview_toggle" @click="togglePreview()"><i class="material-icons">{{ show_preview ? 'expand_more' : 'expand_less' }}</i></div>
<div class="bar slider_input_combo">
@ -80,7 +85,14 @@ BARS.defineActions(function() {
<input lang="en" type="number" class="tool" min="0" max="200" step="1" v-model.number="contrast" @input="change()">
</div>
</div>
`
`,
mounted() {
textures.forEach((texture, i) => {
let ref_ctx = this.$refs.canvas[i].getContext('2d');
ref_ctx.clearRect(0, 0, texture.width, texture.height);
ref_ctx.drawImage(texture.img, 0, 0);
})
}
},
onConfirm() {
Undo.finishEdit('Adjust brightness and contrast');
@ -120,6 +132,11 @@ BARS.defineActions(function() {
let ctx = canvas.getContext('2d');
ctx.filter = `saturate(${this.saturation / 100}) hue-rotate(${this.hue}deg)`;
ctx.drawImage(original_imgs[i], 0, 0);
let ref_ctx = this.$refs.canvas[i].getContext('2d');
ref_ctx.clearRect(0, 0, texture.width, texture.height);
ref_ctx.drawImage(canvas, 0, 0);
}, {no_undo: true, use_cache: true});
})
},
@ -130,7 +147,7 @@ BARS.defineActions(function() {
template: `
<div>
<div class="texture_adjust_previews checkerboard" :class="{folded: !show_preview}">
<img v-for="texture in textures" :src="texture.source" />
<canvas v-for="(texture, i) in textures" :height="texture.height" :width="texture.width" ref="canvas" />
</div>
<div class="tool texture_adjust_preview_toggle" @click="togglePreview()"><i class="material-icons">{{ show_preview ? 'expand_more' : 'expand_less' }}</i></div>
<div class="bar slider_input_combo">
@ -142,7 +159,14 @@ BARS.defineActions(function() {
<input lang="en" type="number" class="tool" min="-180" max="180" step="1" v-model.number="hue" @input="change()">
</div>
</div>
`
`,
mounted() {
textures.forEach((texture, i) => {
let ref_ctx = this.$refs.canvas[i].getContext('2d');
ref_ctx.clearRect(0, 0, texture.width, texture.height);
ref_ctx.drawImage(texture.img, 0, 0);
})
}
},
onConfirm() {
Undo.finishEdit('Adjust saturation and hue');