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

Move field rendering code from preset_editor to field.js

Browse Source
This commit is contained in:
Bryan Housel
2017-08-03 01:10:59 -04:00
parent f6e76665a0
commit 1bf514b7fc
5 changed files with 132 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
css/80_app.css
View File

@@ -1024,22 +1024,22 @@ button.save.has-count .count::before {
/* preset form basics */
.inspector-preset {
.preset-editor {
overflow: hidden;
padding-bottom: 10px;
}
.inspector-preset a.hide-toggle {
.preset-editor a.hide-toggle {
margin: 0 20px 10px 20px;
}
.inspector-preset .preset-form {
.preset-editor .preset-form {
padding: 10px;
margin: 0 10px 10px 10px;
border-radius: 8px;
}
.inspector-preset .preset-form:empty {
.preset-editor .preset-form:empty {
display: none;
}
@@ -1056,7 +1056,7 @@ button.save.has-count .count::before {
transition: margin-bottom 200ms;
}
.form-field:last-child {
.wrap-form-field:last-child .form-field {
margin-bottom: 0;
}

4
modules/ui/entity_editor.js
View File

@@ -88,7 +88,7 @@ export function uiEntityEditor(context) {
enter
.append('div')
.attr('class', 'inspector-border inspector-preset');
.attr('class', 'inspector-border preset-editor');
enter
.append('div')
@@ -129,7 +129,7 @@ export function uiEntityEditor(context) {
body.select('.preset-list-item .label')
.text(activePreset.name());
body.select('.inspector-preset')
body.select('.preset-editor')
.call(presetEditor
.preset(activePreset)
.entityID(id)

135
modules/ui/field.js
View File

@@ -1,22 +1,23 @@
import * as d3 from 'd3';
import _ from 'lodash';
import { textDirection } from '../util/locale';
import { svgIcon } from '../svg';
import { uiFields } from './fields';
import { utilRebind } from '../util';
import { uiTagReference } from './tag_reference';
export function uiField(context, dispatch, presetField, entity, show) {
var field = _.clone(presetField),
tags;
field.render = uiFields[field.type](field, context)
field.impl = uiFields[field.type](field, context)
.on('change', function(t, onInput) {
dispatch.call('change', field, t, onInput);
});
if (field.render.entity) {
field.render.entity(entity);
if (field.impl.entity) {
field.impl.entity(entity);
}
field.keys = field.keys || [field.key];
@@ -24,42 +25,117 @@ export function uiField(context, dispatch, presetField, entity, show) {
field.show = show;
field.shown = function() {
return field.show || _.some(field.keys, function(key) { return !!tags[key]; });
};
field.modified = function() {
function isModified() {
var original = context.graph().base().entities[entity.id];
return _.some(field.keys, function(key) {
return original ? tags[key] !== original.tags[key] : tags[key];
});
};
}
field.revert = function() {
var original = context.graph().base().entities[entity.id],
t = {};
field.keys.forEach(function(key) {
t[key] = original ? original.tags[key] : undefined;
});
return t;
};
field.present = function() {
function isPresent() {
return _.some(field.keys, function(key) {
return tags[key];
});
};
}
field.remove = function() {
function revert(d) {
d3.event.stopPropagation();
d3.event.preventDefault();
var original = context.graph().base().entities[entity.id],
t = {};
d.keys.forEach(function(key) {
t[key] = original ? original.tags[key] : undefined;
});
dispatch.call('change', d, t);
}
function remove(d) {
d3.event.stopPropagation();
d3.event.preventDefault();
var t = {};
field.keys.forEach(function(key) {
d.keys.forEach(function(key) {
t[key] = undefined;
});
return t;
dispatch.call('change', d, t);
}
field.render = function(selection) {
var container = selection.selectAll('.form-field')
.data([field]);
// Enter
var enter = container.enter()
.append('div')
.attr('class', function(d) { return 'form-field form-field-' + d.id; });
var label = enter
.append('label')
.attr('class', 'form-label')
.attr('for', function(d) { return 'preset-input-' + d.id; })
.text(function(d) { return d.label(); });
var wrap = label
.append('div')
.attr('class', 'form-label-button-wrap');
wrap
.append('button')
.attr('class', 'remove-icon')
.attr('tabindex', -1)
.call(svgIcon('#operation-delete'));
wrap
.append('button')
.attr('class', 'modified-icon')
.attr('tabindex', -1)
.call(
(textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo')
);
// Update
container = container
.merge(enter);
container.selectAll('.form-label-button-wrap .remove-icon')
.on('click', remove);
container.selectAll('.form-label-button-wrap .modified-icon')
.on('click', revert);
container
.classed('modified', isModified())
.classed('present', isPresent())
.each(function(d) {
var referenceKey = d.key;
if (d.type === 'multiCombo') { // lookup key without the trailing ':'
referenceKey = referenceKey.replace(/:$/, '');
}
var reference = uiTagReference(d.reference || { key: referenceKey }, context);
//FIXME
// if (state === 'hover') {
// reference.showing(false);
// }
d3.select(this)
.call(d.impl);
d3.select(this)
.call(reference.body)
.select('.form-label-button-wrap')
.call(reference.button);
d.impl.tags(tags);
});
};
@@ -70,6 +146,11 @@ export function uiField(context, dispatch, presetField, entity, show) {
};
field.isShown = function() {
return field.show || _.some(field.keys, function(key) { return !!tags[key]; });
};
return field;
}

2
modules/ui/intro/navigation.js
View File

@@ -326,7 +326,7 @@ export function uiIntroNavigation(context, reveal) {
var onClick = function() { continueTo(closeTownHall); };
reveal('.inspector-body .inspector-preset',
reveal('.inspector-body .preset-editor',
t('intro.navigation.fields_townhall'),
{ buttonText: t('intro.ok'), buttonCallback: onClick }
);

107
modules/ui/preset_editor.js
View File

@@ -1,12 +1,9 @@
import * as d3 from 'd3';
import _ from 'lodash';
import { d3combobox } from '../lib/d3.combobox.js';
import { t, textDirection } from '../util/locale';
import { t } from '../util/locale';
import { modeBrowse } from '../modes';
import { svgIcon } from '../svg';
import { uiDisclosure } from './disclosure';
import { uiField } from './field';
import { uiTagReference } from './tag_reference';
import {
utilGetSetValue,
utilNoAuto,
@@ -29,7 +26,7 @@ export function uiPresetEditor(context) {
.title(t('inspector.all_fields'))
.expanded(expandedPreference)
.on('toggled', toggled)
.content(content)
.content(render)
);
function toggled(expanded) {
@@ -39,7 +36,7 @@ export function uiPresetEditor(context) {
}
function content(selection) {
function render(selection) {
if (!fieldsArr) {
var entity = context.entity(id),
geometry = context.geometry(id),
@@ -62,7 +59,7 @@ export function uiPresetEditor(context) {
}
presets.universal().forEach(function(field) {
if (preset.fields.indexOf(field) < 0) {
if (preset.fields.indexOf(field) === -1) {
fieldsArr.push(
uiField(context, dispatch, field, entity).tags(tags)
);
@@ -70,8 +67,8 @@ export function uiPresetEditor(context) {
});
}
var shown = fieldsArr.filter(function(field) { return field.shown(); }),
notShown = fieldsArr.filter(function(field) { return !field.shown(); });
var shown = fieldsArr.filter(function(field) { return field.isShown(); }),
notShown = fieldsArr.filter(function(field) { return !field.isShown(); });
var form = selection.selectAll('.preset-form')
@@ -83,7 +80,7 @@ export function uiPresetEditor(context) {
.merge(form);
var fields = form.selectAll('.preset-form-field')
var fields = form.selectAll('.wrap-form-field')
.data(shown, function(d) { return d.id; });
fields.exit()
@@ -92,47 +89,17 @@ export function uiPresetEditor(context) {
// Enter
var enter = fields.enter()
.append('div')
.attr('class', function(d) { return 'preset-form-field preset-form-field-' + d.id; });
// var label = enter
// .append('label')
// .attr('class', 'form-label')
// .attr('for', function(d) { return 'preset-input-' + d.id; })
// .text(function(d) { return d.label(); });
// var wrap = label
// .append('div')
// .attr('class', 'form-label-button-wrap');
// wrap.append('button')
// .attr('class', 'remove-icon')
// .attr('tabindex', -1)
// .call(svgIcon('#operation-delete'));
// wrap.append('button')
// .attr('class', 'modified-icon')
// .attr('tabindex', -1)
// .call(
// (textDirection === 'rtl') ? svgIcon('#icon-redo') : svgIcon('#icon-undo')
// );
.attr('class', function(d) { return 'wrap-form-field wrap-form-field-' + d.id; });
// Update
fields = fields
.merge(enter);
// fields.selectAll('.form-label-button-wrap .remove-icon')
// .on('click', remove);
// fields.selectAll('.modified-icon')
// .on('click', revert);
fields
.order()
.each(function(field) {
.each(function(d) {
d3.select(this)
.call(field.render)
.call(d.render)
.selectAll('input')
.on('keydown', function() {
// if user presses enter, and combobox is not active, accept edits..
@@ -141,39 +108,9 @@ export function uiPresetEditor(context) {
}
});
field.render.tags(tags);
d.tags(tags);
});
// .classed('modified', function(d) { return d.modified(); })
// .classed('present', function(d) { return d.present(); })
// .each(function(field) {
// var referenceKey = field.key;
// if (field.type === 'multiCombo') { // lookup key without the trailing ':'
// referenceKey = referenceKey.replace(/:$/, '');
// }
// var reference = uiTagReference(field.reference || { key: referenceKey }, context);
// if (state === 'hover') {
// reference.showing(false);
// }
// d3.select(this)
// .call(field.render)
// .selectAll('input')
// .on('keydown', function() {
// // if user presses enter, and combobox is not active, accept edits..
// if (d3.event.keyCode === 13 && d3.select('.combobox').empty()) {
// context.enter(modeBrowse(context));
// }
// });
// d3.select(this)
// .call(reference.body)
// .select('.form-label-button-wrap')
// .call(reference.button);
// field.render.tags(tags);
// });
notShown = notShown.map(function(field) {
return {
@@ -229,25 +166,13 @@ export function uiPresetEditor(context) {
function show(field) {
field = field.field;
field.show = true;
content(selection);
field.input.focus();
//FIXME
// field = field.field;
// field.show = true;
// render(selection);
// field.input.focus();
}
function revert(field) {
d3.event.stopPropagation();
d3.event.preventDefault();
dispatch.call('change', field, field.revert());
}
function remove(field) {
d3.event.stopPropagation();
d3.event.preventDefault();
dispatch.call('change', field, field.remove());
}
}