mapshaper 0.6.59 → 0.6.62

package/www/index.html

@@ -96,8 +96,8 @@
 		<div class="layer-menu">
 			<h3>Layers</h3>
 			<div class="pin-all pinnable">
-				<img class="pin-btn unpinned" src="images/eye.png">
-				<img class="pin-btn pinned" src="images/eye2.png">
+				<img class="eye-btn black-eye" src="images/eye.png">
+				<img class="eye-btn green-eye" src="images/eye2.png">
 	</div>
 			<div class="layer-list"></div>
 			<!-- <h4>Sources</h4> -->
@@ -132,9 +132,12 @@
 		<div>
 			<div class="delete-btn btn dialog-btn">Delete</div>
 			<div class="filter-btn btn dialog-btn">Keep</div>
+			<div class="duplicate-btn btn dialog-btn">Duplicate</div>
 			<div class="split-btn btn dialog-btn">Split</div>
+			<div class="coords-btn btn dialog-btn">Coords</div>
 			<div class="cancel-btn btn dialog-btn">Clear</div>
 		</div>
+		<div class="box-coords selectable"></div>
 	</div>
 </div>
 

package/www/mapshaper-gui.js

@@ -1070,35 +1070,6 @@
 
   utils$1.inherit(Checkbox, EventDispatcher);
 
-  function xSimpleButton(ref) {
-    var _el = El(ref),
-        _self = this,
-        _active = !_el.hasClass('disabled');
-
-    _el.on('click', function(e) {
-      if (_active) _self.dispatchEvent('click');
-      return false;
-    });
-
-    this.active = function(a) {
-      if (a === void 0) return _active;
-      if (a !== _active) {
-        _active = a;
-        _el.toggleClass('disabled');
-      }
-      return this;
-    };
-
-    this.node = function() {return _el.node();};
-
-    function isVisible() {
-      var el = _el.node();
-      return el.offsetParent !== null;
-    }
-  }
-
-  //utils.inherit(SimpleButton, EventDispatcher);
-
   function SimpleButton(ref) {
     var _el = El(ref),
         _active = !_el.hasClass('disabled');
@@ -1121,8 +1092,6 @@
     return _el;
   }
 
