Merge pull request #1 from rtucek/sortable-merge-trap

Move items via drag'n'drop.

Author: rtucek

package.json

@@ -9,10 +9,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@types/sortablejs": "^1.10.2",
     "core-js": "^3.3.2",
+    "sortablejs": "^1.10.2",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
-    "vue-property-decorator": "^8.1.0"
+    "vue-property-decorator": "^8.1.0",
+    "vuedraggable": "^2.23.2"
   },
   "devDependencies": {
     "@types/jest": "^24.0.19",

src/MergeTrap.ts

@@ -0,0 +1,159 @@
+import Vue from 'vue';
+import {
+  RuleSet, QueryBuilderGroup, ComponentRegistration, MergeTrap as MergeTrapInterface, Rule,
+} from '@/types';
+
+function getNextGroup(group: QueryBuilderGroup): QueryBuilderGroup {
+  if (group.depth < 1) {
+    return group;
+  }
+
+  let vm: Vue = group;
+
+  do {
+    vm = vm.$parent;
+  } while (vm.$options.name !== 'QueryBuilderGroup');
+
+  return vm as QueryBuilderGroup;
+}
+
+function getCommonAncestor(
+  nodeA: QueryBuilderGroup,
+  nodeB: QueryBuilderGroup,
+): QueryBuilderGroup {
+  let a = nodeA;
+  let b = nodeB;
+
+  if (a.depth !== b.depth) {
+    let lower: QueryBuilderGroup = a.depth > b.depth ? a : b;
+    const higher: QueryBuilderGroup = a.depth < b.depth ? a : b;
+
+    while (lower.depth !== higher.depth) {
+      lower = getNextGroup(lower);
+    }
+
+    // Now both operate on the same level.
+    a = lower;
+    b = higher;
+  }
+
+  while (a !== b) {
+    a = getNextGroup(a);
+    b = getNextGroup(b);
+  }
+
+  return a;
+}
+
+function triggerUpdate(adder: ComponentRegistration, remover: ComponentRegistration): void {
+  const commonAncestor = getCommonAncestor(adder.component, remover.component);
+
+  if (![adder.component, remover.component].includes(commonAncestor)) {
+    mergeViaParent(commonAncestor, adder, remover);
+
+    return;
+  }
+
+  mergeViaNode(commonAncestor, adder, remover);
+}
+
+function mergeViaParent(
+  commonAncestor: QueryBuilderGroup,
+  adder: ComponentRegistration,
+  remover: ComponentRegistration,
+): void {
+  let children: Array<RuleSet | Rule> | null = null;
+
+  commonAncestor.trap = (position: number, newChild: RuleSet | Rule): void => {
+    if (children === null) {
+      children = [...commonAncestor.children];
+      children.splice(position, 1, newChild);
+
+      return;
+    }
+
+    commonAncestor.trap = null;
+
+    children.splice(position, 1, newChild);
+
+    commonAncestor.$emit(
+      'query-update',
+      {
+        operatorIdentifier: commonAncestor.selectedOperator,
+        children,
+      } as RuleSet,
+    );
+  };
+
+  adder.component.$emit('query-update', adder.ev);
+  remover.component.$emit('query-update', remover.ev);
+}
+
+function mergeViaNode(
+  parentEmitter: QueryBuilderGroup,
+  adder: ComponentRegistration,
+  remover: ComponentRegistration,
+): void {
+  const childEmitter = parentEmitter === adder.component ? remover : adder;
+  const children = [...parentEmitter.children];
+
+  parentEmitter.trap = (position: number, newChild: RuleSet | Rule): void => {
+    parentEmitter.trap = null; // Release trap
+    children.splice(position, 1, newChild); // First... accept the update from the child
+
+    // Now we'd need to know if the update on the parent is an add or remove action.
+    if (parentEmitter === adder.component) {
+      // Parent emitter is adding and child is removing an item.
+      //
+      // First, use the event from the child to patch the current state (see above),
+      // then use the state from the adder for inserting at the right idx.
+      children.splice(adder.affectedIdx, 0, adder.ev.children[adder.affectedIdx]);
+    } else {
+      // Parent emitter is removing and child is adding an item.
+      //
+      // Use the event from the child to patch the current state (see above),
+      // then use the state from the remover to remove the correct item.
+      children.splice(remover.affectedIdx, 1);
+    }
+
+    parentEmitter.$emit(
+      'query-update',
+      {
+        operatorIdentifier: parentEmitter.selectedOperator,
+        children,
+      } as RuleSet,
+    );
+  };
+
+  childEmitter.component.$emit('query-update', childEmitter.ev);
+}
+
+export default class MergeTrap implements MergeTrapInterface {
+  private eventBus: Vue
+
+  constructor() {
+    this.eventBus = new Vue();
+
+    Promise.all<ComponentRegistration>([
+      new Promise(res => this.eventBus.$once('adderRegistered', res)),
+      new Promise(res => this.eventBus.$once('removerRegistered', res)),
+    ])
+      .then((args: ComponentRegistration[]) => triggerUpdate(args[0], args[1]));
+  }
+
+  public registerSortUpdate(update: ComponentRegistration): void {
+    if (update.adding) {
+      return this.registerAdder(update);
+    }
+
+    return this.registerRemover(update);
+  }
+
+  protected registerAdder(ev: ComponentRegistration): void {
+    this.eventBus.$emit('adderRegistered', ev);
+  }
+
+  protected registerRemover(ev: ComponentRegistration): void {
+    this.eventBus.$emit('removerRegistered', ev);
+  }
+}

src/QueryBuilder.vue

@@ -1,15 +1,20 @@
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import {
+  Component, Vue, Prop, Provide, Watch,
+} from 'vue-property-decorator';
 import { isQueryBuilderConfig, isRuleSet } from '@/guards';
 import { RuleSet, QueryBuilderConfig } from '@/types';
 import QueryBuilderGroup from './QueryBuilderGroup.vue';
+import MergeTrap from '@/MergeTrap';
 
 @Component({
   components: {
     QueryBuilderGroup,
   },
 })
 export default class QueryBuilder extends Vue {
+  trap: MergeTrap | null = null
+
   @Prop({
     required: true,
     validator: query => query === null || isRuleSet(query),
@@ -20,6 +25,15 @@ export default class QueryBuilder extends Vue {
     validator: param => isQueryBuilderConfig(param),
   }) readonly config!: QueryBuilderConfig
 
+  @Provide() getMergeTrap = this.provideMergeTrap
+
+  @Watch('value')
+  removeTrap() {
+    // If for any reason the parent who actually owns the state updates the query, we'll remove
+    // cleanup any existing traps.
+    this.trap = null;
+  }
+
   get ruleSet(): RuleSet {
     if (this.value) {
       return this.value;
@@ -37,16 +51,48 @@ export default class QueryBuilder extends Vue {
       children: [],
     };
   }
+
+  get queryBuiderConfig(): QueryBuilderConfig {
+    if (!this.config.dragging) {
+      return this.config;
+    }
+
+    // Ensure group parameter is unique... otherwise query builder instances would be able to drag
+    // across 2 different instances and this is currently not supported.
+    return {
+      ...this.config,
+      dragging: {
+        handle: '.query-builder__draggable-handle',
+        ...this.config.dragging,
+        group: `${new Date().getTime() * Math.random()}`,
+      },
+    };
+  }
+
+  updateQuery(newQuery: RuleSet): void {
+    this.trap = null;
+    this.$emit('input', { ...newQuery });
+  }
+
+  provideMergeTrap(): MergeTrap {
+    if (this.trap) {
+      return this.trap;
+    }
+
+    this.trap = new MergeTrap();
+
+    return this.trap;
+  }
 }
 </script>
 
 <template>
   <query-builder-group
-    :config="config"
+    :config="queryBuiderConfig"
     :query="ruleSet"
     :depth="0"
     class="query-builder__root"
-    @query-update="$emit('input', $event)"
+    @query-update="updateQuery"
   >
     <template
       v-for="(_, slotName) in $scopedSlots"

src/QueryBuilderChild.vue

@@ -47,7 +47,7 @@ export default class QueryBuilderChild extends Vue {
     return ruleDefinition || null;
   }
 
-  get component(): VueComponent | string {
+  get component(): VueComponent {
     if (this.isRule && this.ruleDefinition) {
       return QueryBuilderRule;
     }
@@ -103,7 +103,7 @@ export default class QueryBuilderChild extends Vue {
   </div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .query-builder-child {
   display: flex;
   flex-flow: row;