ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2026-01-03 20:10:02 +00:00
Code Issues Projects Releases Wiki Activity

Added more webdriver tests testing against a real browser.

Browse Source
This commit is contained in:
orangemug
2018-01-05 17:45:55 +00:00
parent 6e86c60f89
commit 942b2240a7
47 changed files with 2244 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/App.jsx
View File

@@ -20,6 +20,7 @@ import { RevisionStore } from '../libs/revisions'
import LayerWatcher from '../libs/layerwatcher'
import tokens from '../config/tokens.json'
import isEqual from 'lodash.isequal'
import Debug from '../libs/debug'
function updateRootSpec(spec, fieldName, newValues) {
return {
@@ -53,9 +54,19 @@ export default class App extends React.Component {
this.styleStore = new StyleStore()
}
this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
if(Debug.enabled()) {
Debug.set("maputnik", "styleStore", this.styleStore);
Debug.set("maputnik", "revisionStore", this.revisionStore);
}
})
}
if(Debug.enabled()) {
Debug.set("maputnik", "revisionStore", this.revisionStore);
Debug.set("maputnik", "styleStore", this.styleStore);
}
this.state = {
errors: [],
infos: [],
@@ -70,22 +81,28 @@ export default class App extends React.Component {
this.layerWatcher = new LayerWatcher({
onVectorLayersChange: v => this.setState({ vectorLayers: v })
})
this.onKeyDown = this.onKeyDown.bind(this);
}
onKeyDown(e) {
console.log("??? keyCode ctrlKey="+e.ctrlKey+", keyCode="+e.keyCode)
// Control + Z
if(e.ctrlKey && e.keyCode === 90) {
this.onUndo(e);
}
else if(e.ctrlKey && e.keyCode === 89) {
this.onRedo(e);
}
}
componentDidMount() {
this.fetchSources();
Mousetrap.bind(['ctrl+z'], this.onUndo.bind(this));
Mousetrap.bind(['ctrl+y'], this.onRedo.bind(this));
document.addEventListener("keydown", this.onKeyDown);
}
componentWillUnmount() {
Mousetrap.unbind(['ctrl+z'], this.onUndo.bind(this));
Mousetrap.unbind(['ctrl+y'], this.onRedo.bind(this));
}
onReset() {
this.styleStore.purge()
loadDefaultStyle(mapStyle => this.onStyleOpen(mapStyle))
document.removeEventListener("keydown", this.onKeyDown);
}
saveStyle(snapshotStyle) {

2
src/components/Button.jsx
View File

@@ -4,6 +4,7 @@ import classnames from 'classnames'
class Button extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
onClick: PropTypes.func,
style: PropTypes.object,
className: PropTypes.string,
@@ -14,6 +15,7 @@ class Button extends React.Component {
return <a
onClick={this.props.onClick}
className={classnames("maputnik-button", this.props.className)}
data-wd-key={this.props["data-wd-key"]}
style={this.props.style}>
{this.props.children}
</a>

11
src/components/Toolbar.jsx
View File

@@ -63,6 +63,7 @@ class ToolbarAction extends React.Component {
render() {
return <a
className='maputnik-toolbar-action'
data-wd-key={this.props.wdKey}
onClick={this.props.onClick}
>
{this.props.children}
@@ -139,23 +140,23 @@ export default class Toolbar extends React.Component {
<h1>Maputnik</h1>
</ToolbarLink>
<div className="maputnik-toolbar__actions">
<ToolbarAction onClick={this.toggleModal.bind(this, 'open')}>
<ToolbarAction wdKey="nav:open" onClick={this.toggleModal.bind(this, 'open')}>
<OpenIcon />
<IconText>Open</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'export')}>
<ToolbarAction wdKey="nav:export" onClick={this.toggleModal.bind(this, 'export')}>
<MdFileDownload />
<IconText>Export</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'sources')}>
<ToolbarAction wdKey="nav:sources" onClick={this.toggleModal.bind(this, 'sources')}>
<SourcesIcon />
<IconText>Sources</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.toggleModal.bind(this, 'settings')}>
<ToolbarAction wdKey="nav:settings" onClick={this.toggleModal.bind(this, 'settings')}>
<SettingsIcon />
<IconText>Style Settings</IconText>
</ToolbarAction>
<ToolbarAction onClick={this.props.onInspectModeToggle}>
<ToolbarAction wdKey="nav:inspect" onClick={this.props.onInspectModeToggle}>
<InspectionIcon />
<IconText>
{ this.props.inspectModeEnabled && <span>Map Mode</span> }

3
src/components/fields/FunctionSpecField.jsx
View File

@@ -131,8 +131,7 @@ export default class FunctionSpecProperty extends React.Component {
/>
)
}
return <div className={propClass}>
return <div className={propClass} data-wd-key={"spec-field:"+this.props.fieldName}>
{specField}
</div>
}

