--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src_js/iconolab-bundle/src/components/editor/ShapeRect.vue Wed Feb 15 16:42:06 2017 +0100
@@ -0,0 +1,208 @@
+<template>
+<g ref="g" v-bind:transform="transform">
+ <rect
+ ref="shape"
+ x="0" y="0"
+ v-bind:width="width" v-bind:height="height"
+ fill="#bdc3c7"
+ stroke="#000"
+ v-bind:stroke-width="handlerSize / 5"
+ v-bind:stroke-dasharray="(handlerSize / 5) + ',' + (handlerSize / 5)"
+ style="opacity: 0.6;"
+ class="shape"></rect>
+ <rect
+ ref="topLeft"
+ v-show="width > 0 && height > 0"
+ v-bind:x="(handlerSize / 2) * -1" v-bind:y="(handlerSize / 2) * -1"
+ v-bind:width="handlerSize" v-bind:height="handlerSize"
+ fill="#ffffff"
+ stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-top-left"></rect>
+ <rect
+ ref="bottomRight"
+ v-show="width > 0 && height > 0"
+ v-bind:x="width - (handlerSize / 2)" v-bind:y="height - (handlerSize / 2)"
+ v-bind:width="handlerSize" v-bind:height="handlerSize"
+ fill="#ffffff"
+ stroke="#000000" v-bind:stroke-width="handlerSize / 5" class="handler-rect handler-bottom-right"></rect>
+</g>
+</template>
+
+<script>
+
+ import Snap from 'snapsvg'
+ import tooltip from './mixins/tooltip'
+ import save from './mixins/save'
+
+ export default {
+ mixins: [ tooltip, save ],
+ props: [
+ 'paper',
+ 'original-annotation',
+ ],
+ data() {
+ return {
+ transform: 'translate(0, 0)',
+ isResizing: false,
+ x: 0, y: 0,
+ width: 0, height: 0,
+ handlerSize: 60
+ }
+ },
+ mounted() {
+
+ var self = this;
+
+ var groupEvents = {
+ onMove: function(dx, dy) {
+ if (self.isResizing) { return; }
+
+ var snapInvMatrix = this.transform().diffMatrix.invert();
+ var tdx = snapInvMatrix.x(dx, dy);
+ var tdy = snapInvMatrix.y(dx, dy);
+
+ var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy];
+ this.transform(transformValue);
+ },
+ onStart: function() {
+ this.data('origTransform', this.transform().local);
+ self.$emit('drag:start');
+ },
+ onEnd: () => self.$emit('drag:end')
+ }
+
+ var g = new Snap(this.$refs.g);
+ g.drag(groupEvents.onMove, groupEvents.onStart, groupEvents.onEnd);
+ },
+ watch: {
+ x: function (val, oldVal) {
+ this.transform = 'translate(' + this.x + ', ' + this.y + ')';
+ },
+ y: function (val, oldVal) {
+ this.transform = 'translate(' + this.x + ', ' + this.y + ')';
+ },
+ },
+ methods: {
+
+ clear: function() {
+
+ var shape = new Snap(this.$refs.shape);
+ var topLeftHandler = new Snap(this.$refs.topLeft);
+ var bottomRightHandler = new Snap(this.$refs.bottomRight);
+
+ shape.node.removeAttribute('transform');
+ topLeftHandler.node.removeAttribute('transform');
+ bottomRightHandler.node.removeAttribute('transform');
+
+ this.destroyTooltip();
+
+ Object.assign(this, {
+ transform: 'translate(0, 0)',
+ x: 0, y: 0,
+ width: 0, height: 0,
+ });
+ },
+
+ getTooltipTarget: function() {
+ return this.$refs.shape;
+ },
+
+ addResizeHandlers: function() {
+
+ var self = this;
+
+ var shape = new Snap(this.$refs.shape);
+ var topLeftHandler = new Snap(this.$refs.topLeft);
+ var bottomRightHandler = new Snap(this.$refs.bottomRight);
+
+ var handlerEvents = {
+ onMove: function(dx, dy) {
+
+ var snapInvMatrix = this.transform().diffMatrix.invert();
+ snapInvMatrix.e = snapInvMatrix.f = 0;
+ var tdx = snapInvMatrix.x(dx, dy);
+ var tdy = snapInvMatrix.y(dx, dy);
+
+ this.transform( "t" + [ tdx, tdy ] + this.data("origTransform") );
+
+ // Update shape
+
+ var newWidth = bottomRightHandler.getBBox().x - topLeftHandler.getBBox().x;
+ var newHeight = bottomRightHandler.getBBox().y - topLeftHandler.getBBox().y;
+
+ var attr = {
+ width: newWidth,
+ height: newHeight
+ };
+ if (this === topLeftHandler) {
+ attr.transform = shape.data('origTransform') + (shape.data('origTransform') ? "T" : "t") + [tdx, tdy];
+ }
+
+ shape.attr(attr);
+ },
+ onStart: function() {
+ self.isResizing = true;
+ shape.data("origTransform", shape.transform().local);
+ this.data('origTransform', this.transform().local);
+ },
+ onEnd: function() {
+ self.isResizing = false;
+ }
+ }
+
+ topLeftHandler.drag(handlerEvents.onMove, handlerEvents.onStart, handlerEvents.onEnd);
+ bottomRightHandler.drag(handlerEvents.onMove, handlerEvents.onStart, handlerEvents.onEnd);
+ },
+
+ fromSVGPath: function(pathString, imageWidth, imageHeight) {
+ var bBox = Snap.path.getBBox(pathString);
+
+ Object.assign(this, {
+ x: bBox.x, y: bBox.y,
+ width: bBox.width, height: bBox.height
+ });
+
+ setTimeout(() => {
+ this.addResizeHandlers();
+ this.addTooltip();
+ }, 50);
+ },
+
+ toSVGPath: function() {
+
+ var shape = new Snap(this.$refs.shape);
+
+ var shapePath;
+ var bBox = shape.getBBox();
+ var transform = shape.transform();
+
+ if (!transform.global.length) {
+ shapePath = shape.getBBox().path;
+ } else {
+ var shapeX = shape.node.getAttribute('x');
+ var shapeY = shape.node.getAttribute('y');
+ var transformMatrix = transform.totalMatrix;
+ var fakeShape = this.paper.rect(transformMatrix.x(shapeX, shapeY),transformMatrix.y(shapeX, shapeY), bBox.width, bBox.height);
+ shapePath = fakeShape.getBBox().path;
+ fakeShape.remove();
+ }
+
+ var path = Snap.path.toAbsolute(shapePath).toString();
+
+ return this.$parent.normalizePath(path) + ';RECT';
+ }
+ }
+ }
+
+</script>
+
+<style scoped>
+.shape:hover {
+ cursor: move;
+}
+.handler-top-left:hover {
+ cursor: nw-resize;
+}
+.handler-bottom-right:hover {
+ cursor: se-resize;
+}
+</style>