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

More migration of components

Browse Source
This commit is contained in:
HarelM
2023-12-22 00:16:13 +02:00
parent fa182e66fa
commit 12def85771
15 changed files with 268 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@@ -70,6 +70,7 @@
"@types/codemirror": "^5.60.15",
"@types/color": "^3.0.6",
"@types/cors": "^2.8.17",
"@types/file-saver": "^2.0.7",
"@types/lodash.capitalize": "^4.2.9",
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9",
@@ -4711,6 +4712,12 @@
"@types/send": "*"
}
},
"node_modules/@types/file-saver": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.7.tgz",
"integrity": "sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==",
"dev": true
},
"node_modules/@types/find-cache-dir": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",

1
package.json
View File

@@ -99,6 +99,7 @@
"@types/codemirror": "^5.60.15",
"@types/color": "^3.0.6",
"@types/cors": "^2.8.17",
"@types/file-saver": "^2.0.7",
"@types/lodash.capitalize": "^4.2.9",
"@types/lodash.isequal": "^4.5.8",
"@types/lodash.throttle": "^4.1.9",

20
src/components/FieldCheckbox.jsx
View File

@@ -1,20 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from './Block'
import InputCheckbox from './InputCheckbox'
export default class FieldCheckbox extends React.Component {
static propTypes = {
...InputCheckbox.propTypes,
}
render() {
const {props} = this;
return <Block label={this.props.label}>
<InputCheckbox {...props} />
</Block>
}
}

18
src/components/FieldCheckbox.tsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import Block from './Block'
import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
type FieldCheckboxProps = InputCheckboxProps & {
label?: string;
};
export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
render() {
return <Block label={this.props.label}>
<InputCheckbox {...this.props} />
</Block>
}
}

21
src/components/FieldDynamicArray.jsx
View File

@@ -1,21 +0,0 @@
import React from 'react'
import PropTypes from 'prop-types'
import Block from './Block'
import InputDynamicArray from './InputDynamicArray'
import Fieldset from './Fieldset'
export default class FieldDynamicArray extends React.Component {
static propTypes = {
...InputDynamicArray.propTypes,
name: PropTypes.string,
}
render() {
const {props} = this;
return <Fieldset label={props.label}>
<InputDynamicArray {...props} />
</Fieldset>
}
}

16
src/components/FieldDynamicArray.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
import Fieldset from './Fieldset'
type FieldDynamicArrayProps = InputDynamicArrayProps & {
name?: string
};
export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
render() {
return <Fieldset label={this.props.label}>
<InputDynamicArray {...this.props} />
</Fieldset>
}
}

19
src/components/FieldSource.jsx → src/components/FieldSource.tsx
View File