119
src/components/fields/SpecField.jsx
View File

@@ -58,70 +58,79 @@ export default class SpecField extends React.Component {
name: this.props.fieldName,
onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
}
switch(this.props.fieldSpec.type) {
case 'number': return (
<NumberInput
{...commonProps}
min={this.props.fieldSpec.minimum}
max={this.props.fieldSpec.maximum}
/>
)
case 'enum':
const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
if(options.length <= 3 && optionsLabelLength(options) <= 20) {
return <MultiButtonInput
function childNodes() {
switch(this.props.fieldSpec.type) {
case 'number': return (
<NumberInput
{...commonProps}
options={options}
min={this.props.fieldSpec.minimum}
max={this.props.fieldSpec.maximum}
/>
} else {
return <SelectInput
{...commonProps}
options={options}
/>
}
case 'string':
if(iconProperties.indexOf(this.props.fieldName) >= 0) {
return <IconInput
{...commonProps}
icons={this.props.fieldSpec.values}
/>
} else {
return <StringInput
{...commonProps}
/>
}
case 'color': return (
<ColorField
{...commonProps}
/>
)
case 'boolean': return (
<CheckboxInput
{...commonProps}
/>
)
case 'array':
if(this.props.fieldName === 'text-font') {
return <FontInput
{...commonProps}
fonts={this.props.fieldSpec.values}
/>
} else {
if (this.props.fieldSpec.length) {
return <ArrayInput
)
case 'enum':
const options = Object.keys(this.props.fieldSpec.values).map(v => [v, capitalize(v)])
if(options.length <= 3 && optionsLabelLength(options) <= 20) {
return <MultiButtonInput
{...commonProps}
type={this.props.fieldSpec.value}
length={this.props.fieldSpec.length}
options={options}
/>
} else {
return <DynamicArrayInput
return <SelectInput
{...commonProps}
type={this.props.fieldSpec.value}
options={options}
/>
}
}
default: return null
case 'string':
if(iconProperties.indexOf(this.props.fieldName) >= 0) {
return <IconInput
{...commonProps}
icons={this.props.fieldSpec.values}
/>
} else {
return <StringInput
{...commonProps}
/>
}
case 'color': return (
<ColorField
{...commonProps}
/>
)
case 'boolean': return (
<CheckboxInput
{...commonProps}
/>
)
case 'array':
if(this.props.fieldName === 'text-font') {
return <FontInput
{...commonProps}
fonts={this.props.fieldSpec.values}
/>
} else {
if (this.props.fieldSpec.length) {
return <ArrayInput
{...commonProps}
type={this.props.fieldSpec.value}
length={this.props.fieldSpec.length}
/>
} else {
return <DynamicArrayInput
{...commonProps}
type={this.props.fieldSpec.value}
/>
}
}
default: return null
}
}
return (
<div data-wd-key={"spec-field:"+this.props.fieldName}>
{childNodes.call(this)}
</div>
);
}
}

