style changes for dnd

src/plugins/condition/components/ConditionCollection.vue

@@ -33,13 +33,9 @@
                  class="c-c__drag-ghost"
             ></div>
             <div class="c-c__container-holder">
-                <div v-for="conditionIdentifier in conditionCollection"
+                <div v-for="(conditionIdentifier, index) in conditionCollection"
                      :key="conditionIdentifier.key"
                 >
-                    <div class="c-c__drop-hint">
-                        <div class="c-drop-hint c-drop-hint"></div>
-                    </div>
-
                     <div v-if="isEditing">
                         <ConditionEdit :condition-identifier="conditionIdentifier"
                                        :current-condition-identifier="currentConditionIdentifier"
@@ -65,6 +61,7 @@ import Condition from '../../condition/components/Condition.vue';
 import ConditionEdit from '../../condition/components/ConditionEdit.vue';
 import uuid from 'uuid';
 
+
 export default {
     inject: ['openmct', 'domainObject'],
     components: {

src/plugins/condition/components/ConditionEdit.vue

@@ -3,6 +3,7 @@
      class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
      :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
      draggable="true"
+     @dragstart="initDrag"
 >
     <div class="title-bar">
         <span
@@ -28,20 +29,20 @@
         ></span>
     </div>
     <div v-if="expanded"
-         class="condition-config-edit widget-rule-content c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded"
+         class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded"
     >
-        <div id="ruleArea"
+        <div id="conditionArea"
-             class="c-sw-editui__rules widget-rules"
+             class="c-c-editui__condition widget-conditions"
         >
-            <div class="c-sw-rule">
+            <div class="c-c-condition">
-                <div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
+                <div class="c-c-condition__ui l-compact-form l-widget-condition has-local-controls">
                     <div>
-                        <ul class="t-widget-rule-config">
+                        <ul class="t-widget-condition-config">
                             <li>
                                 <label>Condition Name</label>
                                 <span class="controls">
                                     <input v-model="condition.definition.name"
-                                           class="t-rule-name-input"
+                                           class="t-condition-name-input"
                                            type="text"
                                     >
                                 </span>
@@ -62,16 +63,16 @@
                                     </select>
                                     <input v-if="selectedOutputKey === outputOptions[2].key"
                                            v-model="condition.definition.output"
-                                           class="t-rule-name-input"
+                                           class="t-condition-name-input"
                                            type="text"
                                     >
                                 </span>
                             </li>
                         </ul>
                         <div v-if="!condition.isDefault"
-                             class="widget-rule-content expanded"
+                             class="widget-condition-content expanded"
                         >
-                            <ul class="t-widget-rule-config">
+                            <ul class="t-widget-condition-config">
                                 <li class="has-local-controls t-condition">
                                     <label>Match when</label>
                                     <span class="controls">
@@ -82,7 +83,7 @@
                                     </span>
                                 </li>
                             </ul>
-                            <ul class="t-widget-rule-config">
+                            <ul class="t-widget-condition-config">
                                 <li v-if="telemetryObject && telemetryMetadata"
                                     class="has-local-controls t-condition"
                                 >
@@ -120,7 +121,7 @@
                                                 </option>
                                             </select>
                                             <input v-if="comparisonValueField"
-                                                   class="t-rule-name-input"
+                                                   class="t-condition-name-input"
                                                    type="text"
                                                    @keyup="getOperationValue"
                                             >
@@ -198,6 +199,8 @@ export default {
             this.conditionClass = new ConditionClass(this.condition, this.openmct);
             this.conditionClass.on('conditionResultUpdated', this.handleConditionResult.bind(this));
         }));
+
+        this.dragGhost = document.getElementById('js-c-drag-ghost');
     },
     updated() {
         if (this.isCurrent && this.isCurrent.key === this.condition.key) {
@@ -206,6 +209,25 @@ export default {
         this.persist();
     },
     methods: {
+        initDrag() {
+            // let type = this.openmct.types.get(this.domainObject.type),
+            //     iconClass = type.definition ? type.definition.cssClass : 'icon-object-unknown';
+
+            // if (this.dragGhost) {
+            //     let originalClassName = this.dragGhost.classList[0];
+            //     this.dragGhost.className = '';
+            //     this.dragGhost.classList.add(originalClassName, iconClass);
+
+            //     this.dragGhost.innerHTML = `<span>${this.domainObject.name}</span>`;
+            //     event.dataTransfer.setDragImage(this.dragGhost, 0, 0);
+            // }
+
+            console.log('conditionId', this.condition.id);
+            console.log('containerIndex', this.containerIndex);
+
+            event.dataTransfer.setData('conditionId', this.condition.id);
+            event.dataTransfer.setData('containerIndex', this.containerIndex);
+        },
         handleConditionResult(args) {
             // console.log('ConditionEdit::Result', args);
             this.$emit('condition-result-updated', {

src/plugins/condition/components/DropHint.vue

@@ -0,0 +1,83 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+<template>
+<div v-show="isValidTarget">
+    <div
+        class="c-drop-hint c-drop-hint--always-show"
+        :class="{'is-mouse-over': isMouseOver}"
+        @dragover.prevent
+        @dragenter="dragenter"
+        @dragleave="dragleave"
+        @drop="dropHandler"
+    ></div>
+</div>
+</template>
+
+<script>
+export default {
+    props:{
+        index: {
+            type: Number,
+            required: true
+        },
+        allowDrop: {
+            type: Function,
+            required: true
+        }
+    },
+    data() {
+        return {
+            isMouseOver: false,
+            isValidTarget: false
+        }
+    },
+    mounted() {
+        document.addEventListener('dragstart', this.dragstart);
+        document.addEventListener('dragend', this.dragend);
+        document.addEventListener('drop', this.dragend);
+    },
+    destroyed() {
+        document.removeEventListener('dragstart', this.dragstart);
+        document.removeEventListener('dragend', this.dragend);
+        document.removeEventListener('drop', this.dragend);
+    },
+    methods: {
+        dragenter() {
+            this.isMouseOver = true;
+        },
+        dragleave() {
+            this.isMouseOver = false;
+        },
+        dropHandler(event) {
+            this.$emit('object-drop-to', this.index, event);
+            this.isValidTarget = false;
+        },
+        dragstart(event) {
+            this.isValidTarget = this.allowDrop(event, this.index);
+        },
+        dragend() {
+            this.isValidTarget = false;
+        }
+    }
+}
+</script>

src/plugins/condition/components/condition.scss

@@ -1,5 +1,3 @@
-
-
 .widget-condition {
     background-color: #eee;
     margin: 0 0 0.6em;
@@ -53,7 +51,7 @@
     margin-left: 0;
 }
 
-.l-widget-rule {
+.l-widget-condition {
     padding: 0;
 }
 
@@ -61,11 +59,11 @@
     padding: 0;
 }
 
-.widget-rule-content.expanded {
+.widget-condition-content.expanded {
     margin: 0 3px;
 }
 
-.widget-rule-content.expanded ul {
+.widget-condition-content.expanded ul {
     border-top: solid 1px #ccc;
     padding: 2px;
 }