ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-23 09:25:29 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Fixed condition-improve-reorder branch (#2912)

Browse Source 
* wip: changing to condition as drag target

* wip

* wip

* wip

* fixed dragging issues

* fixed dragging classes and added temp border on condition with dragging class

* Conditionals sanding and shimming

- CSS and `all-dragging`;

* wip

* fixed drag end issue and changed dragging class to go on parent condition h

* drag with counter

* wip

* wip

* wip

* return to logic in ConditionCollection.vue

* wip

* completed js part with highlighted c-condition-h on dragover

* restored grippy as draggable elem, improved isValidTarget

* fixed drag text bug

* added moveIndex prop in Condition.vue

* Conditionals drag reorder styling

- Moved `.is-drag-target` class up to conditions-h element;
- Renamed `.all-dragging` to `is-active-dragging`;
- Styling for `__drop-target` elements;

* fixed incorrect default for moveIndex in condition collection, unnecessary reset in condition

* fixed downward move reorder

* removed prevent from dragenter and drag leave, changed @blur to @change for name and output fields

* removed console log

* Repair merge-damaged conditionals.scss

- Manual merge from latest master;

* Test data layout tweaked

- Prevent c-cs__test-data__controls from collapsing;

Co-authored-by: Joel McKinnon <joel.g.mckinnon@nasa.gov>
Co-authored-by: Joel McKinnon <JoelMcKinnon@users.noreply.github.com>
This commit is contained in:
Charles Hacskaylo
2020-04-10 15:04:04 -07:00
committed by GitHub
parent f885e83505
commit 99c095a69f
4 changed files with 245 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

330
src/plugins/condition/components/Condition.vue
View File

@ -21,159 +21,167 @@
*****************************************************************************/ *****************************************************************************/
<template> <template>
<div v-if="isEditing" <div class="c-condition-h"
class="c-condition c-condition--edit js-condition-drag-wrapper" :class="{ 'is-drag-target': draggingOver }"
@dragover.prevent
@drop.prevent="dropCondition($event, conditionIndex)"
@dragenter="dragEnter($event, conditionIndex)"
@dragleave="dragLeave($event, conditionIndex)"
> >
<!-- Edit view --> <div class="c-condition-h__drop-target"></div>
<div class="c-condition__header"> <div v-if="isEditing"
<span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag" class="c-condition c-condition--edit"
title="Drag to reorder conditions"
:class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
:draggable="!condition.isDefault"
@dragstart="dragStart"
@dragstop="dragStop"
@dragover.stop
></span>
<span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
:class="{ 'c-disclosure-triangle--expanded': expanded }"
@click="expanded = !expanded"
></span>
<span class="c-condition__name">{{ condition.configuration.name }}</span>
<span class="c-condition__summary">
<template v-if="!canEvaluateCriteria">
Define criteria
</template>
<span v-else>
<condition-description :show-label="false"
:condition="condition"
/>
</span>
</span>
<div class="c-condition__buttons">
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__duplicate-button icon-duplicate"
title="Duplicate this condition"
@click="cloneCondition"
></button>
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__delete-button icon-trash"
title="Delete this condition"
@click="removeCondition"
></button>
</div>
</div>
<div v-if="expanded"
class="c-condition__definition c-cdef"
> >
<span class="c-cdef__separator c-row-separator"></span> <!-- Edit view -->
<span class="c-cdef__label">Condition Name</span> <div class="c-condition__header">
<span class="c-cdef__controls"> <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
<input v-model="condition.configuration.name" title="Drag to reorder conditions"
class="t-condition-input__name" :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
type="text" :draggable="!condition.isDefault"
@blur="persist" @dragstart="dragStart"
> @dragend="dragEnd"
</span> ></span>
<span class="c-cdef__label">Output</span> <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
<span class="c-cdef__controls"> :class="{ 'c-disclosure-triangle--expanded': expanded }"
<span class="c-cdef__control"> @click="expanded = !expanded"
<select v-model="selectedOutputSelection" ></span>
@change="setOutputValue"
>
<option v-for="option in outputOptions"
:key="option"
:value="option"
>
{{ initCap(option) }}
</option>
</select>
</span>
<span class="c-cdef__control">
<input v-if="selectedOutputSelection === outputOptions[2]"
v-model="condition.configuration.output"
class="t-condition-name-input"
type="text"
@blur="persist"
>
</span>
</span>
<div v-if="!condition.isDefault" <span class="c-condition__name">{{ condition.configuration.name }}</span>
class="c-cdef__match-and-criteria" <span class="c-condition__summary">
<template v-if="!canEvaluateCriteria">
Define criteria
</template>
<span v-else>
<condition-description :show-label="false"
:condition="condition"
/>
</span>
</span>
<div class="c-condition__buttons">
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__duplicate-button icon-duplicate"
title="Duplicate this condition"
@click="cloneCondition"
></button>
<button v-if="!condition.isDefault"
class="c-click-icon c-condition__delete-button icon-trash"
title="Delete this condition"
@click="removeCondition"
></button>
</div>
</div>
<div v-if="expanded"
class="c-condition__definition c-cdef"
> >
<span class="c-cdef__separator c-row-separator"></span> <span class="c-cdef__separator c-row-separator"></span>
<span class="c-cdef__label">Match</span> <span class="c-cdef__label">Condition Name</span>
<span class="c-cdef__controls"> <span class="c-cdef__controls">
<select v-model="condition.configuration.trigger" <input v-model="condition.configuration.name"
@change="persist" class="t-condition-input__name"
type="text"
@change="persist"
> >
<option v-for="option in triggers"
:key="option.value"
:value="option.value"
> {{ option.label }}</option>
</select>
</span> </span>
<template v-if="telemetry.length || condition.configuration.criteria.length"> <span class="c-cdef__label">Output</span>
<div v-for="(criterion, index) in condition.configuration.criteria" <span class="c-cdef__controls">
:key="criterion.id" <span class="c-cdef__control">
class="c-cdef__criteria" <select v-model="selectedOutputSelection"
> @change="setOutputValue"
<Criterion :telemetry="telemetry" >
:criterion="criterion" <option v-for="option in outputOptions"
:index="index" :key="option"
:trigger="condition.configuration.trigger" :value="option"
:is-default="condition.configuration.criteria.length === 1" >
@persist="persist" {{ initCap(option) }}
/> </option>
<div class="c-cdef__criteria__buttons"> </select>
<button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate" </span>
title="Duplicate this criteria" <span class="c-cdef__control">
@click="cloneCriterion(index)" <input v-if="selectedOutputSelection === outputOptions[2]"
></button> v-model="condition.configuration.output"
<button v-if="!(condition.configuration.criteria.length === 1)" class="t-condition-name-input"
class="c-click-icon c-cdef__criteria-duplicate-button icon-trash" type="text"
title="Delete this criteria" @change="persist"
@click="removeCriterion(index)" >
></button> </span>
</div> </span>
</div>
</template> <div v-if="!condition.isDefault"
<div class="c-cdef__separator c-row-separator"></div> class="c-cdef__match-and-criteria"
<div class="c-cdef__controls"
:disabled="!telemetry.length"
> >
<button <span class="c-cdef__separator c-row-separator"></span>
class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus" <span class="c-cdef__label">Match</span>
@click="addCriteria" <span class="c-cdef__controls">
<select v-model="condition.configuration.trigger"
@change="persist"
>
<option v-for="option in triggers"
:key="option.value"
:value="option.value"
> {{ option.label }}</option>
</select>
</span>
<template v-if="telemetry.length || condition.configuration.criteria.length">
<div v-for="(criterion, index) in condition.configuration.criteria"
:key="criterion.id"
class="c-cdef__criteria"
>
<Criterion :telemetry="telemetry"
:criterion="criterion"
:index="index"
:trigger="condition.configuration.trigger"
:is-default="condition.configuration.criteria.length === 1"
@persist="persist"
/>
<div class="c-cdef__criteria__buttons">
<button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
title="Duplicate this criteria"
@click="cloneCriterion(index)"
></button>
<button v-if="!(condition.configuration.criteria.length === 1)"
class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
title="Delete this criteria"
@click="removeCriterion(index)"
></button>
</div>
</div>
</template>
<div class="c-cdef__separator c-row-separator"></div>
<div class="c-cdef__controls"
:disabled="!telemetry.length"
> >
<span class="c-button__label">Add Criteria</span> <button
</button> class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
@click="addCriteria"
>
<span class="c-button__label">Add Criteria</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div v-else
<div v-else class="c-condition c-condition--browse"
class="c-condition c-condition--browse" >
> <!-- Browse view -->
<!-- Browse view --> <div class="c-condition__header">
<div class="c-condition__header"> <span class="c-condition__name">
<span class="c-condition__name"> {{ condition.configuration.name }}
{{ condition.configuration.name }} </span>
</span> <span class="c-condition__output">
<span class="c-condition__output"> Output: {{ condition.configuration.output }}
Output: {{ condition.configuration.output }} </span>
</span> </div>
</div> <div class="c-condition__summary">
<div class="c-condition__summary"> <condition-description :show-label="false"
<condition-description :show-label="false" :condition="condition"
:condition="condition" />
/> </div>
</div> </div>
</div> </div>
</template> </template>
@ -207,6 +215,14 @@ export default {
type: Array, type: Array,
required: true, required: true,
default: () => [] default: () => []
},
isDragging: {
type: Boolean,
default: false
},
moveIndex: {
type: Number,
default: 0
} }
}, },
data() { data() {
@ -217,8 +233,8 @@ export default {
selectedOutputSelection: '', selectedOutputSelection: '',
outputOptions: ['false', 'true', 'string'], outputOptions: ['false', 'true', 'string'],
criterionIndex: 0, criterionIndex: 0,
selectedTelemetryName: '', draggingOver: false,
selectedFieldName: '' isDefault: this.condition.isDefault
}; };
}, },
computed: { computed: {
@ -286,11 +302,39 @@ export default {
dragStart(e) { dragStart(e) {
e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
e.dataTransfer.effectAllowed = "copyMove"; e.dataTransfer.effectAllowed = "copyMove";
e.dataTransfer.setDragImage(e.target.closest('.js-condition-drag-wrapper'), 0, 0); e.dataTransfer.setDragImage(e.target.closest('.c-condition-h'), 0, 0);
this.$emit('setMoveIndex', this.conditionIndex); this.$emit('setMoveIndex', this.conditionIndex);
}, },
dragStop(e) { dragEnd(event) {
e.dataTransfer.clearData(); this.dragStarted = false;
event.dataTransfer.clearData();
this.$emit('dragComplete');
},
dropCondition(event, targetIndex) {
if (!this.isDragging) { return }
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
if (this.isValidTarget(targetIndex)) {
this.dragElement = undefined;
this.draggingOver = false;
this.$emit('dropCondition', targetIndex);
}
},
dragEnter(event, targetIndex) {
if (!this.isDragging) { return }
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
if (this.isValidTarget(targetIndex)) {
this.dragElement = event.target.parentElement;
this.draggingOver = true;
}
},
dragLeave(event) {
if (event.target.parentElement === this.dragElement) {
this.draggingOver = false;
this.dragElement = undefined;
}
},
isValidTarget(targetIndex) {
return this.moveIndex !== targetIndex;
}, },
destroy() { destroy() {
}, },

63
src/plugins/condition/components/ConditionCollection.vue
View File

@ -52,28 +52,24 @@
<span class="c-cs-button__label">Add Condition</span> <span class="c-cs-button__label">Add Condition</span>
</button> </button>
<div class="c-cs__conditions-h"> <div class="c-cs__conditions-h"
<div v-for="(condition, index) in conditionCollection" :class="{ 'is-active-dragging': isDragging }"
:key="condition.id" >
class="c-condition-h" <Condition v-for="(condition, index) in conditionCollection"
> :key="condition.id"
<div v-if="isEditing" :condition="condition"
class="c-c__drag-ghost" :condition-index="index"
@drop.prevent="dropCondition" :telemetry="telemetryObjs"
@dragenter="dragEnter" :is-editing="isEditing"
@dragleave="dragLeave" :move-index="moveIndex"
@dragover.prevent :is-dragging="isDragging"
></div> @updateCondition="updateCondition"
<Condition :condition="condition" @removeCondition="removeCondition"
:condition-index="index" @cloneCondition="cloneCondition"
:telemetry="telemetryObjs" @setMoveIndex="setMoveIndex"
:is-editing="isEditing" @dragComplete="dragComplete"
@updateCondition="updateCondition" @dropCondition="dropCondition"
@removeCondition="removeCondition" />
@cloneCondition="cloneCondition"
@setMoveIndex="setMoveIndex"
/>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -108,9 +104,10 @@ export default {
conditionResults: {}, conditionResults: {},
conditions: [], conditions: [],
telemetryObjs: [], telemetryObjs: [],
moveIndex: Number, moveIndex: undefined,
isDragging: false, isDragging: false,
defaultOutput: undefined defaultOutput: undefined,
dragCounter: 0
}; };
}, },
watch: { watch: {
@ -165,9 +162,7 @@ export default {
this.moveIndex = index; this.moveIndex = index;
this.isDragging = true; this.isDragging = true;
}, },
dropCondition(e) { dropCondition(targetIndex) {
let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
const oldIndexArr = Object.keys(this.conditionCollection); const oldIndexArr = Object.keys(this.conditionCollection);
const move = function (arr, old_index, new_index) { const move = function (arr, old_index, new_index) {
while (old_index < 0) { while (old_index < 0) {
@ -193,20 +188,10 @@ export default {
} }
this.reorder(reorderPlan); this.reorder(reorderPlan);
},
e.target.classList.remove("dragging"); dragComplete() {
this.isDragging = false; this.isDragging = false;
}, },
dragEnter(e) {
if (!this.isDragging) { return }
let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
if (this.moveIndex === targetIndex) { return }
e.target.classList.add("dragging");
},
dragLeave(e) {
e.target.classList.remove("dragging");
},
addTelemetryObject(domainObject) { addTelemetryObject(domainObject) {
this.telemetryObjs.push(domainObject); this.telemetryObjs.push(domainObject);
this.$emit('telemetryUpdated', this.telemetryObjs); this.$emit('telemetryUpdated', this.telemetryObjs);

2
src/plugins/condition/components/TestData.vue
View File

@ -36,7 +36,7 @@
<div v-if="expanded" <div v-if="expanded"
class="c-cs__content" class="c-cs__content"
> >
<div class="c-cdef__controls" <div class="c-cs__test-data__controls c-cdef__controls"
:disabled="!telemetry.length" :disabled="!telemetry.length"
> >
<label class="c-toggle-switch"> <label class="c-toggle-switch">

33
src/plugins/condition/components/conditionals.scss
View File

@ -19,6 +19,33 @@
* this source code distribution or the Licensing information page available * this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information. * at runtime from the About dialog for additional information.
*****************************************************************************/ *****************************************************************************/
/***************************** DRAGGING */
.is-active-dragging {
.c-condition-h__drop-target {
height: 3px;
margin-bottom: $interiorMarginSm;
}
}
.c-condition-h {
&__drop-target {
border-radius: $controlCr;
height: 0;
min-height: 0;
transition: background-color, height;
transition-duration: 150ms;
}
&.is-drag-target {
.c-condition > * {
pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
}
.c-condition-h__drop-target {
background-color: rgba($colorKey, 0.7);
}
}
}
.c-cs { .c-cs {
display: flex; display: flex;
@ -261,6 +288,12 @@
} }
/***************************** TEST DATA */ /***************************** TEST DATA */
.c-cs__test-data {
&__controls {
flex: 0 0 auto;
}
}
.c-cs-tests { .c-cs-tests {
flex: 0 1 auto; flex: 0 1 auto;
overflow: auto; overflow: auto;