CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-03-25 21:40:30 +01:00
Code Issues Packages Projects Releases Wiki Activity

plop

Browse Source
This commit is contained in:
Mukesh Jaiswal
2022-08-23 19:37:54 +02:00
parent 7a2ab8aeaa
commit 448c8b914c
3 changed files with 261 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
modules/svg/data.js
View File

@@ -180,6 +180,7 @@ export function svgData(projection, context, dispatch) {
function drawData(selection) {
console.log('drawData() called');
console.log('selection', selection);
var vtService = getService();
var getPath = svgPath(projection).geojson;
var getAreaPath = svgPath(projection, null, true).geojson;
@@ -373,11 +374,6 @@ export function svgData(projection, context, dispatch) {
stringifyGeojsonProperties(gj);
}
break;
// case '.png':
// xx = JSON.parse(data);
// console.log('Hello world!');
// console.log(data);
// break;
}
gj = gj || {};

90
modules/svg/local_photos.js
View File

@@ -62,6 +62,7 @@ export function svgLocalPhotos(projection, context, dispatch) {
_initialized = true;
}
// TODO: after checkbox is implemented
function showLayer() {
console.log('showLayer() called');
// if images are not available return
@@ -79,7 +80,7 @@ export function svgLocalPhotos(projection, context, dispatch) {
.on('end', function () { dispatch.call('change'); });
}
// TODO: after checkbox is implemented
function hideLayer() {
console.log('hideLayer() called');
throttledRedraw.cancel();
@@ -122,7 +123,7 @@ export function svgLocalPhotos(projection, context, dispatch) {
context.map().centerEase(image.loc);
}
// TODO: later
function mouseover(d3_event, image) {
console.log('mouseover() called');
// const service = getService();
@@ -130,7 +131,7 @@ export function svgLocalPhotos(projection, context, dispatch) {
// if (service) service.setStyles(context, image);
}
// TODO: later
function mouseout() {
console.log('mouseout() called');
// const service = getService();
@@ -153,6 +154,18 @@ export function svgLocalPhotos(projection, context, dispatch) {
// no need to filter sequence
// function filterSequences(sequences) {...}
// function getService() {
// console.log('getService() called');
// if (services.mapillary && !_fileList) {
// _fileList = services.mapillary;
// _fileList.event.on('loadedImages', throttledRedraw);
// } else if (!services.mapillary && _fileList) {
// _fileList = null;
// }
// return _mapillary;
// }
// puts the images on the map
function update() {
console.log('update() called');
@@ -161,16 +174,19 @@ export function svgLocalPhotos(projection, context, dispatch) {
const showViewfields = (z >= minViewfieldZoom);
// const service = getService();
// const service = _fileList;
// let sequences = (service ? service.sequences(projection) : []);
// let images = (service && showMarkers ? service.images(projection) : []);
// supply dummy data and see the rest of the code
// images = filterImages(images);
// sequences = filterSequences(sequences, service);
// service.filterViewer(context);
let traces = layer.selectAll('.sequences').selectAll('.sequence');
let traces = layer.selectAll('.sequences').selectAll('.sequence')
// .data(sequences, function(d) { return d.properties.id; });
.data(_fileList, function(d) { return 33;});
// exit
traces.exit()
@@ -184,8 +200,9 @@ export function svgLocalPhotos(projection, context, dispatch) {
.attr('d', svgPath(projection).geojson);
const groups = layer.selectAll('.markers').selectAll('.viewfield-group');
const groups = layer.selectAll('.markers').selectAll('.viewfield-group')
// .data(images, function(d) { return d.id; });
.data(_fileList, function(d) { return 33;});
// exit
groups.exit()
@@ -195,8 +212,8 @@ export function svgLocalPhotos(projection, context, dispatch) {
const groupsEnter = groups.enter()
.append('g')
.attr('class', 'viewfield-group')
.on('mouseenter', mouseover)
.on('mouseleave', mouseout)
// .on('mouseenter', mouseover)
// .on('mouseleave', mouseout)
.on('click', click);
groupsEnter
@@ -249,35 +266,33 @@ export function svgLocalPhotos(projection, context, dispatch) {
// create your onw css for this
function drawPhotos(selection) {
console.log('drawPhotos fn called');
// const enabled = svgMapillaryImages.enabled;
const enabled = _enabled;
// const service = getService();
const fileList = _fileList;
// layer = selection.selectAll('.local-photos')
// layer = selection.selectAll('.layer-local-photos');
// layer = selection.selectAll('.data');
// .data(service ? [0] : []);
// .data([0]);
// creates a layer if doesn't exist
layer = selection.selectAll('.layer-local-photos')
.data(fileList ? [0] : []);
// layer.exit()
// .remove();
layer.exit()
.remove();
// const layerEnter = layer.enter()
// .append('g')
// // .attr('class', 'layer-local-photos')
// .attr('class', 'layer-mapillary')
// .style('display', enabled ? 'block' : 'none');
const layerEnter = layer.enter()
.append('g')
.attr('class', 'layer-local-photos')
.style('display', enabled ? 'block' : 'none');
// layerEnter
// .append('g')
// .attr('class', 'sequences');
layerEnter
.append('g')
.attr('class', 'sequences');
// layerEnter
// .append('g')
// .attr('class', 'markers');
layerEnter
.append('g')
.attr('class', 'markers');
// layer = layerEnter
// .merge(layer);
layer = layerEnter
.merge(layer);
// if (enabled) {
// if (~~context.map().zoom() >= minZoom) {
@@ -288,6 +303,13 @@ export function svgLocalPhotos(projection, context, dispatch) {
// editOff();
// }
// }
if (_fileList) {
editOn();
update();
} else {
editOff();
}
}
@@ -316,11 +338,11 @@ export function svgLocalPhotos(projection, context, dispatch) {
if (_enabled) {
showLayer();
// context.photos().on('change.mapillary_images', update);
context.photos().on('change.local_photos', update);
context.photos().on('change.', update);
} else {
hideLayer();
// context.photos().on('change.mapillary_images', null);
context.photos().on('change.local_photos', null);
context.photos().on('change.', null);
}
dispatch.call('change');
@@ -345,7 +367,7 @@ export function svgLocalPhotos(projection, context, dispatch) {
// drawPhotos.setFile = function(fileList) {
drawPhotos.setFile = function(file) {
console.log('drawPhotos.setFile called');
_fileList = null;
// _fileList = null;
// fileList.forEach(image =>
// extract_exif(image)
@@ -362,8 +384,8 @@ export function svgLocalPhotos(projection, context, dispatch) {
// Step 1: entry point
drawPhotos.fileList = function(fileList) {
console.log('drawPhotos.fileList called');
console.log('Step 2: fileList read in local_photos.js', fileList);
// if (!arguments.length) return _fileList;
console.log('Step 2: fileList read', fileList);
if (!arguments.length) return _fileList;
_fileList = fileList;
@@ -385,6 +407,7 @@ export function svgLocalPhotos(projection, context, dispatch) {
return this;
};
// TODO: later
// new
// when all photos are uploaded, zoom to see them all
drawPhotos.fitZoom = function() {
@@ -429,6 +452,7 @@ export function svgLocalPhotos(projection, context, dispatch) {
return this;
};
// TODO: later
drawPhotos.supported = function() {
console.log('drawPhotos.supported called');
// return !!getService();

410
modules/ui/sections/data_layers.js
View File

@@ -40,7 +40,7 @@ export function uiSectionDataLayers(context) {
.call(drawOsmItems)
.call(drawQAItems)
.call(drawCustomDataItems)
// .call(drawLocalPhotos)
.call(drawLocalPhotos)
.call(drawVectorItems) // Beta - Detroit mapping challenge
.call(drawPanelItems);
}
@@ -295,104 +295,14 @@ export function uiSectionDataLayers(context) {
}
// original function
// function drawCustomDataItems(selection) {
// var dataLayer = layers.layer('data');
// var hasData = dataLayer && dataLayer.hasData();
// var showsData = hasData && dataLayer.enabled();
// var ul = selection
// .selectAll('.layer-list-data')
// .data(dataLayer ? [0] : []);
// // Exit
// ul.exit()
// .remove();
// // Enter
// var ulEnter = ul.enter()
// .append('ul')
// .attr('class', 'layer-list layer-list-data');
// var liEnter = ulEnter
// .append('li')
// .attr('class', 'list-item-data');
// var labelEnter = liEnter
// .append('label')
// .call(uiTooltip()
// .title(() => t.append('map_data.layers.custom.tooltip'))
// .placement('top')
// );
// labelEnter
// .append('input')
// .attr('type', 'checkbox')
// .on('change', function() { toggleLayer('data'); });
// labelEnter
// .append('span')
// .call(t.append('map_data.layers.custom.title'));
// liEnter
// .append('button')
// .attr('class', 'open-data-options')
// .call(uiTooltip()
// .title(() => t.append('settings.custom_data.tooltip'))
// .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
// )
// .on('click', function(d3_event) {
// d3_event.preventDefault();
// editCustom();
// })
// .call(svgIcon('#iD-icon-more'));
// liEnter
// .append('button')
// .attr('class', 'zoom-to-data')
// .call(uiTooltip()
// .title(() => t.append('map_data.layers.custom.zoom'))
// .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
// )
// .on('click', function(d3_event) {
// if (d3_select(this).classed('disabled')) return;
// d3_event.preventDefault();
// d3_event.stopPropagation();
// dataLayer.fitZoom();
// })
// .call(svgIcon('#iD-icon-framed-dot', 'monochrome'));
// // Update
// ul = ul
// .merge(ulEnter);
// ul.selectAll('.list-item-data')
// .classed('active', showsData)
// .selectAll('label')
// .classed('deemphasize', !hasData)
// .selectAll('input')
// .property('disabled', !hasData)
// .property('checked', showsData);
// ul.selectAll('button.zoom-to-data')
// .classed('disabled', !hasData);
// }
// added/testing: new function for local photos
function drawLocalPhotos(selection) {
var dataLayer = layers.layer('local-photos');
console.log(dataLayer, 'dataLayer');
// var hasData = dataLayer && dataLayer.hasData();
// var showsData = hasData && dataLayer.enabled();
// var ul = selection
// .selectAll('.layer-list-local-photos')
// .data(dataLayer ? [0] : []);
function drawCustomDataItems(selection) {
var dataLayer = layers.layer('data');
var hasData = dataLayer && dataLayer.hasData();
var showsData = hasData && dataLayer.enabled();
var ul = selection
.selectAll('.layer-list-local-photos')
.selectAll('.layer-list-data')
.data(dataLayer ? [0] : []);
console.log(ul, 'ul inside drawLocalPhotos');
// Exit
ul.exit()
@@ -402,7 +312,93 @@ export function uiSectionDataLayers(context) {
var ulEnter = ul.enter()
.append('ul')
.attr('class', 'layer-list layer-list-data');
console.log(ulEnter, 'ulEnter inside drawLocalPhotos');
var liEnter = ulEnter
.append('li')
.attr('class', 'list-item-data');
var labelEnter = liEnter
.append('label')
.call(uiTooltip()
.title(() => t.append('map_data.layers.custom.tooltip'))
.placement('top')
);
labelEnter
.append('input')
.attr('type', 'checkbox')
.on('change', function() { toggleLayer('data'); });
labelEnter
.append('span')
.call(t.append('map_data.layers.custom.title'));
liEnter
.append('button')
.attr('class', 'open-data-options')
.call(uiTooltip()
.title(() => t.append('settings.custom_data.tooltip'))
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
)
.on('click', function(d3_event) {
d3_event.preventDefault();
editCustom();
})
.call(svgIcon('#iD-icon-more'));
liEnter
.append('button')
.attr('class', 'zoom-to-data')
.call(uiTooltip()
.title(() => t.append('map_data.layers.custom.zoom'))
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
)
.on('click', function(d3_event) {
if (d3_select(this).classed('disabled')) return;
d3_event.preventDefault();
d3_event.stopPropagation();
dataLayer.fitZoom();
})
.call(svgIcon('#iD-icon-framed-dot', 'monochrome'));
// Update
ul = ul
.merge(ulEnter);
ul.selectAll('.list-item-data')
.classed('active', showsData)
.selectAll('label')
.classed('deemphasize', !hasData)
.selectAll('input')
.property('disabled', !hasData)
.property('checked', showsData);
ul.selectAll('button.zoom-to-data')
.classed('disabled', !hasData);
}
// added/testing: new function for local photos
function drawLocalPhotos(selection) {
var dataLayer = layers.layer('local-photos');
console.log(dataLayer, 'dataLayer');
// var hasData = dataLayer && dataLayer.hasData();
// var showsData = hasData && dataLayer.enabled();
// creates ul, if it doesn't exist
var ul = selection
.selectAll('.layer-list-local-photos')
.data(dataLayer ? [0] : []);
// Exit
ul.exit()
.remove();
// Enter
var ulEnter = ul.enter()
.append('ul')
.attr('class', 'layer-list layer-list-local-photos');
var localPhotosEnter = ulEnter
.append('li')
.attr('class', 'list-item-local-photos');
@@ -466,136 +462,136 @@ export function uiSectionDataLayers(context) {
}
// current fn
function drawCustomDataItems(selection) {
var dataLayer = layers.layer('data');
var hasData = dataLayer && dataLayer.hasData();
var showsData = hasData && dataLayer.enabled();
// function drawCustomDataItems(selection) {
// var dataLayer = layers.layer('data');
// var hasData = dataLayer && dataLayer.hasData();
// var showsData = hasData && dataLayer.enabled();
var ul = selection
.selectAll('.layer-list-data')
.data(dataLayer ? [0] : []);
// var ul = selection
// .selectAll('.layer-list-data')
// .data(dataLayer ? [0] : []);
// Exit
ul.exit()
.remove();
// // Exit
// ul.exit()
// .remove();
// Enter
var ulEnter = ul.enter()
.append('ul')
.attr('class', 'layer-list layer-list-data');
// // Enter
// var ulEnter = ul.enter()
// .append('ul')
// .attr('class', 'layer-list layer-list-data');
// Custom Map Data
var mapEnter = ulEnter
.append('li')
.attr('class', 'list-item-data');
// // Custom Map Data
// var mapEnter = ulEnter
// .append('li')
// .attr('class', 'list-item-data');
var mapLabelEnter = mapEnter
.append('label')
.call(uiTooltip()
.title(t.html('map_data.layers.custom.tooltip'))
.placement('top')
);
// var mapLabelEnter = mapEnter
// .append('label')
// .call(uiTooltip()
// .title(t.html('map_data.layers.custom.tooltip'))
// .placement('top')
// );
mapLabelEnter
.append('input')
.attr('type', 'checkbox')
.on('change', function() { toggleLayer('data'); });
// mapLabelEnter
// .append('input')
// .attr('type', 'checkbox')
// .on('change', function() { toggleLayer('data'); });
mapLabelEnter
.append('span')
.call(t.append('map_data.layers.custom.title'));
// mapLabelEnter
// .append('span')
// .call(t.append('map_data.layers.custom.title'));
mapEnter
.append('button')
.attr('class', 'open-data-options')
.call(uiTooltip()
.title(t.html('settings.custom_data.tooltip'))
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
)
.on('click', function(d3_event) {
d3_event.preventDefault();
editCustom();
})
.call(svgIcon('#iD-icon-more'));
// mapEnter
// .append('button')
// .attr('class', 'open-data-options')
// .call(uiTooltip()
// .title(t.html('settings.custom_data.tooltip'))
// .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
// )
// .on('click', function(d3_event) {
// d3_event.preventDefault();
// editCustom();
// })
// .call(svgIcon('#iD-icon-more'));
mapEnter
.append('button')
.attr('class', 'zoom-to-data')
.call(uiTooltip()
.title(t.html('map_data.layers.custom.zoom'))
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
)
.on('click', function(d3_event) {
if (d3_select(this).classed('disabled')) return;
// mapEnter
// .append('button')
// .attr('class', 'zoom-to-data')
// .call(uiTooltip()
// .title(t.html('map_data.layers.custom.zoom'))
// .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
// )
// .on('click', function(d3_event) {
// if (d3_select(this).classed('disabled')) return;
d3_event.preventDefault();
d3_event.stopPropagation();
dataLayer.fitZoom();
})
.call(svgIcon('#iD-icon-framed-dot', 'monochrome'));
// d3_event.preventDefault();
// d3_event.stopPropagation();
// dataLayer.fitZoom();
// })
// .call(svgIcon('#iD-icon-framed-dot', 'monochrome'));
// new item - local photos
var localPhotosEnter = ulEnter
.append('li')
.attr('class', 'list-item-local-photos');
// // new item - local photos
// var localPhotosEnter = ulEnter
// .append('li')
// .attr('class', 'list-item-local-photos');
var localPhotosLabelEnter = localPhotosEnter
.append('label');
// TODO: Add tooltip
// var localPhotosLabelEnter = localPhotosEnter
// .append('label');
// // TODO: Add tooltip
localPhotosLabelEnter
.append('input')
.attr('type', 'checkbox')
.on('change', function() { toggleLayer('data'); });
// localPhotosLabelEnter
// .append('input')
// .attr('type', 'checkbox')
// .on('change', function() { toggleLayer('data'); });
localPhotosLabelEnter
.append('span')
.text('Local Photos');
// localPhotosLabelEnter
// .append('span')
// .text('Local Photos');
localPhotosEnter
.append('button')
.attr('class', 'open-data-options')
.call(uiTooltip()
.title(t.html('settings.custom_data.tooltip'))
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
)
.on('click', function(d3_event) {
d3_event.preventDefault();
editLocalPhotos();
})
.call(svgIcon('#iD-icon-more'));
// localPhotosEnter
// .append('button')
// .attr('class', 'open-data-options')
// .call(uiTooltip()
// .title(t.html('settings.custom_data.tooltip'))
// .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
// )
// .on('click', function(d3_event) {
// d3_event.preventDefault();
// editLocalPhotos();
// })
// .call(svgIcon('#iD-icon-more'));
localPhotosEnter
.append('button')
.attr('class', 'zoom-to-data')
.call(uiTooltip()
.title(t.html('map_data.layers.custom.zoom'))
.placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
)
.on('click', function(d3_event) {
if (d3_select(this).classed('disabled')) return;
// localPhotosEnter
// .append('button')
// .attr('class', 'zoom-to-data')
// .call(uiTooltip()
// .title(t.html('map_data.layers.custom.zoom'))
// .placement((localizer.textDirection() === 'rtl') ? 'right' : 'left')
// )
// .on('click', function(d3_event) {
// if (d3_select(this).classed('disabled')) return;
d3_event.preventDefault();
d3_event.stopPropagation();
dataLayer.fitZoom();
})
.call(svgIcon('#iD-icon-framed-dot', 'monochrome'));
// d3_event.preventDefault();
// d3_event.stopPropagation();
// dataLayer.fitZoom();
// })
// .call(svgIcon('#iD-icon-framed-dot', 'monochrome'));
// Update
ul = ul
.merge(ulEnter);
// // Update
// ul = ul
// .merge(ulEnter);
ul.selectAll('.list-item-data')
.classed('active', showsData)
.selectAll('label')
.classed('deemphasize', !hasData)
.selectAll('input')
.property('disabled', !hasData)
.property('checked', showsData);
// ul.selectAll('.list-item-data')
// .classed('active', showsData)
// .selectAll('label')
// .classed('deemphasize', !hasData)
// .selectAll('input')
// .property('disabled', !hasData)
// .property('checked', showsData);
ul.selectAll('button.zoom-to-data')
.classed('disabled', !hasData);
}
// ul.selectAll('button.zoom-to-data')
// .classed('disabled', !hasData);
// }
function editCustom() {
context.container()