CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-04-21 19:26:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Finish delete lines section of the walkthrough, add selectMenuItem helper

Browse Source
This commit is contained in:
Bryan Housel
2017-04-09 23:55:13 -04:00
parent 7371f869c8
commit ec1e5cb50d
6 changed files with 149 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/core.yaml
+3 -3
View File
@@ -955,9 +955,9 @@ en:
rightclick_intersection: "The last real street is {street1}, so we will split {street2} at this intersection and remove everything above it. **Right click on the intersection node**"
split_intersection: "**Click on the {button} button to split {street}.**"
retry_split: "You didn't click the Split button. Try again."
select_segment_multi: "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**"
select_segment_single: "**Click the top part of {street2} to select it.**"
multi_select: "Let's also select {street1}. You can shift-click to select. **Shift-click on {street2}.**"
did_split_multi: "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**"
did_split_single: "**Click the top part of {street2} to select it.**"
multi_select: "{selected} is now selected. Let's also select {other1}. You can shift-click to select multiple things. **Shift-click on {other2}.**"
multi_rightclick: "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**"
multi_delete: "**Click on the {button} button to delete the extra lines.**"
retry_delete: "You didn't click the Delete button. Try again."
dist/locales/en.json
Vendored
+3 -3
View File
@@ -818,9 +818,9 @@
"rightclick_intersection": "The last real street is {street1}, so we will split {street2} at this intersection and remove everything above it. **Right click on the intersection node**",
"split_intersection": "**Click on the {button} button to split {street}.**",
"retry_split": "You didn't click the Split button. Try again.",
"select_segment_multi": "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**",
"select_segment_single": "**Click the top part of {street2} to select it.**",
"multi_select": "Let's also select {street1}. You can shift-click to select. **Shift-click on {street2}.**",
"did_split_multi": "Good Job! {street1} is now split into two pieces. The top part can be removed. **Click the top part of {street2} to select it.**",
"did_split_single": "**Click the top part of {street2} to select it.**",
"multi_select": "{selected} is now selected. Let's also select {other1}. You can shift-click to select multiple things. **Shift-click on {other2}.**",
"multi_rightclick": "Good! Both lines to delete are now selected. **Right-click on one of the lines to show the edit menu.**",
"multi_delete": "**Click on the {button} button to delete the extra lines.**",
"retry_delete": "You didn't click the Delete button. Try again.",
modules/ui/intro/building.js
+7 -7
View File
@@ -2,7 +2,7 @@ import * as d3 from 'd3';
import { t } from '../../util/locale';
import { modeBrowse } from '../../modes/browse';
import { utilRebind } from '../../util/rebind';
import { icon, pad } from './helper';
import { icon, pad, selectMenuItem } from './helper';
export function uiIntroBuilding(context, reveal) {
@@ -229,7 +229,7 @@ export function uiIntroBuilding(context, reveal) {
if (ids.length !== 1 || ids[0] !== houseId) return;
timeout(function() {
var node = d3.select('.edit-menu-item-orthogonalize, .radial-menu-item-orthogonalize').node();
var node = selectMenuItem('orthogonalize').node();
if (!node) return;
continueTo(clickSquare);
}, 300); // after menu visible
@@ -257,7 +257,7 @@ export function uiIntroBuilding(context, reveal) {
var entity = context.hasEntity(houseId);
if (!entity) return continueTo(rightClickHouse);
var node = d3.select('.edit-menu-item-orthogonalize, .radial-menu-item-orthogonalize').node();
var node = selectMenuItem('orthogonalize').node();
if (!node) { return continueTo(rightClickHouse); }
var wasChanged = false;
@@ -275,7 +275,7 @@ export function uiIntroBuilding(context, reveal) {
});
context.map().on('move.intro drawn.intro', function() {
var node = d3.select('.edit-menu-item-orthogonalize, .radial-menu-item-orthogonalize').node();
var node = selectMenuItem('orthogonalize').node();
if (!wasChanged && !node) { return continueTo(rightClickHouse); }
revealHouse(house,
@@ -510,7 +510,7 @@ export function uiIntroBuilding(context, reveal) {
if (ids.length !== 1 || ids[0] !== tankId) return;
timeout(function() {
var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node();
var node = selectMenuItem('circularize').node();
if (!node) return;
continueTo(clickCircle);
}, 300); // after menu visible
@@ -538,7 +538,7 @@ export function uiIntroBuilding(context, reveal) {
var entity = context.hasEntity(tankId);
if (!entity) return continueTo(rightClickTank);
var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node();
var node = selectMenuItem('circularize').node();
if (!node) { return continueTo(rightClickTank); }
var wasChanged = false;
@@ -556,7 +556,7 @@ export function uiIntroBuilding(context, reveal) {
});
context.map().on('move.intro drawn.intro', function() {
var node = d3.select('.edit-menu-item-circularize, .radial-menu-item-circularize').node();
var node = selectMenuItem('circularize').node();
if (!wasChanged && !node) { return continueTo(rightClickTank); }
revealTank(tank,
modules/ui/intro/helper.js
+7
View File
@@ -1,3 +1,4 @@
import * as d3 from 'd3';
import { t } from '../../util/locale';
export function pointBox(loc, context) {
@@ -92,3 +93,9 @@ export function localize(obj) {
return obj;
}
export function selectMenuItem(operation) {
var selector = '.edit-menu .edit-menu-item-' + operation +
', .radial-menu .radial-menu-item-' + operation;
return d3.select(selector);
}
modules/ui/intro/line.js
+127 -100
View File
@@ -4,7 +4,7 @@ import { t } from '../../util/locale';
import { geoSphericalDistance } from '../../geo';
import { modeBrowse, modeSelect } from '../../modes';
import { utilRebind } from '../../util/rebind';
import { icon, pad } from './helper';
import { icon, pad, selectMenuItem } from './helper';
export function uiIntroLine(context, reveal) {
@@ -25,8 +25,10 @@ export function uiIntroLine(context, reveal) {
washingtonStreetId = 'w522',
twelfthAvenueId = 'w1',
eleventhAvenueEndId = 'n3550',
twelfthAvenueEndId = 'n5',
washingtonSegmentId = null,
eleventhAvenueEnd = context.entity(eleventhAvenueEndId).loc,
twelfthAvenueEnd = context.entity(twelfthAvenueEndId).loc,
deleteLinesLoc = [-85.6219395542764, 41.95228033922477],
twelfthAvenue = [-85.62219310052491, 41.952505413152956];
@@ -579,10 +581,18 @@ export function uiIntroLine(context, reveal) {
{ duration: 0, buttonText: t('intro.ok'), buttonCallback: advance }
);
});
context.history().on('change.intro', function() {
timeout(function() {
continueTo(deleteLines);
}, 500); // after any transition (e.g. if user deleted intersection)
});
}, 550);
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
nextStep();
}
}
@@ -590,6 +600,7 @@ export function uiIntroLine(context, reveal) {
function rightClickIntersection() {
context.history().reset('doneUpdateLine');
context.enter(modeBrowse(context));
context.map().zoom(18).centerEase(eleventhAvenueEnd, 500);
timeout(function() {
@@ -614,14 +625,16 @@ export function uiIntroLine(context, reveal) {
if (ids.length !== 1 || ids[0] !== eleventhAvenueEndId) return;
timeout(function() {
var node = d3.select('.edit-menu-item-split, .radial-menu-item-split').node();
var node = selectMenuItem('split').node();
if (!node) return;
continueTo(splitIntersection);
}, 300); // after menu visible
});
context.history().on('change.intro', function() {
context.history().reset('doneUpdateLine');
timeout(function() {
continueTo(deleteLines);
}, 300); // after any transition (e.g. if user deleted intersection)
});
}, 550);
@@ -642,7 +655,7 @@ export function uiIntroLine(context, reveal) {
return continueTo(deleteLines);
}
var node = d3.select('.edit-menu-item-split, .radial-menu-item-split').node();
var node = selectMenuItem('split').node();
if (!node) { return continueTo(rightClickIntersection); }
var wasChanged = false;
@@ -658,7 +671,7 @@ export function uiIntroLine(context, reveal) {
);
context.map().on('move.intro drawn.intro', function() {
var node = d3.select('.edit-menu-item-split, .radial-menu-item-split').node();
var node = selectMenuItem('split').node();
if (!wasChanged && !node) { return continueTo(rightClickIntersection); }
var padding = 60 * Math.pow(2, context.map().zoom() - 18);
@@ -671,31 +684,20 @@ export function uiIntroLine(context, reveal) {
);
});
context.on('enter.intro', function(mode) {
if (mode.id === 'browse') {
continueTo(rightClickIntersection);
}
});
context.history().on('change.intro', function(changed) {
wasChanged = true;
context.history().on('change.intro', null);
context.on('enter.intro', null);
// Something changed. Wait for transition to complete and check undo annotation.
timeout(function() {
if (context.history().undoAnnotation() === t('operations.split.annotation.line')) {
washingtonSegmentId = changed.created()[0].id;
continueTo(singleSelect);
continueTo(didSplit);
} else {
washingtonSegmentId = null;
continueTo(retrySplit);
}
}, 500); // after transitioned actions
}, 300); // after any transition (e.g. if user deleted intersection)
});
function continueTo(nextStep) {
context.on('enter.intro', null);
context.map().on('move.intro drawn.intro', null);
context.history().on('change.intro', null);
nextStep();
@@ -705,6 +707,7 @@ export function uiIntroLine(context, reveal) {
function retrySplit() {
context.enter(modeBrowse(context));
context.map().zoom(18).centerEase(eleventhAvenueEnd, 500);
var advance = function() { continueTo(rightClickIntersection); };
var padding = 60 * Math.pow(2, context.map().zoom() - 18);
@@ -728,7 +731,7 @@ export function uiIntroLine(context, reveal) {
}
function singleSelect() {
function didSplit() {
if (!washingtonSegmentId ||
!context.hasEntity(washingtonSegmentId) ||
!context.hasEntity(washingtonStreetId) ||
@@ -739,44 +742,40 @@ export function uiIntroLine(context, reveal) {
context.map().zoom(18).centerEase(twelfthAvenue, 400);
timeout(function() {
var ids = context.selectedIDs();
var string = 'intro.lines.select_segment_' + (ids.length > 1 ? 'multi' : 'single');
var ids = context.selectedIDs();
var string = 'intro.lines.did_split_' + (ids.length > 1 ? 'multi' : 'single');
var street = t('intro.graph.name.washington-street');
var street = t('intro.graph.name.washington-street');
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
box.width = box.width / 2;
reveal(box, t(string, { street1: street, street2: street }));
context.map().on('move.intro drawn.intro', function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
box.width = box.width / 2;
reveal(box, t(string, { street1: street, street2: street }));
reveal(box, t(string, { street1: street, street2: street }),
{ duration: 0 }
);
});
context.map().on('move.intro drawn.intro', function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
box.width = box.width / 2;
reveal(box, t(string, { street1: street, street2: street }),
{ duration: 0 }
);
});
context.on('enter.intro', function() {
var ids = context.selectedIDs();
if (ids.length === 1 && ids[0] === washingtonSegmentId) {
continueTo(multiSelect);
}
});
context.history().on('change.intro', function() {
if (!washingtonSegmentId ||
!context.hasEntity(washingtonSegmentId) ||
!context.hasEntity(washingtonStreetId) ||
!context.hasEntity(twelfthAvenueId) ||
!context.hasEntity(eleventhAvenueEndId)) {
return continueTo(rightClickIntersection);
}
});
}, 450);
context.on('enter.intro', function() {
var ids = context.selectedIDs();
if (ids.length === 1 && ids[0] === washingtonSegmentId) {
continueTo(multiSelect);
}
});
context.history().on('change.intro', function() {
if (!washingtonSegmentId ||
!context.hasEntity(washingtonSegmentId) ||
!context.hasEntity(washingtonStreetId) ||
!context.hasEntity(twelfthAvenueId) ||
!context.hasEntity(eleventhAvenueEndId)) {
return continueTo(rightClickIntersection);
}
});
function continueTo(nextStep) {
context.map().on('move.intro drawn.intro', null);
@@ -796,31 +795,61 @@ export function uiIntroLine(context, reveal) {
return continueTo(rightClickIntersection);
}
var ids = context.selectedIDs();
var hasWashington = ids.indexOf(washingtonSegmentId) !== -1;
var hasTwelfth = ids.indexOf(twelfthAvenueId) !== -1;
if (hasWashington && hasTwelfth) {
return continueTo(multiRightClick);
} else if (!hasWashington && !hasTwelfth) {
return continueTo(didSplit);
}
context.map().zoom(18).centerEase(twelfthAvenue, 400);
timeout(function() {
var street = t('intro.graph.name.12th-avenue');
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
reveal(box, t('intro.lines.multi_select', { street1: street, street2: street }));
var selected, other, padding, box;
if (hasWashington) {
selected = t('intro.graph.name.washington-street');
other = t('intro.graph.name.12th-avenue');
padding = 60 * Math.pow(2, context.map().zoom() - 18);
box = pad(twelfthAvenueEnd, padding, context);
box.width *= 3;
} else {
selected = t('intro.graph.name.12th-avenue');
other = t('intro.graph.name.washington-street');
padding = 200 * Math.pow(2, context.map().zoom() - 18);
box = pad(twelfthAvenue, padding, context);
box.width /= 2;
}
reveal(box,
t('intro.lines.multi_select', { selected: selected, other1: other, other2: other })
);
context.map().on('move.intro drawn.intro', function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
reveal(box, t('intro.lines.multi_select', { street1: street, street2: street }),
if (hasWashington) {
selected = t('intro.graph.name.washington-street');
other = t('intro.graph.name.12th-avenue');
padding = 60 * Math.pow(2, context.map().zoom() - 18);
box = pad(twelfthAvenueEnd, padding, context);
box.width *= 3;
} else {
selected = t('intro.graph.name.12th-avenue');
other = t('intro.graph.name.washington-street');
padding = 200 * Math.pow(2, context.map().zoom() - 18);
box = pad(twelfthAvenue, padding, context);
box.width /= 2;
}
reveal(box,
t('intro.lines.multi_select', { selected: selected, other1: other, other2: other }),
{ duration: 0 }
);
});
context.on('enter.intro', function() {
var ids = context.selectedIDs();
if (ids.length === 2 &&
ids.indexOf(twelfthAvenueId) !== -1 &&
ids.indexOf(washingtonSegmentId) !== -1) {
return continueTo(multiRightClick);
} else {
return continueTo(singleSelect);
}
continueTo(multiSelect);
});
context.history().on('change.intro', function() {
@@ -863,22 +892,21 @@ export function uiIntroLine(context, reveal) {
});
d3.select(window).on('click.intro contextmenu.intro', function() {
d3.select(window).on('click.intro contextmenu.intro', null, true);
var ids = context.selectedIDs();
if (ids.length === 2 &&
ids.indexOf(twelfthAvenueId) !== -1 &&
ids.indexOf(washingtonSegmentId) !== -1) {
timeout(function() {
var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
if (!node) return;
continueTo(multiDelete);
}, 300); // after menu visible
} else if (ids.length === 1 &&
ids.indexOf(washingtonSegmentId) !== -1) {
return continueTo(multiSelect);
} else {
return continueTo(singleSelect);
}
timeout(function() {
var ids = context.selectedIDs();
if (ids.length === 2 &&
ids.indexOf(twelfthAvenueId) !== -1 &&
ids.indexOf(washingtonSegmentId) !== -1) {
var node = selectMenuItem('delete').node();
if (!node) return;
continueTo(multiDelete);
} else if (ids.length === 1 &&
ids.indexOf(washingtonSegmentId) !== -1) {
return continueTo(multiSelect);
} else {
return continueTo(didSplit);
}
}, 300); // after edit menu visible
}, true);
context.history().on('change.intro', function() {
@@ -909,33 +937,36 @@ export function uiIntroLine(context, reveal) {
return continueTo(rightClickIntersection);
}
var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
var node = selectMenuItem('delete').node();
if (!node) return continueTo(multiRightClick);
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
reveal(box, t('intro.lines.multi_delete'));
reveal(box,
t('intro.lines.multi_delete', { button: icon('#operation-delete', 'pre-text') })
);
context.map().on('move.intro drawn.intro', function() {
var padding = 200 * Math.pow(2, context.map().zoom() - 18);
var box = pad(twelfthAvenue, padding, context);
reveal(box, t('intro.lines.multi_delete'), { duration: 0 });
reveal(box,
t('intro.lines.multi_delete', { button: icon('#operation-delete', 'pre-text') }),
{ duration: 0 }
);
});
context.on('exit.intro', function() {
if (!washingtonSegmentId) {
return continueTo(rightClickIntersection);
}
if (context.hasEntity(washingtonSegmentId) || context.hasEntity(twelfthAvenueId)) {
return continueTo(multiRightClick); // roads still exist
return continueTo(multiSelect); // left select mode but roads still exist
}
});
context.history().on('change.intro', function(changed) {
if (changed.deleted().length === 2)
context.history().on('change.intro', function() {
if (context.hasEntity(washingtonSegmentId) || context.hasEntity(twelfthAvenueId)) {
continueTo(retryDelete); // changed something but roads still exist
} else {
continueTo(play);
else
continueTo(retryDelete);
}
});
function continueTo(nextStep) {
@@ -954,7 +985,7 @@ export function uiIntroLine(context, reveal) {
var box = pad(twelfthAvenue, padding, context);
reveal(box, t('intro.lines.retry_delete'), {
buttonText: t('intro.ok'),
buttonCallback: function() { continueTo(multiRightClick); }
buttonCallback: function() { continueTo(multiSelect); }
});
function continueTo(nextStep) {
@@ -976,12 +1007,8 @@ export function uiIntroLine(context, reveal) {
chapter.enter = function() {
context.history().reset('initial');
// context.map().zoom(18.5).centerEase(tulipRoadStart);
// addLine();
// for testing:
context.history().checkpoint('doneUpdateLine');
deleteLines();
context.map().zoom(18.5).centerEase(tulipRoadStart);
addLine();
};
modules/ui/intro/point.js
+2 -2
View File
@@ -1,7 +1,7 @@
import * as d3 from 'd3';
import { t, textDirection } from '../../util/locale';
import { utilRebind } from '../../util/rebind';
import { icon, pointBox, pad } from './helper';
import { icon, pointBox, pad, selectMenuItem } from './helper';
export function uiIntroPoint(context, reveal) {
@@ -285,7 +285,7 @@ export function uiIntroPoint(context, reveal) {
if (ids.length !== 1 || ids[0] !== pointId) return;
timeout(function() {
var node = d3.select('.edit-menu-item-delete, .radial-menu-item-delete').node();
var node = selectMenuItem('delete').node();
if (!node) return;
continueTo(enterDelete);
}, 300); // after menu visible