textgeo ok

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

@@ -47,7 +47,8 @@ define([
     "tools/linesgeo",
     "tools/ellipsegeo",
     "tools/rectanglegeo",
-    "tools/arrowgeo"
+    "tools/arrowgeo",
+    "tools/textgeo"
 ],
 function(_, Signal){
     // ----- Locale variables -----------------------------

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

+define(["paper", "jquery","adim/category"], function (paper, $, Category) {
+    // ----- Const ---------------------------------------
+    var TOOL_TYPE = "textgeo";
+
+    // ----- Locale variables -----------------------------
+    var edit = false;	 // is editing
+    var text = null;	 // the point text
+    var gText = null;    // the group
+    var input = null;	 // the input helper
+    var overlay = null;  // the overlay div used to catch mouse click when input is active
+
+    var _ro = false;     // local value of ReadOnly Status
+
+    // Events
+    var _events = {
+        annotationAdded: null,
+        annotationChanged: null,
+        annotationSelected: null
+    };
+
+    var hitOptions = {
+        type: 'point-text',
+        tolerance: 5,
+        fill: true
+    };
+
+    // Properties
+    var defaultProperties = {
+        comment: "",
+        category: "cat_geo_1",
+        fill: true
+    };
+
+    // ----- Initialisations ------------------------------
+    var _noop = function(){};
+
+    // ----- Item's event listeners -----------------------
+    function itemMouseDown(event) {
+        var textGroup = this;
+        textGroup.selected = true;
+        if (_events.annotationSelected && typeof _events.annotationSelected.dispatch === 'function') {
+            _events.annotationSelected.dispatch(textGroup);
+        }
+    }
+
+    var DRAG_MODES = {
+        FULL_DRAG: 1,
+        DRAG_HANDLE: 4
+    };
+    var _dragMode = null;
+    var _dragOpts = {};
+    var _dragModified = false;  // this is set to true if a drag event changed the item and need to emmit a change event
+    function setDragMode(mode, opts) {
+        if (! mode in DRAG_MODES) {
+            _dragMode = null;
+            _dragOpts = {};
+            _dragModified = false;
+        } else {
+            _dragMode = DRAG_MODES[mode];
+            _dragOpts = opts;
+        }
+    }
+
+    function itemMouseDrag(event) {
+        switch (_dragMode) {
+            case DRAG_MODES.DRAG_HANDLE:
+                if (_dragOpts.nameParts[1] === 'center')
+                    return;
+
+                var bounds = _dragOpts.item.bounds,
+                    height = (_dragOpts.nameParts[0] === 'top') ?
+                        bounds.bottom - event.point.y :
+                        event.point.y - bounds.top,
+                    fontSize =  height / 1.2,
+                    offset = [0, 0];
+                if (_dragOpts.nameParts[0] === 'bottom') {
+                    offset[1] = height - bounds.height;
+                }
+                if (fontSize > 9 && fontSize < 999) {
+                    setFontSize.call(_dragOpts.item, fontSize);
+                }
+                _dragOpts.item.translate(offset);
+            break;
+            case DRAG_MODES.FULL_DRAG:
+            default:
+                this.translate(event.delta);
+        }
+    }
+
+    function attachListeners(item) {
+        item.oGetSelected = function() {
+            return this.children[1].selected;
+//            for (var i = 0, l = this.children.length; i<l; i++) {
+//                if (!this.children.selected)
+//                    return false;
+//            }
+//            return true;
+        };
+        item.oSetSelected = function(selected) {
+            //this.children.map(function(c) {c.selected = selected});
+            this.children[1].selected = selected;
+        };
+
+//        item.data.prop = item.data.prop || {comment:""};
+//        item.data.prop.comment = item.data.prop.comment || "";
+
+        item.data.setDragMode = setDragMode;
+        item.data.itemMouseDrag = itemMouseDrag;
+
+//        item.onMouseDown = itemMouseDown;
+//        item.onMouseDrag = itemMouseDrag;
+
+    }
+
+    // ----- Functions ------------------------------------
+
+    function _startEdit(myText) {
+        if (edit) { _terminateEdit(false); }
+        if (_ro) return;
+
+        edit = true;
+        if (!input) {
+            input = $("<input>",
+                {
+                    type: "text",
+                    'class': "text-tool-input",
+                    placeholder: "Votre texte",
+                    maxlength: 128, size: 128,
+                    style: "display:none;position:absolute;top:0;left:0;padding:10px;border:0;border-radius:5px;background:rgba(255,255,255,0.75);"
+                }
+            )
+            .appendTo(paper.project.view.element.parentNode)
+            .on("blur", function(){ if(edit) _terminateEdit(); })
+            .on("keydown", function(event){ if(event.which === 27 || event.which == 13) _terminateEdit(); })
+            .autoGrowInput();
+
+            overlay = overlay || $("<div>").css({
+                    zIndex: 999,
+                    position: "fixed", display: "none",
+                    top: "-10px", left: "-10px",
+                    width: "5000px", height: "5000px"
+                })
+                .click(function(){ _terminateEdit() });
+            input.before(overlay);
+        }
+        myText.selected = false;
+        myText.visible = false;
+
+        var inputPoint = myText.children[1].point;
+        inputPoint = inputPoint.subtract(paper.view.bounds.point).multiply(paper.view.zoom);
+
+        var inputFontSize = myText.fontSize * paper.view.zoom;
+
+        myText.data.color = _getColor(defaultProperties.category);
+
+        input
+            .val(myText.data.content)
+            .css({
+                "fontSize": inputFontSize + "px",
+                "fontFamily": myText.font,
+                "color": myText.data.color,
+                "top": inputPoint.y - inputFontSize + 1 - 10,
+                "left": inputPoint.x - 1 - 10,
+                "zIndex": 1000
+            })
+            .show();
+        overlay.show();
+
+        var tester = input.nextAll("tester");
+        tester.css({
+            fontSize: input.css('fontSize'),
+            fontFamily: input.css('fontFamily'),
+            fontWeight: input.css('fontWeight'),
+            letterSpacing: input.css('letterSpacing')
+        });
+
+        tester.text( (myText.data.content === "") ? input.attr("placeholder") : myText.data.content);
+        input.width(tester.width()+30);
+
+        gText = myText;
+        setTimeout(function(){
+            input.focus();
+        },100);
+    }
+
+    /**
+     * Terminate the editing phase of the text item. The item is selected after editing
+     * if the parameter `selectAfter` is set to true (default).
+     * @param {boolean} [selectAfter=true] Select the text item after terminating the editing phase
+     * @private
+     */
+    function _terminateEdit(selectAfter) {
+        selectAfter = !(selectAfter === false);
+        edit = false;
+        if (gText) {
+            var textVal = input.val();
+            if (!textVal || textVal === "") {
+                gText.remove();
+                gText = null;
+            } else {
+                var isNewText = gText.data.content === "";
+                gText.data.content = textVal;
+                gText.children[0].content = textVal;
+                gText.children[1].content = textVal;
+                gText.visible = true;
+
+                gText.onPropertyChange = itemPropertyChange;
+
+                if(selectAfter)
+                    if (_events.annotationSelected && typeof _events.annotationSelected.dispatch === 'function') {
+                        _events.annotationSelected.dispatch(gText);
+                    }
+
+                if (isNewText) {
+                    attachListeners(gText);
+                    if (_events.annotationAdded && typeof _events.annotationAdded.dispatch === 'function') {
+                        _events.annotationAdded.dispatch(gText);
+                    }
+                } else {
+                    if (_events.annotationChanged && typeof _events.annotationChanged.dispatch === 'function') {
+                        _events.annotationChanged.dispatch(gText);
+                    }
+                }
+                gText.oSetSelected(selectAfter);
+                paper.project.view.draw();
+
+            }
+        }
+        overlay.hide();
+        input.val("").blur().hide();
+    }
+
+
+    function setTextColor(color) {
+        var textGroup = this;
+        var changed = textGroup.children[1].fillColor !== color;
+        textGroup.children[1].fillColor = color;
+        textGroup.data.color = color;
+        return changed;
+    }
+
+
+    function setFontSize(size) {
+        var textGroup = this;
+        var sw = size / 10;
+        if (sw < 3) { sw = 3; }
+        textGroup.children[0].fontSize = size;
+        textGroup.children[0].strokeWidth = sw;
+        textGroup.children[1].fontSize = size;
+    }
+
+    function getFontSize() {
+        return this.children[0].fontSize;
+    }
+
+    function setFontWidth(fontWidth) {
+
+    }
+
+    function getFontWidth() {
+        return "normal";
+    }
+
+    // ----- 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 (_ro) return;
+
+            var hitResult = paper.project.activeLayer.hitTest(event.point, hitOptions);
+            if (hitResult) {
+                var hitGroup = hitResult.item.parent;
+                _startEdit(hitGroup);
+            }
+            else {
+
+                var fontSize = paper.project.currentStyle.fontSize;
+                if (!edit) {
+                    // Start editing new text
+                    paper.project.deselectAll();
+
+                    var textPoint = event.point;
+
+                    var txtBg = new paper.PointText({
+                        point: textPoint,
+                        fillColor: 'white',
+                        strokeColor: 'white',
+                        strokeWidth: fontSize/6,
+                        strokeJoin: 'round',
+//                        shadowColor: 'black',
+//                        shadowBlur: 10,
+//                        shadowOffset: new paper.Point([5, 3]),
+                        content: ""
+                    });
+
+
+                    var c = paper.project.currentStyle.strokeColor || paper.project.currentStyle.fillColor;
+                    c = c.toCSS();
+
+                    var txtFg = new paper.PointText({
+                        point: textPoint,
+                        fillColor: c,
+                        strokeColor: c,
+                        strokeWidth: 0,
+                        content: ""
+                    });
+                    txtFg.on('doubleclick', function(){
+                        _startEdit(this.parent);
+                    });
+
+                    // Extend tool's item properties with default values
+                    var properties = {};
+                    for (var p in defaultProperties) {
+                        if (!properties.hasOwnProperty(p))
+                            properties[p] = defaultProperties[p];
+                    }
+
+                    gText = new paper.Group({
+                        children: [txtBg, txtFg],
+                        data: {
+                            type: TOOL_TYPE,
+                            setColor: setTextColor,
+                            setFill: _noop,
+                            setStrokeWidth: _noop,
+                            setFontSize: setFontSize,
+                            getFontSize: getFontSize,
+                            // Properties
+                            prop: properties,
+                            setCategory: _setCategory,
+                            getColorBgD: _getColorBgD,
+                            content: "",
+                            color: c
+                        }
+                    });
+                    gText.data.tId = "a" + gText._id;
+                    gText.data.content = "";
+                    _startEdit(gText);
+                } else {
+                    _terminateEdit();
+                }
+
+            }
+
+        }
+
+    };
+
+
+    function importJSON(jsonStr, layer, listening) {
+        var gText = layer.importJSON(jsonStr);
+
+        // Extend tool's item properties with default values
+        var properties = gText.data.prop;
+        for (var p in defaultProperties) {
+            if (!properties.hasOwnProperty(p))
+                properties[p] = defaultProperties[p];
+        }
+
+        $.extend(gText.data, {
+            setColor: setTextColor,
+            setFill: _noop,
+            setStrokeWidth: _noop,
+            setFontSize: setFontSize,
+            getFontSize: getFontSize,
+            prop: properties,
+            setCategory: _setCategory,
+            getColorBgD: _getColorBgD,
+        });
+        gText.onPropertyChange = itemPropertyChange;
+
+        gText.data.color = _getColor(gText.data.prop.category);
+        gText.style = {
+                    strokeColor: _getColorBg(gText.data.prop.category),
+                    fillColor: _getColor(gText.data.prop.category)
+                };
+        //gText.data.setColor(_getColor(gText.data.prop.category));
+
+        attachListeners(gText);
+        if (!!listening) {
+            gText.children[1].on('doubleclick', function(){
+                _startEdit(this.parent);
+            });
+        }
+        return gText;
+    }
+
+
+    function exportJSON(param) {
+        var wasSelected = this.selected;
+        this.selected = false;
+        var json = this.exportJSON({asString:false});
+
+        $.each(json[1].children, function(i, c) {
+            delete(c[1].leading);
+        });
+
+//        console.log(json);
+
+        json = (param && param.asString === false) ? json : JSON.stringify(json);
+
+        if (wasSelected) { this.selected = wasSelected; }
+        return json;
+    }
+
+    function _setRo(ro) {
+        if (ro !== _ro)
+            _ro = ro;
+        return _ro;
+    }
+
+    function itemPropertyChange(property, value) {
+        if (property === 'category') {
+            _setCategory.call(this, value);
+            this.style = {
+                fillColor: _getColor(value),
+                strokeColor: _getColorBg(value)
+            };
+            paper.view.draw();
+        }
+    }
+
+
+    // ----- Returned Module ------------------------------
+    return {
+        name: TOOL_TYPE,
+        tool: new paper.Tool(toolDef),
+        setRo: _setRo,
+        exportJSON: exportJSON,
+        importJSON: importJSON,
+        registerEvent: function(eventName, evt) { _events[eventName] = evt; }
+    };
+});
\ No newline at end of file

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

@@ -46,7 +46,7 @@
         <span class="icon icon-arrow-right"></span><span class="tool-text"> Flèche</span>
     </label>
     <label class="btn btn-lg-off btn-primary">
-        <input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="text">
+        <input type="radio" name="toolType" value="text" id="tool-text" data-tool-name="textgeo">
         <span class="icon-font"></span><span class="tool-text"> Texte</span>
     </label>
 {% endblock %}