Skip to content

Commit

Permalink
Merge pull request #105 from FZJ-INM1-BDA/hotfix_minorUI
Browse files Browse the repository at this point in the history 
Hotfix minor UI
  • Loading branch information
@xgui3783
xgui3783 committed Feb 2, 2021
2 parents 7717fd0 + dfbe70a commit 7f3d720
Show file tree
Hide file tree
Showing 3 changed files with 157 additions and 102 deletions.
60 changes: 37 additions & 23 deletions app/src/components/RotationWidget/TwoArrowFragment.vue
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,35 @@
<template>
<g
class="group"
<g class="group"
@mouseenter="$emit('mouseenterPath')"
@mouseleave="$emit('mouseleavePath')"
@mousedown="$emit('mousedownPath')">
<path
:d="pathD1"
class="path thin">
</path>
<path
:d="pathD2"
class="path">
</path>
<path
:d="pathD3"
class="path thin">
</path>

<path
:d="pathD1x"
class="path thin">
</path>
<circle :cx="center[0]" :cy="center[1]" r="8%" :fill="circleFill"/>

<path
:d="pathD3x"
class="path thin">
</path>
<g>
<path
:d="pathD1"
class="path thin">
</path>
<path
:d="pathD2"
class="path">
</path>
<path
:d="pathD3"
class="path thin">
</path>

<path
:d="pathD1x"
class="path thin">
</path>

