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

Added initial expression work and UI errors.

Browse Source
This commit is contained in:
orangemug
2020-01-29 08:22:03 +00:00
parent 63ed8c1de3
commit 725b752e35
25 changed files with 360 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/App.jsx
View File

@@ -207,6 +207,7 @@ export default class App extends React.Component {
errors: [],
infos: [],
mapStyle: style.emptyStyle,
hopefulMapStyle: style.emptyStyle,
selectedLayerIndex: 0,
sources: {},
vectorLayers: {},
@@ -279,7 +280,7 @@ export default class App extends React.Component {
}
updateFonts(urlTemplate) {
const metadata = this.state.mapStyle.metadata || {}
const metadata = this.state.hopefulMapStyle.metadata || {}
const accessToken = metadata['maputnik:openmaptiles_access_token'] || tokens.openmaptiles
let glyphUrl = (typeof urlTemplate === 'string')? urlTemplate.replace('{key}', accessToken): urlTemplate;
@@ -318,24 +319,50 @@ export default class App extends React.Component {
onStyleChanged = (newStyle, save=true) => {
const errors = validate(newStyle, latest)
const mappedErrors = errors.map(error => {
const layerMatch = error.message.match(/layers\[(\d+)\]\.(?:(\S+)\.)?(\S+): (.*)/);
if (layerMatch) {
const [matchStr, index, group, property, message] = layerMatch;
const key = (group && property) ? [group, property].join(".") : property;
return {
message: error.message,
parsed: {
type: "layer",
data: {
index,
key,
message
}
}
}
}
else {
return {
message: error.message,
};
}
})
if(errors.length === 0) {
if(newStyle.glyphs !== this.state.mapStyle.glyphs) {
if(newStyle.glyphs !== this.state.hopefulMapStyle.glyphs) {
this.updateFonts(newStyle.glyphs)
}
if(newStyle.sprite !== this.state.mapStyle.sprite) {
if(newStyle.sprite !== this.state.hopefulMapStyle.sprite) {
this.updateIcons(newStyle.sprite)
}
this.revisionStore.addRevision(newStyle)
if(save) this.saveStyle(newStyle)
this.setState({
hopefulMapStyle: newStyle,
mapStyle: newStyle,
errors: [],
})
} else {
this.setState({
errors: errors.map(err => err.message)
hopefulMapStyle: newStyle,
errors: mappedErrors,
})
}
@@ -344,7 +371,7 @@ export default class App extends React.Component {
onUndo = () => {
const activeStyle = this.revisionStore.undo()
const messages = undoMessages(this.state.mapStyle, activeStyle)
const messages = undoMessages(this.state.hopefulMapStyle, activeStyle)
this.saveStyle(activeStyle)
this.setState({
mapStyle: activeStyle,
@@ -354,7 +381,7 @@ export default class App extends React.Component {
onRedo = () => {
const activeStyle = this.revisionStore.redo()
const messages = redoMessages(this.state.mapStyle, activeStyle)
const messages = redoMessages(this.state.hopefulMapStyle, activeStyle)
this.saveStyle(activeStyle)
this.setState({
mapStyle: activeStyle,
@@ -364,7 +391,7 @@ export default class App extends React.Component {
onMoveLayer = (move) => {
let { oldIndex, newIndex } = move;
let layers = this.state.mapStyle.layers;
let layers = this.state.hopefulMapStyle.layers;
oldIndex = clamp(oldIndex, 0, layers.length-1);
newIndex = clamp(newIndex, 0, layers.length-1);
if(oldIndex === newIndex) return;
@@ -382,14 +409,14 @@ export default class App extends React.Component {
onLayersChange = (changedLayers) => {
const changedStyle = {
...this.state.mapStyle,
...this.state.hopefulMapStyle,
layers: changedLayers
}
this.onStyleChanged(changedStyle)
}
onLayerDestroy = (layerId) => {
let layers = this.state.mapStyle.layers;
let layers = this.state.hopefulMapStyle.layers;
const remainingLayers = layers.slice(0);
const idx = style.indexOfLayer(remainingLayers, layerId)
remainingLayers.splice(idx, 1);
@@ -408,7 +435,7 @@ export default class App extends React.Component {
}
onLayerVisibilityToggle = (layerId) => {
let layers = this.state.mapStyle.layers;
let layers = this.state.hopefulMapStyle.layers;
const changedLayers = layers.slice(0)
const idx = style.indexOfLayer(changedLayers, layerId)
@@ -423,7 +450,7 @@ export default class App extends React.Component {
onLayerIdChange = (oldId, newId) => {
const changedLayers = this.state.mapStyle.layers.slice(0)
const changedLayers = this.state.hopefulMapStyle.layers.slice(0)
const idx = style.indexOfLayer(changedLayers, oldId)
changedLayers[idx] = {
@@ -435,7 +462,8 @@ export default class App extends React.Component {
}
onLayerChanged = (layer) => {
const changedLayers = this.state.mapStyle.layers.slice(0)
console.log("test: onLayerChanged", layer);
const changedLayers = this.state.hopefulMapStyle.layers.slice(0)
const idx = style.indexOfLayer(changedLayers, layer.id)
changedLayers[idx] = layer
@@ -472,7 +500,7 @@ export default class App extends React.Component {
fetchSources() {
const sourceList = {...this.state.sources};
for(let [key, val] of Object.entries(this.state.mapStyle.sources)) {
for(let [key, val] of Object.entries(this.state.hopefulMapStyle.sources)) {
if(sourceList.hasOwnProperty(key)) {
continue;
}
@@ -596,7 +624,7 @@ export default class App extends React.Component {
}
onLayerSelect = (layerId) => {
const idx = style.indexOfLayer(this.state.mapStyle.layers, layerId)
const idx = style.indexOfLayer(this.state.hopefulMapStyle.layers, layerId)
this.setState({ selectedLayerIndex: idx })
}
@@ -636,14 +664,14 @@ export default class App extends React.Component {
}
render() {
const layers = this.state.mapStyle.layers || []
const layers = this.state.hopefulMapStyle.layers || []
const selectedLayer = layers.length > 0 ? layers[this.state.selectedLayerIndex] : null
const metadata = this.state.mapStyle.metadata || {}
const metadata = this.state.hopefulMapStyle.metadata || {}
const toolbar = <Toolbar
renderer={this._getRenderer()}
mapState={this.state.mapState}
mapStyle={this.state.mapStyle}
mapStyle={this.state.hopefulMapStyle}
inspectModeEnabled={this.state.mapState === "inspect"}
sources={this.state.sources}
onStyleChanged={this.onStyleChanged}
@@ -662,6 +690,7 @@ export default class App extends React.Component {
selectedLayerIndex={this.state.selectedLayerIndex}
layers={layers}
sources={this.state.sources}
errors={this.state.errors}
/>
const layerEditor = selectedLayer ? <LayerEditor
@@ -669,7 +698,7 @@ export default class App extends React.Component {
layer={selectedLayer}
layerIndex={this.state.selectedLayerIndex}
isFirstLayer={this.state.selectedLayerIndex < 1}
isLastLayer={this.state.selectedLayerIndex === this.state.mapStyle.layers.length-1}
isLastLayer={this.state.selectedLayerIndex === this.state.hopefulMapStyle.layers.length-1}
sources={this.state.sources}
vectorLayers={this.state.vectorLayers}
spec={this.state.spec}
@@ -679,9 +708,11 @@ export default class App extends React.Component {
onLayerCopy={this.onLayerCopy}
onLayerVisibilityToggle={this.onLayerVisibilityToggle}
onLayerIdChange={this.onLayerIdChange}
errors={this.state.errors}
/> : null
const bottomPanel = (this.state.errors.length + this.state.infos.length) > 0 ? <MessagePanel
mapStyle={this.state.mapStyle}
errors={this.state.errors}
infos={this.state.infos}
/> : null
@@ -704,7 +735,7 @@ export default class App extends React.Component {
onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
/>
<SettingsModal
mapStyle={this.state.mapStyle}
mapStyle={this.state.hopefulMapStyle}
onStyleChanged={this.onStyleChanged}
onChangeMetadataProperty={this.onChangeMetadataProperty}
isOpen={this.state.isOpen.settings}
@@ -712,7 +743,7 @@ export default class App extends React.Component {
openlayersDebugOptions={this.state.openlayersDebugOptions}
/>
<ExportModal
mapStyle={this.state.mapStyle}
mapStyle={this.state.hopefulMapStyle}
onStyleChanged={this.onStyleChanged}
isOpen={this.state.isOpen.export}
onOpenToggle={this.toggleModal.bind(this, 'export')}
@@ -723,7 +754,7 @@ export default class App extends React.Component {
onOpenToggle={this.toggleModal.bind(this, 'open')}
/>
<SourcesModal
mapStyle={this.state.mapStyle}
mapStyle={this.state.hopefulMapStyle}
onStyleChanged={this.onStyleChanged}
isOpen={this.state.isOpen.sources}
onOpenToggle={this.toggleModal.bind(this, 'sources')}