# HG changeset patch # User Harris Baptiste # Date 1465831991 -7200 # Node ID 63b29f1370c1319ea980456337145a888020b741 # Parent dc9f449dea1bdb51fbdaf3705eaad4201a58911b enabling new settings module, removing reversion_compare from settings diff -r dc9f449dea1b -r 63b29f1370c1 readme.md --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/readme.md Mon Jun 13 17:33:11 2016 +0200 @@ -0,0 +1,29 @@ +# How to start? + +1. Make sure PIP is installed then install Django and others dependencies with + +``` +pip install -r requirements.txt + +``` + +2. Move to src/iconolab/static/js to install js dependencies. +Make sure your have installed nodejs then run the command bellow + +``` +npm install + +``` +3. To recreate the bundle file that lives in dist/ + +``` +npm build + +``` + +4. To add a new js module, you can add it to the js/components folder and then run + +``` +npm start +``` + diff -r dc9f449dea1b -r 63b29f1370c1 requirements.txt --- a/requirements.txt Fri Jun 10 17:07:14 2016 +0200 +++ b/requirements.txt Mon Jun 13 17:33:11 2016 +0200 @@ -1,9 +1,16 @@ diff-match-patch==20121119 -Django==1.9.6 +Django==1.9.7 django-model-utils==2.5 django-notifications-hq==1.1 +django-reversion==2.0.1 +django-reversion-compare==0.6.2 +django-revision==0.1.6 djangorestframework==3.3.3 +gitdb==0.6.4 +GitPython==2.0.5 jsonfield==1.0.3 Pillow==3.2.0 +psycopg2==2.6.1 pytz==2016.4 +smmap==0.9.0 sorl-thumbnail==12.4a1 diff -r dc9f449dea1b -r 63b29f1370c1 src/iconolab/admin.py --- a/src/iconolab/admin.py Fri Jun 10 17:07:14 2016 +0200 +++ b/src/iconolab/admin.py Mon Jun 13 17:33:11 2016 +0200 @@ -1,6 +1,4 @@ from django.contrib import admin -from reversion_compare.admin import CompareVersionAdmin - # Register your models here. from iconolab.models import (Tag, Annotation, Collection, Image, @@ -16,14 +14,11 @@ inlines = [CommentAttachmentInline] -class AnnotationAdmin(CompareVersionAdmin): - history_latest_first = True - #reversion admin.site.register(Image) admin.site.register(Collection) admin.site.register(Tag) -admin.site.register(Annotation, AnnotationAdmin) +admin.site.register(Annotation) admin.site.register(MetaCategory) admin.site.register(Comment, CommentAdmin) admin.site.register(Activity) diff -r dc9f449dea1b -r 63b29f1370c1 src/iconolab/settings/__init__.py --- a/src/iconolab/settings/__init__.py Fri Jun 10 17:07:14 2016 +0200 +++ b/src/iconolab/settings/__init__.py Mon Jun 13 17:33:11 2016 +0200 @@ -54,7 +54,7 @@ 'django.contrib.staticfiles', 'notifications', 'reversion', - 'reversion_compare', + #'reversion_compare', 'iconolab.apps.IconolabApp', 'sorl.thumbnail', ] @@ -101,14 +101,6 @@ # Database # https://docs.djangoproject.com/en/1.9/ref/settings/#databases - -DATABASES = { - 'default': { - 'ENGINE': 'django.db.backends.sqlite3', - 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), - } -} - CACHES = { 'default': { 'BACKEND': 'django.core.cache.backends.filebased.FileBasedCache', diff -r dc9f449dea1b -r 63b29f1370c1 src/iconolab/static/iconolab/js/components/cutout/index.js --- a/src/iconolab/static/iconolab/js/components/cutout/index.js Fri Jun 10 17:07:14 2016 +0200 +++ b/src/iconolab/static/iconolab/js/components/cutout/index.js Mon Jun 13 17:33:11 2016 +0200 @@ -17,11 +17,15 @@ var paper = null; var pointData = []; var config = null; +var readOnly = false; var startPoint = null; var drawing_path = null; var canDraw = false; var rectZone = null; var PATH_COLOR = "#ff00ff"; +var READ_ONLY_STOKE = ""; +var READ_ONLY_FILL = ""; + var SELECTED_COLOR = "#ffff00"; var FIRST_NODE_COLOR = "#FF0000"; var HANDLE_SIZE = 6; @@ -32,6 +36,7 @@ var RECT_MODE ='RECT'; var drawingMode = RECT_MODE; //free var FREE_MODE = 'FREE'; +var availableModes = [RECT_MODE, FREE_MODE]; var getId = (function () { var cpt = 0; @@ -43,10 +48,56 @@ } }()); + + var pathToPoint = function (path) { - if (typeof path === "string") { return false; } + +}; + +var handleRectPath = function (path) { + if (readOnly) { + paper.path(path).attr({ stroke:'red', opacity: 0.6}); + return; + } + + var pathInfos = Snap.parsePathString(path); + drawing_path = paper.path(path); + drawing_path.attr({stroke:'white', opacity: 0.4}); + handlePathClosed(); }; +var handlePathClosed = function () { + if (drawing_path) { + drawing_path.drag(); + } +} + +var handleFreePath = function (path) { + + if (readOnly) { + + paper.path(path).attr({ + stoke: '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"; @@ -55,10 +106,6 @@ return; } - /*if (pathIsClosed) { - pointData.pop(); - }*/ - path += pointData[0].x + ',' + pointData[0].y; for (var i=0; i < pointData.length; i++) { @@ -210,6 +257,8 @@ var attachRectEvents = function (paper) { + if (readOnly) { return false; } + var startPosition = {}; var currentPosition = {}; /* add resizer */ @@ -267,13 +316,14 @@ paper.mouseup(function () { if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; } rectZone.drag(); + drawing_path = rectZone; canDraw = false; pathIsClosed = true; }); }; var attachPointEvents = function (paper) { - + if (readOnly) { return; } paper.click( function(e) { if (drawingMode === RECT_MODE) { return true; @@ -286,10 +336,32 @@ var API = { - setMode: function (mode) { - var availableMode = ['RECT', 'FREE']; - console.log("undefined", mode); - if (availableMode.indexOf(mode) !== -1) { + setPath: function (pathString) { + /* redraw the path */ + var pathInfos = pathString.split(';'); + if( availableModes.indexOf(pathInfos[1]) === -1) { + new Error("drawing mode: [" + pathInfos[1] + "] is not available"); + } + + this.setDrawingMode(pathInfos[1]); + if (pathInfos.length === 1) { + new Error("A drawing mode must be provided"); + } + + if (pathInfos.length >= 2) { + var path = pathInfos[0]; + if (pathInfos[1] === RECT_MODE) { + handleRectPath(path); + } + + if (pathInfos[1] === FREE_MODE) { + handleFreePath(path); + } + } + }, + + setDrawingMode: function (mode) { + if (availableModes.indexOf(mode) !== -1) { drawingMode = mode; } this.clear(); @@ -305,12 +377,19 @@ /*clear path is exists*/ if (drawing_path) { - drawing_path.remove(); - } - if (rectZone) { - rectZone.remove(); - } + console.log(drawingMode); + alert("rads"); + if (drawingMode === RECT_MODE) { + alert("radical ... "); + console.log("radical ... "); + console.log(drawing_path.getBBox().path.toString()); + } + //drawing_path.getBBox().path.toString() + drawing_path.remove(); + } + + pointData = []; startPoint = null; @@ -319,13 +398,36 @@ enablePoint = true; pathIsClosed = false; ENABLE_NEW_NODE = true; - /* clear path */ - }, getPath: function () { /* retourne le chemin */ - console.log(); + /* send path and BBox | implement edit and load path */ + var path = ""; + if (drawing_path) { + if (drawingMode === RECT_MODE) { + path = Snap.path.toAbsolute(drawing_path.getBBox().path).toString(); + } + else { + path = drawing_path.attr('d'); + } + } + /* save path should be normalized */ + //taille/10 + var xRatio = 1/7; + var yRatio = 1/4.3; + var transformMatrix = Snap.matrix(xRatio.toFixed(2), 0, 0, yRatio.toFixed(2), 0, 0); + console.log(transformMatrix); + console.log(path); + newPath = Snap.path.map(path,transformMatrix).toString(); + console.log(newPath); + test = paper.path(newPath); + console.log(test); + //should be normalize + + //[sx 0 0 sy 0 0]. One unit in the X and Y directions in the new coordinate system equals sx and sy units in the previous coordinate system, respectively. + + return path; } }; @@ -350,6 +452,7 @@ if (!mainImage) { new Error(config.wrapperId + "Can't be found ..."); } + cutCanvas.css({ position: 'absolute', top: '0px', @@ -357,9 +460,14 @@ marginLeft: 'auto', marginRight: 'auto', width: mainImage.width(), - height: mainImage.height() + height: mainImage.height(), + viewBox: '0 0 100 100' }); + if (typeof config.readOnly === 'boolean' && config.readOnly === true) { + readOnly = true; + } + paper = new Snap(cutCanvas.get(0)); /* handle drawin here */ diff -r dc9f449dea1b -r 63b29f1370c1 src/iconolab/templates/iconolab/fragment_draw.html --- a/src/iconolab/templates/iconolab/fragment_draw.html Fri Jun 10 17:07:14 2016 +0200 +++ b/src/iconolab/templates/iconolab/fragment_draw.html Mon Jun 13 17:33:11 2016 +0200 @@ -15,7 +15,7 @@