-  // utils.inherit(SimpleButton, EventDispatcher);
-
   function showPopupAlert(msg, title) {
     var self = {}, html = '';
     var _cancel, _close;
@@ -1181,6 +1150,7 @@
   function AlertControl(gui) {
     var openAlert; // error popup
     var openPopup; // any popup
+    var quiet = false;
 
     gui.addMode('alert', function() {}, closePopup);
 
@@ -1192,7 +1162,12 @@
       gui.enterMode('alert');
     };
 
+    gui.quiet = function(flag) {
+      quiet = !!flag;
+    };
+
     gui.message = function(str, title) {
+      if (quiet) return;
       if (openPopup) return; // don't stomp on another popup
       openPopup = showPopupAlert(str, title);
       openPopup.onClose(function() {openPopup = null;});
@@ -4285,8 +4260,8 @@
       html += rowHTML('contents', describeLyr(lyr));
       html += '<img class="close-btn" draggable="false" src="images/close.png">';
       if (opts.pinnable) {
-        html += '<img class="pin-btn unpinned" draggable="false" src="images/eye.png">';
-        html += '<img class="pin-btn pinned" draggable="false" src="images/eye2.png">';
+        html += '<img class="eye-btn black-eye" draggable="false" src="images/eye.png">';
+        html += '<img class="eye-btn green-eye" draggable="false" src="images/eye2.png">';
       }
       html += '</div>';
       return html;
@@ -4354,7 +4329,7 @@
 
       if (pinnable) {
         // init pin button
-        GUI.onClick(entry.findChild('img.unpinned'), function(e) {
+        GUI.onClick(entry.findChild('img.black-eye'), function(e) {
           var target = findLayerById(id);
           var pinned = target.layer.pinned;
           e.stopPropagation();
@@ -4364,8 +4339,8 @@
           map.redraw();
         });
 
-        // catch click event on pin button
-        GUI.onClick(entry.findChild('img.unpinned'), function(e) {
+        // catch click event on black (top) pin button button
+        GUI.onClick(entry.findChild('img.black-eye'), function(e) {
           e.stopPropagation();
         });
       }
@@ -4507,8 +4482,8 @@
       }
     };
 
-    this.dataValueUpdated = function(id, field, value) {
-      var cmd = `-each 'd[${JSON.stringify(field)}] = ${JSON.stringify(value)}' where='this.id == ${id}'`;
+    this.dataValueUpdated = function(ids, field, value) {
+      var cmd = `-each 'd[${JSON.stringify(field)}] = ${JSON.stringify(value)}' ids=${ids.join(",")}`;
       commands.push(cmd);
     };
 
@@ -4591,6 +4566,28 @@
       return (e.ctrlKey || e.metaKey) && (e.shiftKey && e.key == 'z' || !e.shiftKey && e.key == 'y');
     }
 
+    function makeMultiDataSetter(ids) {
+      if (ids.length == 1) return makeDataSetter(ids[0]);
+      var target = gui.model.getActiveLayer();
+      var recs = ids.map(id => copyRecord(target.layer.data.getRecordAt(id)));
+      return function() {
+        var data = target.layer.data.getRecords();
+        for (var i=0; i<ids.length; i++) {
+          data[ids[i]] = recs[i];
+        }
+        gui.dispatchEvent('popup-needs-refresh');
+      };
+    }
+
+    function makeDataSetter(id) {
+      var target = gui.model.getActiveLayer();
+      var rec = copyRecord(target.layer.data.getRecordAt(id));
+      return function() {
+        target.layer.data.getRecords()[id] = rec;
+        gui.dispatchEvent('popup-needs-refresh');
+      };
+    }
+
     gui.keyboard.on('keydown', function(evt) {
       var e = evt.originalEvent,
           kc = e.keyCode;
@@ -4614,31 +4611,31 @@
       var redo = function() {
         setPointCoords(target, e.FID, e.endCoords);
       };
-      this.addHistoryState(undo, redo);
-    }, this);
+      addHistoryState(undo, redo);
+    });
 
     // undo/redo label dragging
     //
     gui.on('label_dragstart', function(e) {
-      stashedUndo = this.makeDataSetter(e.FID);
-    }, this);
+      stashedUndo = makeDataSetter(e.FID);
+    });
 
     gui.on('label_dragend', function(e) {
-      var redo = this.makeDataSetter(e.FID);
-      this.addHistoryState(stashedUndo, redo);
-    }, this);
+      var redo = makeDataSetter(e.FID);
+      addHistoryState(stashedUndo, redo);
+    });
 
     // undo/redo data editing
     // TODO: consider setting selected feature to the undo/redo target feature
     //
     gui.on('data_preupdate', function(e) {
-      stashedUndo = this.makeDataSetter(e.FID);
-    }, this);
+      stashedUndo = makeMultiDataSetter(e.ids);
+    });
 
     gui.on('data_postupdate', function(e) {
-      var redo = this.makeDataSetter(e.FID);
-      this.addHistoryState(stashedUndo, redo);
-    }, this);
+      var redo = makeMultiDataSetter(e.ids);
+      addHistoryState(stashedUndo, redo);
+    });
 
     gui.on('vertex_dragend', function(e) {
       var target = e.data.target;
@@ -4657,8 +4654,8 @@
         }
         setVertexCoords(target, e.ids, endPoint);
       };
-      this.addHistoryState(undo, redo);
-    }, this);
+      addHistoryState(undo, redo);
+    });
 
     gui.on('vertex_delete', function(e) {
       // get vertex coords in data coordinates (not display coordinates);
@@ -4669,29 +4666,20 @@
       var undo = function() {
         insertVertex$1(e.data.target, e.vertex_id, p);
       };
-      this.addHistoryState(undo, redo);
-    }, this);
+      addHistoryState(undo, redo);
+    });
 
     this.clear = function() {
       reset();
     };
 
