Use getBoundingClientRect to calculate viewport (works cross browser).
--- a/src_js/iconolab-bundle/src/components/editor/Canvas.vue Wed Feb 22 16:28:03 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/Canvas.vue Wed Feb 22 16:29:02 2017 +0100
@@ -4,7 +4,13 @@
<svg ref="svg"
v-bind:class="{ 'cut-canvas': true, 'canvas--rect': mode === 'rect', 'canvas--free': mode === 'free' }"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <image ref="image" v-if="loaded" xmlns:xlink="http://www.w3.org/1999/xlink" v-bind:xlink:href="image" x="0" y="0" />
+ <image xmlns:xlink="http://www.w3.org/1999/xlink"
+ ref="image"
+ v-if="loaded"
+ v-bind:xlink:href="image"
+ x="0" y="0"
+ v-bind:width="imageWidth"
+ v-bind:height="imageHeight" />
<shape-rect ref="rect" v-show="loaded && mode == 'rect'"
v-bind:paper="paper"
v-bind:original-annotation="annotation"
@@ -154,17 +160,20 @@
this.imgMinSize = Math.min(img.width, img.height);
+ console.log('Image: %s x %s', img.width, img.height);
+
// FIXME
// Image is actually NOT loaded at this step
setTimeout(() => {
- console.log('Viewport: %s x %s',
- this.paper.node.clientWidth, this.paper.node.clientHeight);
+ var bcr = this.paper.node.getBoundingClientRect();
+
+ console.log('Viewport: %s x %s', bcr.width, bcr.height);
var viewBox = [0 , 0, img.width, img.height];
var viewport = {
- width: this.paper.node.clientWidth,
- height: this.paper.node.clientHeight
+ width: bcr.width,
+ height: bcr.height
};
Object.assign(this, {
@@ -465,11 +474,12 @@
if (this.$refs.rect.width === 0 && this.$refs.rect.height === 0) {
var currentPosition = this.computeOffset(e);
+ var size = this.imgMinSize / 4;
Object.assign(this.$refs.rect, {
- x: currentPosition.x,
- y: currentPosition.y,
- width: this.imgMinSize / 4,
- height: this.imgMinSize / 4,
+ x: currentPosition.x - (size / 2),
+ y: currentPosition.y - (size / 2),
+ width: size,
+ height: size,
});
}