Support both reflect long axis and reflect short axis operations

This commit is contained in:
Bryan Housel
2016-12-16 13:59:33 -05:00
parent dca1c8fb41
commit 2267035dfb
7 changed files with 93 additions and 75 deletions
+3 -1
View File
@@ -134,7 +134,9 @@ en:
description:
long: Reflect this object across its long axis.
short: Reflect this object across its short axis.
key: T
key:
long: T
short: Y
annotation:
long: Reflected an area across its long axis.
short: Reflected an area across its short axis.
+4 -1
View File
@@ -169,7 +169,10 @@
"long": "Reflect this object across its long axis.",
"short": "Reflect this object across its short axis."
},
"key": "T",
"key": {
"long": "T",
"short": "Y"
},
"annotation": {
"long": "Reflected an area across its long axis.",
"short": "Reflected an area across its short axis."
+10 -11
View File
@@ -66,19 +66,18 @@ export function actionReflect(wayId, projection) {
return graph;
}
var ssr = getSmallestSurroundingRectangle(graph, targetWay),
nodes = targetWay.nodes;
var ssr = getSmallestSurroundingRectangle(graph, targetWay);
var nodes = targetWay.nodes,
// Choose line pq = axis of symmetry.
// The shape's surrounding rectangle has 2 axes of symmetry.
// Reflect across the longer axis by default.
var p1 = [(ssr.poly[0][0] + ssr.poly[1][0]) / 2, (ssr.poly[0][1] + ssr.poly[1][1]) / 2 ],
q1 = [(ssr.poly[2][0] + ssr.poly[3][0]) / 2, (ssr.poly[2][1] + ssr.poly[3][1]) / 2 ],
p2 = [(ssr.poly[3][0] + ssr.poly[4][0]) / 2, (ssr.poly[3][1] + ssr.poly[4][1]) / 2 ],
q2 = [(ssr.poly[1][0] + ssr.poly[2][0]) / 2, (ssr.poly[1][1] + ssr.poly[2][1]) / 2 ],
p, q;
// Choose line pq = axis of symmetry
// The shape's surrounding rectangle has 2 axes of symmetry
// By default we reflect across the longer axis.
p1 = [(ssr.poly[0][0] + ssr.poly[1][0]) / 2, (ssr.poly[0][1] + ssr.poly[1][1]) / 2 ];
q1 = [(ssr.poly[2][0] + ssr.poly[3][0]) / 2, (ssr.poly[2][1] + ssr.poly[3][1]) / 2 ];
p2 = [(ssr.poly[3][0] + ssr.poly[4][0]) / 2, (ssr.poly[3][1] + ssr.poly[4][1]) / 2 ];
q2 = [(ssr.poly[1][0] + ssr.poly[2][0]) / 2, (ssr.poly[1][1] + ssr.poly[2][1]) / 2 ];
var isLong = (geoEuclideanDistance(p1, q1) > geoEuclideanDistance(p2, q2));
if ((useLongAxis && isLong) || (!useLongAxis && !isLong)) {
p = p1;
@@ -109,7 +108,7 @@ export function actionReflect(wayId, projection) {
};
action.longAxis = function(_) {
action.useLongAxis = function(_) {
if (!arguments.length) return useLongAxis;
useLongAxis = _;
return action;
+1
View File
@@ -414,6 +414,7 @@ export function modeSelect(context, selectedIDs) {
operations.forEach(function(operation) {
operation.keys.forEach(function(key) {
keybinding.on(key, function() {
d3.event.preventDefault();
if (!(context.inIntro() || operation.disabled())) {
operation();
}
+1 -1
View File
@@ -5,8 +5,8 @@ export { operationDisconnect } from './disconnect';
export { operationMerge } from './merge';
export { operationMove } from './move';
export { operationOrthogonalize } from './orthogonalize';
export { operationReflectShort, operationReflectLong } from './reflect';
export { operationReverse } from './reverse';
export { operationRotate } from './rotate';
export { operationSplit } from './split';
export { operationStraighten } from './straighten';
export { operationReflect } from './reflect';
+16 -4
View File
@@ -2,12 +2,24 @@ import { t } from '../util/locale';
import { actionReflect } from '../actions/index';
export function operationReflect(selectedIDs, context) {
export function operationReflectShort(selectedIDs, context) {
return operationReflect(selectedIDs, context, 'short');
}
export function operationReflectLong(selectedIDs, context) {
return operationReflect(selectedIDs, context, 'long');
}
export function operationReflect(selectedIDs, context, axis) {
axis = axis || 'long';
var entityId = selectedIDs[0];
var entity = context.entity(entityId);
var extent = entity.extent(context.graph());
var action = actionReflect(entityId, context.projection);
var axis = 'long';
var action = actionReflect(entityId, context.projection)
.useLongAxis(Boolean(axis === 'long'));
var operation = function() {
context.perform(
@@ -39,7 +51,7 @@ export function operationReflect(selectedIDs, context) {
};
operation.id = 'reflect-' + axis;
operation.keys = [t('operations.reflect.key')];
operation.keys = [t('operations.reflect.key.' + axis)];
operation.title = t('operations.reflect.title');
return operation;
+58 -57
View File
@@ -1,78 +1,79 @@
describe('iD.actionReflect', function() {
var projection = d3.geoMercator();
it('reflects horizontally - does not change graph length', function () {
it('does not create or remove nodes', function () {
var graph = iD.Graph([
iD.Node({id: 'a', loc: [0, 0]}),
iD.Node({id: 'b', loc: [2, 0]}),
iD.Node({id: 'c', loc: [2, 2]}),
iD.Node({id: 'd', loc: [0, 2]}),
iD.Node({id: 'b', loc: [4, 0]}),
iD.Node({id: 'c', loc: [4, 2]}),
iD.Node({id: 'd', loc: [1, 2]}),
iD.Way({id: '-', nodes: ['a', 'b', 'c', 'd', 'a'], tags: { area: 'yes'}})
]);
graph = iD.actionReflect('-')(graph);
graph = iD.actionReflect('-', projection)(graph);
expect(graph.entity('-').nodes).to.have.length(5);
});
it('reflects horizontally - alters x value', function () {
var graph = iD.Graph([
iD.Node({id: 'a', loc: [0, 0]}),
iD.Node({id: 'b', loc: [2, 0]}),
iD.Node({id: 'c', loc: [2, 2]}),
iD.Node({id: 'd', loc: [0, 2]}),
iD.Way({id: '-', nodes: ['a', 'b', 'c', 'd', 'a'], tags: { area: 'yes'}})
]);
graph = iD.actionReflect('-')(graph);
expect(graph.entity('a').loc[0]).to.equal(2); // A should be 2,0 now
expect(graph.entity('b').loc[0]).to.equal(0); // B should be 0,0 now
expect(graph.entity('c').loc[0]).to.equal(0); // C should be 0,2 now
expect(graph.entity('d').loc[0]).to.equal(2); // D should be 2,2 now
});
it('reflects horizontally - does not alter y value', function () {
var graph = iD.Graph([
iD.Node({id: 'a', loc: [0, 0]}),
iD.Node({id: 'b', loc: [2, 0]}),
iD.Node({id: 'c', loc: [2, 2]}),
iD.Node({id: 'd', loc: [0, 2]}),
iD.Way({id: '-', nodes: ['a', 'b', 'c', 'd', 'a'], tags: { area: 'yes'}})
]);
graph = iD.actionReflect('-')(graph);
expect(graph.entity('a').loc[1]).to.equal(0); // A should be 2,0 now
expect(graph.entity('b').loc[1]).to.equal(0); // B should be 0,0 now
expect(graph.entity('c').loc[1]).to.equal(2); // C should be 0,2 now
expect(graph.entity('d').loc[1]).to.equal(2); // D should be 2,2 now
});
it('does not flip horizontally if not an area - does not alter x value', function () {
it('only operates on areas', function () {
var graph = iD.Graph([
iD.Node({id: 'a', loc: [0, 0]}),
iD.Node({id: 'b', loc: [2, 0]}),
iD.Node({id: 'c', loc: [2, 2]}),
iD.Node({id: 'd', loc: [0, 2]}),
iD.Node({id: 'b', loc: [4, 0]}),
iD.Node({id: 'c', loc: [4, 2]}),
iD.Node({id: 'd', loc: [1, 2]}),
iD.Way({id: '-', nodes: ['a', 'b', 'c', 'd', 'a']})
]);
graph = iD.actionReflect('-')(graph);
// should be no change
expect(graph.entity('a').loc[0]).to.equal(0);
expect(graph.entity('b').loc[0]).to.equal(2);
expect(graph.entity('c').loc[0]).to.equal(2);
expect(graph.entity('d').loc[0]).to.equal(0);
var graph2 = iD.actionReflect('-', projection)(graph);
expect(graph2).to.deep.equal(graph);
});
it('does not flip horizontally if not an area - does not alter y value', function () {
it('reflects across long axis', function () {
//
// d -- c a ---- b
// / | -> \ |
// a ---- b d -- c
//
var graph = iD.Graph([
iD.Node({id: 'a', loc: [0, 0]}),
iD.Node({id: 'b', loc: [2, 0]}),
iD.Node({id: 'c', loc: [2, 2]}),
iD.Node({id: 'd', loc: [0, 2]}),
iD.Way({id: '-', nodes: ['a', 'b', 'c', 'd', 'a']})
iD.Node({id: 'b', loc: [4, 0]}),
iD.Node({id: 'c', loc: [4, 2]}),
iD.Node({id: 'd', loc: [1, 2]}),
iD.Way({id: '-', nodes: ['a', 'b', 'c', 'd', 'a'], tags: { area: 'yes'}})
]);
graph = iD.actionReflect('-')(graph);
// should be no change
expect(graph.entity('a').loc[1]).to.equal(0);
expect(graph.entity('b').loc[1]).to.equal(0);
expect(graph.entity('c').loc[1]).to.equal(2);
expect(graph.entity('d').loc[1]).to.equal(2);
graph = iD.actionReflect('-', projection)(graph);
expect(graph.entity('a').loc[0]).to.be.closeTo(0, 1e-6);
expect(graph.entity('a').loc[1]).to.be.closeTo(2, 1e-6);
expect(graph.entity('b').loc[0]).to.be.closeTo(4, 1e-6);
expect(graph.entity('b').loc[1]).to.be.closeTo(2, 1e-6);
expect(graph.entity('c').loc[0]).to.be.closeTo(4, 1e-6);
expect(graph.entity('c').loc[1]).to.be.closeTo(0, 1e-6);
expect(graph.entity('d').loc[0]).to.be.closeTo(1, 1e-6);
expect(graph.entity('d').loc[1]).to.be.closeTo(0, 1e-6);
});
it('reflects across short axis', function () {
//
// d -- c c -- d
// / | -> | \
// a ---- b b ---- a
//
var graph = iD.Graph([
iD.Node({id: 'a', loc: [0, 0]}),
iD.Node({id: 'b', loc: [4, 0]}),
iD.Node({id: 'c', loc: [4, 2]}),
iD.Node({id: 'd', loc: [1, 2]}),
iD.Way({id: '-', nodes: ['a', 'b', 'c', 'd', 'a'], tags: { area: 'yes'}})
]);
graph = iD.actionReflect('-', projection).useLongAxis(false)(graph);
expect(graph.entity('a').loc[0]).to.be.closeTo(4, 1e-6);
expect(graph.entity('a').loc[1]).to.be.closeTo(0, 1e-6);
expect(graph.entity('b').loc[0]).to.be.closeTo(0, 1e-6);
expect(graph.entity('b').loc[1]).to.be.closeTo(0, 1e-6);
expect(graph.entity('c').loc[0]).to.be.closeTo(0, 1e-6);
expect(graph.entity('c').loc[1]).to.be.closeTo(2, 1e-6);
expect(graph.entity('d').loc[0]).to.be.closeTo(3, 1e-6);
expect(graph.entity('d').loc[1]).to.be.closeTo(2, 1e-6);
});
});