diff --git a/assets/icons/svg-min/drag.svg b/assets/icons/svg-min/drag.svg new file mode 100644 index 000000000..6a74b8505 --- /dev/null +++ b/assets/icons/svg-min/drag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/svg-min/transform.svg b/assets/icons/svg-min/transform.svg deleted file mode 100644 index 311c34801..000000000 --- a/assets/icons/svg-min/transform.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/assets/icons/svg/drag.svg b/assets/icons/svg/drag.svg new file mode 100644 index 000000000..7f915aeed --- /dev/null +++ b/assets/icons/svg/drag.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/svg/transform.svg b/assets/icons/svg/transform.svg deleted file mode 100644 index 563b19380..000000000 --- a/assets/icons/svg/transform.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/symbol/sprite.symbol.html b/assets/icons/symbol/sprite.symbol.html index 4d52c4d04..6f438f366 100644 --- a/assets/icons/symbol/sprite.symbol.html +++ b/assets/icons/symbol/sprite.symbol.html @@ -24,6 +24,7 @@ .svg-crop_rotate-dims { width: 18px; height: 18px; } .svg-delete_forever-dims { width: 18px; height: 18px; } .svg-distort-dims { width: 18px; height: 18px; } + .svg-drag-dims { width: 18px; height: 18px; } .svg-explore-dims { width: 18px; height: 18px; } .svg-flip_to_back-dims { width: 18px; height: 18px; } .svg-flip_to_front-dims { width: 18px; height: 18px; } @@ -36,7 +37,6 @@ .svg-rotate-dims { width: 18px; height: 18px; } .svg-scale-dims { width: 18px; height: 18px; } .svg-spinner-dims { width: 18px; height: 18px; } - .svg-transform-dims { width: 18px; height: 18px; } .svg-unlock-dims { width: 18px; height: 18px; } + + + + + +

drag