3
src/components/filter/FilterEditor.jsx
View File

@@ -89,7 +89,7 @@ export default class CombiningFilterEditor extends React.Component {
}
return <div className="maputnik-filter-editor">
<div className="maputnik-filter-editor-compound-select">
<div className="maputnik-filter-editor-compound-select" data-wd-key="layer-filter">
<DocLabel
label={"Compound Filter"}
doc={styleSpec.latest.layer.filter.doc + " Combine multiple filters together by using a compound filter."}
@@ -103,6 +103,7 @@ export default class CombiningFilterEditor extends React.Component {
{editorBlocks}
<div className="maputnik-filter-editor-add-wrapper">
<Button
data-wd-key="layer-filter-button"
className="maputnik-add-filter"
onClick={this.addFilterItem.bind(this)}>
Add filter

1
src/components/icons/LayerIcon.jsx
View File

@@ -23,7 +23,6 @@ class LayerIcon extends React.Component {
case 'line': return <LineIcon {...iconProps} />
case 'symbol': return <SymbolIcon {...iconProps} />
case 'circle': return <CircleIcon {...iconProps} />
default: return null
}
}
}

10
src/components/inputs/AutocompleteInput.jsx
View File

@@ -94,8 +94,14 @@ class AutocompleteInput extends React.Component {
value={this.props.value}
items={this.props.options}
getItemValue={(item) => item[0]}
onSelect={v => this.props.onChange(v)}
onChange={(e, v) => this.props.onChange(v)}
onSelect={v => {
console.log("@@ onSelect", v)
this.props.onChange(v)
}}
onChange={(e, v) => {
console.log("@@ onChange", v)
this.props.onChange(v)
}}
renderItem={(item, isHighlighted) => (
<div
key={item[0]}

2
src/components/inputs/InputBlock.jsx
View File

@@ -6,6 +6,7 @@ import DocLabel from '../fields/DocLabel'
/** Wrap a component with a label */
class InputBlock extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.element,
@@ -24,6 +25,7 @@ class InputBlock extends React.Component {
render() {
return <div style={this.props.style}
data-wd-key={this.props["data-wd-key"]}
className={classnames({
"maputnik-input-block": true,
"maputnik-action-block": this.props.action

2
src/components/inputs/SelectInput.jsx
View File

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
class SelectInput extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
"data-wd-key": PropTypes.string.isRequired,
options: PropTypes.array.isRequired,
style: PropTypes.object,
onChange: PropTypes.func.isRequired,
@@ -18,6 +19,7 @@ class SelectInput extends React.Component {
return <select
className="maputnik-select"
data-wd-key={this.props["data-wd-key"]}
style={this.props.style}
value={this.props.value}
onChange={e => this.props.onChange(e.target.value)}

11
src/components/inputs/StringInput.jsx
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
class StringInput extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
value: PropTypes.string,
style: PropTypes.object,
default: PropTypes.string,
@@ -18,6 +19,7 @@ class StringInput extends React.Component {
}
componentWillReceiveProps(nextProps) {
console.log("@@ STRING componentWillReceiveProps", JSON.stringify(nextProps))
this.setState({ value: nextProps.value || '' })
}
@@ -40,12 +42,19 @@ class StringInput extends React.Component {
}
return React.createElement(tag, {
"data-wd-key": this.props["data-wd-key"],
className: classes.join(" "),
style: this.props.style,
value: this.state.value,
placeholder: this.props.default,
onChange: e => this.setState({ value: e.target.value }),
onChange: e => {
console.log("@@ STRING CHANGE", JSON.stringify(e.target.value));
this.setState({
value: e.target.value
})
},
onBlur: () => {
console.log("@@ STRING BLUR", JSON.stringify(this.state.value), "props:", JSON.stringify(this.props.value));
if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
}
});

6
src/components/layers/CommentBlock.jsx
View File

@@ -11,7 +11,11 @@ class MetadataBlock extends React.Component {
}
render() {
return <InputBlock label={"Comments"} doc={"Comments for the current layer. This is non-standard and not in the spec."}>
return <InputBlock
label={"Comments"}
doc={"Comments for the current layer. This is non-standard and not in the spec."}
data-wd-key="layer-comment"
>
<StringInput
multi={true}
value={this.props.value}

1
src/components/layers/JSONEditor.jsx
View File

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
import {Controlled as CodeMirror} from 'react-codemirror2'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'

8
src/components/layers/LayerEditor.jsx
View File

@@ -19,11 +19,6 @@ import MultiButtonInput from '../inputs/MultiButtonInput'
import { changeType, changeProperty } from '../../libs/layer'
import layout from '../../config/layout.json'
class UnsupportedLayer extends React.Component {
render() {
return <div></div>
}
}
function layoutGroups(layerType) {
const layerGroup = {
@@ -121,6 +116,7 @@ export default class LayerEditor extends React.Component {
case 'layer': return <div>
<LayerIdBlock
value={this.props.layer.id}
wdKey="layer-editor.layer-id"
onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
/>
<LayerTypeBlock
@@ -171,7 +167,6 @@ export default class LayerEditor extends React.Component {
layer={this.props.layer}
onChange={this.props.onLayerChanged}
/>
default: return null
}
}
@@ -181,6 +176,7 @@ export default class LayerEditor extends React.Component {
return !(layerType === 'background' && group.type === 'source')
}).map(group => {
return <LayerEditorGroup
data-wd-key={group.title}
key={group.title}
title={group.title}
isActive={this.state.editorGroups[group.title]}

2
src/components/layers/LayerEditorGroup.jsx
View File

@@ -5,6 +5,7 @@ import Collapser from './Collapser'
export default class LayerEditorGroup extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
title: PropTypes.string.isRequired,
isActive: PropTypes.bool.isRequired,
children: PropTypes.element.isRequired,
@@ -14,6 +15,7 @@ export default class LayerEditorGroup extends React.Component {
render() {
return <div>
<div className="maputnik-layer-editor-group"
data-wd-key={"layer-editor-group:"+this.props["data-wd-key"]}
onClick={e => this.props.onActiveToggle(!this.props.isActive)}
>
<span>{this.props.title}</span>

5
src/components/layers/LayerIdBlock.jsx
View File

@@ -8,11 +8,14 @@ import StringInput from '../inputs/StringInput'
class LayerIdBlock extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
wdKey: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
}
render() {
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}>
return <InputBlock label={"ID"} doc={styleSpec.latest.layer.id.doc}
data-wd-key={this.props.wdKey}
>
<StringInput
value={this.props.value}
onChange={this.props.onChange}

2
src/components/layers/LayerList.jsx
View File

@@ -162,6 +162,7 @@ class LayerListContainer extends React.Component {
const groupPrefix = layerPrefix(layers[0].id)
if(layers.length > 1) {
const grp = <LayerListGroup
data-wd-key={[groupPrefix, idx].join('-')}
key={[groupPrefix, idx].join('-')}
title={groupPrefix}
isActive={!this.isCollapsed(groupPrefix, idx)}
@@ -217,6 +218,7 @@ class LayerListContainer extends React.Component {
<div className="maputnik-multibutton">
<a
onClick={this.toggleModal.bind(this, 'add')}
data-wd-key="layer-list:add-layer"
className="maputnik-button maputnik-button-selected">
Add Layer
</a>

2
src/components/layers/LayerListGroup.jsx
View File

@@ -5,6 +5,7 @@ import Collapser from './Collapser'
export default class LayerListGroup extends React.Component {
static propTypes = {
title: PropTypes.string.isRequired,
"data-wd-key": PropTypes.string,
isActive: PropTypes.bool.isRequired,
onActiveToggle: PropTypes.func.isRequired
}
@@ -12,6 +13,7 @@ export default class LayerListGroup extends React.Component {
render() {
return <li className="maputnik-layer-list-group">
<div className="maputnik-layer-list-group-header"
data-wd-key={"layer-list-group:"+this.props["data-wd-key"]}
onClick={e => this.props.onActiveToggle(!this.props.isActive)}
>
<span className="maputnik-layer-list-group-title">{this.props.title}</span>

7
src/components/layers/LayerListItem.jsx
View File

@@ -33,6 +33,7 @@ class IconAction extends React.Component {
static propTypes = {
action: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
wdKey: PropTypes.string
}
renderIcon() {
@@ -41,13 +42,13 @@ class IconAction extends React.Component {
case 'show': return <VisibilityIcon />
case 'hide': return <VisibilityOffIcon />
case 'delete': return <DeleteIcon />
default: return null
}
}
render() {
return <a
className="maputnik-layer-list-icon-action"
data-wd-key={this.props.wdKey}
onClick={this.props.onClick}
>
{this.renderIcon()}
@@ -92,6 +93,7 @@ class LayerListItem extends React.Component {
return <li
key={this.props.layerId}
onClick={e => this.props.onLayerSelect(this.props.layerId)}
data-wd-key={"layer-list-item:"+this.props.layerId}
className={classnames({
"maputnik-layer-list-item": true,
"maputnik-layer-list-item-selected": this.props.isSelected,
@@ -101,14 +103,17 @@ class LayerListItem extends React.Component {
<span className="maputnik-layer-list-item-id">{this.props.layerId}</span>
<span style={{flexGrow: 1}} />
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
action={'delete'}
onClick={e => this.props.onLayerDestroy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":copy"}
action={'copy'}
onClick={e => this.props.onLayerCopy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
action={this.props.visibility === 'visible' ? 'hide' : 'show'}
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/>

6
src/components/layers/LayerSourceBlock.jsx
View File

@@ -4,12 +4,12 @@ import PropTypes from 'prop-types'
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import AutocompleteInput from '../inputs/AutocompleteInput'
class LayerSourceBlock extends React.Component {
static propTypes = {
value: PropTypes.string,
wdKey: PropTypes.string,
onChange: PropTypes.func,
sourceIds: PropTypes.array,
}
@@ -20,7 +20,9 @@ class LayerSourceBlock extends React.Component {
}
render() {
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}>
return <InputBlock label={"Source"} doc={styleSpec.latest.layer.source.doc}
data-wd-key={this.props.wdKey}
>
<AutocompleteInput
value={this.props.value}
onChange={this.props.onChange}

5
src/components/layers/LayerSourceLayerBlock.jsx
View File

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import AutocompleteInput from '../inputs/AutocompleteInput'
class LayerSourceLayer extends React.Component {
@@ -22,7 +21,9 @@ class LayerSourceLayer extends React.Component {
}
render() {
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}>
return <InputBlock label={"Source Layer"} doc={styleSpec.latest.layer['source-layer'].doc}
data-wd-key="layer-source-layer"
>
<AutocompleteInput
keepMenuWithinWindowBounds={!!this.props.isFixed}
value={this.props.value}

5
src/components/layers/LayerTypeBlock.jsx
View File

@@ -8,11 +8,14 @@ import SelectInput from '../inputs/SelectInput'
class LayerTypeBlock extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired,
wdKey: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
}
render() {
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}>
return <InputBlock label={"Type"} doc={styleSpec.latest.layer.type.doc}
data-wd-key={this.props.wdKey}
>
<SelectInput
options={[
['background', 'Background'],

4
src/components/layers/MaxZoomBlock.jsx
View File

@@ -12,7 +12,9 @@ class MaxZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}>
return <InputBlock label={"Max Zoom"} doc={styleSpec.latest.layer.maxzoom.doc}
data-wd-key="max-zoom"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}

4
src/components/layers/MinZoomBlock.jsx
View File

@@ -12,7 +12,9 @@ class MinZoomBlock extends React.Component {
}
render() {
return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}>
return <InputBlock label={"Min Zoom"} doc={styleSpec.latest.layer.minzoom.doc}
data-wd-key="min-zoom"
>
<NumberInput
value={this.props.value}
onChange={this.props.onChange}

16
src/components/modals/AddModal.jsx
View File

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
import Button from '../Button'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import Modal from './Modal'
import LayerTypeBlock from '../layers/LayerTypeBlock'
@@ -108,19 +107,26 @@ class AddModal extends React.Component {
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Add Layer'}
data-wd-key="modal:add-layer"
>
<div className="maputnik-add-layer">
<LayerIdBlock
value={this.state.id}
onChange={v => this.setState({ id: v })}
wdKey="add-layer.layer-id"
onChange={v => {
console.log("@@ upper_id_change", JSON.stringify(v))
this.setState({ id: v })
}}
/>
<LayerTypeBlock
value={this.state.type}
wdKey="add-layer.layer-type"
onChange={v => this.setState({ type: v })}
/>
{this.state.type !== 'background' &&
<LayerSourceBlock
sourceIds={sources}
wdKey="add-layer.layer-source-block"
value={this.state.source}
onChange={v => this.setState({ source: v })}
/>
@@ -133,7 +139,11 @@ class AddModal extends React.Component {
onChange={v => this.setState({ 'source-layer': v })}
/>
}
<Button className="maputnik-add-layer-button" onClick={this.addLayer.bind(this)}>
<Button
className="maputnik-add-layer-button"
onClick={this.addLayer.bind(this)}
data-wd-key="add-layer"
>
Add Layer
</Button>
</div>

2
src/components/modals/ExportModal.jsx
View File

@@ -5,7 +5,6 @@ import { saveAs } from 'file-saver'
import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
import InputBlock from '../inputs/InputBlock'
import StringInput from '../inputs/StringInput'
import SelectInput from '../inputs/SelectInput'
import CheckboxInput from '../inputs/CheckboxInput'
import Button from '../Button'
import Modal from './Modal'
@@ -215,6 +214,7 @@ class ExportModal extends React.Component {
render() {
return <Modal
data-wd-key="export-modal"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Export Style'}

6
src/components/modals/Modal.jsx
View File

@@ -5,6 +5,7 @@ import Overlay from './Overlay'
class Modal extends React.Component {
static propTypes = {
"data-wd-key": PropTypes.string,
isOpen: PropTypes.bool.isRequired,
title: PropTypes.string.isRequired,
onOpenToggle: PropTypes.func.isRequired,
@@ -13,12 +14,15 @@ class Modal extends React.Component {
render() {
return <Overlay isOpen={this.props.isOpen}>
<div className="maputnik-modal">
<div className="maputnik-modal"
data-wd-key={this.props["data-wd-key"]}
>
<header className="maputnik-modal-header">
<h1 className="maputnik-modal-header-title">{this.props.title}</h1>
<span className="maputnik-modal-header-space"></span>
<a className="maputnik-modal-header-toggle"
onClick={() => this.props.onOpenToggle(false)}
data-wd-key={this.props["data-wd-key"]+".close-modal"}
>
<CloseIcon />
</a>

5
src/components/modals/OpenModal.jsx
View File

@@ -133,6 +133,7 @@ class OpenModal extends React.Component {
}
return <Modal
data-wd-key="open-modal"
isOpen={this.props.isOpen}
onOpenToggle={() => this.onOpenToggle()}
title={'Open Style'}
@@ -151,9 +152,9 @@ class OpenModal extends React.Component {
<p>
Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
</p>
<input type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
<input data-wd-key="open-modal.url.input" type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
<div>
<Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
<Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
</div>
</section>

8
src/components/modals/SettingsModal.jsx
View File

@@ -42,6 +42,7 @@ class SettingsModal extends React.Component {
const metadata = this.props.mapStyle.metadata || {}
const inputProps = { }
return <Modal
data-wd-key="modal-settings"
isOpen={this.props.isOpen}
onOpenToggle={this.props.onOpenToggle}
title={'Style Settings'}
@@ -49,18 +50,21 @@ class SettingsModal extends React.Component {
<div style={{minWidth: 350}}>
<InputBlock label={"Name"} doc={styleSpec.latest.$root.name.doc}>
<StringInput {...inputProps}
data-wd-key="modal-settings.name"
value={this.props.mapStyle.name}
onChange={this.changeStyleProperty.bind(this, "name")}
/>
</InputBlock>
<InputBlock label={"Owner"} doc={"Owner ID of the style. Used by Mapbox or future style APIs."}>
<StringInput {...inputProps}
data-wd-key="modal-settings.owner"
value={this.props.mapStyle.owner}
onChange={this.changeStyleProperty.bind(this, "owner")}
/>
</InputBlock>
<InputBlock label={"Sprite URL"} doc={styleSpec.latest.$root.sprite.doc}>
<StringInput {...inputProps}
data-wd-key="modal-settings.sprite"
value={this.props.mapStyle.sprite}
onChange={this.changeStyleProperty.bind(this, "sprite")}
/>
@@ -68,6 +72,7 @@ class SettingsModal extends React.Component {
<InputBlock label={"Glyphs URL"} doc={styleSpec.latest.$root.glyphs.doc}>
<StringInput {...inputProps}
data-wd-key="modal-settings.glyphs"
value={this.props.mapStyle.glyphs}
onChange={this.changeStyleProperty.bind(this, "glyphs")}
/>
@@ -75,6 +80,7 @@ class SettingsModal extends React.Component {
<InputBlock label={"Mapbox Access Token"} doc={"Public access token for Mapbox services."}>
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:mapbox_access_token"
value={metadata['maputnik:mapbox_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
/>
@@ -82,6 +88,7 @@ class SettingsModal extends React.Component {
<InputBlock label={"OpenMapTiles Access Token"} doc={"Public access token for the OpenMapTiles CDN."}>
<StringInput {...inputProps}
data-wd-key="modal-settings.maputnik:openmaptiles_access_token"
value={metadata['maputnik:openmaptiles_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
/>
@@ -89,6 +96,7 @@ class SettingsModal extends React.Component {
<InputBlock label={"Style Renderer"} doc={"Choose the default Maputnik renderer for this style."}>
<SelectInput {...inputProps}
data-wd-key="modal-settings.maputnik:renderer"
options={[
['mbgljs', 'MapboxGL JS'],
['ol3', 'Open Layers 3'],

44
src/libs/debug.js Normal file
View File

@@ -0,0 +1,44 @@
import querystring from 'querystring'
const debugStore = {};
function enabled() {
const qs = querystring.parse(window.location.search.slice(1));
if(qs.hasOwnProperty("debug")) {
return !!qs.debug.match(/^(|1|true)$/);
}
else {
return false;
}
}
function genErr() {
return new Error("Debug not enabled, enable by appending '?debug' to your query string");
}
function set(namespace, key, value) {
if(!enabled()) {
throw genErr();
}
debugStore[namespace] = debugStore[namespace] || {};
debugStore[namespace][key] = value;
}
function get(namespace, key) {
if(!enabled()) {
throw genErr();
}
if(debugStore.hasOwnProperty(namespace)) {
return debugStore[namespace][key];
}
}
const mod = {
enabled,
get,
set
}
window.debug = mod;
export default mod;

12
src/styles/index.scss
View File

@@ -36,3 +36,15 @@ $toolbar-offset: 0;
@import 'zoomproperty';
@import 'popup';
@import 'map';
/**
* Hacks for webdriverio isVisibleWithinViewport
*/
#app {
height: 100vh;
}
.maputnik-layout {
height: 100vh;
}