diff --git a/src/model/Msource.js b/src/model/Msource.js index 8ab8f31..a072b05 100644 --- a/src/model/Msource.js +++ b/src/model/Msource.js @@ -113,6 +113,16 @@ export default { Mstyle.save(); + const now = new Date().getTime() // set the reload stamp to now + + Store.dispatch({ + type:'SOURCE_RELOAD', + payload:{ + sourceKey:key, + when:now + } + }); + return resolve(); }); }, diff --git a/src/model/Mstyle.js b/src/model/Mstyle.js index 93e7cb3..73fd5a4 100644 --- a/src/model/Mstyle.js +++ b/src/model/Mstyle.js @@ -164,13 +164,13 @@ const Mstyle = { errorAdd:function(error){ return new Promise((resolve,reject)=>{ - const key = MapboxError.getKey(error); const message = MapboxError.getMessage(error); const err = { key:key, - message:message + message:message, + error:error, }; Store.dispatch({ diff --git a/src/page/Phome.jsx b/src/page/Phome.jsx index 017738b..228e36d 100644 --- a/src/page/Phome.jsx +++ b/src/page/Phome.jsx @@ -8,7 +8,7 @@ import Vnav from '../view/Vnav'; import VstyleAdd from '../view/Vstyles/VstyleAdd'; import Vstyles from '../view/Vstyles'; -import {NavLink, Link, Route, Switch} from 'react-router-dom'; +import {Link, Route, Switch} from 'react-router-dom'; const mapStoreToProps = (store)=>{ diff --git a/src/page/Pstyle.jsx b/src/page/Pstyle.jsx index efcff74..9df5772 100644 --- a/src/page/Pstyle.jsx +++ b/src/page/Pstyle.jsx @@ -8,14 +8,11 @@ import Valert from '../view/Valert'; import Vmap from '../view/Vmap'; import Vstyle from '../view/Vstyle'; -import Vpanel from '../view/Vpanel'; -import Mpanel from '../model/Mpanel'; - const mapStoreToProps = (store)=>{ return { style:store.style, error:store.styleError - } // props + } }; const mapDispatchToProps = {}; diff --git a/src/page/Pstyles.jsx b/src/page/Pstyles.jsx index 65a2cc9..ad6ea6d 100644 --- a/src/page/Pstyles.jsx +++ b/src/page/Pstyles.jsx @@ -8,7 +8,7 @@ import Vnav from '../view/Vnav'; import VstyleAdd from '../view/Vstyles/VstyleAdd'; import Vstyles from '../view/Vstyles'; -import {NavLink, Link, Route, Switch} from 'react-router-dom'; +import {Link, Route, Switch} from 'react-router-dom'; const mapStoreToProps = (store)=>{ diff --git a/src/reducer/Rstyle.js b/src/reducer/Rstyle.js index 8220070..9a0c835 100644 --- a/src/reducer/Rstyle.js +++ b/src/reducer/Rstyle.js @@ -2,7 +2,8 @@ import {Map, List, fromJS} from 'immutable'; const iState = Map({ loaded:false, - rec:undefined + rec:undefined, + rebuildMap:null, }); export default function(state = iState, action){ @@ -98,7 +99,6 @@ export default function(state = iState, action){ return layer.get('id') === action.layerId; }); if (ind === -1) throw new Error('layer matching layerId not found'); - const val = fromJS(action.payload); const style = state.removeIn(['rec','layers',ind, ...action.prop]); return setUpdated(style); } @@ -107,6 +107,10 @@ export default function(state = iState, action){ const style = state.setIn(['rec','sources',action.key],source); return setUpdated(style); } + case 'SOURCE_RELOAD':{ + const style = state.setIn(['rebuildMap'], new Date().getTime()) + return style + } default: return state; } diff --git a/src/reducer/RstyleError.js b/src/reducer/RstyleError.js index f3c0c50..887294d 100644 --- a/src/reducer/RstyleError.js +++ b/src/reducer/RstyleError.js @@ -1,4 +1,4 @@ -import {Map, List, fromJS} from 'immutable'; +import {Map} from 'immutable'; const iState = Map({}); @@ -6,14 +6,12 @@ export default function(state = iState, action){ switch (action.type){ case 'STYLE_ERROR_DEFINE':{ let errors = Map(); - //console.log('STYLE_ERROR_DEFINE',action.payload); action.payload.forEach((error)=>{ errors = errors.setIn(error.key,error.message); }); return errors; } case 'STYLE_ERROR_ADD':{ - //console.log('STYLE_ERROR_DEFINE',action.payload); return state.setIn(action.payload.key,action.payload.message); } default: diff --git a/src/utility/MapboxError.js b/src/utility/MapboxError.js index 1994f27..260b11e 100644 --- a/src/utility/MapboxError.js +++ b/src/utility/MapboxError.js @@ -8,8 +8,8 @@ export default { } */ - if (!error || !error.message || error.message.indexOf(':') === -1) return ['general']; - const prefix = error.message.split(':')[0]; + if (!error || !error.message || error.message.indexOf(': ') === -1) return ['general']; + const prefix = error.message.split(': ')[0]; const parts = prefix.split('.'); let key = []; parts.forEach((part)=>{ @@ -30,7 +30,7 @@ export default { if (!error) return; if (!error.message && error.stack) return error.stack; if (!error.message && !error.stack) return 'unidentified mapbox error'; - if (error.message.indexOf(':') === -1) return error.message; - return error.message.split(':')[1]; + if (error.message.indexOf(': ') === -1) return error.message; + return error.message.split(': ')[1]; } }; \ No newline at end of file diff --git a/src/view/Vcode/index.jsx b/src/view/Vcode/index.jsx index ee66b46..7e8605c 100644 --- a/src/view/Vcode/index.jsx +++ b/src/view/Vcode/index.jsx @@ -3,7 +3,7 @@ import React from 'react'; import Mstyle from '../../model/Mstyle'; import Vfield from '../Vfield'; -export default class Vsources extends React.Component { +export default class Vcode extends React.Component { constructor(props) { super(props); this.state = {}; @@ -25,8 +25,6 @@ export default class Vsources extends React.Component { const maxContentH = window.innerHeight - 44; - console.log('code render errs:',errors); - const field = { value:Mstyle.getMapStyle(), error:errors, diff --git a/src/view/Vconfig/index.jsx b/src/view/Vconfig/index.jsx index 3dcee50..060bfad 100644 --- a/src/view/Vconfig/index.jsx +++ b/src/view/Vconfig/index.jsx @@ -11,13 +11,6 @@ export default class Vconfig extends React.Component { config: PropTypes.object } - constructor(props) { - super(props); - const {} = props; - - - } - render (){ const {config, error, handle} = this.props; diff --git a/src/view/Vfeature/index.jsx b/src/view/Vfeature/index.jsx index ad549bf..cac950b 100644 --- a/src/view/Vfeature/index.jsx +++ b/src/view/Vfeature/index.jsx @@ -14,16 +14,16 @@ export default class Vfeature extends React.Component { } render (){ - const {features, handle} = this.props; - - // get property values + const {features} = this.props; let cols = ['id']; features.map((feature)=>{ - if (!feature.properties) return; + if (!feature.properties) return null; Object.keys(feature.properties).map((i)=>{ if (cols.indexOf(i) === -1) cols.push(i); + return null; }); + return null; }); let ids = []; @@ -36,7 +36,6 @@ export default class Vfeature extends React.Component { return false; }); - return @@ -58,20 +57,5 @@ export default class Vfeature extends React.Component {
- - /* - - {features.map((feature)=>{ - - console.log('feature:',feature); - - return
  • {this.handle.featureClick(feature);}}> - {Object.keys(feature.properties).map((i)=>{ - return i+': '+feature.properties[i]; - })} -
    • - })} - - */ } }; \ No newline at end of file diff --git a/src/view/Vfield/VfieldAC.jsx b/src/view/Vfield/VfieldAC.jsx index 775b8a2..d1ffad0 100644 --- a/src/view/Vfield/VfieldAC.jsx +++ b/src/view/Vfield/VfieldAC.jsx @@ -12,7 +12,6 @@ export default class VfieldAC extends React.Component { name: PropTypes.string.isRequired, value: PropTypes.string, placeholder: PropTypes.string, - helper: PropTypes.string, error: PropTypes.string, options: PropTypes.array, autoFocus: PropTypes.boolean, @@ -38,8 +37,6 @@ export default class VfieldAC extends React.Component { this.state.value = field.value; } - //console.log('AC handle:',handle); - this.handle = { inputChange:(e)=>{ this.setState({inputValue: e.target.value}); @@ -102,7 +99,6 @@ export default class VfieldAC extends React.Component { this.handle.change(value); }, liClick:(value)=>{ - console.log('li click:',value); this.handle.select(value); }, cancel:()=>{ @@ -124,7 +120,6 @@ export default class VfieldAC extends React.Component { if (handle.selectedClick) handle.selectedClick(); }, selectedKeyUp:(e)=>{ - console.log('selected keyUp',e); /* if (e.key === 'ArrowDown'){ this.props.handle.focusNext(); @@ -175,13 +170,13 @@ export default class VfieldAC extends React.Component { } render (){ - const {field, handle} = this.props; + const {field} = this.props; const value = field.controlled ? this.state.value : field.value; - //console.log('handle change:',value); if (value !== null && value.length > 0 && (!this.state.mode || this.state.mode === 'view')){ //check if value is valid option, if not show error + /* let found = false; for (let i=0,len=field.options.length;i {field.label && } {field.icon && {field.icon}} diff --git a/src/view/Vfield/VfieldColor.jsx b/src/view/Vfield/VfieldColor.jsx index 535b4d7..0d5d97b 100644 --- a/src/view/Vfield/VfieldColor.jsx +++ b/src/view/Vfield/VfieldColor.jsx @@ -16,7 +16,6 @@ export default class VfieldColor extends React.Component { name: PropTypes.string.isRequired, value: PropTypes.string, placeholder: PropTypes.string, - helper: PropTypes.string, error: PropTypes.string, options: PropTypes.array, autoFocus: PropTypes.boolean @@ -85,8 +84,6 @@ export default class VfieldColor extends React.Component { } }, colorSet:(color)=>{ - console.log('color:',color); - let value; switch(color.source){ case 'rgb': @@ -123,7 +120,7 @@ export default class VfieldColor extends React.Component { } render (){ - const {field, handle, error} = this.props; + const {field, error} = this.props; const value = field.controlled ? this.state.value : field.value || ''; const colors = MaterialColor.getAll(); diff --git a/src/view/Vfield/VfieldFile.jsx b/src/view/Vfield/VfieldFile.jsx index 1219d1d..8110c20 100644 --- a/src/view/Vfield/VfieldFile.jsx +++ b/src/view/Vfield/VfieldFile.jsx @@ -11,7 +11,6 @@ export default class VfieldFile extends React.Component { name: PropTypes.string.isRequired, value: PropTypes.object, placeholder: PropTypes.string, - helper: PropTypes.string, error: PropTypes.string }), handle: PropTypes.object @@ -30,7 +29,6 @@ export default class VfieldFile extends React.Component { this.handle = { change:(e)=>{ const file = e.target.files[0]; - const name = e.target.name; if (controlled){ this.setState({value:file}); } diff --git a/src/view/Vlayer/VlayerEdit.jsx b/src/view/Vlayer/VlayerEdit.jsx index 28ff8fa..93ef8a6 100644 --- a/src/view/Vlayer/VlayerEdit.jsx +++ b/src/view/Vlayer/VlayerEdit.jsx @@ -8,7 +8,6 @@ import VlayerEditor from './VlayerEditor'; import VlayerDelete from './VlayerDelete'; import Mlayer from '../../model/Mlayer'; -import Mstyle from '../../model/Mstyle'; export default class VlayerEdit extends React.Component { @@ -83,10 +82,6 @@ export default class VlayerEdit extends React.Component { const layerError = error.getIn(['layers',Mlayer.getInd(this.id)]); - //console.log('layer err:',error); - - // change map mode to show_hidden source layers - if (layer === undefined){ return ; } @@ -99,7 +94,9 @@ export default class VlayerEdit extends React.Component { case 'edit': section = ; break; - + default: + section = ; + break; } switch (this.state.modal){ diff --git a/src/view/Vlayer/VlayerGroup/VlayerGroupSettings.jsx b/src/view/Vlayer/VlayerGroup/VlayerGroupSettings.jsx index e022359..73f1afc 100644 --- a/src/view/Vlayer/VlayerGroup/VlayerGroupSettings.jsx +++ b/src/view/Vlayer/VlayerGroup/VlayerGroupSettings.jsx @@ -7,7 +7,6 @@ import Vproperty from '../../Vproperty'; import VpropertyAdd from '../../Vproperty/VpropertyAdd'; import Mlayer from '../../../model/Mlayer'; -import Msource from '../../../model/Msource'; export default class VlayerGroupSettings extends React.Component { static propTypes = { @@ -22,7 +21,6 @@ export default class VlayerGroupSettings extends React.Component { this.handle = { change:(field)=>{ - console.log('change:',field); Mlayer.setIn(layer.get('id'),[field.name],field.value); }, focus:handle.focus @@ -36,8 +34,6 @@ export default class VlayerGroupSettings extends React.Component { render (){ const {layer, handle, focus, error} = this.props; - const layerId = layer.get('id'); - const spec = styleSpec.latest.layer; let addSpec = { @@ -60,7 +56,7 @@ export default class VlayerGroupSettings extends React.Component { return
    {layer.keySeq().map((key)=>{ - if (!addSpec[key]) return; + if (!addSpec[key]) return
    ; return ,this._container); - - return this._container; - } - - onRemove() { - this._container.parentNode.removeChild(this._container); - this._map = undefined; - } + onAdd(map) { + this._container = document.createElement('div'); + ReactDOM.render(,this._container); + return this._container; + } + onRemove() { + this._container.parentNode.removeChild(this._container); + this._map = undefined; + } } -export default class Vmapbox extends React.Component { +class Vmapbox extends React.Component { static propTypes = { - styleJS: PropTypes.object.isRequired, handle: PropTypes.object, - match: PropTypes.object - } - - constructor (props){ - super(props); - this.state = { - styleJS:undefined - }; - } - - render (){ - - const className = 'btn btn-light btn-sm'+(this.state.debugLines? ' active': ''); - - return
    -
    this.container = el}>
    -
    - } - componentWillReceiveProps (nextProps){ - if(!this.map) return; - - const {styleJS, handle, match} = nextProps; - - //console.log('map match:',match); - - if (this.state.styleJS && this.state.styleJS.equals(styleJS)) return; - this.setState({styleJS:styleJS}); - - - - /* - const metadata = nextProps.mapStyle.metadata || {} - MapboxGl.accessToken = metadata['maputnik:mapbox_access_token'] || tokens.mapbox - */ - - // clear prev errors - Mstyle.errorsSet(); - - try { - this.map.setStyle(styleJS.toJS(),{diff: true}); - } catch(e){ - //console.error('map style error:',e); - Mstyle.errorAdd(e); - //handle.error(e); - } - } - - renderPopup (features){ - - //console.log('render popup:',this); - - const {handle} = this.props; - - setTimeout(()=>{ - return ReactDOM.render(,document.getElementById('map-inspect')); - },1); - - return '
    '; - - // ReactDOM.render(element, document.getElementById('root')); -/* - window.layerClick = (path)=>{ - handle.route(path); - }; - - - //console.log('features:',features); - let html = '
    '+ - '
      '; - let layers = {}; - features.forEach((feature)=>{ - layers[feature.layer.id] = layers[feature.layer.id] || {count:0}; - layers[feature.layer.id].count++; - }); - for (let i in layers){ - const layer = Mlayer.get(i); - const path = 'layer/'+layer.get('id'); - html += '
    • '+ - '
      '+ - ''+LayerIcon.getIcon(layer)+ - '
      '+ - i+' '+layers[i].count+'
      • '; - } - html += '
    ' - return html; - */ + match: PropTypes.object, + rebuildMap: PropTypes.number, + styleJS: PropTypes.object.isRequired, } - - - componentDidMount (){ + buildMap (){ const {styleJS} = this.props; - this.setState({styleJS:styleJS}); + this.styleJS = styleJS; - //console.log('map style:',styleJS,MapboxGl); + Mstyle.errorsSet(); const config = Mconfig.get(); const token = config.get('mapboxToken'); - //console.log('token:',token,config); - MapboxGl.accessToken = token; const map = new MapboxGl.Map({ @@ -149,40 +54,16 @@ export default class Vmapbox extends React.Component { logoPosition:'bottom-right', container: this.container, style: styleJS.toJS(), - transformRequest: (url, resourceType)=> { - if (resourceType === 'Source' || resourceType === 'Tile') { - const sources = Msource.get(); // get all sources - - const matchKey = sources.findKey(source => { - //get source domain - var matches = source.get('url').match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i); - var domain = matches && matches[1]; - return url.includes(domain) - }); - - if (!matchKey) return {url: url}; - const settings = Msource.getSettings(matchKey); - - if (!settings || !settings.has('headers')){ - return {url: url}; - } - return { - url: url, - headers: settings.get('headers').toJS() - } - } - }, - hash: true + transformRequest: this.transformRequest, + hash:true }); map.addControl(new CustomControls({})); - //map.showTileBoundaries = true; - map.addControl(new MapboxInspect({ popup: new MapboxGl.Popup({ closeButton: true, - closeOnClick: false + closeOnClick: false }), showInspectButton: false, showMapPopup: true, @@ -192,16 +73,8 @@ export default class Vmapbox extends React.Component { })); map.addControl(new MapboxGl.AttributionControl({ - compact: true - })); - - - //console.log('map:',MapboxGl); - - /* - const zoom = new ZoomControl; - map.addControl(zoom, 'top-right'); - */ + compact: true + })); const nav = new MapboxGl.NavigationControl(); map.addControl(nav, 'top-right'); @@ -218,5 +91,144 @@ export default class Vmapbox extends React.Component { }); this.map = map; - } -}; \ No newline at end of file + } + + componentDidMount (){ + this.buildMap(); + } + + componentDidUpdate(){ + const {rebuildMap, styleJS} = this.props + + if (!styleJS || !this.map) return + + if (rebuildMap && rebuildMap && this.builtMap !== rebuildMap){ + this.buildMap(); + this.builtMap = rebuildMap + return; + } + + if (!this.styleJS || !this.styleJS.equals(styleJS)){ + this.styleJS = styleJS; + + this.reStyleMap(); + } + } + + constructor (props){ + super(props); + + this.state = { + debugLines:null + } + + this.container = null; // node to put map in + this.map = null; + this.styleJS = null; + this.builtMap = null; + } + + reStyleMap (){ + const {styleJS} = this.props + Mstyle.errorsSet(); + try { + this.map && this.map.setStyle(styleJS.toJS(),{diff: true}); + } catch(e){ + Mstyle.errorAdd(e); + } + } + + render (){ + const className = 'btn btn-light btn-sm'+(this.state.debugLines? ' active': ''); + + return
    +
    this.container = el}>
    +
    + } + + renderPopup (features){ + const {handle} = this.props; + + setTimeout(()=>{ + return ReactDOM.render(,document.getElementById('map-inspect')); + },1); + + return '
    '; + } + + transformRequest = (url, resourceType)=>{ + if (resourceType === 'Source') { + const sources = Msource.get(); // get all sources + + const matchKey = sources.findKey((source, sourceKey) => { + const url = source.get('url'); + if (!url) return false; + var matches = url.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i); + var domain = matches && matches[1]; + if (!domain) return false; + return url.includes(domain); + }); + + if (!matchKey) return {url: url, headers:{}}; + const settings = Msource.getSettings(matchKey); + + if (!settings || !settings.has('headers')){ + return {url: url, headers:{}}; + } + return { + url: url, + headers: settings.get('headers').toJS() + } + } else if (resourceType === 'Tile'){ + const sources = Msource.get(); // get all sources + + const matchKey = sources.findKey((source, sourceKey) => { + + const sourceJson = Msource.getJson(sourceKey) + + let tiles; + if (source.has('tiles')){ + tiles = source.get('tiles') + } else if (sourceJson && sourceJson.has('tiles')){ + tiles = sourceJson.get('tiles') + } + + if (!tiles){ + return false; + } + const tileMatch = tiles.find((path)=>{ + var matches = path.match(/^https?\:\/\/([^\/?#]+)(?:[\/?#]|$)/i); + var domain = matches && matches[1]; + if (!domain) return false; + return url.includes(domain) + }) + + return (tileMatch)? true: false; + }); + + if (!matchKey) return {url: url, headers:{}}; + const settings = Msource.getSettings(matchKey); + + if (!settings || !settings.has('headers')){ + return {url: url, headers:{}}; + } + return { + url: url, + headers: settings.get('headers').toJS() + } + } + } +}; + +const mapStoreToProps = (store)=>{ + return { + rebuildMap:store.style.get('rebuildMap'), + } +}; +const mapDispatchToProps = {}; + +export default connect( + mapStoreToProps, + mapDispatchToProps +)(Vmapbox); + diff --git a/src/view/Vpanel/index.jsx b/src/view/Vpanel/index.jsx index 531a5d2..9cb145a 100644 --- a/src/view/Vpanel/index.jsx +++ b/src/view/Vpanel/index.jsx @@ -26,20 +26,6 @@ class Vpanel extends React.Component { ]) } - /* - - panel: PropTypes.shape({ - float: PropTypes.string, // left, right, top, bottom - dim: PropTypes.shape({ - x: PropTypes.number, - y: PropTypes.number, - w: PropTypes.number, - h: PropTypes.number - }), - }), - - */ - constructor(props) { super(props); this.state = { diff --git a/src/view/Vproperty/VpropertyMetadata/index.jsx b/src/view/Vproperty/VpropertyMetadata/index.jsx index 885dfe9..14aba66 100644 --- a/src/view/Vproperty/VpropertyMetadata/index.jsx +++ b/src/view/Vproperty/VpropertyMetadata/index.jsx @@ -111,17 +111,14 @@ export default class VpropertyMetadata extends React.Component { } render (){ - const {property, focus} = this.props; + const {focus} = this.props; - let rows = [], ind = 0; + let rows = []; this.state.valAry.keySeq().toArray().forEach((key)=>{ const keyName = key+'.0'; const valueName = key+'.1'; - const error = (property.error && property.error.get)? property.error.get(key): null; - //console.log('function error:',error); - const keyFocus = (keyName === focus)? true: false; const valueFocus = (valueName === focus)? true: false; @@ -151,8 +148,6 @@ export default class VpropertyMetadata extends React.Component {
    ); - - ind++; }); return
    diff --git a/src/view/Vproperty/index.jsx b/src/view/Vproperty/index.jsx index 570811f..279aae8 100644 --- a/src/view/Vproperty/index.jsx +++ b/src/view/Vproperty/index.jsx @@ -115,8 +115,8 @@ export default class Vproperty extends React.Component { const spec = property.spec || {}; - const doc = property.spec && property.spec.doc || null; - const type = property.spec && property.spec.type || 'string'; + const doc = (property.spec && property.spec.doc)? property.spec.doc: null; + const type = (property.spec && property.spec.type)? property.spec.type: 'string'; const autoFocus = (property.name === focus)? true: false; diff --git a/src/view/Vsource/VsourceList.jsx b/src/view/Vsource/VsourceList.jsx index e87bc12..a063aa3 100644 --- a/src/view/Vsource/VsourceList.jsx +++ b/src/view/Vsource/VsourceList.jsx @@ -98,11 +98,9 @@ export default class VsourceList extends React.Component { {(provided, snapshot) => (
    {sources !== undefined && sources.keySeq().map((key)=>{ - - const source = sources.get(key); const path = baseUrl+'/'+encodeURIComponent(key); - if (this.state.search && key.toLowerCase().indexOf(this.state.search.toLowerCase()) === -1) return; + if (this.state.search && key.toLowerCase().indexOf(this.state.search.toLowerCase()) === -1) return
    ; let className = 'px-2 py-1 d-block link-list list-border-right position-relative'; if (error.hasIn(['sources',key])) className += ' error';