From 5e51289f5afdc9567989c81f8e31e4261b7ced8a Mon Sep 17 00:00:00 2001 From: Billy Charlton Date: Sat, 20 Nov 2021 22:43:20 +0100 Subject: [PATCH] re-enable links plugin --- src/plugins/links-gl/ConfigPanel.vue | 27 +++++++++++++++------------ src/plugins/links-gl/LinkVolumes.vue | 12 ++++++------ src/plugins/pluginRegistry.ts | 4 ++-- 3 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/plugins/links-gl/ConfigPanel.vue b/src/plugins/links-gl/ConfigPanel.vue index a44147e3..a57dd50d 100644 --- a/src/plugins/links-gl/ConfigPanel.vue +++ b/src/plugins/links-gl/ConfigPanel.vue @@ -51,7 +51,7 @@ .dropdown.is-up.full-width(:class="{'is-active': isColorButtonActive}") .dropdown-trigger img.color-button(v-bind:style="[isDarkMode ? {'transform' : 'scaleX(1)'} : {'transform' : 'scaleX(-1)'}]" - :src="`${pathColorScale}scale-${selectedColorRamp}.png`" + :src="getColorRampUrl(selectedColorRamp)" @click="() => this.isColorButtonActive = !this.isColorButtonActive" ) @@ -61,7 +61,7 @@ @click="handleColorRamp(colorRamp)" :style="{'padding': '0.25rem 0.25rem'}") img.swap-color(v-bind:style="[isDarkMode ? {'transform' : 'scaleX(1)'} : {'transform' : 'scaleX(-1)'}]" - :src="`${pathColorScale}scale-${colorRamp}.png`") + :src="getColorRampUrl(colorRamp)") p(:style="{'lineHeight': '1rem', 'marginBottom':'0.25rem'}") {{ colorRamp }} @@ -119,12 +119,14 @@ export default class VueComponent extends Vue { @Prop({ required: true }) private selectedColorRamp!: string - private pathColorScale = '/simwrapper/colors/' private isButtonActive = false private isColorButtonActive = false private scaleWidthValue = '' + this.scaleWidth + private globalState = globalStore.state + private isDarkMode = this.globalState.colorScheme === ColorScheme.DarkMode + private colorRamps: { [title: string]: { png: string; diff?: boolean } } = { viridis: { png: 'scale-viridis.png' }, inferno: { png: 'scale-inferno.png' }, @@ -136,13 +138,14 @@ export default class VueComponent extends Vue { this.scaleWidthValue = '' + this.scaleWidth } - private globalState = globalStore.state - private isDarkMode = this.globalState.colorScheme === ColorScheme.DarkMode - private mounted() { this.scaleWidthValue = '' + this.scaleWidth } + private getColorRampUrl(ramp: string) { + return new URL(`/colors/scale-${ramp}.png`, import.meta.url).href + } + @Watch('scaleWidthValue') handleScaleChanged() { // if (this.scaleWidth === parseFloat(this.scaleWidthValue)) return @@ -154,13 +157,13 @@ export default class VueComponent extends Vue { private changeColorForDarkMode() { if (this.isDarkMode) { - ;(document.getElementsByClassName('color-button') as HTMLCollectionOf< - HTMLElement - >)[0].style.transform = 'scaleX(1)' + ;( + document.getElementsByClassName('color-button') as HTMLCollectionOf + )[0].style.transform = 'scaleX(1)' } else { - ;(document.getElementsByClassName('color-button') as HTMLCollectionOf< - HTMLElement - >)[0].style.transform = 'scaleX(-1)' + ;( + document.getElementsByClassName('color-button') as HTMLCollectionOf + )[0].style.transform = 'scaleX(-1)' } var i diff --git a/src/plugins/links-gl/LinkVolumes.vue b/src/plugins/links-gl/LinkVolumes.vue index e84b5ebc..57c5a39d 100644 --- a/src/plugins/links-gl/LinkVolumes.vue +++ b/src/plugins/links-gl/LinkVolumes.vue @@ -93,7 +93,7 @@ import ConfigPanel from './ConfigPanel.vue' import LinkGlLayer from './LinkLayer' import HTTPFileSystem from '@/js/HTTPFileSystem' import DrawingTool from '@/components/DrawingTool/DrawingTool.vue' -import GzipFetcher from '@/workers/GzipFetcher.worker' +import GzipFetcher from '@/workers/GzipFetcher.worker.ts?worker' import { ColorScheme, @@ -244,8 +244,9 @@ class MyPlugin extends Vue { this.myState.subfolder + '/' + this.myState.yamlConfig ) this.vizDetails = YAML.parse(text) - } catch (e) { - console.log('failed') + } catch (err) { + console.error('failed') + const e = err as any // maybe it failed because password? if (this.myState.fileSystem && this.myState.fileSystem.needPassword && e.status === 401) { this.$store.commit('requestLogin', this.myState.fileSystem.slug) @@ -313,7 +314,7 @@ class MyPlugin extends Vue { // // find max value for scaling if (!this.csvData.headerMax[column]) { let max = 0 - this.buildColumnValues[column].forEach(value => (max = Math.max(max, value))) + this.buildColumnValues[column].forEach((value) => (max = Math.max(max, value))) if (max) this.csvData.headerMax[column] = max } @@ -387,11 +388,10 @@ class MyPlugin extends Vue { if (!this.myState.fileApi) return try { + this.myState.statusMessage = 'Loading network...' this.linkOffsetLookup = {} this.numLinks = 0 - this.myState.statusMessage = 'Loading network...' - const network = `/${this.myState.subfolder}/${this.vizDetails.geojsonFile}` const worker = new GzipFetcher() as Worker diff --git a/src/plugins/pluginRegistry.ts b/src/plugins/pluginRegistry.ts index 08c642bb..2cd32aa9 100644 --- a/src/plugins/pluginRegistry.ts +++ b/src/plugins/pluginRegistry.ts @@ -3,7 +3,7 @@ // import VehicleAnimation from '@/plugins/vehicle-animation/VehicleAnimation.vue' // import XyHexagons from '@/plugins/xy-hexagons/XyHexagons.vue' // import AgentAnimation from '@/plugins/agent-animation/AgentAnimation.vue' -// import LinksGl from '@/plugins/links-gl/LinkVolumes.vue' +import LinksGl from '@/plugins/links-gl/LinkVolumes.vue' // import LinkVolumes from '@/plugins/link-vols/LinkVolumes.vue' // import TransitDemand from '@/plugins/transit-demand/TransitDemand.vue' // import ShapeFile from '@/plugins/shape-file/ShapeFile.vue' @@ -19,7 +19,7 @@ const plugins = { // CarrierViewer, // XyHexagons, // AgentAnimation, - // LinksGl, + LinksGl, // LinkVolumes, // ShapeFile, // SankeyDiagram,