Retour

@@ -23,18 +23,55 @@ -
  • Enregister
    • - +
    + {% csrf_token %} + +
    +
    +
    {% thumbnail annotation.image.media "x800" crop="center" as im %} {% endthumbnail %}
    + +
    + +
    + {% thumbnail annotation.image.media "x100" crop="center" as im %} + + {% endthumbnail %} +
    + +
    + {% thumbnail annotation.image.media "x150" crop="center" as im %} + + {% endthumbnail %} +
    + +
    + {% thumbnail annotation.image.media "x200" crop="center" as im %} + + {% endthumbnail %} +
    + +
    + {% thumbnail annotation.image.media "x250" crop="center" as im %} + + {% endthumbnail %} +
    + +
    +
    @@ -57,18 +94,25 @@ data: { mode:"", isRect: true, + normalizePath: "", + readOnly: false }, init: function () { - this.mode = this.$options.MODE_RECT; + //this.mode = this.$options.MODE_RECT; this.drawingComponent = iconolab.initCutoutComponent({ wrapperId: '#iconolab-image-wrapper', - actionWrapper: '#action-wrapper' + actionWrapper: '#action-wrapper', + readOnly: false }); - - console.log("mode", this.mode); - this.drawingComponent.setMode(this.mode); + this.drawingComponent.setDrawingMode(this.mode); + //var rectPath = "M173,101L319,101L319,224L173,224Z;RECT"; + //var relPath = 'M137,62 L155,67 L163,77 L166,99 L161,113 L142,119 L129,114 L120,95 L116,79 L120,64 Z;FREE'; + //var zonePath = "M236,111 L268,112 L293,146 L293,182 L280,215 L254,220 L229,212 L205,198 L210,175 L207,143 L215,123 Z;FREE"; + //var transformMatrix = [];//en fonction de l'échelle + + //this.drawingComponent.setPath(relPath); }, methods: { @@ -76,18 +120,23 @@ setRectangleMode: function () { this.mode = this.$options.MODE_RECT; this.isRect = true; - this.drawingComponent.setMode(this.mode); - console.log("mode", this.mode); + }, + + showPreview: function () { + }, setFreeMode: function () { this.mode = this.$options.MODE_FREE; this.isRect = false; - this.drawingComponent.setMode(this.mode); + this.drawingComponent.setDrawingMode(this.mode); }, save: function () { console.log('drawingPath', this.drawingComponent.getPath()); + this.normalizePath = this.drawingComponent.getPath(); + console.log(this.normalizePath) + //this.$els.formFragment.submit(); }, clear: function () {