-    this.makeDataSetter = function(id) {
-      var target = gui.model.getActiveLayer();
-      var rec = copyRecord(target.layer.data.getRecordAt(id));
-      return function() {
-        target.layer.data.getRecords()[id] = rec;
-        gui.dispatchEvent('popup-needs-refresh');
-      };
-    };
-
-    this.addHistoryState = function(undo, redo) {
+    function addHistoryState(undo, redo) {
       if (offset > 0) {
         history.splice(-offset);
         offset = 0;
       }
       history.push({undo, redo});
-    };
+    }
 
     this.undo = function() {
       var item = getHistoryItem();
@@ -6957,7 +6945,7 @@
     };
   }
 
-  function InteractiveSelection(gui, ext, mouse) {
+  function HitControl(gui, ext, mouse) {
     var self = new EventDispatcher();
     var storedData = noHitData(); // may include additional data from SVG symbol hit (e.g. hit node)
     var selectionIds = [];
@@ -7032,7 +7020,7 @@
     }
 
     function pinnable() {
-      return clickable() && interactionMode != 'selection';
+      return clickable() && !selectable();
     }
 
     function draggable() {
@@ -7152,7 +7140,7 @@
 
       // TODO: move pinning to inspection control?
       if (clickable()) {
-        updateSelectionState(mergeClickData(hitTest(e)));
+        updateSelectionState(convertClickDataToSelectionData(hitTest(e)));
       }
       triggerHitEvent('click', e.data);
     }, null, priority);
@@ -7184,7 +7172,9 @@
 
     function noHitData() {return {ids: [], id: -1, pinned: false};}
 
-    function mergeClickData(hitData) {
+    // Translates feature hit data from a mouse click into feature selection data
+    // hitData: hit data from a mouse click
+    function convertClickDataToSelectionData(hitData) {
       // mergeCurrentState(hitData);
       // TOGGLE pinned state under some conditions
       var id = hitData.ids.length > 0 ? hitData.ids[0] : -1;
@@ -8146,6 +8136,7 @@
   function SelectionTool(gui, ext, hit) {
     var popup = gui.container.findChild('.selection-tool-options');
     var box = new HighlightBox(gui);
+    var coords = popup.findChild('.box-coords').hide();
     var _on = false;
 
     gui.addMode('selection_tool', turnOn, turnOff);
@@ -8214,8 +8205,10 @@
         // (this closes any other active mode, e.g. box_tool)
         gui.enterMode('selection_tool');
         popup.show();
+        updateCoords();
       } else {
         popup.hide();
+        hideCoords();
       }
     });
 
@@ -8234,13 +8227,59 @@
       runCommand(cmd);
     });
 
+    new SimpleButton(popup.findChild('.duplicate-btn')).on('click', function() {
+      var cmd = '-filter + name=selection ids=' + getIdsOpt();
+      runCommand(cmd);
+    });
+
+    var coordsBtn = new SimpleButton(popup.findChild('.coords-btn')).on('click', function() {
+      if (coords.visible()) hideCoords(); else showCoords();
+    });
+
     new SimpleButton(popup.findChild('.cancel-btn')).on('click', function() {
       hit.clearSelection();
     });
 