+
  • @@ -295,17 +306,6 @@

    scale

    spinner

    • -
  • -
    - - - - - - -
    -

    transform

    -
  • @@ -393,6 +393,17 @@

    delete_forever

    distort

    • +
  • +
    + + + + + + +
    +

    drag

    +
  • @@ -525,17 +536,6 @@

    scale

    spinner

    • -
  • -
    - - - - - - -
    -

    transform

    -
  • @@ -555,7 +555,7 @@

    unlock

    -

    Generated at Fri, 16 Aug 2019 10:08:57 GMT by svg-sprite.

    +

    Generated at Tue, 24 Sep 2019 07:10:31 GMT by svg-sprite.

    diff --git a/assets/icons/symbol/sprite.symbol.svg b/assets/icons/symbol/sprite.symbol.svg index 3d7fd6ded..cce7b9563 100644 --- a/assets/icons/symbol/sprite.symbol.svg +++ b/assets/icons/symbol/sprite.symbol.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/dist/leaflet.distortableimage.css b/dist/leaflet.distortableimage.css index 1126ae7cb..4026c4d19 100644 --- a/dist/leaflet.distortableimage.css +++ b/dist/leaflet.distortableimage.css @@ -155,10 +155,16 @@ a.leaflet-toolbar-icon.freeRotate.selected-mode { } a.leaflet-toolbar-icon.rotate.selected-mode .ldi-icon, -a.leaflet-toolbar-icon.freeRotate.selected-mode .ldi-icon { +a.leaflet-toolbar-icon.freeRotate.selected-mode .ldi-icon, +a.leaflet-toolbar-icon.drag.selected-mode .ldi-icon { fill: white; } +a.leaflet-toolbar-icon.drag.selected-mode { + background-color: rgba(9, 155, 56, 0.75); + border: inset 0.5px lightgray; +} + a.leaflet-toolbar-icon.distort.selected-mode, a.leaflet-toolbar-icon.scale.selected-mode { background-color: hsla(239, 97%, 55%, 0.75); diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js index 15528c2f0..20949c5ad 100644 --- a/dist/leaflet.distortableimage.js +++ b/dist/leaflet.distortableimage.js @@ -557,6 +557,21 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({ return this; }, + dragBy: function(formerPoint, newPoint) { + var map = this._map; + var i; + var p; + var transCorners = {}; + var delta = map.project(formerPoint).subtract(map.project(newPoint)); + + for (i = 0; i < 4; i++) { + p = map.project(this.getCorner(i)).subtract(delta); + transCorners[i] = map.unproject(p); + } + + this.setCorners(transCorners); + }, + _revert: function() { var a = this.rotation; var map = this._map; @@ -1157,7 +1172,31 @@ L.DistortHandle = L.EditHandle.extend({ }, }); -L.RotateScaleHandle = L.EditHandle.extend({ +L.DragHandle = L.EditHandle.extend({ + options: { + TYPE: 'drag', + icon: L.icon({ + // eslint-disable-next-line max-len + iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAsVJREFUeNrMVztLXEEUvnNVFAVBAhY2aRKbTZEHJNpYabuNjSgYg/GxdsmPSJkUAa/ZdVEX8mgWYVutbHxAHkVskjQBuUUgBISVhCQk3wnfwMlk1rusN1wHPubOzJlzvjlz5sxc01Ma/hUEwQnwDIjqc7uvgv9YYO86qgIwCXQbdNTlQ8kcCBHgBch8TcloF6oJGr6phk6EQAkfdz3zvgDr9Mr7Fg1fptEZoM8jsmrokpfsiIFO4IIjuE2v1EDmR4LRdlR5Gh51hj8D34ABtm8YTtqna0TgklIw5CgQguKxIojEjmFROg/MKQO27NkFAB+4wAPouGUJiIvWKHwbAxX2XyWRKWkqhT+pbJntJZJuUzISW0+5hW+obxrVBsfvoH/dqCCJuU97GBh2VteLSiYvArmErT8EVoAK9Bw7enbpVYmvAQlyowYforrH5jXL2rPHI/TKONDB7u9AlavdaTBPvPmazUeQuy8f7UomUgTEwIJPEQ3sQGE/6ll2l9H/KcEzBcfWn2IclluM3DpddJxSHujlFkscbUPvmB0LHVnLrId7nlaZVkEc6QGXQI1MAwZcWmVRHeNaQwJMMiU2cwy4s7p/RJ2ckpvIQs+cIs+5GzitloLKHUV3MPREuXbTOKO91dX387gGTONxIgEWm+E61FFrpcyqXLHsEwiDjEsjAksqw5XPoL9MHVrn6QR4q+XZrDaR4RoWzq2ymafuRA/Mq1stSsHLVkcbdf9VjOcx8ZH3+SFWcCWlVPyWuUBOwUWdC1wP5NVjYiXFWLO69PZ6CRTUY6KSIoEKdf6T3IzzgHxnsyHctNBEkmn6Oob8ExUDg/ahGybd177cDjzH5xHwgDiSvoS7I/LZyvxJZj0wod7tkX5G0XVC7rEyLhfLJjBGbKoLLEfZWObyKeZ6oY82g+yf5Zn/mJyHX7PMf04z/T3/LcAAu4E6iiyJqf0AAAAASUVORK5CYII=', + iconSize: [32, 32], + iconAnchor: [16, 16], + }), + }, + + _onHandleDrag: function() { + var overlay = this._handled; + var formerLatLng = overlay.getCorner(this._corner); + var newLatLng = this.getLatLng(); + + overlay.dragBy(formerLatLng, newLatLng); + }, + + updateHandle: function() { + this.setLatLng(this._handled.getCorner(this._corner)); + }, +}); + +L.FreeRotateHandle = L.EditHandle.extend({ options: { TYPE: 'freeRotate', icon: L.icon({ @@ -1340,9 +1379,9 @@ L.ToolbarIconSet = L.IconSet.extend({ '' + '' + '' + - ' ' + + '' + '' + - '' + + '' + '', }); @@ -1527,6 +1566,26 @@ L.DistortAction = L.EditAction.extend({ }, }); +L.DragAction = L.EditAction.extend({ + initialize: function(map, overlay, options) { + options = options || {}; + options.toolbarIcon = { + svg: true, + html: 'drag', + tooltip: 'Drag Image', + className: 'drag', + }; + + L.DistortableImage.action_map.D = '_dragMode'; + L.EditAction.prototype.initialize.call(this, map, overlay, options); + }, + + addHooks: function() { + var edit = this._overlay.editing; + edit._dragMode(); + }, +}); + L.ExportAction = L.EditAction.extend({ initialize: function(map, overlay, options) { var edit = overlay.editing; @@ -1824,6 +1883,7 @@ L.distortableImage.popupBar = function(latlng, options) { L.DistortableImageOverlay.addInitHook(function() { /** Default actions */ this.ACTIONS = [ + L.DragAction, L.ScaleAction, L.DistortAction, L.RotateAction, @@ -1896,7 +1956,7 @@ L.DistortableImage.Edit = L.Handler.extend({ opacity: 0.7, outline: '1px solid red', keymap: L.distortableImage.action_map, - modes: ['scale', 'distort', 'rotate', 'freeRotate', 'lock'], + modes: ['drag', 'scale', 'distort', 'rotate', 'freeRotate', 'lock'], }, initialize: function(overlay, options) { @@ -1986,6 +2046,11 @@ L.DistortableImage.Edit = L.Handler.extend({ var overlay = this._overlay; var i; + this._dragHandles = L.layerGroup(); + for (i = 0; i < 4; i++) { + this._dragHandles.addLayer(new L.DragHandle(overlay, i)); + } + this._scaleHandles = L.layerGroup(); for (i = 0; i < 4; i++) { this._scaleHandles.addLayer(new L.ScaleHandle(overlay, i)); @@ -2004,7 +2069,7 @@ L.DistortableImage.Edit = L.Handler.extend({ // handle includes rotate AND scale this._freeRotateHandles = L.layerGroup(); for (i = 0; i < 4; i++) { - this._freeRotateHandles.addLayer(new L.RotateScaleHandle(overlay, i)); + this._freeRotateHandles.addLayer(new L.FreeRotateHandle(overlay, i)); } this._lockHandles = L.layerGroup(); @@ -2015,6 +2080,7 @@ L.DistortableImage.Edit = L.Handler.extend({ } this._handles = { + drag: this._dragHandles, scale: this._scaleHandles, distort: this._distortHandles, rotate: this._rotateHandles, @@ -2135,6 +2201,11 @@ L.DistortableImage.Edit = L.Handler.extend({ }; }, + _dragMode: function() { + if (!this.hasTool(L.DragAction)) { return; } + this.setMode('drag'); + }, + _scaleMode: function() { if (!this.hasTool(L.ScaleAction)) { return; } this.setMode('scale'); @@ -2888,6 +2959,7 @@ L.DistortableImage.Keymapper = L.Handler.extend({ '
    RotateScale Mode
    r
    ' + '
    Scale Mode
    s
    ' + '
    Distort Mode
    d
    ' + + '
    Drag Mode
    D
    ' + '
    Lock (Mode) / Unlock Image
    l\xa0u
    ' + '
    Stack up / down
    q\xa0a
    ' + '
    Add / Remove Image Border
    b
    ' + @@ -3162,7 +3234,9 @@ L.Map.BoxCollector = L.Map.BoxZoom.extend({ }, _onMouseUp: function(e) { - if (e.which !== 1 && e.button !== 1) { return; } + if (e.which !== 1 && e.button !== 1) { + return; + } this._finish(); diff --git a/package-lock.json b/package-lock.json index 2446f7cd1..a46e20966 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "leaflet-distortableimage", - "version": "0.8.4", + "version": "0.8.5", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 4bb6f99c1..9a7073818 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "leaflet-distortableimage", - "version": "0.8.4", + "version": "0.8.5", "description": "Leaflet plugin enabling image overlays to be distorted, stretched, and warped (built for Public Lab's MapKnitter: http://publiclab.org).", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", diff --git a/src/DistortableImageOverlay.js b/src/DistortableImageOverlay.js index 2e27a639e..443708a5f 100644 --- a/src/DistortableImageOverlay.js +++ b/src/DistortableImageOverlay.js @@ -323,6 +323,21 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({ return this; }, + dragBy: function(formerPoint, newPoint) { + var map = this._map; + var i; + var p; + var transCorners = {}; + var delta = map.project(formerPoint).subtract(map.project(newPoint)); + + for (i = 0; i < 4; i++) { + p = map.project(this.getCorner(i)).subtract(delta); + transCorners[i] = map.unproject(p); + } + + this.setCorners(transCorners); + }, + _revert: function() { var a = this.rotation; var map = this._map; diff --git a/src/components/DistortableImage.Keymapper.js b/src/components/DistortableImage.Keymapper.js index 831a7850a..a511e4017 100644 --- a/src/components/DistortableImage.Keymapper.js +++ b/src/components/DistortableImage.Keymapper.js @@ -84,6 +84,7 @@ L.DistortableImage.Keymapper = L.Handler.extend({ '
    RotateScale Mode
    r
    ' + '
    Scale Mode
    s
    ' + '
    Distort Mode
    d
    ' + + '
    Drag Mode
    D
    ' + '
    Lock (Mode) / Unlock Image
    l\xa0u
    ' + '
    Stack up / down
    q\xa0a
    ' + '
    Add / Remove Image Border
    b
    ' + diff --git a/src/edit/DistortableImage.Edit.js b/src/edit/DistortableImage.Edit.js index 56fcc32b7..183ecdaac 100644 --- a/src/edit/DistortableImage.Edit.js +++ b/src/edit/DistortableImage.Edit.js @@ -6,7 +6,7 @@ L.DistortableImage.Edit = L.Handler.extend({ opacity: 0.7, outline: '1px solid red', keymap: L.distortableImage.action_map, - modes: ['scale', 'distort', 'rotate', 'freeRotate', 'lock'], + modes: ['drag', 'scale', 'distort', 'rotate', 'freeRotate', 'lock'], }, initialize: function(overlay, options) { @@ -96,6 +96,11 @@ L.DistortableImage.Edit = L.Handler.extend({ var overlay = this._overlay; var i; + this._dragHandles = L.layerGroup(); + for (i = 0; i < 4; i++) { + this._dragHandles.addLayer(new L.DragHandle(overlay, i)); + } + this._scaleHandles = L.layerGroup(); for (i = 0; i < 4; i++) { this._scaleHandles.addLayer(new L.ScaleHandle(overlay, i)); @@ -114,7 +119,7 @@ L.DistortableImage.Edit = L.Handler.extend({ // handle includes rotate AND scale this._freeRotateHandles = L.layerGroup(); for (i = 0; i < 4; i++) { - this._freeRotateHandles.addLayer(new L.RotateScaleHandle(overlay, i)); + this._freeRotateHandles.addLayer(new L.FreeRotateHandle(overlay, i)); } this._lockHandles = L.layerGroup(); @@ -125,6 +130,7 @@ L.DistortableImage.Edit = L.Handler.extend({ } this._handles = { + drag: this._dragHandles, scale: this._scaleHandles, distort: this._distortHandles, rotate: this._rotateHandles, @@ -245,6 +251,11 @@ L.DistortableImage.Edit = L.Handler.extend({ }; }, + _dragMode: function() { + if (!this.hasTool(L.DragAction)) { return; } + this.setMode('drag'); + }, + _scaleMode: function() { if (!this.hasTool(L.ScaleAction)) { return; } this.setMode('scale'); diff --git a/src/edit/actions/DragAction.js b/src/edit/actions/DragAction.js new file mode 100644 index 000000000..016242b16 --- /dev/null +++ b/src/edit/actions/DragAction.js @@ -0,0 +1,19 @@ +L.DragAction = L.EditAction.extend({ + initialize: function(map, overlay, options) { + options = options || {}; + options.toolbarIcon = { + svg: true, + html: 'drag', + tooltip: 'Drag Image', + className: 'drag', + }; + + L.DistortableImage.action_map.D = '_dragMode'; + L.EditAction.prototype.initialize.call(this, map, overlay, options); + }, + + addHooks: function() { + var edit = this._overlay.editing; + edit._dragMode(); + }, +}); diff --git a/src/edit/handles/DragHandle.js b/src/edit/handles/DragHandle.js new file mode 100644 index 000000000..fe4bd5f0a --- /dev/null +++ b/src/edit/handles/DragHandle.js @@ -0,0 +1,23 @@ +L.DragHandle = L.EditHandle.extend({ + options: { + TYPE: 'drag', + icon: L.icon({ + // eslint-disable-next-line max-len + iconUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAsVJREFUeNrMVztLXEEUvnNVFAVBAhY2aRKbTZEHJNpYabuNjSgYg/GxdsmPSJkUAa/ZdVEX8mgWYVutbHxAHkVskjQBuUUgBISVhCQk3wnfwMlk1rusN1wHPubOzJlzvjlz5sxc01Ma/hUEwQnwDIjqc7uvgv9YYO86qgIwCXQbdNTlQ8kcCBHgBch8TcloF6oJGr6phk6EQAkfdz3zvgDr9Mr7Fg1fptEZoM8jsmrokpfsiIFO4IIjuE2v1EDmR4LRdlR5Gh51hj8D34ABtm8YTtqna0TgklIw5CgQguKxIojEjmFROg/MKQO27NkFAB+4wAPouGUJiIvWKHwbAxX2XyWRKWkqhT+pbJntJZJuUzISW0+5hW+obxrVBsfvoH/dqCCJuU97GBh2VteLSiYvArmErT8EVoAK9Bw7enbpVYmvAQlyowYforrH5jXL2rPHI/TKONDB7u9AlavdaTBPvPmazUeQuy8f7UomUgTEwIJPEQ3sQGE/6ll2l9H/KcEzBcfWn2IclluM3DpddJxSHujlFkscbUPvmB0LHVnLrId7nlaZVkEc6QGXQI1MAwZcWmVRHeNaQwJMMiU2cwy4s7p/RJ2ckpvIQs+cIs+5GzitloLKHUV3MPREuXbTOKO91dX387gGTONxIgEWm+E61FFrpcyqXLHsEwiDjEsjAksqw5XPoL9MHVrn6QR4q+XZrDaR4RoWzq2ymafuRA/Mq1stSsHLVkcbdf9VjOcx8ZH3+SFWcCWlVPyWuUBOwUWdC1wP5NVjYiXFWLO69PZ6CRTUY6KSIoEKdf6T3IzzgHxnsyHctNBEkmn6Oob8ExUDg/ahGybd177cDjzH5xHwgDiSvoS7I/LZyvxJZj0wod7tkX5G0XVC7rEyLhfLJjBGbKoLLEfZWObyKeZ6oY82g+yf5Zn/mJyHX7PMf04z/T3/LcAAu4E6iiyJqf0AAAAASUVORK5CYII=', + iconSize: [32, 32], + iconAnchor: [16, 16], + }), + }, + + _onHandleDrag: function() { + var overlay = this._handled; + var formerLatLng = overlay.getCorner(this._corner); + var newLatLng = this.getLatLng(); + + overlay.dragBy(formerLatLng, newLatLng); + }, + + updateHandle: function() { + this.setLatLng(this._handled.getCorner(this._corner)); + }, +}); diff --git a/src/edit/handles/FreeRotateHandle.js b/src/edit/handles/FreeRotateHandle.js index df5642134..b9bc2ab16 100644 --- a/src/edit/handles/FreeRotateHandle.js +++ b/src/edit/handles/FreeRotateHandle.js @@ -1,4 +1,4 @@ -L.RotateScaleHandle = L.EditHandle.extend({ +L.FreeRotateHandle = L.EditHandle.extend({ options: { TYPE: 'freeRotate', icon: L.icon({ diff --git a/src/edit/toolbars/DistortableImage.PopupBar.js b/src/edit/toolbars/DistortableImage.PopupBar.js index 345e2431e..9b21d1018 100644 --- a/src/edit/toolbars/DistortableImage.PopupBar.js +++ b/src/edit/toolbars/DistortableImage.PopupBar.js @@ -44,6 +44,7 @@ L.distortableImage.popupBar = function(latlng, options) { L.DistortableImageOverlay.addInitHook(function() { /** Default actions */ this.ACTIONS = [ + L.DragAction, L.ScaleAction, L.DistortAction, L.RotateAction, diff --git a/src/iconsets/ToolbarIconSet.js b/src/iconsets/ToolbarIconSet.js index b6526e7f4..dd17427de 100644 --- a/src/iconsets/ToolbarIconSet.js +++ b/src/iconsets/ToolbarIconSet.js @@ -15,8 +15,8 @@ L.ToolbarIconSet = L.IconSet.extend({ '' + '' + '' + - ' ' + + '' + '' + - '' + + '' + '', }); diff --git a/src/mapmixins/BoxCollector.js b/src/mapmixins/BoxCollector.js index 0cea0dc07..28c8459c3 100644 --- a/src/mapmixins/BoxCollector.js +++ b/src/mapmixins/BoxCollector.js @@ -105,7 +105,9 @@ L.Map.BoxCollector = L.Map.BoxZoom.extend({ }, _onMouseUp: function(e) { - if (e.which !== 1 && e.button !== 1) { return; } + if (e.which !== 1 && e.button !== 1) { + return; + } this._finish();