--- a/.hgignore Thu Aug 18 17:22:46 2016 +0200
+++ b/.hgignore Fri Aug 19 19:03:45 2016 +0200
@@ -10,7 +10,8 @@
^src/iconolab/static/iconolab/js/iconolab-bundle/dist/
\.orig$
-^src_js/*
+^src_js/iconolab-bundle/node_modules/
+^src_js/iconolab/static/iconolab/js/iconolab-bundle/dist/
^web/*
^\.pydevproject$
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/.babelrc Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,3 +0,0 @@
-{
- "presets": ["es2015"],
-}
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/.editorconfig Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 4
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/.eslintignore Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,2 +0,0 @@
-build/*.js
-config/*.js
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/.eslintrc.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,23 +0,0 @@
-module.exports = {
- root: true,
- parserOptions: {
- sourceType: 'module'
- },
- // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
- extends: 'standard',
- // required to lint *.vue files
- plugins: [
- 'html'
- ],
- // add your custom rules here
- 'rules': {
- // allow paren-less arrow functions
- 'arrow-parens': 0,
- // no-multiple-empty-lines
- 'no-multiple-empty-lines': 0,
- 'semi': 1,
- // allow debugger during development
- 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-
- }
-}
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/.gitignore Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,4 +0,0 @@
-.DS_Store
-node_modules/
-dist/
-npm-debug.log
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/README.md Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,18 +0,0 @@
-# iconolab-bundle
-
-> iconolab js bundle
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-```
-
-For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/index.html Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8">
- <title>iconolab-bundle</title>
- </head>
- <body>
- <div id="AppContainer">
- <cutout></cutout>
- <typeahead></typeahead>
- </div>
- <script src="dist/build.js"></script>
- </body>
-</html>
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/package.json Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,37 +0,0 @@
-{
- "name": "iconolab-bundle",
- "description": "iconolab js bundle",
- "author": "hbaptiste",
- "private": true,
- "scripts": {
- "start": "webpack --progress --colors --watch",
- "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
- },
- "dependencies": {
- "bootstrap": "^3.3.6",
- "event-emitter": "^0.3.4",
- "expose-loader": "^0.7.1",
- "font-awesome": "^4.6.3",
- "import": "0.0.6",
- "imports-loader": "^0.6.5",
- "jquery": "^3.0.0",
- "loader": "^2.1.1",
- "snapsvg": "^0.4.0",
- "vue": "^2.0.0-alpha.8",
- "vue-loader": "^9.1.1",
- "vue-resource": "^0.9.1",
- "vue-typeahead": "^2.1.0"
- },
- "devDependencies": {
- "babel-core": "^6.0.0",
- "babel-loader": "^6.0.0",
- "babel-plugin-transform-es2015-shorthand-properties": "^6.8.0",
- "babel-preset-es2015": "^6.0.0",
- "cross-env": "^1.0.6",
- "css-loader": "^0.23.1",
- "file-loader": "^0.8.4",
- "vue-loader": "^9.0.0",
- "webpack": "^1.12.2",
- "webpack-dev-server": "^1.12.0"
- }
-}
Binary file src/iconolab/static/iconolab/js/iconolab-bundle/src/assets/logo.png has changed
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/Cutout.vue Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,170 +0,0 @@
-<script>
-
- import svgboard from './svgboard'
- import Typeahead from '../typeahead/Typeahead.vue'
- import Zoomview from '../zoomview/Zoomview.vue'
-
- export default {
-
- el: '#drawing-zone',
- MODE_RECT: 'RECT',
- MODE_FREE: 'FREE',
- ZOOM_IN: 'in',
- ZOOM_OUT: 'out',
-
- components: {typeahead: Typeahead, zoomview: Zoomview},
- data: {
- mode:"",
- isRect: true,
- normalizePath: "",
- readOnly: false,
- formView: true,
- useClipPath: false,
- transformMatrix: "",
- fragmentPath: "",
- canZoom: true,
- displayMask: false
- },
-
- mounted () {
- var self = this;
- this.initialDrawingMode = null;
- this.drawingComponent = svgboard.init({
- wrapperId: '#iconolab-image-wrapper',
- actionWrapper: '#action-wrapper',
- readOnly: false,
- onDrawingModeChange: function (mode) {
- self.setDrawingMode(mode, false);
- }
- });
- this.$refs.zoomview.setZoomTarget(this.drawingComponent.getPaper());
- this.showEditor();
- this.drawingComponent.createTestHandler(10,20, 50);
- },
-
- methods: {
-
- computeCentreredViewBox: function () {
- var zoomSvg = this.$refs.zoomSvg;
- var viewBox = [];
- var imageWidth = zoomSvg.getAttribute("width");
- var imageHeight = zoomSvg.getAttribute("height");
-
- /* normalize */
- var xRatio = imageWidth / 100 ;
- var yRatio = imageHeight / 100;
-
- var zTarget = this.drawingComponent.getShapeBBox();
- viewBox = [(zTarget.x - 1) * xRatio, (zTarget.y - 1) * yRatio, (zTarget.w + 2) * xRatio, (zTarget.h + 2) * yRatio];
- return viewBox.join(" ");
-
- },
-
- computeZoomedViewBox: function () {
- var viewBoxArray = [];
- var zoomSvg = this.$refs.zoomSvg;
- var shapeBBox = this.drawingComponent.getShapeBBox();
- var imageWidth = zoomSvg.getAttribute("width");
- var imageHeight = zoomSvg.getAttribute("height");
- var xRatio = imageWidth / 100;
- var yRatio = imageHeight / 100;
- /* denormalize coordonate, max is imageX * 100x = imageHeigth*/
- shapeBBox.x = shapeBBox.x * xRatio;
- shapeBBox.y = shapeBBox.y * yRatio;
-
- shapeBBox.w = shapeBBox.w * xRatio;
- shapeBBox.h = shapeBBox.h * yRatio;
-
- var imgRatio = imageWidth / imageHeight;
- if (shapeBBox.w > shapeBBox.h) {
- shapeBBox.y = Math.max(0, shapeBBox.y - (((shapeBBox.w * imgRatio) - shapeBBox.h) / 2));
- shapeBBox.h = shapeBBox.w * imgRatio;
- }
- else {
- shapeBBox.x = Math.max(0, shapeBBox.x - (((shapeBBox.h / imgRatio) - shapeBBox.w) / 2));
- shapeBBox.w = shapeBBox.h / imgRatio;
- }
- viewBoxArray = [shapeBBox.x, shapeBBox.y, shapeBBox.w, shapeBBox.h];
-
- if (!shapeBBox) { return false; }
-
- return viewBoxArray.join(" ");
- },
-
- zoom: function (direction) {
-
- var mainSvgWrapper = this.$refs.smallSvgWrapper;
- if (this.$options.ZOOM_OUT === direction) {
- var defaultViewBox = [0, 0, mainSvgWrapper.getAttribute("width"), mainSvgWrapper.getAttribute("height")];
- mainSvgWrapper.setAttribute("viewBox", defaultViewBox.join(" "));
- this.canZoom = true;
- }
-
- if (this.$options.ZOOM_IN === direction) {
- mainSvgWrapper.setAttribute("viewBox", this.computeCentreredViewBox());//this.computeZoomedViewBox());//
- this.canZoom = false;
- }
- },
-
- setDrawingMode: function (mode, updateComponent) {
- if (!this.initialDrawingMode) {
- this.initialDrawingMode = mode;//useful for cancel
- }
- var updateComponent = (typeof updateComponent === "boolean") ? updateComponent: true;
- this.mode = this.$options['MODE_' + mode];
- this.isRect = (this.mode === this.$options.MODE_RECT) ? true: false;
- if (updateComponent) {
- this.drawingComponent.setDrawingMode(this.mode);
- }
- },
-
- cancel: function () {
- this.formView = true;
- var currentPath = this.$refs.currentPath.getAttribute("d");
- if (!currentPath.length || !this.initialDrawingMode) { return; } {
- currentPath += ";" + this.initialDrawingMode;
- this.drawingComponent.setPath(currentPath);
- }
- },
-
- highLightZone: function () {
- if (!this.displayMask) {
- this.displayMask = true;
- }
- else {
- this.displayMask = false;
- }
- },
-
- displayEditedPath: function () {
- var normalizePath = this.drawingComponent.getPath();
- },
-
- resetZoom: function () {
- this.zoom(this.$options.ZOOM_OUT);
- },
-
- showEditor: function () {
- this.formView = false;
- this.resetZoom();
- /* on edit mode reset*/
- },
-
- showForm: function () {
- this.normalizePath = this.drawingComponent.getPath();
- var smallImage = this.$refs.smallImage;
- this.formView = true;
- var xRatio = smallImage.getAttribute("width") / 100;
- var yRatio = smallImage.getAttribute("height") / 100;
- var transformMatrix = [xRatio, 0, 0, yRatio, 0, 0].join(',');
- this.transformMatrix ="matrix(" + transformMatrix + ")";
- this.fragmentPath = this.normalizePath.split(';')[0];
- },
-
- clear: function () {
- this.drawingComponent.clear();
- }
- }
- }
-</script>
-
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/index.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,9 +0,0 @@
-
-import CutoutVue from './Cutout.vue'
-
-export default {
-
- init: function () {
- new Vue(CutoutVue);
- }
-}
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/shape-resizer.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,160 +0,0 @@
-/* Enabling us to resize a shape width a handler
- #http://stackoverflow.com/questions/32390028/how-to-drag-and-resize-svg-rectangle-using-cursor-types
-*/
-import { eventEmitter } from "../utils"
-
-var ShapeResizer = function (paper, shape, vp, vb) {
- console.log("inside ShapeResizer ... ");
- this.paper = paper;
- this.shape = shape;
- this.handlers = [];
- this.viewPort = vp;
- this.viewBox = vb;
- this.isResizing = false;
- this.currentPosition = {};
- this.HANDLER_SIZE = 8;
- this.SHAPE_MIN_SIZE = 20;
- this.states = {};
- this.noop = function (){}
- this.init();
-}
-
-var api = ShapeResizer.prototype = {
-
- init: function () {
- this.showHandlers();
-
- },
-
- computeHandlerSize: function () {
- return this.HANDLER_SIZE * (Math.min(this.viewBox[2], this.viewBox[3])) / this.viewPort.width; //w==h
- },
-
- showHandlers: function () {
- /* show handler here */
- var bbox = this.shape.getBBox();
- var handleX = bbox.x - (this.computeHandlerSize()/2);
- var handleY = bbox.y - (this.computeHandlerSize()/2);
- var handler = this.paper.rect(handleX, handleY, this.computeHandlerSize(), this.computeHandlerSize()).attr({fill: 'red'});
- handler.addClass("drawingHandler");
- this.shape.addClass("drawingHandler");
- var handlerInfos = {position: "t_r", handler: handler};
- this.handlers.push(handlerInfos);
- this.shapesGroup = this.paper.g(this.shape, handler);
- this.attachEvents();
- },
-
- /*one handlers */
- updateShapePositions: function (handlerData, dx, dy) {
- //start
- var handlerBBox = handlerData.handler.getBBox();
- var shapeBBox = this.shape.data("origBbox");
- var newX = handlerBBox.x + (this.computeHandlerSize() / 2);
- var newY = handlerBBox.y + (this.computeHandlerSize() / 2);
-
- /*to the right => reduce the size */
- var newWidth = (dx > 0) ? shapeBBox.width - dx : shapeBBox.width + Math.abs(dx);
- var newHeight = (dy > 0) ? shapeBBox.height - dy : shapeBBox.height + Math.abs(dy);
-
- var transformValue = this.shape.data('origTransform') + (this.shape.data('origTransform') ? "T" : "t") + [dx, dy];
- this.shape.attr({'transform': transformValue, width: newWidth, height: newHeight});
- },
-
- dragEvents: {
- onStart: function (handlerData, dx, dy, e) {
- this.startPosition = {x: e.clientX, y: e.clientY};
- this.isResizing = true;
- this.currentPosition = {};
- handlerData.handler.data("origTransform", handlerData.handler.transform().local);
- this.shape.data("origBbox", this.shape.getBBox());
- this.shape.data("origBounding", this.shape.node.getBoundingClientRect());
- this.shape.data("origTransform", this.shape.transform().local);
- },
-
- onMove: function (handlerData, dx, dy, x, y, e) {
-
- var tdx, tdy;
- var snapInvMatrix = handlerData.handler.transform().diffMatrix.invert();
- snapInvMatrix.e = snapInvMatrix.f = 0;
- tdx = snapInvMatrix.x( dx,dy );
- tdy = snapInvMatrix.y( dx,dy );
-
- this.currentPosition.x = e.clientX;
- this.currentPosition.y = e.clientY;
- if (! this.checkBondaries(dx, dy)) { return; }
-
- handlerData.handler.transform( "t" + [ tdx, tdy ] + handlerData.handler.data("origTransform") );
- this.updateShapePositions(handlerData, tdx, tdy);
- },
-
- onStop: function () {
- this.isResizing = false;
- this.startPosition = {};
- this.currentPosition = {};
- }
- },
-
- checkBondaries: function (dx, dy) {
- var result = true;
- var origBounding = this.shape.data("origBounding");
- var getBoundingClientRect = this.shape.node.getBoundingClientRect();
-
- if (origBounding.width - dx <= this.SHAPE_MIN_SIZE) {
- result = false;
- }
-
- if (origBounding.height - dy <= this.SHAPE_MIN_SIZE) {
- result = false;
- }
-
- return result;
- },
-
- destroy: function () {
- this.handlers.map(function (handlerData) {
- handlerData.handler.remove();
- });
- delete this;
- },
-
- getZoomFactor: function () {
- return {
- x: this.viewPort.width / this.viewBox[2],
- y: this.viewPort.height / this.viewBox[3]
- };
- },
-
- attachEvents: function () {
- var self = this;
- this.handlers.map(function (handlerData) {
- handlerData.handler.drag(
- self.dragEvents.onMove.bind(self, handlerData),
- self.dragEvents.onStart.bind(self, handlerData),
- self.dragEvents.onStop.bind(self, handlerData));
- });
-
- eventEmitter.on("cutout:clear", function () {
- self.destroy();
- });
-
- this.shapesGroup.drag(function (dx, dy) {
- if (self.isResizing) { return; }
- var snapInvMatrix = this.transform().diffMatrix.invert();
- snapInvMatrix.e = snapInvMatrix.f = 0;
- 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);
- }, function () {
- this.data('origTransform', this.transform().local);
- }, this.noop);
- },
-}
-
-export default {
-
- enable_resizer : function (paper, rect, viewPort, cViewbox) {
- new ShapeResizer(paper, rect, viewPort, cViewbox);
- }
-}
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/snapsvg-zoom.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,173 +0,0 @@
-/* enable zoom */
-import { eventEmitter } from '../utils'
-
-class ZoomHandler {
-
- constructor (params) {
- this.zoomFactor = 0.1 || params.zoomFactor;
- this.paper = params.paper;
- this.MIN_SIZE = 40;
- this.imageWidth = parseInt(this.paper.select(".main-image").attr("width"));
- this.imageHeight = parseInt(this.paper.select(".main-image").attr("height"));
-
- this.viewport = {
- width: parseInt(this.paper.attr("width")),
- height: parseInt(this.paper.attr("height"))
- };
-
- this.scale = 1;
- this.paper.attr({stroke: 2, "fill": "blue" });
- this.disableDrag = false;
- this.imgMinSize = Math.min(this.imageWidth, this.imageHeight);
- this.lastPosition = [];
- this.updateViewBox([0 , 0, this.imageWidth, this.imageHeight]);
- }
-
- testShowCenter (cx, cy) {
-
- if (this.center) {
- this.center.remove();
- }
- this.center = this.paper.rect(cx - 3, cy - 3, 20, 20);
- this.center.attr({"fill" : "red"});
- }
-
- drawTestRectangle (cx, cy, w, h) {
- var x = cx - w / 2;
- var y = cy - h / 2;
- this.paper.rect(x, y, w, h);
- }
-
- zoomIn () {
-
- /* current center */
- if ( this.scale === 9) { this.scale--; return; }
- var currentCenterX = this.currentViewBox[0] + (this.currentViewBox[2] / 2);
- var currentCenterY = this.currentViewBox[1] + (this.currentViewBox[3] / 2);
- var scaleFactor = this.zoomFactor * this.scale;
- var viewBoxW = this.imgMinSize - (this.imgMinSize * scaleFactor);
- var viewBoxH = viewBoxW;
-
- this.currentViewBox[0] = currentCenterX - viewBoxW / 2;
- this.currentViewBox[1] = currentCenterY - viewBoxH / 2;
-
- this.currentViewBox[2] = viewBoxW;
- this.currentViewBox[3] = viewBoxH;
- this.scale ++;
- this.updateViewBox();
- }
-
- updateViewBox (currentViewBox, notify) {
- notify = (typeof notify === "boolean") ? notify : true;
-
- if (currentViewBox && currentViewBox.length != 4) { throw new Error("Provided currentViewBox is not valid!"); }
- if (currentViewBox) {
- this.currentViewBox = currentViewBox;
- }
-
- this.paper.attr({"viewBox": this.currentViewBox});
-
- if (!notify) { return false; }
-
- var self = this;
- eventEmitter.emit("zoomChanged", {
- updateFunction: function (updatedViewBox) {
- self.updateViewBox(updatedViewBox, false);
- },
- "zoomFactor": this.getZoomFactor(),
- "viewport": this.viewport,
- "currentScale": this.scale,
- "imageSize": {width: this.imageWidth, height: this.imageHeight},
- "minSize": Math.min(this.imageWidth, this.imageHeight),
- "currentViewBox": this.currentViewBox.slice()
- });
- }
-
- getZoomFactor () {
- return {
- x: this.viewport.width / this.currentViewBox[2],
- y: this.viewport.height / this.currentViewBox[3]
- };
- }
-
- onStart (x, y, e) {
-
- this.lastPosition[0] = this.currentViewBox[0];
- this.lastPosition[1] = this.currentViewBox[1];
-
- if (e.target.className.baseVal === "drawingHandler") {
- this.disableDrag = true;
- }
- }
-
- canDrag () {
- return !this.disableDrag;
- }
-
- onStop () {
- this.disableDrag = false;
- }
-
- onDrag (dx, dy, x, y, event) {
-
- if (!this.canDrag()) { return true; }
-
- var newX = this.lastPosition[0] - dx;
- var newY = this.lastPosition[1] - dy;
-
- /* maxX bound */
- if (newX + this.currentViewBox[2] >= this.viewport.width) {
- newX = this.viewport.width - this.currentViewBox[2];
- }
-
- /* maxY bound */
- if (newY + this.currentViewBox[3] >= this.viewport.height) {
- newY = this.viewport.height - this.currentViewBox[3];
- }
-
- if (newX <= 0) { newX = 0; }
-
- if(newY <= 0) { newY = 0; }
-
- this.currentViewBox[0] = newX;
- this.currentViewBox[1] = newY;
-
- this.updateViewBox();
- }
-
- reset () {
- this.scale = 1;
- this.currentViewBox = [0, 0, this.imageWidth, this.imageHeight];
- this.updateViewBox();
- }
-
- zoomOut () {
- if (this.scale == 1) {
- return false;
- }
-
- var currentCenterX = this.currentViewBox[0] + (this.currentViewBox[2] / 2);
- var currentCenterY = this.currentViewBox[1] + (this.currentViewBox[3] / 2);
- var scaleFactor = this.zoomFactor * (this.scale - 1);
-
- var viewBoxW = this.imgMinSize - (this.imgMinSize * scaleFactor);
- var viewBoxH = viewBoxW;
-
- var topX = currentCenterX - viewBoxW / 2;
- var topY = currentCenterY - viewBoxH / 2;
-
- this.currentViewBox[0] = topX; //deal with X and Y
- this.currentViewBox[1] = topY;
- this.currentViewBox[2] = viewBoxW;
- this.currentViewBox[3] = viewBoxH;
- this.updateViewBox();
- this.scale--;
- }
-}
-
-export default {
-
- enable_zoom: function (params) {
- return new ZoomHandler(params);
- }
-}
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/cutout/svgboard.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,576 +0,0 @@
-
-
-import Snap from 'snapsvg'
-import ShapeResizer from './shape-resizer'
-import { eventEmitter } from '../utils'
-import SnapsvgZoom from './snapsvg-zoom'
-
-/* custom plugins */
-Snap.plugin(function (Snap, Element, Paper, glob) {
- var elproto = Element.prototype;
-
- elproto.toBack = function () {
- this.prependTo(this.paper);
- };
-
- elproto.toFront = function () {
- this.appendTo(this.paper);
- };
-});
-
-Element.prototype.getTransformedXY = function( x, y ) {
- var m = this.transform().globalMatrix;
- return { x: m.x(x,y), y: m.y(x,y) };
- };
-
-var paper = null;
-var mainImage = null;
-var pointData = [];
-var viewBoxBounds = {X: 100, Y:100};
-var zoomFactor = {x:1, y:1};
-var viewPort= {width:850, height:850};
-var currentViewBox = [];
-var config = null;
-var readOnly = false;
-var startPoint = null;
-var drawing_path = null;
-var canDraw = false;
-var rectZone = null;
-var PATH_COLOR = "#ff00ff";
-var STROKE_COLOR = "red";
-var FILL_COLOR = "orange";
-
-var SELECTED_COLOR = "#ffff00";
-var FIRST_NODE_COLOR = "#FF0000";
-var HANDLE_SIZE = 8;
-var isDragged = false;
-var enablePoint = true;
-var pathIsClosed = false;
-var ENABLE_NEW_NODE = true;
-var RECT_MODE ='RECT';
-var drawingMode = RECT_MODE; //free
-var FREE_MODE = 'FREE';
-var availableModes = [RECT_MODE, FREE_MODE];
-var onChangeCallback = null;
-
-var getId = (function () {
- var cpt = 0;
- var defautPrefix = "item_";
- return function (prefix) {
- prefix = (typeof prefix === 'string') ? prefix : defautPrefix;
- cpt = cpt + 1;
- return prefix + cpt;
- }
- }());
-
-var handleRectPath = function (path) {
- if (readOnly) {
- paper.path(path).attr({ stroke:'red', opacity: 0.6});
- return;
- }
-
- var bbBox = Snap.path.getBBox(path);
- rectZone = paper.rect(bbBox.x, bbBox.y, bbBox.width, bbBox.height);
- rectZone.attr({fill: FILL_COLOR, stroke: STROKE_COLOR, opacity: 0.6});
- drawing_path = rectZone;
- canDraw = false;
- pathIsClosed = true;
- ShapeResizer.enable_resizer(paper, drawing_path, viewPort, currentViewBox);
-};
-
-
-var handleFreePath = function (path) {
-
- if (readOnly) {
-
- paper.path(path).attr({
- stroke: 'orange',
- fill: 'orange',
- opacity: 0.5,
- });
-
- return;
- }
-
- var pathInfos = Snap.parsePathString(path);
- pathInfos.map(function (pathData) {
- if(pathData[0] !== 'Z') {
- createPoint(paper, pathData[1], pathData[2], pointData);
- } else {
- pathIsClosed = true;
- updatePath(paper, onClosePath);
- }
- });
-
- /* replay the path here */
-
-};
-//transform point to path
-var updatePath = function (paper, updateCallback) {
- var path = "M";
-
- if (pointData.length <= 1) {
- return;
- }
-
- path += pointData[0].x + ',' + pointData[0].y;
-
- for (var i=0; i < pointData.length; i++) {
- if (i == 0) continue;
-
- var pointInfos = pointData[i];
- var lPath = "L" + pointInfos.x + "," + pointInfos.y;
- path += " " + lPath;
- }
-
- path += (pathIsClosed) ? " Z": "";
-
- /* remove prev path */
- if (drawing_path) {
- drawing_path.remove();
- }
-
- drawing_path = paper.path(path);
-
- drawing_path.attr({
- stroke: STROKE_COLOR,
- "vector-effect": "non-scaling-stroke",//prevent line to be zoom in
- "stroke-width": 3,
- fill: "white",
- opacity: 0.1
- });
-
- /* bring all handler to front */
- pointData.map(function (point) {
-
- /*deal with handler size */
- var handleSize = computeHandleSize();
- if (point.handler) {
- point.handler.toFront();
- }
- });
-
- if (typeof updateCallback === 'function' && pathIsClosed) {
- updateCallback();
- }
-
- if (!updateCallback && pathIsClosed) {
- applyClosedStyle();
- }
-};
-
-var applyClosedStyle = function () {
- drawing_path.attr({ fill: FILL_COLOR, strokeWidth: 1, opacity:.6 });
-}
-
-var onClosePath = function () {
- ENABLE_NEW_NODE = false;
- applyClosedStyle();
-};
-
-
-var onClickOnHandler = function (point, p, e) {
- //close path
- if (point.isFirst && pointData.length > 2) {
- pathIsClosed = true;
- }
-};
-
-var updatePointPosition = function (newPoint, x, y) {
- var index = pointData.indexOf(newPoint);
- if (index !== -1) {
- pointData[index].x = x;
- pointData[index].y = y;
- return true;
- } else {
- return false;
- }
-};
-
-var clearPreviousPath = function () {
- drawing_path.remove();
-};
-
-var computeHandleSize = function () {
-
- if(!currentViewBox.length) {
- currentViewBox = [0, 0, parseInt(mainImage.width()), parseInt(mainImage.height())]
- }
- var currentHandleSize = HANDLE_SIZE * Math.min(currentViewBox[2], currentViewBox[3]) / 850;
- return currentHandleSize;
-}
-
-var onMoveHandler = function (dx, dy, posX, posY, e) {
- isDragged = true;
- var tdx, tdy;
- var snapInvMatrix = this.transform().diffMatrix.invert();
- snapInvMatrix.e = snapInvMatrix.f = 0;
- tdx = snapInvMatrix.x( dx,dy );
- tdy = snapInvMatrix.y( dx,dy );
- var transformValue = this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [tdx, tdy];
- this.attr({ transform: transformValue});
- var boxSize = this.getBBox();
-
- var wasUpdated = updatePointPosition(this.data('point'), boxSize.x + (computeHandleSize() / 2) , boxSize.y + (computeHandleSize() / 2));
-
- if (wasUpdated) {
- updatePath(this.paper);
- }
-}
-
-var bindHandlerEvent = function (point, p) {
- point.handler.click(onClickOnHandler.bind(this, point, p));
- /* -- handler -- */
- point.handler.hover(function () {
- point.handler.attr({fill: 'yellow'});
- }, function () {
- var fillColor = point.isFirst ? FIRST_NODE_COLOR : "";
- point.handler.attr({fill: fillColor});
- });
-
- point.handler.drag(onMoveHandler, function () {
- this.data('origTransform', this.transform().local );
- }, function () {
- if (!isDragged) { return true; }
- isDragged = false;
- enablePoint = false;
- });
-}
-
-var createPointHandler = function (p, point) {
- var handler;
- var handleSize = computeHandleSize();
- var handleX = point.x - handleSize / 2;
- var handleY = point.y - handleSize / 2;
-
- /* preserve initial size of 5px a quoi correspond 5 deal with current vp */
- handler = p.rect(handleX, handleY, handleSize, handleSize);
-
- handler.addClass("drawingHandler");
- point.handler = handler;
- point.handler.data('point', point);
- if (pointData.length === 0) {
- point.isFirst = true;
- }
-
- bindHandlerEvent(point, p);
- point.handler.attr({
- fill: (pointData.length === 0) ? FIRST_NODE_COLOR : "",
- opacity: 0.9,
- stroke: PATH_COLOR
- });
-
- return point;
-}
-
-//create paper
-var createPoint = function (paper, x, y, pointData) {
-
- var point = {x:x, y:y, id: getId()};
-
- if (pathIsClosed) {
- updatePath(paper, onClosePath);
- return;
- }
-
- if (!enablePoint) {
- enablePoint = true;
- return false;
- }
-
- point = createPointHandler(paper, point);
- pointData.push(point);
- updatePath(paper);
-};
-
-var attachRectEvents = function (paper) {
- if (readOnly) { return false; }
-
- var startPosition = {};
- var currentPosition = {};
- /* add resizer */
-
- paper.mousedown(function (e) {
-
- if (drawingMode === FREE_MODE || pathIsClosed) { return; }
- startPosition.x = e.offsetX;
- startPosition.y = e.offsetY;
- canDraw = true;
- });
-
- paper.mousemove(function (e) {
- if (drawingMode === FREE_MODE) { return; }
- if (!canDraw) { return; }
- var x, y;
- currentPosition.x = e.offsetX;
- currentPosition.y = e.offsetY;
-
- if (rectZone) {
- rectZone.remove();
- }
-
- /* bas -> droite */
- var width = Math.abs(currentPosition.x - startPosition.x);
- var height = Math.abs(startPosition.y - currentPosition.y);
-
- if (currentPosition.y > startPosition.y && currentPosition.x > startPosition.x) {
- x = startPosition.x;
- y = startPosition.y;
- }
-
- /* haut -> droite */
- if (currentPosition.y < startPosition.y && currentPosition.x > startPosition.x) {
- x = currentPosition.x - width;
- y = currentPosition.y;
- }
-
- /* haut -> gauche */
- if (currentPosition.y < startPosition.y && currentPosition.x < startPosition.x) {
- x = currentPosition.x;
- y = currentPosition.y;
- }
-
- /* bas -> gauche */
- if (currentPosition.y > startPosition.y && currentPosition.x < startPosition.x) {
- x = currentPosition.x
- y = currentPosition.y - height;
- }
- if(!x || !y) { return; }
-
- rectZone = paper.rect(x, y, width, height);
- rectZone.attr({fill: FILL_COLOR, stroke: STROKE_COLOR, opacity: 0.6});
- });
-
-
- paper.mouseup(function () {
- if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
- drawing_path = rectZone;
- ShapeResizer.enable_resizer(paper, rectZone, viewPort, currentViewBox);
- canDraw = false;
- pathIsClosed = true;
- });
-};
-var attachPointEvents = function (paper) {
- if (readOnly) { return; }
- paper.click( function(e) {
- if (drawingMode === RECT_MODE) {
- return true;
- }
-
- if (!ENABLE_NEW_NODE) { return true; }
- createPoint(paper, e.offsetX, e.offsetY, pointData);
- });
-};
-
-
-var attachZoomEvents = function () {
-
- eventEmitter.on("zoomChanged", function (zoomInfos) {
- zoomFactor = zoomInfos.zoomFactor;
- currentViewBox = zoomInfos.currentViewBox;
- var previousPath = API.getPath();
- API.clear();
- API.setPath(previousPath);
- });
-
-}
-
-
-var API = {
-
- getPaper: function () {
- return paper;
- },
-
- setPath: function (pathString) {
- /* redraw the path */
- var pathInfos = pathString.split(';');
- if ( availableModes.indexOf(pathInfos[1]) === -1) {
- /* We assume then it is a free path */
- pathInfos[1] = "FREE";
- }
-
- this.setDrawingMode(pathInfos[1]);
- var pathData = pathInfos[0];
-
- if (!pathData.length) {
- return;
- }
- /* deal with path nomalization x = ImageWith/MaxXBound */
- var xRatio = mainImage.attr("width") / viewBoxBounds.X;
- var yRatio = mainImage.attr("height") / viewBoxBounds.Y;
-
- if (isNaN(xRatio) || isNaN(yRatio)) {
- new Error('Ratio should be a number.');
- }
-
- var transformMatrix = Snap.matrix(xRatio, 0, 0, yRatio, 0, 0);
- var path = Snap.path.map(pathData, transformMatrix).toString();
-
- /* always close path */
- if (path.search(/[z|Z]/gi) === -1 ) {
- path += "Z";
- }
- if (pathInfos.length >= 2) {
- if (pathInfos[1] === RECT_MODE) {
- handleRectPath(path);
- }
-
- if (pathInfos[1] === FREE_MODE) {
- handleFreePath(path);
- }
- }
- },
-
- setDrawingMode: function (mode) {
-
- if (availableModes.indexOf(mode) !== -1) {
- drawingMode = mode;
- }
- if (typeof onChangeCallback === "function") {
- onChangeCallback(drawingMode);
- }
-
- this.clear();
- },
-
- clear: function () {
- /* clear previous path, point, handler */
- pointData.map(function (point) {
- if (point.handler) {
- point.handler.remove();
- }
- });
-
- /*clear path is exists*/
- if (drawing_path) {
- drawing_path.remove();
- }
- eventEmitter.emit("cutout:clear");
- pointData = [];
- startPoint = null;
- drawing_path = null;
- isDragged = false;
- enablePoint = true;
- pathIsClosed = false;
- ENABLE_NEW_NODE = true;
- },
-
- getShapeBBox: function () {
- var currentPath = this.getPath();
- return Snap.path.getBBox(currentPath);
- },
-
- getShape: function () {
- return this.getPath();
- },
-
- getPath: function () {
- /* retourne le chemin */
- /* send path and BBox | implement edit and load path */
- var path = "";
- if (drawing_path) {
- if (drawingMode === RECT_MODE) {
- var bBox = drawing_path.getBBox();
- var transform = drawing_path.transform();
-
- if (!transform.global.length) {
- var shapePath = drawing_path.getBBox().path;
- }
-
- else {
-
- var shapeX = drawing_path.node.getAttribute('x');
- var shapeY = drawing_path.node.getAttribute('y');
- var transformMatrix = transform.totalMatrix;
- var fakeShape = paper.rect(transformMatrix.x(shapeX, shapeY),transformMatrix.y(shapeX, shapeY), bBox.width, bBox.height);
- shapePath = fakeShape.getBBox().path;
- fakeShape.remove();
- }
-
- path = Snap.path.toAbsolute(shapePath).toString();
-
- }
- else {
- path = drawing_path.attr('d');
- }
- }
-
- var xRatio = viewBoxBounds.X / mainImage.attr("width");
- var yRatio = viewBoxBounds.Y / mainImage.attr("height");
-
- if(isNaN(xRatio) || isNaN(yRatio)) {
- new Error('ratio should be a number.');
- }
-
- if (!path.length) {
- path = (drawingMode === RECT_MODE) ? ";RECT" : ";FREE";
- return path;
- }
- var normalizeMatrix = Snap.matrix(xRatio, 0, 0, yRatio, 0, 0);
-
- path = Snap.path.map(path, normalizeMatrix).toString();
-
- /* save the type */
- var type = (drawingMode === RECT_MODE) ? ";RECT" : ";FREE";
- if (path.search(/[z|Z]/gi) === -1) {
- path += " Z";
- }
-
- path += type;
-
-
- return path;
- }
-};
-
-/* change to a component */
-export default {
-
- init: function(config) {
- mainImage = jQuery(config.wrapperId).find('.main-image').eq(0);
- var cutCanvas = jQuery(config.wrapperId).find('.cut-canvas').eq(0);
- var path = jQuery(config.wrapperId).find('.image-path').eq(0);
-
- if (typeof config.onDrawingModeChange === 'function') {
- onChangeCallback = config.onDrawingModeChange;
- }
-
- if (!mainImage.length) {
- throw new Error("The main image Can't be found ...");
- }
-
- if (!cutCanvas.length) {
- var cutCanvas = jQuery('<svg version="1.1"></svg>').addClass('cut-canvas');
- jQuery(config.wrapperId).append(cutCanvas);
- cutCanvas.append(mainImage);
- }
-
-
-
- cutCanvas.css({
- marginLeft: 'auto',
- marginRight: 'auto',
- width: viewPort.width,
- height: viewPort.height,
- });
- if (typeof config.readOnly === 'boolean' && config.readOnly === true) {
- readOnly = true;
- }
-
- paper = new Snap(cutCanvas.get(0));
-
- if (path.length) {
- jQuery(cutCanvas).append(path);
- var pathData = path.attr("d");
- API.setPath(pathData);
- path.remove();
- }
- /* enable zoom */
- attachZoomEvents();
- attachPointEvents(paper);
- attachRectEvents(paper);
-
- return API;
- }
-};
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/mergetool/MergeTool.vue Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,89 +0,0 @@
-<script>
-
-import Typeahead from '../typeahead/Typeahead.vue'
-
-export default {
-
- data () {
- return {}
- },
-
- components: {
- Typeahead: Typeahead
- },
-
- mounted () {
-
- this.targetKeyMap = {
- title: "proposal-title",
- desc: "proposal-description",
- frag: "proposal-fragment"
- };
-
- this.targetFieldTypeMap = {
- title: "input",
- desc: "input",
- frag: "frag"
- };
-
- this.originalValues = {
- title: "",
- desc: "",
- frag: ""
- }
-
- },
-
- methods: {
-
- pickProposition: function (event, sourceId, targetKey) {
- var value = "";
- var source = document.getElementById(sourceId);
- var targetField = this.$refs[this.targetKeyMap[targetKey]];
- var targetType = this.targetFieldTypeMap[targetKey];
- if (!targetType) { throw new Error("A target type must be provided..."); }
-
- if (targetType === "input") {
- value = targetField.value;
- targetField.value = source.value;
- }
-
- if (targetType === "frag") {
- value = targetField.getAttribute("d");
- var sourceValue = source.getAttribute("d");
- var targetPathType = targetField.getAttribute("data-path-type");
- targetField.setAttribute("d", sourceValue);
-
- var pathType = source.getAttribute("data-path-type");
- pathType = pathType || "FREE";
- var fragmentField = this.$refs["fragment-field"];
- fragmentField.value = sourceValue + ";" + pathType;
- }
-
- this.preserveOriginalValue(targetKey, value);
- },
-
- pickTag: function (event, refTag) {
- var source = this.$refs[refTag];
- var target = this.$refs['proposal-tags'];
- this.preserveOriginalValue('proposal-tags', target.tags);
- target.setTags(source.tags, true);
- },
-
- preserveOriginalValue: function (key, value) {
- if (!this.originalValues[key]) {
- this.originalValues[key] = value;
- }
- },
-
- hightlightSource: function (source) {
- source.className += "highlight";
- },
-
- save: function () {
- alert("this is it ... ");
- }
- }
-}
-
-</script>
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/Taglist.vue Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,102 +0,0 @@
-<template src='./template.html'></template>
-<script>
-
-import { generateId } from '../utils'
-
-export default {
- data () {
- return {
- tags: [],
- readOnly: false
- }
- },
-
- methods: {
- removeTag: function (index) {
- this.tags.$remove(index);
- this.normalizeSelectedTags();
- },
-
- reset: function () {
- this.tags = [];
- this.normalizeSelectedTags();
- },
-
- /* check tag already exists */
- tagAlreadyExists (tag) {
- var result = false;
- var found = this.tags.find(function (userTag) {
-
- if (!userTag.tag_link) {
-
- if (userTag.tag_label === tag.tag_label) {
- return true;
- }
-
- } else {
- if (userTag.tag_link === tag.tag_link) {
- return true;
- }
- }
- });
- if (found) {
- var tagNode = this.$refs[found.id][0];
- tagNode.style.border = "1px solid red";
- setTimeout(function () {
- tagNode.style.border = "";
- }, 1000);
- result = true;
- }
- return result;
- },
-
- setTags (tagArrays){
-
- if (!Array.isArray(tagArrays)) { new Error('setTags expects an array!'); }
- var self = this;
- tagArrays.map(function (tag) {
- self.addTag(tag);
- });
- },
-
- addTag (tag) {
-
- if (this.tagAlreadyExists(tag)) { return false; }
-
- if (!tag || !tag.hasOwnProperty('tag_label')) { return; }
-
- if (!tag.id) {
- tag.id = generateId('tag_');
- }
-
- this.tags.push(tag);
- this.normalizeSelectedTags();
- },
-
- normalizeSelectedTags () {
- var result = [];
-
- this.tags.map(function (tag) {
- var tagItem = {};
- tagItem.tag_input = (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link: tag.tag_label;
- tagItem.accuracy = tag.accuracy;
- tagItem.relevancy = tag.relevancy;
- result.push(tagItem);
- });
- this.$parent.$data.selectedTags = JSON.stringify(result);
- },
-
- updateAccuracy: function (event, tag) {
- tag.accuracy = event.target.value;
- this.normalizeSelectedTags();
-
- },
-
- updatePertinence: function (event, tag) {
- tag.relevancy = event.target.value;
- this.normalizeSelectedTags();
- }
- }
-}
-
-</script>
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/taglist/template.html Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,25 +0,0 @@
-<div>
-
- <ul v-show="!readOnly" class="tags-wrapper list-unstyled">
- <li class="tag-item" v-for="(tag, index) in tags" :ref="tag.id">
- <i class="fa fa-tag"></i> <strong><span v-text="tag.tag_label"></span></strong>
-
- Précision: <select @change="updateAccuracy($event, tag)">
- <option v-for="(no, index) in [1,2,3,4,5]" v-bind:selected="tag.accuracy == no" v-bind:value="no">{{ no }}</option>
- </select>
-
- Pertinence: <select @change="updatePertinence($event, tag)">
- <option v-for="(no, index) in [1,2,3,4,5]" v-bind:selected="tag.relevancy == no" v-bind:value="no">{{ no }}</option>
- </select>
- <a @click="removeTag(tag)"><i class="fa fa-trash"></i> </a>
- </li>
- </ul>
-
- <ul class="list-inline" v-show="readOnly">
- <li v-for="(tag, index) in tags">
- <i class="fa fa-tag"></i> <span class="label label-info">{{ tag.tag_label }}</span>
- | Fiabilité <span class="badge">{{ tag.accuracy }}</span>
- | Pertinence <span class="badge">{{ tag.relevancy }}</span>
- </li>
- </ul>
-</div>
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/Typeahead.vue Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,161 +0,0 @@
-<template src='./template.html'></template>
-<style scoped src='./style.css'></style>
-
-<script>
- import typeahead from 'vue-typeahead'
- import Taglist from '../taglist/Taglist.vue'
-
- var autoCompletePath = "http://lookup.dbpedia.org/api/search/PrefixSearch?MaxHits=5";
- var wikipediaPath = "http://fr.wikipedia.org/w/api.php"
- var parentsMethods = {
- reset: typeahead.methods.reset
- };
-
-
- var get = function (url, data) {
- var dfd = jQuery.Deferred();
- var promise = jQuery.getJSON(url, data).done( function (response) {
- var envelope = {};
- envelope.data = response;
- dfd.resolve(envelope);
- }).fail(dfd.reject);
- return dfd.promise();
- }
-
- export default {
- mixins: [typeahead],
- components: { 'taglist' : Taglist },
-
- props: ['tags', 'read-only'],
-
- mounted() {
- this.taglist = this.$refs.taglist;
- this.taglist.readOnly = this.readOnly;
- this.setTags(this.tags);
- },
-
- data() {
- return {
- src: autoCompletePath,
- limit: 7,
- minChars: 2,
- showAddButton: false,
- datasource: "wikipedia",
- selectedTags: "[]",
- items: [],
- queryParamName: "QueryString"
-
- }
- },
-
- methods: {
-
- setTags(tags, reset) {
- tags = Array.isArray(tags) ? tags : [];
- reset = (typeof reset === "boolean") ? reset : false;
- if (reset) {
- this.taglist.reset();
- }
- this.taglist.setTags(tags);
- },
-
- checkQuery () {
- if (this.query.length === 0) {
- this.reset();
- }
- },
-
- fetch() {
- if (this.datasource === "wikipedia") {
- return this.fetchWikiPedia();
- }
-
- else {
- var request = {};
- request[this.queryParamName] = this.query;
- return get(this.src, query);
- }
- },
-
- fetchWikiPedia () {
- this.src = wikipediaPath;
- var self = this;
- var request = {
- 'action': 'opensearch',
- 'format': 'json',
- 'search': this.query
- };
-
- /* make request */
- var dfd = jQuery.Deferred();
- jQuery.ajax({
- url: this.src,
- data: request,
- dataType: "jsonp",
- success: function (response) {
- var envelope = {};
- envelope.data = response;
- dfd.resolve(envelope);
- }
- });
- return dfd.promise();
- },
-
- reset () {
- this.showAddButton = false;
- parentsMethods.reset.call(this);
- },
-
- prepareWikipediaResponse (data) {
- var results = [];
- if (data.length !== 4) { return results; }
- var labelsList = data[1];
- var urlsList = data[3];
-
- if (labelsList.length !== urlsList.length) {
- return;
- }
-
- labelsList.map(function(item, index) {
- var tagItem = {};
- tagItem.tag_label = item;
- var link = urlsList[index];
- link = link.replace("https://fr.wikipedia.org/wiki/", "http://fr.dbpedia.org/resource/");
- tagItem.tag_link = decodeURI(link);
- tagItem.accuracy = 1;
- tagItem.relevancy = 1;
- results.push(tagItem);
- });
-
- return results;
- },
-
- prepareResponseData (data) {
- var responseData = (typeof data === 'string') ? JSON.parse(data): data;
-
- if(this.datasource === "wikipedia") {
- responseData = this.prepareWikipediaResponse(responseData);
- }
-
- if (Array.isArray(responseData) && !responseData.length) {
- this.showAddButton = true;
- }
- return responseData;
- },
-
- addTag () {
- if (this.hasItems) { return false; }
- var tag = {tag_label: this.query, accuracy: 1, relevancy: 1};
- this.$refs.taglist.addTag(tag);
- this.reset();
- },
-
- onHit (selected) {
- this.$refs.taglist.addTag(selected);
- this.reset();
- }
- }
-
- }
-
-</script>
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/style.css Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,71 +0,0 @@
-Typeahead {
- position: relative;
-}
-.selected-tags { border: 1px solid red; width: 200px !important; }
-.selected-tags select {display: inline-block;}
-
-.Typeahead__input {
- width: 100%;
- font-size: 14px;
- color: #2c3e50;
- line-height: 1.42857143;
- box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
- -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
- transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
- font-weight: 300;
- padding: 12px 26px;
- border: none;
- border-radius: 22px;
- letter-spacing: 1px;
- box-sizing: border-box;
-}
-.Typeahead__input:focus {
- border-color: #4fc08d;
- outline: 0;
- box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px #4fc08d;
-}
-.tag-item {border: 1px solid red;}
-.fa-times {
- cursor: pointer;
-}
-
-ul {
- /*position: absolute;*/
- padding: 0;
- margin-top: 8px;
- min-width: 100%;
- background-color: #fff;
- list-style: none;
- border-radius: 4px;
- box-shadow: 0 0 10px rgba(0,0,0, 0.25);
- z-index: 1000;
-}
-li {
- padding: 10px 16px;
- border-bottom: 1px solid #ccc;
- cursor: pointer;
-}
-li:first-child {
- border-radius: 4px 4px 0 0;
-}
-li:last-child {
- border-radius: 0 0 4px 4px;
- border-bottom: 0;
-}
-span {
- display: block;
- color: #2c3e50;
-}
-.active {
- background-color: #3aa373;
-}
-.active span {
- color: white;
-}
-.name {
- font-weight: 700;
- font-size: 18px;
-}
-.screen-name {
- font-style: italic;
-}
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/typeahead/template.html Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,24 +0,0 @@
-<div>
- <taglist ref="taglist"></taglist>
- <!-- the input field -->
- <input v-show="!readOnly" type="text"
- placeholder="..."
- autocomplete="off"
- v-model="query"
- v-on:keyup.8="checkQuery"
- @keydown.down="down"
- @keydown.up="up"
- @keydown.enter="hit($event)"
- @keydown.esc="reset"
- @keyup="update"/>
-
- <a @click="addTag" v-show="showAddButton"><i class="fa fa-plus"></i> Créer ce tag</a>
-
- <!-- the list -->
- <ul v-show="hasItems || !readOnly">
- <li v-for="(item, index) in items" :class="activeClass(index)" @mousedown="hit" @mousemove="setActive(index)">
- <span v-text="item.tag_label"></span>
- </li>
- </ul>
- <input v-model="selectedTags" name="tags" type="hidden" />
-</div>
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/utils/index.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,15 +0,0 @@
-import EventEmitter from 'event-emitter'
-var eventEmitter = EventEmitter({});
-
-
-var generateId = (function () {
- var cpt = 0;
- var defautPrefix = "item_";
- return function (prefix) {
- prefix = (typeof prefix === "string") ? prefix : defautPrefix;
- cpt = cpt + 1;
- return prefix + cpt;
- }
- }());
-
-export { generateId , eventEmitter }
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/zoomview/Zoomview.vue Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,164 +0,0 @@
-
-<template src='./template.html'></template>
-
-<script>
-
-import {eventEmitter, computeElementSize} from '../utils'
-import ZoomHandler from '../cutout/snapsvg-zoom'
-
-import Snap from 'snapsvg'
-
-export default {
-
- props: ['image-url', 'image-width', 'image-height', 'zoomTarget', 'main-image-id'],
-
- mounted () {
- this.root = new Snap(this.$refs['root-svg']);
- this.handler = this.root.select('#zoom-handler');
- this.image = this.root.select('#small-image');
- this.root.attr({width: 101, height: 101});
- var imageWidth = parseInt(this.image.attr("width"));
- var imageHeight = parseInt(this.image.attr("height"));
- /* center image in the viewport */
- this.root.attr({viewBox: [0, 0, imageWidth, imageHeight]});
- this.imgMinSize = Math.min(imageWidth, imageHeight);
-
- this.handlerSize = 20;
- this.handler.attr({'width': this.handlerSize, 'height': this.handlerSize});
- this.currentViewBox = null;
- this.currentViewport = null;
- this.updateFunction = null;
- var target = document.getElementById('zoomTarget');
-
- if (target) {
- this.setZoomTarget(target);
- }
- this.handleEvents();
- },
-
- data () {
- return {
- showHandler: false
- }
- },
- methods: {
-
- setZoomTarget: function (zoomtarget) {
-
- if (zoomtarget.hasOwnProperty("type") && zoomtarget.type === 'svg') {
- this.paper = zoomtarget;
- } else {
-
- this.paper = new Snap(zoomtarget);
- var mainImage = this.paper.select("#" + this.mainImageId);
- if (!mainImage) { throw new Error("A main image wasn't found."); };
- }
-
- this.zoomHandler = ZoomHandler.enable_zoom(this.paper);
- },
-
- incraseDrawingZoom: function () {
- this.zoomHandler.zoomIn();
- },
-
- resetDrawingZoom: function () {
- this.zoomHandler.reset();
- },
-
- decreaseDrawingZoom: function () {
- this.zoomHandler.zoomOut();
- },
-
- handleEvents: function () {
- eventEmitter.on('zoomChanged', this.handleZoomChanged.bind(this));
- var self = this;
-
- this.handler.drag(function (dx, dy) {
- var bbox = this.getBBox();
- var startX = this.data("startPosition").x;
- var startY = this.data("startPosition").y;
- var imageWidth = parseInt(self.image.attr('width'));
- var imageHeight = parseInt(self.image.attr('height'));
-
- /* New X */
- var newX = startX + dx;
- var newY = startY + dy;
-
- /* XBound */
- if (newX + bbox.w >= imageWidth) {
- newX = imageWidth - bbox.w;
- }
- /* YBound */
- if (newY + bbox.h >= imageHeight) {
- newY = imageHeight - bbox.h;
- }
-
- newX = newX < 0 ? 0: newX;
- newY = newY < 0 ? 0: newY;
-
- var transformedValue = "T" + [newX, newY];
- this.attr("transform", transformedValue);
- self.notifyMove(this.getBBox().x, this.getBBox().y);
-
- }, function () {
- this.data("startPosition", {x: this.getBBox().x, y: this.getBBox().y});
- this.data("origTransform", this.transform().local);
- }, function () {});
- },
-
- moveHandlerToCenter: function (x, c) {
- cx = cx ? cx : this.width / 2;
- cy = cy ? cy : this.height / 2;
- var moveX = cx - this.handler.getBBox().w / 2;
- var moveY = cy - this.handler.getBBox().h / 2;
- this.handler.transform( "T" + [moveX, moveY]);
- },
-
- notifyMove: function (x, y) {
- eventEmitter.emit("moveZoomHandler", {
- x: x,
- y: y,
- viewport: {
- width: this.image.attr("width"),
- height: this.image.attr("height")
- }});
-
- if (!this.currentViewBox || !this.currentViewport || typeof this.updateFunction !== 'function') { return false; }
-
- /*longueur image=> longueur viewbox */
- var xRatio = this.currentImageSize.width / this.image.attr('width');
- var yRatio = this.currentImageSize.height / this.image.attr('height');
- var newX = x * xRatio;
- var newY = y * yRatio;
- this.currentViewBox[0] = newX;
- this.currentViewBox[1] = newY;
- this.updateFunction(this.currentViewBox);
- },
-
- handleZoomChanged: function (zoomInfos) {
-
- if (zoomInfos.currentScale === 1) {
- this.showHandler = false;
- return;
- }
-
- this.showHandler = true;
-
- this.currentViewport = zoomInfos.viewport;
- this.currentViewBox = zoomInfos.currentViewBox;
- this.currentImageSize = zoomInfos.imageSize;
- this.updateFunction = zoomInfos.updateFunction;
- var handlerSize = zoomInfos.currentViewBox[2] * this.imgMinSize / zoomInfos.minSize;
-
- this.handler.attr("width", handlerSize);
- this.handler.attr("height", handlerSize);
-
- /*compute handler x, y */
- var x = zoomInfos.currentViewBox[0] * this.image.attr("width") / zoomInfos.imageSize.width;
- var y = zoomInfos.currentViewBox[1] * this.image.attr("height")/ zoomInfos.imageSize.height;
- this.handler.transform( "T" + [x, y]);
- }
- }
-}
-
-</script>
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/components/zoomview/template.html Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,22 +0,0 @@
-<div class="zoomview-wrapper">
-
- <p class='form-drawing pullright'><strong>Zoom</strong></p>
-
- <svg ref="root-svg">
- <image
- id="small-image"
- x="0"
- y="0"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- :xlink:href="imageUrl"
- :width="imageWidth"
- :height="imageHeight"></image>
- <rect v-show="showHandler" id="zoom-handler" ref="handler" x="0" y="0" style="fill:black; opacity:0.4"></rect>
- </svg>
-
- <ul class="form-drawing-wrapper zoom-action-list list-inline">
- <li class="small showPointer" @click="incraseDrawingZoom"><i class="fa fa-search-plus"></i> </li>
- <li class="small showPointer" @click="resetDrawingZoom"><i class="fa fa-square"></i> </li>
- <li class="small showPointer" @click="decreaseDrawingZoom"><i class="fa fa-search-minus"></i> </li>
- </ul>
-</div>
\ No newline at end of file
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/src/main.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,21 +0,0 @@
-import 'expose?Vue!vue/dist/vue'
-import "expose?jQuery!jquery"
-
-import VueResource from 'vue-resource'
-import Typeahead from './components/typeahead/Typeahead.vue'
-import Cutout from './components/cutout'
-import Zoomview from './components/zoomview/Zoomview.vue'
-import MergeTool from './components/mergetool/MergeTool.vue'
-
-var iconolab = {
- Cutout : Cutout,
- VueComponents : {
- Typeahead: Typeahead,
- MergeTool: MergeTool,
- Zoomview: Zoomview
- }
-};
-
-if (!window.iconolab) {
- window.iconolab = iconolab;
-}
--- a/src/iconolab/static/iconolab/js/iconolab-bundle/webpack.config.js Thu Aug 18 17:22:46 2016 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,64 +0,0 @@
-var path = require('path')
-var webpack = require('webpack')
-module.exports = {
- entry: './src/main.js',
- output: {
- path: path.resolve(__dirname, './dist'),
- publicPath: '/dist/',
- filename: 'build.js'
- },
- resolveLoader: {
- root: path.join(__dirname, 'node_modules'),
- },
- module: {
- loaders: [
- {
- test: /\.vue$/,
- loader: 'vue'
- },
- {
- test: /\.js$/,
- loader: 'babel-loader',
- //exclude: /node_modules/,
- query: {
- presets: ['es2015']
- },
- "plugins": ["transform-es2015-shorthand-properties"]
- },
- {
- test: /\.(png|jpg|gif|svg)$/,
- loader: 'file',
- query: {
- name: '[name].[ext]?[hash]'
- }
- },
- {
- test: require.resolve('snapsvg'),
- loader: 'imports-loader?this=>window,fix=>module.exports=0'
- },
- ]
- },
- devServer: {
- historyApiFallback: true,
- noInfo: true
- },
- devtool: '#eval-source-map'
-}
-
-if (process.env.NODE_ENV === 'production') {
- module.exports.devtool = '#source-map'
- // http://vue-loader.vuejs.org/en/workflow/production.html
- module.exports.plugins = (module.exports.plugins || []).concat([
- new webpack.DefinePlugin({
- 'process.env': {
- NODE_ENV: '"production"'
- }
- }),
- new webpack.optimize.UglifyJsPlugin({
- compress: {
- warnings: false
- }
- }),
- new webpack.optimize.OccurenceOrderPlugin()
- ])
-}
--- a/src/iconolab/templates/iconolab_base.html Thu Aug 18 17:22:46 2016 +0200
+++ b/src/iconolab/templates/iconolab_base.html Fri Aug 19 19:03:45 2016 +0200
@@ -11,15 +11,13 @@
<title>{% block title %} {% endblock %}</title>
{% block main_js %}
- <!--<script src="{% static 'iconolab/js/dist/bundle.js' %}" type="text/javascript"></script>-->
- <script src="{% static 'iconolab/js/iconolab-bundle/dist/build.js' %}" type="text/javascript"></script>
- <script src="{% static 'iconolab/js/iconolab-bundle/node_modules/jquery/dist/jquery.min.js' %}" type="text/javascript"></script>
+ <script src="{% static 'iconolab/js/build.js' %}" type="text/javascript"></script>
{% endblock %}
{% block page_js %} {% endblock %}
{% block main_css %}
- <link rel="stylesheet" href="{% static 'iconolab/js/iconolab-bundle/node_modules/bootstrap/dist/css/bootstrap.min.css' %}">
- <link rel="stylesheet" href="{% static 'iconolab/js/iconolab-bundle/node_modules/font-awesome/css/font-awesome.min.css' %}">
+ <link rel="stylesheet" href="{% static 'iconolab/css/bootstrap.min.css' %}">
+ <link rel="stylesheet" href="{% static 'iconolab/css/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'iconolab/css/iconolab.css' %}">
{% endblock %}
