Changeset 32721


Ignore:
Timestamp:
01/07/19 15:12:19 (23 months ago)
Author:
ak19
Message:

Fixed selection bug and added colour, thickness and opacity change to history.

Location:
gs3-extensions/map-editor/DrawingManager
Files:
5 added
3 edited

Legend:

Unmodified
Added
Removed
  • gs3-extensions/map-editor/DrawingManager/historyManager.js

    r32710 r32721  
    11var prevOverlays = [];
    22
    3 function undoMovement() {
    4     console.log("*** undoMovement called");
     3function undo() {
     4
    55    for (var i = 0; i < overlays.length; i++) {
    66        overlays[i].setMap(null);
    77
    88    }
    9    
    10     overlays = [];
    11    
    12     var prev_overlay = prevOverlays.pop();
    13    
    14     for (var i = 0; i < prev_overlay.length; i++) {
    15         overlays[i] = prev_overlay[i];
    16         overlays[i].setMap(map);
    17     }
     9    if (prevOverlays.length != 0){
     10        overlays = [];
     11        console.log(prevOverlays);
     12        var prev_overlay = prevOverlays.pop();
     13       
     14        for (var i = 0; i < prev_overlay.length; i++) {
     15            overlays[i] = prev_overlay[i];
     16            overlays[i].setMap(map);
     17        }
     18       
     19    }
     20   
     21    //Deactivated at the moment
     22    if(enableSelectionFeature){
     23        selectedShapes = [];
     24        var i = 0;
     25        var lastEntry = prevOverlays[prevOverlays.length-1][i];
     26        console.log(prevOverlays[prevOverlays.length-1].length);
     27       
     28        for(var i = 0; i < lastEntry.length; i++){
     29            selectedShapes.push(prevOverlays)
     30            console.log("comes here");
     31        }
     32       
     33    }
     34   
    1835   
    1936}
     
    4360    var strokeOpacity = polyline.strokeOpacity;
    4461    var strokeWeight  = polyline.strokeWeight;
    45    
    4662    var clone_path    = clonePath(path);
     63    //var editable      = rect.editable;
    4764   
    4865    var clone_polyline = new google.maps.Polyline({
     
    5168        strokeOpacity: strokeOpacity,
    5269        strokeWeight: strokeWeight,
    53         path: clone_path
     70        path: clone_path,
     71        draggable: true,
     72        editable: false
    5473    });
    5574   
     
    6887    var fillColor     = polygon.fillColor;
    6988    var fillOpacity   = polygon.fillOpacity;
    70    
    7189    var clone_path    = clonePath(path);
     90    //var editable      = rect.editable;
    7291   
    7392    var clone_polygon = new google.maps.Polygon({
     
    7897        fillColor: fillColor,
    7998        fillOpacity: fillOpacity,
    80         path: clone_path
     99        path: clone_path,
     100        draggable: true,
     101        editable: false
    81102    });
    82103   
     
    94115    var fillOpacity   = rect.fillOpacity;
    95116    var bounds        = rect.getBounds();
     117    //var editable      = rect.editable;
    96118   
    97119    var clone_rect = new google.maps.Rectangle({
     
    101123        fillColor: fillColor,
    102124        fillOpacity: fillOpacity,
    103         bounds: bounds
     125        bounds: bounds,
     126        draggable: true,
     127        editable: false
    104128    });
    105129   
     
    118142    var center        = circ.center;
    119143    var radius        = circ.radius;
     144    //var editable      = rect.editable;
    120145   
    121146    var clone_circ = new google.maps.Circle({
     
    126151        fillOpacity: fillOpacity,
    127152        center: center,
    128         radius: radius
     153        radius: radius,
     154        draggable: true,
     155        editable: false
    129156    });
    130157   
     
    161188}
    162189
     190function overlayItemIsShape(overlay_item)
     191{
     192    var type = overlay_item.type;
     193   
     194    is_shape = (type === google.maps.drawing.OverlayType.POLYLINE)
     195     || (type === google.maps.drawing.OverlayType.POLYGON)
     196     || (type === google.maps.drawing.OverlayType.RECTANGLE)
     197     || (type === google.maps.drawing.OverlayType.CIRCLE);
     198     
     199     return is_shape;
     200}
     201
    163202function historyOverlayPush()
    164203{
    165     console.log("historyOverlayPush()");
     204    console.log("comes here");
    166205    var overlays_copy = [];
    167206    for (var i = 0; i<overlays.length; i++) {
    168207        var clone_shape = cloneShape(overlays[i]);
    169        
    170         google.maps.event.addListener(clone_shape, 'click', function () {
    171             setSelection(clone_shape);
    172         });
    173            
     208        if (overlayItemIsShape(clone_shape)) {
     209            addShapeListeners(clone_shape,null); // don't have an overlay event!
     210        }
     211        else {
     212            addMarkerListeners(clone_shape,null); // don't have an overlay event!
     213        }
    174214        overlays_copy[i] = clone_shape;
    175        
    176215    }
    177216   
  • gs3-extensions/map-editor/DrawingManager/index.html

    r32711 r32721  
    1818    <button onclick="deleteAllShape()" accesskey="c">Clear All</button>
    1919    <button onclick="deleteSelectedShape()" accesskey="b">Delete Selected</button>
    20     <button onclick="polygonGetPath()" accesskey="q">Get Path</button>
    21     <button onclick="undoMovement()" accesskey="n">Undo</button>
     20    <button onclick="printHistory()" accesskey="q">Print History</button>
     21    <button onclick="undo()" accesskey="n">Undo</button>
    2222    <button onclick="redoMovement()" accesskey="n">Redo</button>
    2323   
  • gs3-extensions/map-editor/DrawingManager/index.js

    r32711 r32721  
    66var selectionPass = true;
    77var chosen;
    8 
    9 var overlays_copy_obj = {};
    10 
    11 var prevEdge = {
    12     east: "",
    13     north: "",
    14     south: "",
    15     west: ""
    16 }
    17 var nextEdge = {
    18     east: "",
    19     north: "",
    20     south: "",
    21     west: ""
    22 }
    23 var prevVertex = {
    24     lat: "",
    25     lng: ""
    26 };
    27 var nextVertex = {
    28     lat: "",
    29     lng: ""
    30 };
     8var enableSelectionFeature = false;
     9var beingDragged = false;
     10
     11
    3112var deselectedLog = []
    3213var selectedShapesLog = [];
     
    3516var prevLog = [];
    3617var nextLog = [];
    37 
    38 
    39 
    40 
    4118var dragged = 0;
    4219var colors = ['#1E90FF', '#FF1493', '#4B0082', '#32CD32', '#FF8C00', '#000000'];
     
    6239
    6340
     41
    6442$(document).ready(function() {
    6543    //Update thickness
     
    8664        setSelectedOpacity(opacityValue);
    8765    }
     66   
     67    document.getElementById("thicknessRange").addEventListener("mousedown", shapeSpecsChange);
     68    document.getElementById("colourOpacity").addEventListener("mousedown", shapeSpecsChange);
     69    document.getElementById("color-palette1").addEventListener("mousedown", shapeSpecsChange);
    8870});
    8971
    90 
    91 
    92 ////////////////////////////////////////////////////////////////////////////////////////
     72function shapeSpecsChange() {
     73    if (selectedShapes.length > 0) {
     74        historyOverlayPush();
     75
     76    }
     77}
     78
    9379function makeColorButton(color) {
    9480    var button = document.createElement('span');
     
    170156    google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {
    171157       
    172        
     158        console.log(e)
    173159       
    174160        historyOverlayPush();
     
    177163        var newShape = e.overlay;
    178164        newShape.type = e.type;
    179 
    180    
     165       
     166        //historyOverlayPush();
    181167       
    182168        if (e.type !== google.maps.drawing.OverlayType.MARKER) {
    183 
    184             // Switch back to non-drawing mode after drawing a shape.
    185             //drawingManager.setDrawingMode(null);
    186 
    187             // Add an event listener that selects the newly-drawn shape when the user
    188             // mouses down on it.
    189             google.maps.event.addListener(newShape, 'click', function (e) {
    190 
    191                 vertexAndPolyDel(e, newShape);
    192                 dragFired = false;
    193                 return;
    194 
    195             });
    196 
    197             //Stores past event information
    198             google.maps.event.addListener(newShape, 'dragstart', function () {
    199                 dragStartFunction(e, newShape);
    200             });
    201 
    202             //Store information after the event ends
    203             google.maps.event.addListener(newShape, 'dragend', function () {
    204                 historyOverlayPush();
    205                 dragEndFunction(e, newShape);
    206             });
    207 
    208             //Add an event listener to select a shape if the mouse hovers over it
    209             google.maps.event.addListener(newShape, 'mousedown', function (e) {
    210                 if (drawingManager.drawingMode == null) {
    211                     setSelection(newShape, e);
    212                     dragFired = false;
    213                 }
    214             });
     169            addShapeListeners(newShape,e);
    215170            setSelection(newShape, e);
    216171        } else {
    217             //cLICK EVENT IF A MARKER IS CREATED
    218             google.maps.event.addListener(newShape, 'click', function (e) {
    219                 setSelection(newShape, e);
    220             });
     172           
     173            addMarkerListeners(newShape,e);
    221174            setSelection(newShape, e);
    222175        }
    223176    });
    224 
    225     //Deletes a vertex if clicked on it
    226     function vertexAndPolyDel(e, newShape) {
    227         var vertex = e.vertex;
    228 
    229         if (e.vertex !== undefined) {
    230             if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
    231                 var path = newShape.getPaths().getAt(e.path);
    232                 path.removeAt(e.vertex);
    233                 if (path.length < 3) {
    234                     newShape.setMap(null);
    235                 }
    236             }
    237             if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
    238                 var path = newShape.getPath();
    239                 path.removeAt(e.vertex);
    240                 if (path.length < 2) {
    241                     newShape.setMap(null);
    242                 }
    243             }
    244         }
    245     }
    246 
    247    
    248     var i = 0;
    249 
    250    
    251177
    252178    //Clears selection if clicked on the map when shift is not presseed
     
    256182            if (chosen !== null) {
    257183                deselectedLog.push("deselected")
    258                 updateHistory(deselectedLog);
    259184                deselectedLog = [];
    260185                chosen = null;
     186                selectedShape = null;
    261187
    262188            }
     
    281207            drawingManager.setDrawingMode('rectangle');
    282208        } else if (event.code == 'KeyQ') {
    283             polygonGetPath();
     209            printHistory();
    284210        }
    285211        //                  console.log(event.code);
     
    306232}
    307233
    308 
     234    //Deletes a vertex if clicked on it
     235    function vertexAndPolyDel(e, newShape) {
     236        var vertex = e.vertex;
     237
     238        if (e.vertex !== undefined) {
     239            if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
     240                var path = newShape.getPaths().getAt(e.path);
     241                path.removeAt(e.vertex);
     242                if (path.length < 3) {
     243                    newShape.setMap(null);
     244                }
     245            }
     246            if (newShape.type === google.maps.drawing.OverlayType.POLYLINE) {
     247                var path = newShape.getPath();
     248                path.removeAt(e.vertex);
     249                if (path.length < 2) {
     250                    newShape.setMap(null);
     251                }
     252            }
     253        }
     254    }
     255   
     256function addMarkerListeners(newShape,e)
     257{
     258    //cLICK EVENT IF A MARKER IS CREATED
     259            google.maps.event.addListener(newShape, 'click', function (e) {
     260                setSelection(newShape, e);
     261            });
     262}
     263function addShapeListeners(newShape,e)
     264{
     265        // Switch back to non-drawing mode after drawing a shape.
     266            //drawingManager.setDrawingMode(null);
     267
     268            // Add an event listener that selects the newly-drawn shape when the user
     269            // mouses down on it.
     270            google.maps.event.addListener(newShape, 'click', function (e) {
     271                vertexAndPolyDel(e, newShape);
     272                console.log(e.edge);
     273            });
     274
     275            google.maps.event.addListener(newShape, 'dragstart', function () {
     276                beingDragged = true;
     277                historyOverlayPush();
     278            });
     279           
     280            google.maps.event.addListener(newShape, 'dragend', function () {
     281                beingDragged = false;
     282            });
     283           
     284            //Store information after the event ends
     285            google.maps.event.addListener(newShape, 'bounds_changed', function () {
     286                console.log("bounds_changed");
     287                if (beingDragged == false){
     288                    historyOverlayPush();
     289                }
     290            });
     291                       
     292            google.maps.event.addListener(newShape, 'resize', function () {
     293                console.log("lmao");
     294                //historyOverlayPush();
     295                   
     296            });
     297
     298            //Add an event listener to select a shape if the mouse hovers over it
     299            google.maps.event.addListener(newShape, 'mousedown', function (e) {
     300                if (drawingManager.drawingMode == null) {
     301                    setSelection(newShape, e);
     302                }
     303            });
     304}
    309305function clearSelection() {
    310306        if (selectedShape) {
     
    326322        if (shape.type !== 'marker') {
    327323            if (shiftKeyPressed == false) {
    328                 //if (e.vertex == undefined) {
    329                     console.log("**** e.vertex = " + e.vertex);
    330                    
    331                 if ((shape.type != google.maps.drawing.OverlayType.POLYLINE)
    332                     && (shape.type != google.maps.drawing.OverlayType.POLYGON)) {
     324                if (e.vertex == undefined) {   
     325                //if ((shape.type != google.maps.drawing.OverlayType.POLYLINE)
     326                    //&& (shape.type != google.maps.drawing.OverlayType.POLYGON)) {
    333327                    clearSelection();
    334328                    shape.setEditable(true);
     
    374368            if (dragFired == false) {
    375369                selectedShapesLog.push("selected", shiftKeyPressed, selectedShape)
    376                 updateHistory(selectedShapesLog);
    377370                chosen = selectedShape;
    378371            }
     
    382375        selectedShapesLog = [];
    383376    }
    384    
    385    
     377       
    386378//Set selected thickness
    387379function setSelectedThickness(sWeight) {
     
    399391
    400392    if (selectedShapes.length > 0) {
    401         //historyOverlayPush();
    402393        for (var i = 0; i < selectedShapes.length; i++) {
    403394            selectedShapes[i].set('fillOpacity', fOpacity);
     
    409400function setSelectedShapeColor(color) {
    410401    if (selectedShapes.length > 0) {
    411         historyOverlayPush();
    412402        for (var i = 0; i < selectedShapes.length; i++) {
    413403            selectedShapes[i].set('fillColor', color);
     
    432422        selectColor(fCol);
    433423    }
    434 }
    435 
    436 
    437 
    438 function undoMovementDragSelection() {
    439     var lastItem = prevLog[prevLog.length - 1];
    440 
    441     //If history array is not empty
    442     if (prevLog.length !== 0) {
    443         if (lastItem[0] = "dragStart") {
    444             //If the array has more than one index (polygons and polylines)
    445             if (lastItem[1] == ("polygon") || lastItem[1] == ("polyline")) {
    446                 nextLog.push(lastItem);
    447                 selectedShape.setPath(lastItem[2]);
    448 
    449                 //If the array has only one index(rectangles and circles)
    450             } else {
    451                 nextLog.push(lastItem);
    452                 selectedShape.setBounds(lastItem[2]);
    453             }
    454         } else if (lastItem[0] = "selected") {}
    455         else if (lastItem[0] = "deselected") {}
    456         undoPressed = false;
    457         undoPressed = 0;
    458         prevLog.pop();
    459     }
    460 
    461424}
    462425
     
    492455}
    493456
    494 function dragStartFunction(e, selectedShape) {
    495     var newShape = e.overlay;
    496     newShape.type = e.type;
    497     if (selectedShape) {
    498         var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
    499         var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
    500 
    501         if (polyL || polyG) {
    502             var latLngi = []
    503             var lati,
    504             lngi;
    505             for (var i = 0; i < selectedShape.getPath().length; i++) {
    506                 lati = selectedShape.getPath().getAt(i).lat();
    507                 lngi = selectedShape.getPath().getAt(i).lng();
    508                 //console.log("Vertex number",i, "'s latitude is", lati, "and longitude is", lngi);
    509                 prevVertex = {
    510                     lat: lati,
    511                     lng: lngi
    512                 };
    513                 latLngi.push(prevVertex);
    514             }
    515             prevShape.push("dragStart", selectedShape.type, latLngi);
    516         } else {
    517             prevEdge = {
    518                 east: selectedShape.getBounds().ea.l,
    519                 north: selectedShape.getBounds().la.l,
    520                 south: selectedShape.getBounds().la.j,
    521                 west: selectedShape.getBounds().ea.j
    522             }
    523             prevShape.push("dragStart", selectedShape.type, prevEdge);
    524         }
    525 
    526         var lastItem = nextLog[nextLog.length - 1];
    527         if (lastItem[0] !== "dragEnd") {
    528             prevLog.push(nextLog[nextLog.length - 1]);
    529         }
    530 
    531         prevLog.push(prevShape);
    532         prevShape = [];
    533         nextLog = [];
    534         chosen = selectedShape;
    535         dragFired = true;
    536     }
    537 }
    538 
    539 function dragEndFunction(e, newShape) {
    540 
    541     var newShape = e.overlay;
    542     newShape.type = e.type;
    543     if (selectedShape) {
    544         var polyG = newShape.type === google.maps.drawing.OverlayType.POLYLINE;
    545         var polyL = newShape.type === google.maps.drawing.OverlayType.POLYGON;
    546 
    547         if (polyL || polyG) {
    548 
    549             var latLngi = []
    550             var lati,
    551             lngi;
    552 
    553             for (var i = 0; i < selectedShape.getPath().length; i++) {
    554                 lati = selectedShape.getPath().getAt(i).lat();
    555                 lngi = selectedShape.getPath().getAt(i).lng();
    556                 nextVertex = {
    557                     lat: lati,
    558                     lng: lngi
    559                 };
    560                 latLngi.push(nextVertex);
    561             }
    562             nextShape.push("dragEnd", selectedShape.type, latLngi);
    563         } else {
    564 
    565             nextEdge.east = selectedShape.getBounds().ea.l;
    566             nextEdge.north = selectedShape.getBounds().la.l;
    567             nextEdge.south = selectedShape.getBounds().la.j;
    568             nextEdge.west = selectedShape.getBounds().ea.j;
    569 
    570             nextShape.push("dragEnd", selectedShape.type, nextEdge);
    571         }
    572     }
    573     for (var i = 0; i < prevLog.length; i++) {
    574         if (prevLog[i][0] == "dragEnd") {
    575             const index = i;
    576             prevLog.splice(index, 1);
    577         }
    578     }
    579     nextLog.push(nextShape);
    580     nextShape = [];
    581     chosen = selectedShape;
    582 }
    583 
    584 function updateHistory(eventArray) {
    585     var lastItem = nextLog[nextLog.length - 1];
    586     if (nextLog.length > 0) {
    587         prevLog.push(lastItem);
    588     }
    589     nextLog = [];
    590     nextLog.push(eventArray);
    591     eventArray = [];
    592     dragFired = false;
    593 
    594 }
    595 
    596 function polygonGetPath() {
    597     console.log(nextLog);
    598     console.log(prevLog);
    599 
     457function printHistory() {
     458   
     459    console.log(prevOverlays);
     460    console.log(selectedShapes);
    600461}
    601462
Note: See TracChangeset for help on using the changeset viewer.