+    function getSelectionBounds() {
+      var ids = hit.getSelectionIds();
+      if (ids.length === 0) return null;
+      var {layer, dataset} = gui.model.getActiveLayer();
+      var filtered = {
+        geometry_type: layer.geometry_type,
+        shapes: ids.map(id => layer.shapes[id])
+      };
+      var bbox = internal.getLayerBounds(filtered, dataset.arcs).toArray();
+      return internal.getRoundedCoords(bbox, internal.getBoundsPrecisionForDisplay(bbox));
+    }
+
+    function updateCoords() {
+      if (coords.visible()) {
+        showCoords();
+      }
+    }
+
+    function showCoords() {
+      var bbox = getSelectionBounds();
+      if (!bbox) {
+        hideCoords();
+        return;
+      }
+      El(coordsBtn.node()).addClass('selected-btn');
+      coords.text(bbox.join(','));
+      coords.show();
+      GUI.selectElement(coords.node());
+    }
+
+    function hideCoords() {
+      El(coordsBtn.node()).removeClass('selected-btn');
+      coords.hide();
+    }
+
     function runCommand(cmd, turnOff) {
       popup.hide();
+      gui.quiet(true);
       if (gui.console) gui.console.runMapshaperCommands(cmd, function(err) {
+        gui.quiet(false);
         reset();
         if (turnOff) gui.clearMode();
       });
@@ -8260,7 +8299,7 @@
     var navInfo = El('span').addClass('popup-nav-info').appendTo(nav);
     var nextLink = El('span').addClass('popup-nav-arrow colored-text').appendTo(nav).text('▶');
     var refresh = null;
-    var currId = -1;
+    var currIds = [];
 
     el.addClass('rollover'); // used as a sentinel for the hover function
 
@@ -8273,7 +8312,7 @@
     self.show = function(id, ids, lyr, pinned) {
       var editable = pinned && gui.interaction.getMode() == 'data';
       var maxHeight = parent.node().clientHeight - 36;
-      currId = id;
+      currIds = [id];
       // stash a function for refreshing the current popup when data changes
       // while the popup is being displayed (e.g. while dragging a label)
       refresh = function() {
@@ -8294,7 +8333,7 @@
     self.hide = function() {
       if (!isOpen()) return;
       refresh = null;
-      currId = -1;
+      currIds = [];
       // make sure any pending edits are made before re-rendering popup
       GUI.blurActiveElement(); // this should be more selective -- could cause a glitch if typing in console
       content.empty();
@@ -8317,6 +8356,7 @@
     }
 
     function render(el, recId, lyr, editable) {
+      var recIds = [recId]; // TODO: support multiple ids
       var table = lyr.data; // table can be null (e.g. if layer has no attribute data)
       var rec = table && (editable ? table.getRecordAt(recId) : table.getReadOnlyRecordAt(recId)) || {};
       var tableEl = El('table').addClass('selectable'),
@@ -8361,12 +8401,12 @@
         var line = El('div').appendTo(el);
         El('span').addClass('add-field-btn').appendTo(line).on('click', async function(e) {
           // show "add field" dialog
-          renderAddFieldPopup(recId, lyr);
+          renderAddFieldPopup(recIds, lyr);
         }).text('+ add field');
       }
     }
 
-    function renderAddFieldPopup(recId, lyr) {
+    function renderAddFieldPopup(ids, lyr) {
       var popup = showPopupAlert('', 'Add field');
       var el = popup.container();
       el.addClass('option-menu');
@@ -8397,9 +8437,12 @@
 
         var cmdStr = `-each "d['${nameStr}'] = `;
         if (!all) {
-          cmdStr += `this.id != ${recId} ? null : `;
+          cmdStr += ids.length == 1 ?
+            `this.id != ${ids[0]}` :
+            `!${JSON.stringify(ids)}.includes(this.id)`;
+          cmdStr += ' ? null : ';
         }
-        valStr = JSON.stringify(JSON.stringify(value));
+        valStr = JSON.stringify(JSON.stringify(value)); // add escapes to strings
         cmdStr = valStr.replace('"', cmdStr);
 
         gui.console.runMapshaperCommands(cmdStr, function(err) {
@@ -8451,12 +8494,12 @@
         } else if (strval != strval2) {
           // field content has changed
           strval = strval2;
-          gui.dispatchEvent('data_preupdate', {FID: currId}); // for undo/redo
+          gui.dispatchEvent('data_preupdate', {ids: currIds}); // for undo/redo
           rec[key] = val2;
-          gui.dispatchEvent('data_postupdate', {FID: currId});
+          gui.dispatchEvent('data_postupdate', {ids: currIds});
           input.value(strval);
           setFieldClass(el, val2, type);
-          self.dispatchEvent('update', {field: key, value: val2, id: currId});
+          self.dispatchEvent('data_updated', {field: key, value: val2, ids: currIds});
         }
       });
     }
@@ -8540,10 +8583,10 @@
       }
     });
 
