linesgeo ok

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

@@ -44,6 +44,7 @@ define([
 
     // ----- GEOMO tool
     "tools/drawinggeo",
+    "tools/linesgeo",
     "tools/ellipsegeo",
     "tools/rectanglegeo"
 ],

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

+define(["paper", "tools/Shape.class","adim/category"], function (paper, Shape, Category) {
+    // ----- Const ----------------------------------------
+    var TOOL_TYPE = 'linesgeo';
+
+    // ----- Local variables ------------------------------
+    var _path = null;
+    var _drawing = false;
+    var _editing = false;
+    var _segment = null;
+    var _terminateThreshold = 5; // minimum distance otherwise terminate drawing
+    var _changed = false;
+
+
+    var _mousePos = null;
+    // Events
+    var _events = {
+        annotationAdded: null,
+        annotationChanged: null
+    };
+
+    var defaultProperties = {
+        comment: "",
+        category: "cat_geo_1",
+        fill: false
+    };
+
+    // ----- Listeners ------------------------------------
+
+
+    // -----  Functions -----------------------------------
+
+    function exportJSON(param) {
+        var json = this.exportJSON({asString:false});
+        delete(json[1].fontFamily);
+        delete(json[1].font);
+        delete(json[1].fontSize);
+        delete(json[1].leading);
+        return (param && param.asString) ? JSON.stringify(json) : json;
+    }
+
+    function importJSON(itemDef, layer, listening) {
+        var item = layer.importJSON(itemDef);
+        var properties = item.data.prop;
+        for (var p in defaultProperties) {
+            if (!properties.hasOwnProperty(p))
+                properties[p] = defaultProperties[p];
+        }
+        item.data.prop=properties;
+        item.data.setCategory= _setCategory;
+        item.data.getColorBgD= _getColorBgD;
+        attachListeners(item);
+        return item;
+    }
+
+    function attachListeners(item) {
+        // Extend item properties with default values
+        item.data.prop = (typeof item.data.prop === 'object') ? item.data.prop : {};
+        for (var p in defaultProperties) {
+            if (!item.data.prop.hasOwnProperty(p))
+                item.data.prop[p] = defaultProperties[p];
+        }
+
+        item.onPropertyChange = itemPropertyChange;
+    }
+
+    function itemPropertyChange(property, value) {
+        if (property === 'fill') {
+            this.closed = value;
+            paper.view.draw();
+        } else if (property === 'category') {
+            _setCategory.call(this, value);
+            if (this.data.prop.fill) {
+                this.style = {
+                    fillColor: _getColorBg(value),
+                    strokeColor: _getColor(value)
+                };
+            }else{
+                this.style = {
+                    strokeColor: _getColor(value)
+                };
+            }
+            paper.view.draw();
+        }
+    }
+
+    function _terminateDrawing() {
+        _mousePos = null;
+
+        if (_segment) { _segment.remove(); }
+        _drawing = false;
+        if (_path.length > _terminateThreshold) {
+            var newPath = _path.clone();
+            //newPath.closed = true;
+            newPath.style = paper.project.currentStyle;
+            newPath.strokeCap = 'round';
+            newPath.strokeJoin = 'round';
+            newPath.fillColor = null;
+            newPath.data.type = TOOL_TYPE;
+            newPath.data.tId = "a" + newPath._id;
+            var properties = {};
+            for (var p in defaultProperties) {
+                if (!properties.hasOwnProperty(p))
+                    properties[p] = defaultProperties[p];
+            }
+            newPath.data.prop=properties;
+            newPath.data.setCategory= _setCategory;
+            newPath.data.getColorBgD= _getColorBgD;
+            attachListeners(newPath);
+
+            newPath.selected = true;
+            if (typeof _events.annotationSelected.dispatch === 'function') {
+                _events.annotationSelected.dispatch(newPath);
+            }
+
+            if (typeof _events.annotationAdded.dispatch === 'function') {
+                _events.annotationAdded.dispatch(newPath);
+            }
+        }
+        _path.remove();
+    }
+
+
+
+    // ----- 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 hitOptSelected = {
+        segments: true,
+        stroke: true,
+        tolerance: 5
+    };
+    var toolDef = {
+        onMouseDown: function(event) {
+            if (!_drawing) {
+                var hitSelected = paper.project.activeLayer.hitTest(event.point, hitOptSelected);
+                if (hitSelected && hitSelected.item && hitSelected.item.selected &&
+                    hitSelected.item.data.type === TOOL_TYPE) {
+                    _path = hitSelected.item;
+//                    _path.opacity
+                    //console.log(hitSelected);
+                    // Click on the stroke of a selected path
+                    if (hitSelected.type === 'stroke') {
+                        var loc = hitSelected.location;
+                        _segment = _path.insert(loc.index + 1, event.point);
+                        _editing = true;
+                    } else if (hitSelected.type === 'segment') {
+                        if (event.modifiers.option) {
+                            hitSelected.segment.remove();
+                            _events.annotationChanged.dispatch(hitSelected.item);
+                        } else {
+                            _segment = hitSelected.segment;
+                            _editing = true;
+                        }
+                    }
+                } else {
+
+                    // Start a new Drawing
+                    paper.project.deselectAll();
+                    _path = new paper.Path({
+                        strokeColor: paper.project.currentStyle.strokeColor || paper.project.currentStyle.fillColor,
+                        fillColor: null,
+                        strokeCap: 'round',
+                        strokeJoin: 'round'
+                    });
+//                    _path.strokeColor = paper.project.currentStyle.strokeColor || paper.project.currentStyle.fillColor;
+//                    _path.fillColor = null;
+                    _drawing = true;
+                    _path.add(event.point);
+                }
+            }
+            else if (_path) {
+                if (event.point.subtract(event.lastPoint).length < _terminateThreshold) {
+                    _terminateDrawing();
+                    return;
+                }
+                if (_segment) { _segment.remove(); }
+                _path.add(event.point);
+            }
+        },
+
+        onMouseMove: function(event) {
+            if (_drawing) {
+                _mousePos = event.point;
+                if (_segment) { _segment.remove(); }
+                _segment = new paper.Path(event.downPoint, event.point);
+                _segment.strokeColor = paper.project.currentStyle.strokeColor || paper.project.currentStyle.fillColor;
+//                _segment.dashArray = [10, 4];
+            } else if (_editing) {
+                if (_segment) {
+                    _changed = true;
+                    _segment.point = event.point;
+                }
+            }
+        },
+
+        onMouseUp: function(event) {
+            if (_editing) {
+                _editing = false;
+                if (_segment) {
+                    if (_changed) {
+                        _changed = false;
+                        _events.annotationChanged.dispatch(_segment.path);
+                    }
+                    _segment = null;
+                }
+            }
+        },
+
+        onKeyDown: function(event) {
+            switch (event.key) {
+                case 'enter':
+                    if(_drawing && _path) {
+                        if (_mousePos)
+                            _path.add(_mousePos);
+                        _terminateDrawing();
+                    }
+                break;
+
+                case 'escape':
+                    if (_drawing && _path)
+                        _terminateDrawing();
+                break;
+            }
+        }
+    };
+
+    // ----- Returned Module ------------------------------
+    return {
+        name: TOOL_TYPE,
+        tool: new paper.Tool(toolDef),
+        registerEvent: function(eventName, evt) { _events[eventName] = evt; },
+        exportJSON: exportJSON,
+        importJSON: importJSON
+        /*listeners: {
+            onToolActivated: onToolActivated
+        }*/
+    };
+});
\ No newline at end of file

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

@@ -42,7 +42,7 @@
         <span class="icon icon-rectangle"></span><span class="tool-text"> Rectangle</span>
     </label>
     <label class="btn btn-lg-off btn-primary">
-        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrow">
+        <input type="radio" name="toolType" value="arrow" id="tool-arrow" data-tool-name="arrowgeo">
         <span class="icon icon-arrow-right"></span><span class="tool-text"> Flèche</span>
     </label>
     <label class="btn btn-lg-off btn-primary">