Changeset 32711

Show
Ignore:
Timestamp:
18.12.2018 16:42:52 (6 months ago)
Author:
ak19
Message:

Updated version where history "array" can support: new shapes, moving, change of colour.

Location:
gs3-extensions/map-editor/DrawingManager
Files:
2 modified

Legend:

Unmodified
Added
Removed
  • gs3-extensions/map-editor/DrawingManager/index.html

    r32709 r32711  
    77 
    88    <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
     9    <script src="historyManager.js"></script>    
    910    <script src="index.js"></script>     
    1011    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzunGwIF2OwsfrOkIC_8bhh0OPGZXo52Y&libraries=drawing&callback=initMap" async defer></script> 
  • gs3-extensions/map-editor/DrawingManager/index.js

    r32709 r32711  
    3636var nextLog = []; 
    3737 
    38 var prevOverlays = []; 
     38 
    3939 
    4040 
     
    171171         
    172172         
     173         
     174        historyOverlayPush(); 
     175                 
    173176        overlays.push(e.overlay); // store reference to added overlay 
    174177        var newShape = e.overlay; 
    175178        newShape.type = e.type; 
    176179 
    177         newShapeCreated(e); 
    178          
    179         historyOverlayPush(); 
     180     
    180181         
    181182        if (e.type !== google.maps.drawing.OverlayType.MARKER) { 
     
    244245    } 
    245246 
    246     function clearSelection() { 
    247         if (selectedShape) { 
    248             if (selectedShape.type !== 'marker') { 
    249                 selectedShape.setEditable(false); 
    250                 if (shiftKeyPressed == false) { 
    251                     for (var i = 0; i < selectedShapes.length; i++) { 
    252                         selectedShapes[i].setEditable(false); 
    253                     } 
    254                     selectedShapes = []; 
    255                 } 
    256             } 
    257             selectedShape = null; 
    258         } 
    259     } 
     247     
    260248    var i = 0; 
    261249 
    262     //Set selection for the selected overlay 
    263     function setSelection(shape, e) { 
    264         if (shape.type !== 'marker') { 
    265             if (shiftKeyPressed == false) { 
    266                 if (e.vertex == undefined) { 
    267                     clearSelection(); 
    268                     shape.setEditable(true); 
    269                 } 
    270             } 
    271             if (selectedShapes.includes(shape)) { 
    272  
    273                 //shape.setEditable(false); 
    274                 const index = selectedShapes.indexOf(shape); 
    275                 selectedShapes.splice(index, 1); 
    276             } else { 
    277                 shape.setEditable(true); 
    278                 selectedShapes.push(shape); 
    279             } 
    280  
    281             if (debug) { 
    282                 console.log(" len = " + selectedShapes.length); 
    283             } 
    284             //Send the values to be updated 
    285             var thi = shape.strokeWeight; 
    286             var opa = shape.fillOpacity; 
    287             var fCol = shape.fillColor; 
    288             var sCol = shape.strokeColor; 
    289             updateMenuValues(thi, opa, fCol, sCol); 
    290  
    291         } else if (shape.type == 'marker') { 
    292             clearSelection(); 
    293         } 
    294  
    295         selectedShape = shape; 
    296  
    297         if (selectionPass == true) { 
    298  
    299             selectedShapesLog.push("selected", shiftKeyPressed, selectedShape); 
    300             nextLog.push(selectedShapesLog); 
    301             chosen = selectedShape; 
    302             selectionPass = false 
    303         } 
    304  
    305         var lastItem = nextLog[nextLog.length - 1]; 
    306  
    307         if (chosen !== selectedShape) { 
    308             if (dragFired == false) { 
    309                 selectedShapesLog.push("selected", shiftKeyPressed, selectedShape) 
    310                 updateHistory(selectedShapesLog); 
    311                 chosen = selectedShape; 
    312             } 
    313         } 
    314  
    315         //console.log(prevLog); 
    316         selectedShapesLog = []; 
    317     } 
     250     
    318251 
    319252    //Clears selection if clicked on the map when shift is not presseed 
     
    372305    buildColorPalette(); 
    373306} 
     307 
     308 
     309function clearSelection() { 
     310        if (selectedShape) { 
     311            if (selectedShape.type !== 'marker') { 
     312                selectedShape.setEditable(false); 
     313                if (shiftKeyPressed == false) { 
     314                    for (var i = 0; i < selectedShapes.length; i++) { 
     315                        selectedShapes[i].setEditable(false); 
     316                    } 
     317                    selectedShapes = []; 
     318                } 
     319            } 
     320            selectedShape = null; 
     321        } 
     322    } 
     323     
     324//Set selection for the selected overlay 
     325    function setSelection(shape, e) { 
     326        if (shape.type !== 'marker') { 
     327            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)) { 
     333                    clearSelection(); 
     334                    shape.setEditable(true); 
     335                } 
     336            } 
     337            if (selectedShapes.includes(shape)) { 
     338 
     339                //shape.setEditable(false); 
     340                const index = selectedShapes.indexOf(shape); 
     341                selectedShapes.splice(index, 1); 
     342            } else { 
     343                shape.setEditable(true); 
     344                selectedShapes.push(shape); 
     345            } 
     346 
     347            if (debug) { 
     348                console.log(" len = " + selectedShapes.length); 
     349            } 
     350            //Send the values to be updated 
     351            var thi = shape.strokeWeight; 
     352            var opa = shape.fillOpacity; 
     353            var fCol = shape.fillColor; 
     354            var sCol = shape.strokeColor; 
     355            updateMenuValues(thi, opa, fCol, sCol); 
     356 
     357        } else if (shape.type == 'marker') { 
     358            clearSelection(); 
     359        } 
     360 
     361        selectedShape = shape; 
     362 
     363        if (selectionPass == true) { 
     364 
     365            selectedShapesLog.push("selected", shiftKeyPressed, selectedShape); 
     366            nextLog.push(selectedShapesLog); 
     367            chosen = selectedShape; 
     368            selectionPass = false 
     369        } 
     370 
     371        var lastItem = nextLog[nextLog.length - 1]; 
     372 
     373        if (chosen !== selectedShape) { 
     374            if (dragFired == false) { 
     375                selectedShapesLog.push("selected", shiftKeyPressed, selectedShape) 
     376                updateHistory(selectedShapesLog); 
     377                chosen = selectedShape; 
     378            } 
     379        } 
     380 
     381        //console.log(prevLog); 
     382        selectedShapesLog = []; 
     383    } 
     384     
     385     
    374386//Set selected thickness 
    375387function setSelectedThickness(sWeight) { 
    376     if (selectedShape) { 
    377         //selectedShape.set('strokeWeight', sWeight) 
    378     } 
    379     if (selectedShapes !== 0) { 
     388    if (selectedShapes.length > 0) { 
     389        //historyOverlayPush(); 
    380390        for (var i = 0; i < selectedShapes.length; i++) { 
    381391            selectedShapes[i].set('strokeWeight', sWeight); 
     
    387397//Set selected opacity 
    388398function setSelectedOpacity(fOpacity) { 
    389     if (selectedShape) { 
    390         //selectedShape.set('fillOpacity', fOpacity) 
    391     } 
    392     if (selectedShapes !== 0) { 
     399 
     400    if (selectedShapes.length > 0) { 
     401        //historyOverlayPush(); 
    393402        for (var i = 0; i < selectedShapes.length; i++) { 
    394403            selectedShapes[i].set('fillOpacity', fOpacity); 
     
    399408//set selected fill colour 
    400409function setSelectedShapeColor(color) { 
    401     if (selectedShapes !== 0) { 
     410    if (selectedShapes.length > 0) { 
     411        historyOverlayPush(); 
    402412        for (var i = 0; i < selectedShapes.length; i++) { 
    403413            selectedShapes[i].set('fillColor', color); 
     
    424434} 
    425435 
    426 function undoMovement() { 
    427     console.log("*** undoMovement called"); 
    428     for (var i = 0; i < overlays.length; i++) { 
    429         overlays[i].setMap(null); 
    430  
    431     } 
    432      
    433     overlays = []; 
    434      
    435     var prev_overlay = prevOverlays.pop(); 
    436      
    437     for (var i = 0; i < prev_overlay.length; i++) { 
    438         overlays[i] = prev_overlay[i]; 
    439         overlays[i].setMap(map); 
    440     } 
    441      
    442 } 
     436 
    443437 
    444438function undoMovementDragSelection() { 
     
    600594} 
    601595 
    602 function newShapeCreated(e) { 
    603     //nextLog 
    604 } 
    605  
    606596function polygonGetPath() { 
    607597    console.log(nextLog); 
     
    625615} 
    626616 
    627 function historyOverlayPush() 
    628 { 
    629     //console.log("historyOverlayPush()"); 
    630     //var overlays_copy = []; 
    631     //for (var i = 0; i<overlays.length; i++) { 
    632     //  overlays_copy[i] = new google.maps.Rectangle(overlays[i]); 
    633     //} 
    634     //var overlay_copy = JSON.parse(JSON.stringify(overlays)); 
    635     //prevOverlays.push(overlays_copy);  
    636     // 
    637     //prevOverlays.push(overlays.slice()); // shallow copy !!! 
    638      
    639     console.log("historyOverlayPush()"); 
    640     var overlays_copy = []; 
    641     for (var i = 0; i<overlays.length; i++) { 
    642          
    643         overlays_copy[i] = overlays[i]; 
    644          
    645     } 
    646     overlays_copy_obj = overlays_copy; 
    647     console.log(overlays_copy_obj); 
    648     console.log(overlays); 
    649     console.log(prevOverlays); 
    650     //console.log(JSON.stringify(overlays_copy_obj)); 
    651      
    652     var overlay_copy = overlays; 
    653     prevOverlays.push(overlays_copy_obj);  
    654      
    655     //prevOverlays.push(overlays.slice()); // shallow copy !!! 
    656      
    657      
    658 }