-    _popup.on('update', function(e) {
+    _popup.on('data_updated', function(e) {
       // data_change event no longer needed (update is handled below)
       // _self.dispatchEvent('data_change', e.data); // let map know which field has changed
-      gui.session.dataValueUpdated(e.id, e.field, e.value);
+      gui.session.dataValueUpdated(e.ids, e.field, e.value);
       // Refresh the display if a style variable has been changed interactively
       if (internal.isSupportedSvgStyleProperty(e.field)) {
         // drawLayers();
@@ -10371,7 +10414,7 @@
     }
     obj.properties.transform = getSvgFurnitureTransform(ext);
     obj.properties.class = 'mapshaper-svg-furniture';
-    obj.children = internal.importFurniture(internal.getFrameLayerData(lyr), frame);
+    obj.children = internal.renderFurnitureLayer(lyr, frame);
     return internal.svg.stringify(obj);
   }
 
@@ -10817,12 +10860,14 @@
     }
 
     if (internal.layerHasFurniture(layer)) {
-      obj.furniture = true;
-      obj.furniture_type = internal.getFurnitureLayerType(layer);
       obj.layer = layer;
+      obj.tabular = true;
+      // TODO: consider how to render furniture in GUI
+      // obj.furniture = true;
+      // obj.furniture_type = internal.getFurnitureLayerType(layer);
       // treating furniture layers (other than frame) as tabular for now,
       // so there is something to show if they are selected
-      obj.tabular = obj.furniture_type != 'frame';
+      // obj.tabular = obj.furniture_type != 'frame';
     } else if (obj.empty) {
       obj.layer = {shapes: []}; // ideally we should avoid empty layers
     } else if (!layer.geometry_type) {
@@ -11323,7 +11368,7 @@
       gui.buttons.show();
 
       if (opts.inspectorControl) {
-        _hit = new InteractiveSelection(gui, _ext, _mouse),
+        _hit = new HitControl(gui, _ext, _mouse),
         new InspectionControl2(gui, _hit);
         new SelectionTool(gui, _ext, _hit),
         new BoxTool(gui, _ext, _nav),
@@ -11368,7 +11413,6 @@
       };
     }
 
-
     // Update map frame after user navigates the map in frame edit mode
     function updateFrameExtent() {
       var frameLyr = internal.findFrameLayer(model);
@@ -11434,10 +11478,6 @@
       return isActiveLayer(lyr) || lyr.pinned;
     }
 
-    function isVisibleDataLayer(lyr) {
-      return isVisibleLayer(lyr) && !internal.isFurnitureLayer(lyr);
-    }
-
     function isFrameLayer(lyr) {
       return !!(lyr && lyr == internal.findFrameLayer(model));
     }
@@ -11446,20 +11486,25 @@
       return !isPreviewView() && !!_activeLyr.tabular;
     }
 
+    // Preview view: a special view centering the map 'frame'
+    // (disabling this pending interface rethink)
     function isPreviewView() {
-      var frameLyr = internal.findFrameLayer(model);
-      return !!frameLyr; //  && isVisibleLayer(frameLyr)
+      return false;
+      // var frameLyr = internal.findFrameLayer(model);
+      // return !!frameLyr; //  && isVisibleLayer(frameLyr)
     }
 
     // Frame view means frame layer is visible and active (selected)
+    // (disabling pending rethink)
     function isFrameView() {
-      var frameLyr = internal.findFrameLayer(model);
-      return isActiveLayer(frameLyr) && isVisibleLayer(frameLyr);
+      return false;
+      // var frameLyr = internal.findFrameLayer(model);
+      // return isActiveLayer(frameLyr) && isVisibleLayer(frameLyr);
     }
 
     function getFrameData() {
       var frameLyr = internal.findFrameLayer(model);
-      return frameLyr && internal.getFrameLayerData(frameLyr) || null;
+      return frameLyr && internal.getFurnitureLayerData(frameLyr) || null;
     }
 
     function clearAllDisplayArcs() {