<path
:d="pathD3x"
class="path thin">
</path>
</g>
</g>
</template>
<script>
Expand All @@ -47,9 +51,15 @@ export default {
default: function (coord) {
return coord
}
},
fillColor: {
default: () => [255, 0, 0]
}
},
computed: {
circleFill: function() {
return `rgb(${this.fillColor.join(', ')})`
},
radius: function(){
return this.width / 2
},
Expand Down Expand Up @@ -172,11 +182,15 @@ export default {
}
</script>
<style scoped>
circle
{
pointer-events: visiblePainted;
}
.path
{
pointer-events: visibleStroke;
fill: none;
stroke: blue;
stroke: white;
}
.path:not(.thin)
Expand Down
131 changes: 77 additions & 54 deletions app/src/components/RotationWidget/TwoDRotationWidget.vue
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,76 @@
<template>
<svg
ref="svg"
class="pe-none svg-container">

<clipPath id="clipPathId">
<div>
<svg
viewBox="0 0 40 40"
ref="svg"
class="pe-none svg-container">

<clipPath id="clipPathId">
<path
fill="none"
:d="pathD">
</path>
</clipPath>

<CircleFragment
ref="circleFragment"
@mouseenterPath="mouseenterPath"
@mouseleavePath="mouseleavePath"
@mousedownPath="mousedownPath"
:pathStyle="cricleStyle"
:center="center"
:width="width" />

<path
fill="none"
:d="pathD">
v-if="mousedown"
clip-path="url(#clipPathId)"
stroke-width="2"
stroke="white"
:d="guidingLineD">
</path>
</clipPath>

<CircleFragment
ref="circleFragment"
@mouseenterPath="mouseenterPath"
@mouseleavePath="mouseleavePath"
@mousedownPath="mousedownPath"
:pathStyle="cricleStyle"
:center="center"
:width="width" />

<path
v-if="mousedown"
clip-path="url(#clipPathId)"
stroke-width="2"
stroke="white"
:d="guidingLineD">
</path>
<g class="flip1">
<TwoArrowFragment
@click.native="$emit('clickTwoArrow', { idx: 1 })"
:xformCoord="xform1"
:center="[0, 0]"
:width="width"/>
</g>
<g class="flip2">
<TwoArrowFragment
@click.native="$emit('clickTwoArrow', { idx: 0 })"
:xformCoord="xform2"
:center="[0, 0]"
:width="width"/>
</g>
<g class="flip3">
<TwoArrowFragment
@click.native="$emit('clickTwoArrow', { idx: 2 })"
:xformCoord="xform3"
:center="[0, 0]"
:width="width"/>
</g>
</svg>

<!-- twoarrwo fragment is not very stable at the moment -->
<!-- responsive direction is a bit bugged -->
<!-- reenable once fixed -->

<!-- <g class="flip1">
<TwoArrowFragment
@click.native="$emit('clickTwoArrow', { idx: 1 })"
:xformCoord="xform1"
:center="[0, 0]"
:fillColor="[0, 200, 0]"
:width="width"/>
</g>
<g class="flip2">
<TwoArrowFragment
@click.native="$emit('clickTwoArrow', { idx: 0 })"
:xformCoord="xform2"
:center="[0, 0]"
:fillColor="[200, 0, 0]"
:width="width"/>
</g>
<g class="flip3">
<TwoArrowFragment
@click.native="$emit('clickTwoArrow', { idx: 2 })"
:xformCoord="xform3"
:center="[0, 0]"
:fillColor="[0, 0, 200]"
:width="width"/>
</g> -->
</svg>
<b-button class="pe-all" pill size="sm" variant="success"
@click="$emit('clickTwoArrow', { idx: 1 })">
<font-awesome-icon icon="arrows-alt-h" />
</b-button>
<b-button class="pe-all" pill size="sm" variant="danger"
@click="$emit('clickTwoArrow', { idx: 0 })">
<font-awesome-icon icon="arrows-alt-h" />
</b-button>
<b-button class="pe-all" pill size="sm" variant="primary"
@click="$emit('clickTwoArrow', { idx: 2 })">
<font-awesome-icon icon="arrows-alt-h" />
</b-button>
</div>
</template>
<script>
import CircleFragment from '@/components/RotationWidget/CircleFragment'
Expand Down Expand Up @@ -122,8 +145,8 @@ export default {
return {
onHover: false,
mousedown: false,
center: [40,40],
width: 40,
center: [20,20],
width: 18,
mousePos: null,
pathD: null
}
Expand Down Expand Up @@ -233,19 +256,19 @@ export default {
<style scoped>
.svg-container
{
width: 100%;
height: 100%;
width: 5em;
height: auto;
}
.flip1
{
transform: translate(100px, 40px)
transform: translate(30%, 20px)
}
.flip2
{
transform: translate(150px, 40px)
transform: translate(50%, 20px)
}
.flip3
{
transform: translate(200px, 40px)
transform: translate(70%, 20px)
}
</style>
68 changes: 43 additions & 25 deletions app/src/components/TheHeader.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@

<!-- global lock -->
<div
v-if="showGlobalLock"
v-b-tooltip.hover.bottom="'Lock Incoming Volume'"
@click="toggleGlobalLock"
class="mr-2 w-1em">
Expand Down Expand Up @@ -61,22 +62,47 @@
<font-awesome-icon class="icon" icon="palette"></font-awesome-icon>
</div>
</template>
<b-dropdown-item
class="nopadding">
<b-dropdown-text>

<h5>
Colormaps
</h5>

<b-button :variant="colorMapSelectionText === colorMap.name ? 'primary' : 'outline-primary'"
@click="selectColorMapByName({ name: colorMap.name })"
v-for="colorMap in availableColorMaps"
:key="colorMap.name">
{{ colorMap.name }}
</b-button>
</b-dropdown-text>

<b-dropdown-divider />

<b-dropdown-text>
<h5>
Mono
</h5>
</b-dropdown-text>

<b-dropdown-text class="nopadding">
<compact-picker
class="compact-picker"
v-model="overlayColor" />
</b-dropdown-item>
</b-dropdown-text>
</b-nav-item-dropdown>

</transition>

<!-- threshold -->
<transition name="fade">
<b-nav-item-dropdown
v-if="showThreshold"
text="Threshold"
right>
<b-dropdown-text>

<SliderComponent
class="w-10em"
name="Lower Threshold"
:min="0"
:max="1"
Expand All @@ -87,6 +113,7 @@
:value="lowerThreshold"
unit="" />
<SliderComponent
class="w-10em"
name="Upper Threshold"
:min="0"
:max="1"
Expand All @@ -96,25 +123,7 @@
@plus="upperThreshold += 0.01"
:value="upperThreshold"
unit="" />
</b-nav-item-dropdown>
</transition>


<!-- colormap selection -->
<transition name="fade">
<b-nav-item-dropdown
:text="colorMapSelectionText"
right>
<b-dropdown-item
@click="selectColorMapByName({ name: null })">
Mono
</b-dropdown-item>
<b-dropdown-item
:key="colorMap.name"
@click="selectColorMapByName({ name: colorMap.name })"
v-for="colorMap in availableColorMaps">
{{ colorMap.name }}
</b-dropdown-item>
</b-dropdown-text>
</b-nav-item-dropdown>
</transition>

Expand Down Expand Up @@ -261,10 +270,13 @@ export default {
? `Hi ${(this.user && this.user.name) || 'Unnamed User'}`
: `Login`
},
showColorPicker: function () {
return this._step2Mode === 'overlay' && this.selectedIncomingVolumeType === 'image' && !this.selectedColorMap
showGlobalLock: function () {
return this._step2Mode === 'overlay'
},
showThreshold: function () {
return this._step2Mode === 'overlay'
},
showColorMapSelection: function () {
showColorPicker: function () {
return this._step2Mode === 'overlay' && this.selectedIncomingVolumeType === 'image'
},
colorMapSelectionText: function () {
Expand All @@ -280,6 +292,7 @@ export default {
return this.stateOverlayColor
},
set: function (newColor) {
this.selectColorMapByName({ name: null })
this.changeOverlayColor(newColor)
}
},
Expand Down Expand Up @@ -399,4 +412,9 @@ export default {
{
width:1em!important;
}
.w-10em
{
width: 10em;
}
</style>

0 comments on commit 7f3d720

Please sign in to comment.