ashatora/editor
1
0
Fork 0
mirror of https://github.com/maputnik/editor.git synced 2025-12-29 17:40:01 +00:00
Code Issues Projects Releases Wiki Activity

Merge remote-tracking branch 'upstream/master' into feature/ol-experimental-support

Browse Source
This commit is contained in:
orangemug
2018-10-06 14:06:10 +01:00
parent b171bf3127 e6d2a6d5ff
commit 6b890d162a
13 changed files with 139 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Button.jsx
View File

@@ -9,12 +9,14 @@ class Button extends React.Component {
onClick: PropTypes.func,
style: PropTypes.object,
className: PropTypes.string,
children: PropTypes.node
children: PropTypes.node,
disabled: PropTypes.bool,
}
render() {
return <button
onClick={this.props.onClick}
disabled={this.props.disabled}
aria-label={this.props["aria-label"]}
className={classnames("maputnik-button", this.props.className)}
data-wd-key={this.props["data-wd-key"]}

3
src/components/Toolbar.jsx
View File

@@ -124,7 +124,8 @@ export default class Toolbar extends React.Component {
className="maputnik-toolbar-logo"
>
<img src={logoImage} alt="Maputnik" />
<h1>Maputnik
<h1>
<span className="maputnik-toolbar-name">{pkgJson.name}</span>
<span className="maputnik-toolbar-version">v{pkgJson.version}</span>
</h1>
</a>

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

@@ -32,6 +32,16 @@ export default class FunctionSpecProperty extends React.Component {
]),
}
getFieldFunctionType(fieldSpec) {
if (fieldSpec.expression.interpolated) {
return "exponential"
}
if (fieldSpec.type === "number") {
return "interval"
}
return "categorical"
}
addStop = () => {
const stops = this.props.value.stops.slice(0)
const lastStop = stops[stops.length - 1]
@@ -80,12 +90,14 @@ export default class FunctionSpecProperty extends React.Component {
}
makeDataFunction = () => {
const functionType = this.getFieldFunctionType(this.props.fieldSpec);
const stopValue = functionType === 'categorical' ? '' : 0;
const dataFunc = {
property: "",
type: "categorical",
type: functionType,
stops: [
[{zoom: 6, value: 0}, this.props.value],
[{zoom: 10, value: 0}, this.props.value]
[{zoom: 6, value: stopValue}, this.props.value || stopValue],
[{zoom: 10, value: stopValue}, this.props.value || stopValue]
]
}
this.props.onChange(this.props.fieldName, dataFunc)

8
src/components/fields/_DataProperty.jsx
View File

@@ -30,7 +30,7 @@ export default class DataProperty extends React.Component {
}
getFieldFunctionType(fieldSpec) {
if (fieldSpec.function === "interpolated") {
if (fieldSpec.expression.interpolated) {
return "exponential"
}
if (fieldSpec.type === "number") {
@@ -39,8 +39,8 @@ export default class DataProperty extends React.Component {
return "categorical"
}
getDataFunctionTypes(functionType) {
if (functionType === "interpolated") {
getDataFunctionTypes(fieldSpec) {
if (fieldSpec.expression.interpolated) {
return ["categorical", "interval", "exponential"]
}
else {
@@ -150,7 +150,7 @@ export default class DataProperty extends React.Component {
<SelectInput
value={this.props.value.type}
onChange={propVal => this.changeDataProperty("type", propVal)}
options={this.getDataFunctionTypes(this.props.fieldSpec.function)}
options={this.getDataFunctionTypes(this.props.fieldSpec)}
/>
</div>
</div>

2
src/components/fields/_FunctionButtons.jsx
View File

@@ -28,7 +28,7 @@ export default class FunctionButtons extends React.Component {
/>
</Button>
if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
if (this.props.fieldSpec['property-type'] === 'data-driven') {
makeDataButton = <Button
className="maputnik-make-data-function"
onClick={this.props.onDataClick}

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

@@ -10,6 +10,10 @@ export default class CollapseAlt extends React.Component {
children: PropTypes.element.isRequired
}
static defaultProps = {
isActive: true
}
render() {
if (accessibility.reducedMotionEnabled()) {
return (

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

@@ -31,7 +31,9 @@ class IconAction extends React.Component {
static propTypes = {
action: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
wdKey: PropTypes.string
wdKey: PropTypes.string,
classBlockName: PropTypes.string,
classBlockModifier: PropTypes.string,
}
renderIcon() {
@@ -44,10 +46,21 @@ class IconAction extends React.Component {
}
render() {
const {classBlockName, classBlockModifier} = this.props;
let classAdditions = '';
if (classBlockName) {
classAdditions = `maputnik-layer-list-icon-action__${classBlockName}`;
if (classBlockModifier) {
classAdditions += ` maputnik-layer-list-icon-action__${classBlockName}--${classBlockModifier}`;
}
}
return <button
tabIndex="-1"
title={this.props.action}
className="maputnik-layer-list-icon-action"
className={`maputnik-layer-list-icon-action ${classAdditions}`}
data-wd-key={this.props.wdKey}
onClick={this.props.onClick}
>
@@ -90,6 +103,8 @@ class LayerListItem extends React.Component {
}
render() {
const visibilityAction = this.props.visibility === 'visible' ? 'show' : 'hide';
return <li
key={this.props.layerId}
onClick={e => this.props.onLayerSelect(this.props.layerId)}
@@ -105,16 +120,20 @@ class LayerListItem extends React.Component {
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":delete"}
action={'delete'}
classBlockName="delete"
onClick={e => this.props.onLayerDestroy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":copy"}
action={'duplicate'}
classBlockName="duplicate"
onClick={e => this.props.onLayerCopy(this.props.layerId)}
/>
<IconAction
wdKey={"layer-list-item:"+this.props.layerId+":toggle-visibility"}
action={this.props.visibility === 'visible' ? 'show' : 'hide'}
action={visibilityAction}
classBlockName="visibility"
classBlockModifier={visibilityAction}
onClick={e => this.props.onLayerVisibilityToggle(this.props.layerId)}
/>
</li>

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

@@ -51,7 +51,9 @@ class OpenModal extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
styleUrl: ""
};
}
clearError() {
@@ -102,6 +104,7 @@ class OpenModal extends React.Component {
})
.catch((err) => {
this.setState({
error: `Failed to load: '${styleUrl}'`,
activeRequest: null,
activeRequestUrl: null
});
@@ -150,10 +153,19 @@ class OpenModal extends React.Component {
}
onOpenToggle() {
this.setState({
styleUrl: ""
});
this.clearError();
this.props.onOpenToggle();
}
onChangeUrl = () => {
this.setState({
styleUrl: this.styleUrlElement.value
});
}
render() {
const styleOptions = publicStyles.map(style => {
return <PublicStyle
@@ -197,9 +209,22 @@ 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 data-wd-key="open-modal.url.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..."
value={this.state.styleUrl}
onChange={this.onChangeUrl}
/>
<div>
<Button data-wd-key="open-modal.url.button" className="maputnik-big-button" onClick={this.onOpenUrl}>Open URL</Button>
<Button
data-wd-key="open-modal.url.button"
className="maputnik-big-button"
onClick={this.onOpenUrl}
disabled={this.state.styleUrl.length < 1}
>Open URL</Button>
</div>
</section>

24
src/config/styles.json
View File

@@ -34,5 +34,29 @@
"title": "Empty Style",
"url": "https://rawgit.com/maputnik/editor/master/src/config/empty-style.json",
"thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAQAAAAHDYbIAAAAEUlEQVR42mP8/58BDhiJ4wAA974H/U5Xe1oAAAAASUVORK5CYII="
},
{
"id": "os-zoomstack-outdoor",
"title": "Zoomstack Outdoor",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-outdoor/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-outdoor.png"
},
{
"id": "os-zoomstack-road",
"title": "Zoomstack Road",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-road/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-road.png"
},
{
"id": "os-zoomstack-light",
"title": "Zoomstack Light",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-light/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-light.png"
},
{
"id": "os-zoomstack-night",
"title": "Zoomstack Night",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/styles/open-zoomstack-night/style.json",
"thumbnail": "https://maputnik.github.io/thumbnails/os-zoomstack-night.png"
}
]

7
src/config/tilesets.json
View File

@@ -1,7 +1,7 @@
{
"openmaptiles": {
"type": "vector",
"url": "https://free.tilehosting.com/data/v3.json?key={key}",
"url": "https://maps.tilehosting.com/data/v3.json?key={key}",
"title": "OpenMapTiles"
},
"thunderforest_transport": {
@@ -13,5 +13,10 @@
"type": "vector",
"url": "https://tile.thunderforest.com/thunderforest.outdoors-v1.json?apikey={key}",
"title": "Thunderforest Outdoors (heavy)"
},
"open_zoomstack": {
"type": "vector",
"url": "https://s3-eu-west-1.amazonaws.com/tiles.os.uk/data/vector/open-zoomstack/config.json",
"title": "OS Open Zoomstack"
}
}

6
src/styles/_components.scss
View File

@@ -77,6 +77,12 @@
background-color: lighten($color-midgray, 12);
color: $color-white;
}
&:disabled {
background-color: darken($color-midgray, 5);
color: $color-midgray;
cursor: not-allowed;
}
}
.maputnik-big-button {

29
src/styles/_layer.scss
View File

@@ -58,22 +58,33 @@
}
}
.maputnik-layer-list-icon-action {
background: initial;
border: none;
padding: 0 2px;
svg {
fill: darken($color-lowgray, 20);
&:hover {
fill: $color-white;
}
}
}
.maputnik-layer-list-icon-action__visibility--hide {
display: block;
}
.maputnik-layer-list-item:hover,
.maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action {
display: block;
background: initial;
border: none;
padding: 0 2px;
}
.maputnik-layer-list-icon-action svg {
fill: darken($color-lowgray, 0.5);
&:hover {
fill: $color-white;
svg {
fill: darken($color-lowgray, 0.5);
}
}
}

4
src/styles/_toolbar.scss
View File

@@ -80,6 +80,10 @@
}
}
.maputnik-toolbar-name {
text-transform: capitalize;
}
.maputnik-toolbar-version {
font-size: 10px;
margin-left: 4px;