@@ -1,19 +1,18 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import InputAutocomplete from './InputAutocomplete'
export default class FieldSource extends React.Component {
static propTypes = {
value: PropTypes.string,
wdKey: PropTypes.string,
onChange: PropTypes.func,
sourceIds: PropTypes.array,
error: PropTypes.object,
}
type FieldSourceProps = {
value?: string
wdKey?: string
onChange?(...args: unknown[]): unknown
sourceIds?: unknown[]
error?: unknown[]
};
export default class FieldSource extends React.Component<FieldSourceProps> {
static defaultProps = {
onChange: () => {},
sourceIds: [],
@@ -29,7 +28,7 @@ export default class FieldSource extends React.Component {
<InputAutocomplete
value={this.props.value}
onChange={this.props.onChange}
options={this.props.sourceIds.map(src => [src, src])}
options={this.props.sourceIds?.map(src => [src, src])}
/>
</Block>
}

17
src/components/FieldSourceLayer.jsx → src/components/FieldSourceLayer.tsx
View File

@@ -1,18 +1,17 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import InputAutocomplete from './InputAutocomplete'
export default class FieldSourceLayer extends React.Component {
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func,
sourceLayerIds: PropTypes.array,
isFixed: PropTypes.bool,
}
type FieldSourceLayerProps = {
value?: string
onChange?(...args: unknown[]): unknown
sourceLayerIds?: unknown[]
isFixed?: boolean
};
export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
static defaultProps = {
onChange: () => {},
sourceLayerIds: [],
@@ -27,7 +26,7 @@ export default class FieldSourceLayer extends React.Component {
keepMenuWithinWindowBounds={!!this.props.isFixed}
value={this.props.value}
onChange={this.props.onChange}
options={this.props.sourceLayerIds.map(l => [l, l])}
options={this.props.sourceLayerIds?.map(l => [l, l])}
/>
</Block>
}

2
src/components/InputDynamicArray.tsx
View File

@@ -12,7 +12,7 @@ import InputUrl from './InputUrl'
export type FieldDynamicArrayProps = {
value?: (string | number)[]
type?: 'url' | 'number' | 'enum'
type?: 'url' | 'number' | 'enum' | 'string'
default?: (string | number)[]
onChange?(...args: unknown[]): unknown
style?: object

8
src/components/InputJson.tsx
View File

@@ -17,7 +17,7 @@ export type InputJsonProps = {
onChange?(...args: unknown[]): unknown
lineNumbers?: boolean
lineWrapping?: boolean
getValue(data: any): string
getValue?(data: any): string
gutters?: string[]
className?: string
onFocus?(...args: unknown[]): unknown
@@ -58,13 +58,13 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
this.state = {
isEditing: false,
showMessage: false,
prevValue: this.props.getValue(this.props.layer),
prevValue: this.props.getValue!(this.props.layer),
};
}
componentDidMount () {
this._doc = CodeMirror(this._el!, {
value: this.props.getValue(this.props.layer),
value: this.props.getValue!(this.props.layer),
mode: this.props.mode || {
name: "mgl",
},
@@ -117,7 +117,7 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
this._cancelNextChange = true;
this._doc!.setValue(
this.props.getValue(this.props.layer),
this.props.getValue!(this.props.layer),
)
}
}

65
src/components/ModalAdd.jsx → src/components/ModalAdd.tsx
View File

@@ -1,29 +1,32 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import InputButton from './InputButton'
import Modal from './Modal'
import FieldType from './FieldType'
import FieldId from './FieldId'
import FieldSource from './FieldSource'
import FieldSourceLayer from './FieldSourceLayer'
export default class ModalAdd extends React.Component {
static propTypes = {
layers: PropTypes.array.isRequired,
onLayersChange: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
onOpenToggle: PropTypes.func.isRequired,
type ModalAddProps = {
layers: unknown[]
onLayersChange(...args: unknown[]): unknown
isOpen: boolean
onOpenToggle(...args: unknown[]): unknown
// A dict of source id's and the available source layers
sources: any
};
// A dict of source id's and the available source layers
sources: PropTypes.object.isRequired,
}
type ModalAddState = {
type: string
id: string
source?: string
'source-layer'?: string
};
export default class ModalAdd extends React.Component<ModalAddProps, ModalAddState> {
addLayer = () => {
const changedLayers = this.props.layers.slice(0)
const layer = {
const layer: ModalAddState = {
id: this.state.id,
type: this.state.type,
}
@@ -41,20 +44,21 @@ export default class ModalAdd extends React.Component {
this.props.onOpenToggle(false)
}
constructor(props) {
constructor(props: ModalAddProps) {
super(props)
this.state = {
const state: ModalAddState = {
type: 'fill',
id: '',
}
if(props.sources.length > 0) {
this.state.source = Object.keys(this.props.sources)[0]
this.state['source-layer'] = this.props.sources[this.state.source][0]
state.source = Object.keys(this.props.sources)[0];
state['source-layer'] = this.props.sources[state.source as keyof ModalAddProps["sources"]][0]
}
this.state = state;
}
componentDidUpdate(prevProps, prevState) {
componentDidUpdate(_prevProps: ModalAddProps, prevState: ModalAddState) {
// Check if source is valid for new type
const oldType = prevState.type;
const newType = this.state.type;
@@ -67,9 +71,9 @@ export default class ModalAdd extends React.Component {
oldType !== newType
&& prevState.source !== ""
// Was a valid source previously
&& availableSourcesOld.indexOf(prevState.source) > -1
&& availableSourcesOld.indexOf(prevState.source!) > -1
// And is not a valid source now
&& availableSourcesNew.indexOf(this.state.source) < 0
&& availableSourcesNew.indexOf(this.state.source!) < 0
) {
// Clear the source
this.setState({
@@ -78,12 +82,12 @@ export default class ModalAdd extends React.Component {
}
}
getLayersForSource(source) {
getLayersForSource(source: string) {
const sourceObj = this.props.sources[source] || {};
return sourceObj.layers || [];
}
getSources(type) {
getSources(type: string) {
const sources = [];
const types = {
@@ -108,8 +112,9 @@ export default class ModalAdd extends React.Component {
]
}
for(let [key, val] of Object.entries(this.props.sources)) {
if(types[val.type] && types[val.type].indexOf(type) > -1) {
for(let [key, val] of Object.entries(this.props.sources) as any) {
const valType = val.type as keyof typeof types;
if(types[valType] && types[valType].indexOf(type) > -1) {
sources.push(key);
}
}
@@ -120,7 +125,7 @@ export default class ModalAdd extends React.Component {
render() {
const sources = this.getSources(this.state.type);
const layers = this.getLayersForSource(this.state.source);
const layers = this.getLayersForSource(this.state.source!);
return <Modal
isOpen={this.props.isOpen}
@@ -131,25 +136,23 @@ export default class ModalAdd extends React.Component {
>
<div className="maputnik-add-layer">
<FieldId
label="ID"
fieldSpec={latest.layer.id}
value={this.state.id}
wdKey="add-layer.layer-id"
onChange={v => {
onChange={(v: string) => {
this.setState({ id: v })
}}
/>
<FieldType
value={this.state.type}
wdKey="add-layer.layer-type"
onChange={v => this.setState({ type: v })}
onChange={(v: string) => this.setState({ type: v })}
/>
{this.state.type !== 'background' &&
<FieldSource
sourceIds={sources}
wdKey="add-layer.layer-source-block"
value={this.state.source}
onChange={v => this.setState({ source: v })}
onChange={(v: string) => this.setState({ source: v })}
/>
}
{['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
@@ -157,7 +160,7 @@ export default class ModalAdd extends React.Component {
isFixed={true}
sourceLayerIds={layers}
value={this.state['source-layer']}
onChange={v => this.setState({ 'source-layer': v })}
onChange={(v: string) => this.setState({ 'source-layer': v })}
/>
}
<InputButton

36
src/components/ModalDebug.jsx → src/components/ModalDebug.tsx
View File

@@ -1,21 +1,27 @@
import React from 'react'
import PropTypes from 'prop-types'
import Modal from './Modal'
export default class ModalDebug extends React.Component {
static propTypes = {
isOpen: PropTypes.bool.isRequired,
renderer: PropTypes.string.isRequired,
onChangeMaboxGlDebug: PropTypes.func.isRequired,
onChangeOpenlayersDebug: PropTypes.func.isRequired,
onOpenToggle: PropTypes.func.isRequired,
maplibreGlDebugOptions: PropTypes.object,
openlayersDebugOptions: PropTypes.object,
mapView: PropTypes.object,
type ModalDebugProps = {
isOpen: boolean
renderer: string
onChangeMaboxGlDebug(...args: unknown[]): unknown
onChangeOpenlayersDebug(...args: unknown[]): unknown
onOpenToggle(...args: unknown[]): unknown
maplibreGlDebugOptions?: object
openlayersDebugOptions?: object
mapView: {
zoom: number
center: {
lng: string
lat: string
}
}
};
export default class ModalDebug extends React.Component<ModalDebugProps> {
render() {
const {mapView} = this.props;
@@ -33,10 +39,10 @@ export default class ModalDebug extends React.Component {
<h1>Options</h1>
{this.props.renderer === 'mlgljs' &&
<ul>
{Object.entries(this.props.maplibreGlDebugOptions).map(([key, val]) => {
{Object.entries(this.props.maplibreGlDebugOptions!).map(([key, val]) => {
return <li key={key}>
<label>
<input type="checkbox" checked={val} onClick={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
<input type="checkbox" checked={val} onChange={(e) => this.props.onChangeMaboxGlDebug(key, e.target.checked)} /> {key}
</label>
</li>
})}
@@ -44,10 +50,10 @@ export default class ModalDebug extends React.Component {
}
{this.props.renderer === 'ol' &&
<ul>
{Object.entries(this.props.openlayersDebugOptions).map(([key, val]) => {
{Object.entries(this.props.openlayersDebugOptions!).map(([key, val]) => {
return <li key={key}>
<label>
<input type="checkbox" checked={val} onClick={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
<input type="checkbox" checked={val} onChange={(e) => this.props.onChangeOpenlayersDebug(key, e.target.checked)} /> {key}
</label>
</li>
})}

34
src/components/ModalExport.jsx → src/components/ModalExport.tsx
View File

@@ -1,13 +1,13 @@
import React from 'react'
import PropTypes from 'prop-types'
import Slugify from 'slugify'
import {saveAs} from 'file-saver'
import {version} from 'maplibre-gl'
import {format} from '@maplibre/maplibre-gl-style-spec'
import {version} from 'maplibre-gl/package.json'
import {StyleSpecification, format} from '@maplibre/maplibre-gl-style-spec'
import {MdFileDownload} from 'react-icons/md'
import FieldString from './FieldString'
import InputButton from './InputButton'
import Modal from './Modal'
import {MdFileDownload} from 'react-icons/md'
import style from '../libs/style'
import fieldSpecAdditional from '../libs/field-spec-additional'
@@ -15,17 +15,15 @@ import fieldSpecAdditional from '../libs/field-spec-additional'
const MAPLIBRE_GL_VERSION = version;
export default class ModalExport extends React.Component {
static propTypes = {
mapStyle: PropTypes.object.isRequired,
onStyleChanged: PropTypes.func.isRequired,
isOpen: PropTypes.bool.isRequired,
onOpenToggle: PropTypes.func.isRequired,
}
type ModalExportProps = {
mapStyle: StyleSpecification & { id: string }
onStyleChanged(...args: unknown[]): unknown
isOpen: boolean
onOpenToggle(...args: unknown[]): unknown
};
constructor(props) {
super(props);
}
export default class ModalExport extends React.Component<ModalExportProps> {
tokenizedStyle () {
return format(
@@ -88,11 +86,11 @@ export default class ModalExport extends React.Component {
saveAs(blob, exportName + ".json");
}
changeMetadataProperty(property, value) {
changeMetadataProperty(property: string, value: any) {
const changedStyle = {
...this.props.mapStyle,
metadata: {
...this.props.mapStyle.metadata,
...this.props.mapStyle.metadata as any,
[property]: value
}
}
@@ -119,13 +117,13 @@ export default class ModalExport extends React.Component {
<FieldString
label={fieldSpecAdditional.maputnik.maptiler_access_token.label}
fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
value={(this.props.mapStyle.metadata || {})['maputnik:openmaptiles_access_token']}
value={(this.props.mapStyle.metadata || {} as any)['maputnik:openmaptiles_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
/>
<FieldString
label={fieldSpecAdditional.maputnik.thunderforest_access_token.label}
fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
value={(this.props.mapStyle.metadata || {})['maputnik:thunderforest_access_token']}
value={(this.props.mapStyle.metadata || {} as any)['maputnik:thunderforest_access_token']}
onChange={this.changeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
/>
</div>

148
src/components/ModalSources.jsx → src/components/ModalSources.tsx
View File

@@ -1,12 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import {GeoJSONSourceSpecification, RasterDEMSourceSpecification, RasterSourceSpecification, SourceSpecification, StyleSpecification, VectorSourceSpecification, latest} from '@maplibre/maplibre-gl-style-spec'
import Modal from './Modal'
import InputButton from './InputButton'
import Block from './Block'
import FieldString from './FieldString'
import FieldSelect from './FieldSelect'
import ModalSourcesTypeEditor from './ModalSourcesTypeEditor'
import ModalSourcesTypeEditor, { EditorMode } from './ModalSourcesTypeEditor'
import style from '../libs/style'
import { deleteSource, addSource, changeSource } from '../libs/source'
@@ -14,32 +12,32 @@ import publicSources from '../config/tilesets.json'
import {MdAddCircleOutline, MdDelete} from 'react-icons/md'
class PublicSource extends React.Component {
static propTypes = {
id: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
onSelect: PropTypes.func.isRequired,
}
type PublicSourceProps = {
id: string
type: string
title: string
onSelect(...args: unknown[]): unknown
};
class PublicSource extends React.Component<PublicSourceProps> {
render() {
return <div className="maputnik-public-source">
<InputButton
<InputButton
className="maputnik-public-source-select"
onClick={() => this.props.onSelect(this.props.id)}
>
<div className="maputnik-public-source-info">
<p className="maputnik-public-source-name">{this.props.title}</p>
<p className="maputnik-public-source-id">#{this.props.id}</p>
</div>
<span className="maputnik-space" />
<MdAddCircleOutline />
</InputButton>
onClick={() => this.props.onSelect(this.props.id)}
>
<div className="maputnik-public-source-info">
<p className="maputnik-public-source-name">{this.props.title}</p>
<p className="maputnik-public-source-id">#{this.props.id}</p>
</div>
<span className="maputnik-space" />
<MdAddCircleOutline />
</InputButton>
</div>
}
}
function editorMode(source) {
function editorMode(source: SourceSpecification) {
if(source.type === 'raster') {
if(source.tiles) return 'tilexyz_raster'
return 'tilejson_raster'
@@ -69,16 +67,15 @@ function editorMode(source) {
return null
}
class ActiveModalSourcesTypeEditor extends React.Component {
static propTypes = {
sourceId: PropTypes.string.isRequired,
source: PropTypes.object.isRequired,
onDelete: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
}
type ActiveModalSourcesTypeEditorProps = {
sourceId: string
source: SourceSpecification
onDelete(...args: unknown[]): unknown
onChange(...args: unknown[]): unknown
};
class ActiveModalSourcesTypeEditor extends React.Component<ActiveModalSourcesTypeEditorProps> {
render() {
const inputProps = { }
return <div className="maputnik-active-source-type-editor">
<div className="maputnik-active-source-type-editor-header">
<span className="maputnik-active-source-type-editor-header-id">#{this.props.sourceId}</span>
@@ -103,12 +100,18 @@ class ActiveModalSourcesTypeEditor extends React.Component {
}
}
class AddSource extends React.Component {
static propTypes = {
onAdd: PropTypes.func.isRequired,
}
type AddSourceProps = {
onAdd(...args: unknown[]): unknown
};
constructor(props) {
type AddSourceState = {
mode: EditorMode
sourceId: string
source: SourceSpecification
};
class AddSource extends React.Component<AddSourceProps, AddSourceState> {
constructor(props: AddSourceProps) {
super(props)
this.state = {
mode: 'tilejson_vector',
@@ -117,7 +120,7 @@ class AddSource extends React.Component {
}
}
defaultSource(mode) {
defaultSource(mode: EditorMode): SourceSpecification {
const source = (this.state || {}).source || {}
const {protocol} = window.location;
@@ -128,38 +131,38 @@ class AddSource extends React.Component {
}
case 'geojson_json': return {
type: 'geojson',
cluster: source.cluster || false,
cluster: (source as GeoJSONSourceSpecification).cluster || false,
data: {}
}
case 'tilejson_vector': return {
type: 'vector',
url: source.url || `${protocol}//localhost:3000/tilejson.json`
url: (source as VectorSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
}
case 'tilexyz_vector': return {
type: 'vector',
tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minZoom: source.minzoom || 0,
maxZoom: source.maxzoom || 14
tiles: (source as VectorSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: (source as VectorSourceSpecification).minzoom || 0,
maxzoom: (source as VectorSourceSpecification).maxzoom || 14
}
case 'tilejson_raster': return {
type: 'raster',
url: source.url || `${protocol}//localhost:3000/tilejson.json`
url: (source as RasterSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
}
case 'tilexyz_raster': return {
type: 'raster',
tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: source.minzoom || 0,
maxzoom: source.maxzoom || 14
tiles: (source as RasterSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: (source as RasterSourceSpecification).minzoom || 0,
maxzoom: (source as RasterSourceSpecification).maxzoom || 14
}
case 'tilejson_raster-dem': return {
type: 'raster-dem',
url: source.url || `${protocol}//localhost:3000/tilejson.json`
url: (source as RasterDEMSourceSpecification).url || `${protocol}//localhost:3000/tilejson.json`
}
case 'tilexyz_raster-dem': return {
type: 'raster-dem',
tiles: source.tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: source.minzoom || 0,
maxzoom: source.maxzoom || 14
tiles: (source as RasterDEMSourceSpecification).tiles || [`${protocol}//localhost:3000/{x}/{y}/{z}.pbf`],
minzoom: (source as RasterDEMSourceSpecification).minzoom || 0,
maxzoom: (source as RasterDEMSourceSpecification).maxzoom || 14
}
case 'image': return {
type: 'image',
@@ -183,7 +186,7 @@ class AddSource extends React.Component {
[0,0],
],
}
default: return {}
default: return {} as any
}
}
@@ -192,7 +195,7 @@ class AddSource extends React.Component {
this.props.onAdd(sourceId, source);
}
onChangeSource = (source) => {
onChangeSource = (source: SourceSpecification) => {
this.setState({source});
}
@@ -213,7 +216,7 @@ class AddSource extends React.Component {
label={"Source ID"}
fieldSpec={{doc: "Unique ID that identifies the source and is used in the layer to reference the source."}}
value={this.state.sourceId}
onChange={v => this.setState({ sourceId: v})}
onChange={(v: string) => this.setState({ sourceId: v})}
/>
<FieldSelect
label={"Source Type"}
@@ -230,8 +233,8 @@ class AddSource extends React.Component {
['image', 'Image'],
['video', 'Video'],
]}
onChange={mode => this.setState({mode: mode, source: this.defaultSource(mode)})}
value={this.state.mode}
onChange={(mode: EditorMode) => this.setState({mode: mode, source: this.defaultSource(mode)})}
value={this.state.mode as string}
/>
<ModalSourcesTypeEditor
onChange={this.onChangeSource}
@@ -240,7 +243,7 @@ class AddSource extends React.Component {
/>
<InputButton
className="maputnik-add-source-button"
onClick={this.onAdd}
onClick={this.onAdd}
>
Add Source
</InputButton>
@@ -248,15 +251,15 @@ class AddSource extends React.Component {
}
}
export default class ModalSources extends React.Component {
static propTypes = {
mapStyle: PropTypes.object.isRequired,
isOpen: PropTypes.bool.isRequired,
onOpenToggle: PropTypes.func.isRequired,
onStyleChanged: PropTypes.func.isRequired,
}
type ModalSourcesProps = {
mapStyle: StyleSpecification
isOpen: boolean
onOpenToggle(...args: unknown[]): unknown
onStyleChanged(...args: unknown[]): unknown
};
stripTitle(source) {
export default class ModalSources extends React.Component<ModalSourcesProps> {
stripTitle(source: SourceSpecification & {title?: string}): SourceSpecification {
const strippedSource = {...source}
delete strippedSource['title']
return strippedSource
@@ -270,13 +273,13 @@ export default class ModalSources extends React.Component {
key={sourceId}
sourceId={sourceId}
source={source}
onChange={src => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
onChange={(src: SourceSpecification) => this.props.onStyleChanged(changeSource(mapStyle, sourceId, src))}
onDelete={() => this.props.onStyleChanged(deleteSource(mapStyle, sourceId))}
/>
})
const tilesetOptions = Object.keys(publicSources).filter(sourceId => !(sourceId in mapStyle.sources)).map(sourceId => {
const source = publicSources[sourceId]
const tilesetOptions = Object.keys(publicSources).filter((sourceId: string) => !(sourceId in mapStyle.sources)).map((sourceId: string) => {
const source = publicSources[sourceId as keyof typeof publicSources] as SourceSpecification & {title: string};
return <PublicSource
key={sourceId}
id={sourceId}
@@ -286,7 +289,6 @@ export default class ModalSources extends React.Component {
/>
})
const inputProps = { }
return <Modal
data-wd-key="modal:sources"
isOpen={this.props.isOpen}
@@ -303,17 +305,17 @@ export default class ModalSources extends React.Component {
<p>
Add one of the publicly available sources to your style.
</p>
<div className="maputnik-public-sources" style={{maxwidth: 500}}>
<div className="maputnik-public-sources" style={{maxWidth: 500}}>
{tilesetOptions}
</div>
</section>
<section className="maputnik-modal-section">
<h1>Add New Source</h1>
<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
<AddSource
onAdd={(sourceId, source) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
/>
<h1>Add New Source</h1>
<p>Add a new source to your style. You can only choose the source type and id at creation time!</p>
<AddSource
onAdd={(sourceId: string, source: SourceSpecification) => this.props.onStyleChanged(addSource(mapStyle, sourceId, source))}
/>
</section>
</Modal>
}

98
src/components/ModalSourcesTypeEditor.jsx → src/components/ModalSourcesTypeEditor.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import PropTypes from 'prop-types'
import {latest} from '@maplibre/maplibre-gl-style-spec'
import Block from './Block'
import FieldUrl from './FieldUrl'
@@ -10,14 +9,18 @@ import FieldArray from './FieldArray'
import FieldJson from './FieldJson'
import FieldCheckbox from './FieldCheckbox'
export type EditorMode = "video" | "image" | "tilejson_vector" | "tilexyz_raster" | "tilejson_raster" | "tilexyz_raster-dem" | "tilejson_raster-dem" | "tilexyz_vector" | "geojson_url" | "geojson_json" | null;
class TileJSONSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.node,
type TileJSONSourceEditorProps = {
source: {
url: string
}
onChange(...args: unknown[]): unknown
children?: React.ReactNode
};
class TileJSONSourceEditor extends React.Component<TileJSONSourceEditorProps> {
render() {
return <div>
<FieldUrl
@@ -34,14 +37,18 @@ class TileJSONSourceEditor extends React.Component {
}
}
class TileURLSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
children: PropTypes.node,
type TileURLSourceEditorProps = {
source: {
tiles: string[]
minzoom: number
maxzoom: number
}
onChange(...args: unknown[]): unknown
children?: React.ReactNode
};
changeTileUrls(tiles) {
class TileURLSourceEditor extends React.Component<TileURLSourceEditorProps> {
changeTileUrls(tiles: string[]) {
this.props.onChange({
...this.props.source,
tiles,
@@ -86,14 +93,17 @@ class TileURLSourceEditor extends React.Component {
}
}
class ImageSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type ImageSourceEditorProps = {
source: {
coordinates: [number, number][]
url: string
}
onChange(...args: unknown[]): unknown
};
class ImageSourceEditor extends React.Component<ImageSourceEditorProps> {
render() {
const changeCoord = (idx, val) => {
const changeCoord = (idx: number, val: [number, number]) => {
const coordinates = this.props.source.coordinates.slice(0);
coordinates[idx] = val;
@@ -122,7 +132,7 @@ class ImageSourceEditor extends React.Component {
type="number"
value={this.props.source.coordinates[idx]}
default={[0, 0]}
onChange={(val) => changeCoord(idx, val)}
onChange={(val: [number, number]) => changeCoord(idx, val)}
/>
);
})}
@@ -130,14 +140,17 @@ class ImageSourceEditor extends React.Component {
}
}
class VideoSourceEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type VideoSourceEditorProps = {
source: {
coordinates: [number, number][]
urls: string[]
}
onChange(...args: unknown[]): unknown
};
class VideoSourceEditor extends React.Component<VideoSourceEditorProps> {
render() {
const changeCoord = (idx, val) => {
const changeCoord = (idx: number, val: [number, number]) => {
const coordinates = this.props.source.coordinates.slice(0);
coordinates[idx] = val;
@@ -147,7 +160,7 @@ class VideoSourceEditor extends React.Component {
});
}
const changeUrls = (urls) => {
const changeUrls = (urls: string[]) => {
this.props.onChange({
...this.props.source,
urls,
@@ -160,7 +173,7 @@ class VideoSourceEditor extends React.Component {
fieldSpec={latest.source_video.urls}
type="string"
value={this.props.source.urls}
default={""}
default={[]}
onChange={changeUrls}
/>
{["top left", "top right", "bottom right", "bottom left"].map((label, idx) => {
@@ -172,7 +185,7 @@ class VideoSourceEditor extends React.Component {
type="number"
value={this.props.source.coordinates[idx]}
default={[0, 0]}
onChange={val => changeCoord(idx, val)}
onChange={(val: [number, number]) => changeCoord(idx, val)}
/>
);
})}
@@ -180,12 +193,14 @@ class VideoSourceEditor extends React.Component {
}
}
class GeoJSONSourceUrlEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type GeoJSONSourceUrlEditorProps = {
source: {
data: string
}
onChange(...args: unknown[]): unknown
};
class GeoJSONSourceUrlEditor extends React.Component<GeoJSONSourceUrlEditorProps> {
render() {
return <FieldUrl
label={"GeoJSON URL"}
@@ -199,12 +214,15 @@ class GeoJSONSourceUrlEditor extends React.Component {
}
}
class GeoJSONSourceFieldJsonEditor extends React.Component {
static propTypes = {
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
type GeoJSONSourceFieldJsonEditorProps = {
source: {
data: any,
cluster: boolean
}
onChange(...args: unknown[]): unknown
};
class GeoJSONSourceFieldJsonEditor extends React.Component<GeoJSONSourceFieldJsonEditorProps> {
render() {
return <div>
<Block label={"GeoJSON"} fieldSpec={latest.source_geojson.data}>
@@ -238,13 +256,13 @@ class GeoJSONSourceFieldJsonEditor extends React.Component {
}
}
export default class ModalSourcesTypeEditor extends React.Component {
static propTypes = {
mode: PropTypes.string.isRequired,
source: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
}
type ModalSourcesTypeEditorProps = {
mode: EditorMode
source: any
onChange(...args: unknown[]): unknown
};
export default class ModalSourcesTypeEditor extends React.Component<ModalSourcesTypeEditorProps> {
render() {
const commonProps = {
source: this.props.source,