Commit f3245b78 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Added possibility to set options e.g. the control panel position

parent 5a74d200
Pipeline #3061 failed with stages
in 3 minutes and 35 seconds
......@@ -4,10 +4,11 @@ import RequestManager from './services/request-manager'
import ChartManager from './services/chart-manager'
class FractalJS {
constructor (handler, dataSource, fractalisNode, getAuth) {
constructor (handler, dataSource, fractalisNode, getAuth, options) {
const requestManager = new RequestManager({handler, dataSource, fractalisNode, getAuth})
store.dispatch('setRequestManager', requestManager)
store.dispatch('updateData')
store.dispatch('setOptions', options)
this._chartManager = new ChartManager()
this._versionCheck()
}
......@@ -57,18 +58,6 @@ class FractalJS {
* the API of the service specified in dataSource.
* @returns {FractalJS}: An instance of FractalJS.
*/
export function init ({handler, dataSource, fractalisNode, getAuth}) {
if (!handler) {
throw new Error(`handler property must not be ${handler}`)
}
if (!dataSource) {
throw new Error(`handler property must not be ${dataSource}`)
}
if (!fractalisNode) {
throw new Error(`handler property must not be ${fractalisNode}`)
}
if (!getAuth) {
throw new Error(`handler property must not be ${getAuth}`)
}
return new FractalJS(handler, dataSource, fractalisNode, getAuth)
export function init ({handler, dataSource, fractalisNode, getAuth, options}) {
return new FractalJS(handler, dataSource, fractalisNode, getAuth, options)
}
......@@ -84,5 +84,12 @@ export default {
*/
addControlPanel: (context, vm) => {
context.commit(types.ADD_CONTROL_PANEL, {vm})
},
setOptions: (context, options) => {
if (typeof options === 'object') {
context.commit(types.SET_OPTIONS, options)
} else if (typeof options !== 'undefined') {
throw new Error('The "options" parameter must be of type "object"!')
}
}
}
......@@ -4,5 +4,6 @@ export default {
subsets: state => state.subsets,
requestManager: state => state.requestManager,
controlPanels: state => state.controlPanels,
filter: state => name => state.filters[name]
filter: state => name => state.filters[name],
options: state => state.options
}
......@@ -5,5 +5,6 @@ export default {
SET_FILTER: 'SET_FILTER',
SET_TASK: 'SET_TASK',
UNSET_TASK: 'UNSET_TASK',
ADD_CONTROL_PANEL: 'ADD_CONTROL_PANEL'
ADD_CONTROL_PANEL: 'ADD_CONTROL_PANEL',
SET_OPTIONS: 'SET_OPTIONS'
}
......@@ -30,5 +30,8 @@ export default {
},
[types.ADD_CONTROL_PANEL] (state, {vm}) {
state.controlPanels.push(vm)
},
[types.SET_OPTIONS] (state, options) {
Object.assign(state.options, options)
}
}
......@@ -14,6 +14,9 @@ const state = {
subsets: [],
filters: {
ids: []
},
options: {
controlPanelPosition: 'left'
}
}
......
......@@ -101,8 +101,7 @@
:z-index="1"
:data-label="label"
:height="padded.height"
:width="boxplotWidth / 2">
</svg-canvas>
:width="boxplotWidth / 2"/>
<polyline class="fjs-kde"
:points="kdePolyPoints[label]"
v-if="params.showKDE">
......
......@@ -28,8 +28,8 @@
<svg :height="height" :width="width">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<svg-canvas name="fjs-canvas" :width="padded.width" :height="padded.height"></svg-canvas>
<crosshair :width="padded.width" :height="padded.height"></crosshair>
<svg-canvas name="fjs-canvas" :width="padded.width" :height="padded.height"/>
<crosshair :width="padded.width" :height="padded.height"/>
<g class="fjs-corr-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-corr-axis fjs-x-axis-2"></g>
<g class="fjs-corr-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
......
......@@ -130,7 +130,7 @@
<svg :height="height" :width="width">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<svg-canvas name="fjs-canvas" :width="padded.width" :height="padded.height"></svg-canvas>
<svg-canvas name="fjs-canvas" :width="padded.width" :height="padded.height"/>
<rect class="fjs-sig-bar"
:x="bar.x"
:y="bar.y"
......
......@@ -31,8 +31,8 @@
<svg :width="width" :height="height">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<svg-canvas name="fjs-canvas" :width="padded.width" :height="padded.height"></svg-canvas>
<crosshair :width="padded.width" :height="padded.height"></crosshair>
<svg-canvas name="fjs-canvas" :width="padded.width" :height="padded.height"/>
<crosshair :width="padded.width" :height="padded.height"/>
<g class="fjs-brush"></g>
<g class="fjs-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
<g class="fjs-axis fjs-x-axis-2"></g>
......
<template>
<div class="fjs-control-panel"
:style="{width: shown ? '15vw' : '1vw'}"
:style="{width: shown ? '15vw' : '1vw', left: left, right: right}"
v-show="focused"
@mouseover="locked ? noop() : show()"
@mouseout="locked ? noop() : hide()">
......@@ -10,9 +10,9 @@
</div>
<span class="fjs-panel-label" v-show="!shown">Control Panel</span>
<div v-show="shown">
<slot></slot>
<slot/>
<hr class="fjs-seperator"/>
<task-view></task-view>
<task-view/>
</div>
</div>
</template>
......@@ -28,12 +28,7 @@
focused: true,
locked: false,
expanded: false,
shown: true,
tweened: {
position: {
left: 0
}
}
shown: true
}
},
computed: {
......@@ -42,6 +37,12 @@
},
chartName () {
return this.$parent.$parent.$options.name
},
left () {
return store.getters.options.controlPanelPosition === 'left' ? 0 : ''
},
right () {
return store.getters.options.controlPanelPosition === 'right' ? 0 : ''
}
},
methods: {
......@@ -110,7 +111,6 @@
flex-direction: column
justify-content: flex-start
top: 0
left: 0
padding: 1vh
height: 100vh
overflow-y: auto
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment