fin comportement ellipse geo

adim_project/adim_app/static/_src/adim/env/geomo/env.js

@@ -28,9 +28,9 @@ define([
             io.events.annotableLoaded.add(function(annotableData){
                 // p.raster is a paper.Raster
                 view.events.annotationRemoved.add(function(annotation){
-                    if (annotation.data.type === 'rectanglegeo') {
+                    /*if (annotation.data.type === 'rectanglegeo') {
 
-                    }
+                    }*/
                 });
                 view.events.imageLoaded.add(function(p){
                     // Here we initilize tools that needs some image properties

adim_project/adim_app/static/_src/adim/tools.js

@@ -43,7 +43,8 @@ define([
     "tools/marker",
 
     // ----- GEOMO tool
-    "tools/rectanglegeo"
+    "tools/rectanglegeo",
+    "tools/ellipsegeo"
 ],
 function(_, Signal){
     // ----- Locale variables -----------------------------

adim_project/adim_app/static/_src/adim/tools/ellipsegeo.js

-define(["paper", "tools/Shape.class"], function (paper, Shape) {
+define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, Category) {
     // ----- Const ---------------------------------------
-    var TOOL_TYPE = "ellipse";
+    var TOOL_TYPE = "ellipsegeo";
+    var _tool;  // The tool itself
 
     // ----- Locale variables -----------------------------
+    var _startPoint = null;
+    var _editedRecGeo = null;
+    var _editedSegmentIdx = null;
+    var _drawingLine = null;
+    var terminateOnRelease = null;
+    var _recGeoChanged = null;
+    var create = true;
 
     // Events
     var _events = {
-        annotationAdded: null
+        annotationAdded: null,
+        annotationSelected: null,
+        annotationChanged: null
     };
 
-    var toolDef = new Shape(TOOL_TYPE, _events);
-    var exportJSON = toolDef.exportJSON;
-    delete(toolDef.exportJSON);
+    // Properties
+    var defaultProperties = {
+        comment: "",
+        category: "cat_geo_1",
+        fill: true
+    };
+
+    var hitOptions = {
+        segments: true,
+        stroke: true,
+        fill: false,
+        tolerance: 5,
+        bounds: false,
+        handles: true
+    };
+
+    // ----- Serialization ---------------------------------
+
+    function exportJSON(param) {
+        var json = this.exportJSON({asString: false});
+        return (param && param.asString) ? JSON.stringify(json) : json;
+    }
+
+    function importJSON(itemDef, layer, listening) {
+        // Sanitize data
+        var item = itemDef[1];
+        var itemData = item.data;
+        var curLayer = paper.project.activeLayer;
+        layer.activate();
+
+        // Keep copy of current category
+        var curCat = defaultProperties.category;
 
-    var importJSON = toolDef.importJSON;
-    delete(toolDef.importJSON);
+        //var from = new paper.Point(itemData.origin.from[1],itemData.origin.from[2]);
+        //var to = new paper.Point(itemData.origin.to[1], itemData.origin.to[2]);
+        //var ellgeo = createEllipseGeo({point: new paper.Point((from.x+to.x)/2,(from.y+to.y)/2), size: [to.x-from.x,to.y-from.y]}, itemData, listening);
+        var point = new paper.Point(itemData.origin.point[1], itemData.origin.point[2]);
+        var size = new paper.Point(itemData.origin.size[1], itemData.origin.size[2]);
+        var ellgeo = createEllipseGeo({point: point, size: size}, itemData, listening);
+        if (itemData.prop.category) {
+            _setCategory.call(ellgeo, itemData.prop.category);
+        }
+
+        // Restore states
+        curLayer.activate();
+        defaultProperties.category = curCat;
+
+        return ellgeo;
+    }
+
+
+    //var toolDef = new Shape('ellipse', _events);
 
     // ----- Initialisations ------------------------------
 
 
     // ----- Functions ------------------------------------
+    function createEllipseGeo(origin, config, eventListening) {
+
+        var newEllGeo = new paper.Shape.Ellipse({
+            point: origin.point,
+            size: origin.size
+        });
+        //new paper.Shape('ellipse', _events);
+
+        // Extend tool's item properties with default values
+        var properties = (config && typeof config.prop === 'object') ? config.prop : {};
+        for (var p in defaultProperties) {
+            if (!properties.hasOwnProperty(p))
+                properties[p] = defaultProperties[p];
+        }
+
+        newEllGeo.data = {
+            tId: "a" + newEllGeo._id,
+            type: TOOL_TYPE,
+
+            // Properties
+            prop: properties,
+
+            setCategory: _setCategory,
+            getColorBgD: _getColorBgD,
+
+            origin: origin,
+
+            // Mouse Event
+            itemMouseDrag: itemMouseDrag,
+            itemMouseUp: itemMouseUp,
+            itemMouseDown: itemMouseDown,
+            setDragMode: itemResize,
+        };
+
+        newEllGeo.itemMouseDown =itemMouseDown,
+        newEllGeo.onMouseDown = itemMouseDown;
+        newEllGeo.itemMouseDrag = itemMouseDrag;
+        newEllGeo.setDragMode = itemMouseDrag;
+        newEllGeo.onPropertyChange = itemPropertyChange;
+
+        newEllGeo.style = {
+            strokeColor: _getColor(properties.category),
+            strokeWidth: 7
+        };
+        if (properties.fill)
+            newEllGeo.style = {
+                fillColor: _getColorBg(properties.category),
+            };
+        newEllGeo._boundsSelected = true;
+
+        return newEllGeo;
+    }
+
+    function drawEllGeo(ellipsegeo, event) {
+        // data passed in prop obj
+        if (ellipsegeo.data) {
+            var category = ellipsegeo.data.prop.category || 'default';
+            var fill = ellipsegeo.data.prop.fill || "checked";
+        } else {
+            var category = 'default';
+            var fill = "checked";
+        }
+
+        var cat = Category.getCategory(category);
+        var color = cat && cat.color || "grey";
+        var colorbg = cat && cat.colorbg || "grey";
+
+        if (!_drawingLine) {
+            _drawingLine = new paper.Shape.Ellipse({
+                point: _startPoint,
+                size: event.delta
+            });
+            if (fill == "checked") {
+                _drawingLine.fillColor = colorbg;
+            }
+            _drawingLine.color = color;
+        }
+        else {
+            _drawingLine.remove();
+            _drawingLine = new paper.Shape.Ellipse({
+                point: _startPoint,
+                size: [event.point.x - _startPoint.x, event.point.y - _startPoint.y]
+            });
+        }
+    }
+
+    function _terminateCreate(event) {
+        if (_drawingLine) {
+            _drawingLine.remove();
+            _drawingLine = null;
+        }
 
+        var newEllGeo = createEllipseGeo({point: _startPoint, size: event.delta});
+        _events.annotationAdded.dispatch(newEllGeo);
+        _startPoint = null;
+        create = false;
+    }
+
+    function itemMouseDown(event) {
+            console.log("MouseDown");
+        var hitItem = this;
+        _editedRecGeo = this;
+        var hitResult = hitItem.hitTest(event.point, hitOptions);
+        hitItem.layer.activate();
+
+        paper.project.deselectAll();
+        hitItem.selected = true;
+        _events.annotationSelected.dispatch(hitItem);
+
+        _editedSegmentIdx = null;
+        if (hitResult){
+            console.log(hitResult.type);
+        }
+        if (hitResult && hitResult.type === 'segment') {
+            _editedSegmentIdx = hitResult.segment.index;
+        }
+
+        _recGeoChanged = false;
+        _events.annotationSelected.dispatch(hitItem);
+    }
+
+    function itemResize(event, hitItemArg) {
+            console.log("itemResize");
+        _editedSegmentIdx=hitItemArg;
+        _recGeoChanged = false;
+    }
+
+    function itemMouseDrag(event) {
+            console.log("itemMouseDrag");
+        // Handle only event forwarded by tools
+        if (!event.tool)
+            return;
+
+        if (_editedSegmentIdx !== null) {
+            var dstPoint = event.point.clone();
+            var deltaPoint = event.delta;
+            if (_editedSegmentIdx.nameParts[0] == "top"){
+                if (_editedSegmentIdx.nameParts[1] == "left"){
+                    this.size.width -= deltaPoint.x*2;
+                    this.size.height -= deltaPoint.y*2;
+                } else {
+                    this.size.width += deltaPoint.x*2;
+                    this.size.height -= deltaPoint.y*2;
+                }
+            } else {
+                if (_editedSegmentIdx.nameParts[1] == "left"){
+                    this.size.width -= deltaPoint.x*2;
+                    this.size.height += deltaPoint.y*2;
+                } else {
+                    this.size.width += deltaPoint.x*2;
+                    this.size.height += deltaPoint.y*2;
+                }
+            }
+            this.data.origin.size.x = this.size.width;
+            this.data.origin.size.y = this.size.height;
+        } else {
+            this.translate(event.delta);
+            this.data.origin.point.x +=event.delta.x;
+            this.data.origin.point.y +=event.delta.y;
+        }
+        _recGeoChanged = true;
+
+    }
+
+    function itemMouseUp(event) {
+        if (!event.tool)  // catches only tool's events
+            return;
+        if (_recGeoChanged) {
+            _events.annotationChanged.dispatch(this);
+        }
+        _recGeoChanged = false;
+        _editedSegmentIdx = null;
+    }
+
+    function itemPropertyChange(property, value) {
+        if (property === 'category') {
+            _setCategory.call(this, value);
+            this.style = {
+                fillColor: _getColorBg(value),
+                strokeColor: _getColor(value)
+            };
+            paper.view.draw();
+        }
+    }
+
+    function cancelCreate() {
+        if (_drawingLine)
+            _drawingLine.remove();
+        _startPoint = null;
+        create = false;
+    }
+
+    // ----- Functions ------------------------------------
+
+    function _setCategory(catId) {
+        defaultProperties.category = catId;
+    }
+
+    function _getColor(catId) {
+        var category = Category.getCategory(catId),
+            color = (category && category.color) || "#000000";
+        return color;
+    }
+
+    function _getColorBg(catId) {
+        var category = Category.getCategory(catId),
+            color = (category && category.colorbg) || "#000000";
+        return color;
+    }
+
+    function _getColorBgD() {
+        if (this.prop){
+            var category = Category.getCategory(this.prop.category),
+            color = (category && category.colorbg) || "#000000";
+            return color;
+        } else {
+            return "#000000";
+        }
+    }
+
+    // ----- Tool Def -------------------------------------
+    var toolDef = {
+
+        onMouseDown: function(event) {
+            if (_startPoint) {
+                if (_drawingLine && !terminateOnRelease) {
+                    _terminateCreate();
+                }
+            } else {
+                var hitResult = paper.project.activeLayer.hitTest(event.point, hitOptions);
+                if (!hitResult) {
+                    paper.project.deselectAll();
+                    _events.annotationSelected.dispatch(null);
+
+                    if (!_startPoint) {
+                        _editedSegmentIdx = _editedRecGeo = null;
+                        create = true;
+                        if (_drawingLine)
+                            _drawingLine.remove();
+                        _drawingLine = null;
+                        _startPoint = event.point;
+                        terminateOnRelease = false;
+                    }
+                } else {
+                    hitResult.item.onMouseDown(event);
+                }
+            }
+        },
+
+        onMouseDrag: function(event) {
+            if (create && _startPoint) {
+                terminateOnRelease = true;
+                drawEllGeo(this,event);
+            }
+        },
+
+        onMouseMove: function(event) {
+            if (create && _startPoint) {
+                drawEllGeo(this,event);
+            }
+        },
+
+        onMouseUp: function(event) {
+            if (_startPoint) {
+                if (_drawingLine && terminateOnRelease) {
+                    drawEllGeo(this,event);
+                    _terminateCreate(event);
+                }
+            }
+            _editedSegmentIdx = _editedRecGeo = null;
+        },
+
+        onKeyDown: function(event) {
+            switch (event.key) {
+
+                case "escape":
+                    if (create)
+                        cancelCreate();
+                break;
+            }
+        }
+    };
 
     // ----- Returned Module ------------------------------
+    _tool = new paper.Tool(toolDef);
     return {
         name: TOOL_TYPE,
-        tool: new paper.Tool(toolDef),
+        tool: _tool,
         exportJSON: exportJSON,
         importJSON: importJSON,
         registerEvent: function(eventName, evt) { _events[eventName] = evt; }

adim_project/adim_app/static/_src/adim/tools/rectanglegeo.js

@@ -104,7 +104,7 @@ define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, C
 
         newRecGeo.style = {
             strokeColor: _getColor(properties.category),
-            strokeWidth: 25
+            strokeWidth: 7
         };
         if (properties.fill)
             newRecGeo.style = {

adim_project/adim_app/static/_src/less/adim-env.css

@@ -127,3 +127,28 @@
   border-right: solid 1px #c9c9c9;
   width: 25px;
 }
+.adim-env-geomo #side-col {
+  width: 350px;
+}
+.adim-env-geomo #side-col.collapsed {
+  margin: 0 -375px 0 25px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-1 {
+  width: 250px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-1.collapsed {
+  margin: 0 -275px 0 25px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-2 {
+  width: 450px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-2.collapsed {
+  margin: 0 -475px 0 25px;
+}
+.adim-env-geomo .adim-view-review #alt-side-col-panel-group {
+  margin-right: 0;
+  padding-right: 0;
+}
+.adim-env-geomo .adim-view-review #side-col-panel-group #annotation-markers-panel {
+  display: none !important;
+}

adim_project/adim_app/static/_src/less/adim-env.less

@@ -139,3 +139,34 @@
     }
 
 }
+
+.adim-env-geomo {
+    #side-col {
+        .sidecol-width(@anodate-sidecol-width);
+    }
+    .adim-view-review {
+        #side-col {
+            &.col-sm-1 {
+                .sidecol-width(250px);
+            }
+            &.col-sm-2 {
+                .sidecol-width(450px);
+            }
+        }
+
+        #alt-side-col-panel-group {
+            //width: 50% !important;
+            //display: block !important;
+            margin-right: 0;
+            padding-right: 0;
+        }
+
+        #side-col-panel-group {
+            //width: 50% !important;
+
+            #annotation-markers-panel {
+                display: none !important;
+            }
+        }
+    }
+}
\ No newline at end of file

adim_project/adim_app/static/_src/less/adim.css

@@ -3587,6 +3587,31 @@ canvas.cursor-tool-arrow2 {
   border-right: solid 1px #c9c9c9;
   width: 25px;
 }
+.adim-env-geomo #side-col {
+  width: 350px;
+}
+.adim-env-geomo #side-col.collapsed {
+  margin: 0 -375px 0 25px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-1 {
+  width: 250px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-1.collapsed {
+  margin: 0 -275px 0 25px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-2 {
+  width: 450px;
+}
+.adim-env-geomo .adim-view-review #side-col.col-sm-2.collapsed {
+  margin: 0 -475px 0 25px;
+}
+.adim-env-geomo .adim-view-review #alt-side-col-panel-group {
+  margin-right: 0;
+  padding-right: 0;
+}
+.adim-env-geomo .adim-view-review #side-col-panel-group #annotation-markers-panel {
+  display: none !important;
+}
 .nav .nav-divider {
   height: 1px;
   margin: 9px 0;

adim_project/templates/adim/env/geomo/annotation.html

@@ -34,7 +34,7 @@
         <span class="icon-line"></span><span class="tool-text"> Lignes</span>
     </label>
     <label class="btn btn-lg-off btn-primary">
-        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipse">
+        <input type="radio" name="toolType" value="ellipse" id="tool-ellipse" data-tool-name="ellipsegeo">
         <span class="icon icon-elipse"></span><span class="tool-text"> Cercle</span>
     </label>
     <label class="btn btn-lg-off btn-primary">