kd-lane-container 0.1.1 → 0.1.2

package/dist/esm/index.js

@@ -1,6 +1,272 @@
+import { cloneDeep } from 'lodash';
+import draggable from 'vuedraggable';
 import Vue from 'vue';
 import vClickOutside from 'v-click-outside';
 
+//
+Vue.use(vClickOutside);
+
+var script$6 = {
+  name: "VueSimpleContextMenu",
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      item: null,
+      menuWidth: null,
+      menuHeight: null,
+    };
+  },
+  methods: {
+    showMenu(event, item) {
+      this.item = item;
+
+      const menu = this.$refs.refUl;
+      if (!menu) {
+        return;
+      }
+
+      if (!this.menuWidth || !this.menuHeight) {
+        menu.style.visibility = "hidden";
+        menu.style.display = "block";
+        this.menuWidth = menu.offsetWidth;
+        this.menuHeight = menu.offsetHeight;
+        menu.removeAttribute("style");
+      }
+
+      if (this.menuWidth + event.pageX >= window.innerWidth) {
+        menu.style.left = event.pageX - this.menuWidth + 2 + "px";
+      } else {
+        menu.style.left = event.pageX - 2 + "px";
+      }
+
+      if (this.menuHeight + event.pageY >= window.innerHeight) {
+        menu.style.top = event.pageY - this.menuHeight + 2 + "px";
+      } else {
+        menu.style.top = event.pageY - 2 + "px";
+      }
+      menu.classList.add("vue-simple-context-menu--active");
+    },
+    hideContextMenu() {
+      const element = this.$refs.refUl;
+      if (element) {
+        element.classList.remove("vue-simple-context-menu--active");
+        this.$emit("menu-closed");
+      }
+    },
+    onClickOutside() {
+      this.hideContextMenu();
+    },
+    optionClicked(option) {
+      this.hideContextMenu();
+      this.$emit("option-clicked", {
+        item: this.item,
+        option: option,
+      });
+    },
+    onEscKeyRelease(event) {
+      if (event.keyCode === 27) {
+        this.hideContextMenu();
+      }
+    },
+  },
+  mounted() {
+    document.body.addEventListener("keyup", this.onEscKeyRelease);
+  },
+  beforeDestroy() {
+    document.removeEventListener("keyup", this.onEscKeyRelease);
+  },
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$6 = ".vue-simple-context-menu {\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  display: none;\n  list-style: none;\n  position: fixed;\n  z-index: 1000000;\n  background-color: var(--kd-lane-container-context-background-color, #ecf0f1);\n  border-bottom-width: 0px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n  box-shadow: 0 3px 6px 0 rgba(var(--kd-lane-container-context-item-color, #333), 0.2);\n  border-radius: 4px;\n}\n.vue-simple-context-menu--active {\n  display: block;\n}\n.vue-simple-context-menu__item {\n  display: flex;\n  color: var(--kd-lane-container-context-item-color, #333);\n  cursor: pointer;\n  padding: 5px 15px;\n  align-items: center;\n}\n.vue-simple-context-menu__item:hover {\n  background-color: var(--kd-lane-container-context-hover-background-color, #007aff);\n  color: var(--kd-lane-container-context-hover-item-color, #fff);\n}\n.vue-simple-context-menu__divider {\n  box-sizing: content-box;\n  height: 2px;\n  background-color: var(--kd-lane-container-context-divider-color, #595a5a);\n  padding: 4px 0;\n  background-clip: content-box;\n  pointer-events: none;\n}\n.vue-simple-context-menu li:first-of-type {\n  margin-top: 4px;\n}\n.vue-simple-context-menu li:last-of-type {\n  margin-bottom: 4px;\n}";
+styleInject(css_248z$6);
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    const options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    let hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            const originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            const existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+/* script */
+const __vue_script__$6 = script$6;
+/* template */
+var __vue_render__$6 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", [
+    _c(
+      "ul",
+      {
+        directives: [
+          {
+            name: "click-outside",
+            rawName: "v-click-outside",
+            value: _vm.onClickOutside,
+            expression: "onClickOutside",
+          },
+        ],
+        ref: "refUl",
+        staticClass: "vue-simple-context-menu",
+      },
+      _vm._l(_vm.options, function (option, index) {
+        return _c(
+          "li",
+          {
+            key: index,
+            staticClass: "vue-simple-context-menu__item",
+            class: [
+              option.class,
+              option.type === "divider"
+                ? "vue-simple-context-menu__divider"
+                : "",
+            ],
+            on: {
+              click: function ($event) {
+                $event.stopPropagation();
+                return _vm.optionClicked(option)
+              },
+            },
+          },
+          [_c("span", { domProps: { innerHTML: _vm._s(option.name) } })]
+        )
+      }),
+      0
+    ),
+  ])
+};
+var __vue_staticRenderFns__$6 = [];
+__vue_render__$6._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$6 = undefined;
+  /* scoped */
+  const __vue_scope_id__$6 = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$6 = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$6 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
+    __vue_inject_styles__$6,
+    __vue_script__$6,
+    __vue_scope_id__$6,
+    __vue_is_functional_template__$6,
+    __vue_module_identifier__$6,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
 class CustomStrategy {
   constructor(strategy) {
     this.strategy = strategy;
@@ -1444,7 +1710,7 @@ class StrategyFactory {
 //
 //
 
-var script$6 = {
+var script$5 = {
   inject: ["upsertTemplate", "setTargetData", "setExpanded"],
   props: {
     currentTemplate: {
@@ -1488,163 +1754,61 @@ var script$6 = {
         if (!payload.caseId) {
           payload.caseId = this.caseId;
         }
-        const result = this.upsertTemplate(payload);
-        if (result instanceof Promise) {
-          result
-            .then((res) => {
-              this.setTargetData(res);
-            })
-            .then(() => {
-              this.$message({
-                type: "success",
-                message: "保存成功",
-              });
-            })
-            .finally(() => {
-              this.saving = false;
-            });
-        } else {
-          this.saving = false;
-        }
-      });
-    },
-  },
-  computed: {
-    baseTemplate() {
-      if (!this.userTemplate) {
-        return [{ name: "空白模板", value: "" }];
-      } else {
-        return [
-          { name: "空白模板", value: "" },
-          ...this.userTemplate.map((item) => {
-            return {
-              name: item.templateName,
-              value: item.templateId,
-            };
-          }),
-        ];
-      }
-    },
-  },
-  watch: {
-    currentTemplate: {
-      deep: true,
-      handler: function (newV) {
-        this.formData = Object.assign({}, newV);
-      },
-    },
-  },
-};
-
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z$6 = ".kd-lane-template-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-template-content .template-buttons {\n  text-align: center;\n}";
-styleInject(css_248z$6);
-
-function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
-    if (typeof shadowMode !== 'boolean') {
-        createInjectorSSR = createInjector;
-        createInjector = shadowMode;
-        shadowMode = false;
-    }
-    // Vue.extend constructor export interop.
-    const options = typeof script === 'function' ? script.options : script;
-    // render functions
-    if (template && template.render) {
-        options.render = template.render;
-        options.staticRenderFns = template.staticRenderFns;
-        options._compiled = true;
-        // functional template
-        if (isFunctionalTemplate) {
-            options.functional = true;
-        }
-    }
-    // scopedId
-    if (scopeId) {
-        options._scopeId = scopeId;
-    }
-    let hook;
-    if (moduleIdentifier) {
-        // server build
-        hook = function (context) {
-            // 2.3 injection
-            context =
-                context || // cached call
-                    (this.$vnode && this.$vnode.ssrContext) || // stateful
-                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
-            // 2.2 with runInNewContext: true
-            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-                context = __VUE_SSR_CONTEXT__;
-            }
-            // inject component styles
-            if (style) {
-                style.call(this, createInjectorSSR(context));
-            }
-            // register component module identifier for async chunk inference
-            if (context && context._registeredComponents) {
-                context._registeredComponents.add(moduleIdentifier);
-            }
-        };
-        // used by ssr in case component is cached and beforeCreate
-        // never gets called
-        options._ssrRegister = hook;
-    }
-    else if (style) {
-        hook = shadowMode
-            ? function (context) {
-                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
-            }
-            : function (context) {
-                style.call(this, createInjector(context));
-            };
-    }
-    if (hook) {
-        if (options.functional) {
-            // register for functional component in vue file
-            const originalRender = options.render;
-            options.render = function renderWithStyleInjection(h, context) {
-                hook.call(context);
-                return originalRender(h, context);
-            };
-        }
-        else {
-            // inject component registration as beforeCreate hook
-            const existing = options.beforeCreate;
-            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        const result = this.upsertTemplate(payload);
+        if (result instanceof Promise) {
+          result
+            .then((res) => {
+              this.setTargetData(res);
+            })
+            .then(() => {
+              this.$message({
+                type: "success",
+                message: "保存成功",
+              });
+            })
+            .finally(() => {
+              this.saving = false;
+            });
+        } else {
+          this.saving = false;
         }
-    }
-    return script;
-}
+      });
+    },
+  },
+  computed: {
+    baseTemplate() {
+      if (!this.userTemplate) {
+        return [{ name: "空白模板", value: "" }];
+      } else {
+        return [
+          { name: "空白模板", value: "" },
+          ...this.userTemplate.map((item) => {
+            return {
+              name: item.templateName,
+              value: item.templateId,
+            };
+          }),
+        ];
+      }
+    },
+  },
+  watch: {
+    currentTemplate: {
+      deep: true,
+      handler: function (newV) {
+        this.formData = Object.assign({}, newV);
+      },
+    },
+  },
+};
+
+var css_248z$5 = ".kd-lane-template-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-template-content .template-buttons {\n  text-align: center;\n}";
+styleInject(css_248z$5);
 
 /* script */
-const __vue_script__$6 = script$6;
+const __vue_script__$5 = script$5;
 /* template */
-var __vue_render__$6 = function () {
+var __vue_render__$5 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -1839,17 +2003,17 @@ var __vue_render__$6 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$6 = [];
-__vue_render__$6._withStripped = true;
+var __vue_staticRenderFns__$5 = [];
+__vue_render__$5._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$6 = undefined;
+  const __vue_inject_styles__$5 = undefined;
   /* scoped */
-  const __vue_scope_id__$6 = undefined;
+  const __vue_scope_id__$5 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$6 = undefined;
+  const __vue_module_identifier__$5 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$6 = false;
+  const __vue_is_functional_template__$5 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -1858,13 +2022,13 @@ __vue_render__$6._withStripped = true;
   
 
   
-  const __vue_component__$6 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
-    __vue_inject_styles__$6,
-    __vue_script__$6,
-    __vue_scope_id__$6,
-    __vue_is_functional_template__$6,
-    __vue_module_identifier__$6,
+  const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
+    __vue_inject_styles__$5,
+    __vue_script__$5,
+    __vue_scope_id__$5,
+    __vue_is_functional_template__$5,
+    __vue_module_identifier__$5,
     false,
     undefined,
     undefined,
@@ -1886,7 +2050,7 @@ __vue_render__$6._withStripped = true;
 //
 //
 
-var script$5 = {
+var script$4 = {
   inject: ["upsertLane", "setTargetData", "setExpanded"],
   props: {
     laneInfo: {
@@ -1959,13 +2123,13 @@ var script$5 = {
   },
 };
 
-var css_248z$5 = ".kd-lane-lane-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-lane-content .template-buttons {\n  text-align: center;\n}";
-styleInject(css_248z$5);
+var css_248z$4 = ".kd-lane-lane-content {\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-lane-content .template-buttons {\n  text-align: center;\n}";
+styleInject(css_248z$4);
 
 /* script */
-const __vue_script__$5 = script$5;
+const __vue_script__$4 = script$4;
 /* template */
-var __vue_render__$5 = function () {
+var __vue_render__$4 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -2034,17 +2198,17 @@ var __vue_render__$5 = function () {
     1
   )
 };
-var __vue_staticRenderFns__$5 = [];
-__vue_render__$5._withStripped = true;
+var __vue_staticRenderFns__$4 = [];
+__vue_render__$4._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$5 = undefined;
+  const __vue_inject_styles__$4 = undefined;
   /* scoped */
-  const __vue_scope_id__$5 = undefined;
+  const __vue_scope_id__$4 = undefined;
   /* module identifier */
-  const __vue_module_identifier__$5 = undefined;
+  const __vue_module_identifier__$4 = undefined;
   /* functional template */
-  const __vue_is_functional_template__$5 = false;
+  const __vue_is_functional_template__$4 = false;
   /* style inject */
   
   /* style inject SSR */
@@ -2053,13 +2217,13 @@ __vue_render__$5._withStripped = true;
   
 
   
-  const __vue_component__$5 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
-    __vue_inject_styles__$5,
-    __vue_script__$5,
-    __vue_scope_id__$5,
-    __vue_is_functional_template__$5,
-    __vue_module_identifier__$5,
+  const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
+    __vue_inject_styles__$4,
+    __vue_script__$4,
+    __vue_scope_id__$4,
+    __vue_is_functional_template__$4,
+    __vue_module_identifier__$4,
     false,
     undefined,
     undefined,
@@ -2109,7 +2273,7 @@ __vue_render__$5._withStripped = true;
 //
 //
 
-var script$4 = {
+var script$3 = {
   inject: ["upsertLine", "setTargetData", "setExpanded", "getThemeName"],
   props: {
     template: {
@@ -2251,153 +2415,37 @@ var script$4 = {
   },
 };
 
-var css_248z$4 = ".kd-lane-line-content {\n  width: 95%;\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-line-content .template-buttons {\n  text-align: center;\n}";
-styleInject(css_248z$4);
+var css_248z$3 = ".kd-lane-line-content {\n  width: 95%;\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n}\n.kd-lane-line-content .template-buttons {\n  text-align: center;\n}";
+styleInject(css_248z$3);
 
 /* script */
-const __vue_script__$4 = script$4;
+const __vue_script__$3 = script$3;
 /* template */
-var __vue_render__$4 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
-    "div",
-    { staticClass: "kd-lane-line-content" },
-    [
-      _c(
-        "el-form",
-        {
-          ref: "template",
-          attrs: {
-            rules: _vm.rules,
-            model: _vm.formData,
-            disabled: _vm.formDisable,
-          },
-        },
-        [
-          _c(
-            "el-form-item",
-            {
-              attrs: {
-                label: "参数名称",
-                prop: "paramId",
-                "label-width": "120px",
-              },
-            },
-            [
-              _c(
-                "el-select",
-                {
-                  attrs: { filterable: "", placeholder: "请选择" },
-                  model: {
-                    value: _vm.formData.paramId,
-                    callback: function ($$v) {
-                      _vm.$set(_vm.formData, "paramId", $$v);
-                    },
-                    expression: "formData.paramId",
-                  },
-                },
-                _vm._l(_vm.params, function (item) {
-                  return _c("el-option", {
-                    key: item.paramId,
-                    attrs: { label: item.paramName, value: item.paramId },
-                  })
-                }),
-                1
-              ),
-            ],
-            1
-          ),
-          _vm._v(" "),
-          _c(
-            "el-form-item",
-            { attrs: { label: "最小值", prop: "min", "label-width": "120px" } },
-            [
-              _c("el-input", {
-                model: {
-                  value: _vm.formData.min,
-                  callback: function ($$v) {
-                    _vm.$set(_vm.formData, "min", $$v);
-                  },
-                  expression: "formData.min",
-                },
-              }),
-            ],
-            1
-          ),
-          _vm._v(" "),
-          _c(
-            "el-form-item",
-            { attrs: { label: "最大值", prop: "max", "label-width": "120px" } },
-            [
-              _c("el-input", {
-                model: {
-                  value: _vm.formData.max,
-                  callback: function ($$v) {
-                    _vm.$set(_vm.formData, "max", $$v);
-                  },
-                  expression: "formData.max",
-                },
-              }),
-            ],
-            1
-          ),
-          _vm._v(" "),
-          _c(
-            "el-form-item",
-            {
-              attrs: {
-                label: "曲线粗细",
-                prop: "lineSize",
-                "label-width": "120px",
-              },
-            },
-            [
-              _c("el-input", {
-                attrs: { max: 4, min: 1, type: "number" },
-                model: {
-                  value: _vm.formData.lineSize,
-                  callback: function ($$v) {
-                    _vm.$set(_vm.formData, "lineSize", $$v);
-                  },
-                  expression: "formData.lineSize",
-                },
-              }),
-            ],
-            1
-          ),
-          _vm._v(" "),
-          _c(
-            "el-form-item",
-            {
-              attrs: {
-                label: "曲线颜色",
-                prop: "lineColor",
-                "label-width": "120px",
-              },
-            },
-            [
-              _c("el-color-picker", {
-                attrs: { disabled: _vm.formData.isGradient },
-                model: {
-                  value: _vm.formData.lineColor,
-                  callback: function ($$v) {
-                    _vm.$set(_vm.formData, "lineColor", $$v);
-                  },
-                  expression: "formData.lineColor",
-                },
-              }),
-            ],
-            1
-          ),
-          _vm._v(" "),
+var __vue_render__$3 = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(
+    "div",
+    { staticClass: "kd-lane-line-content" },
+    [
+      _c(
+        "el-form",
+        {
+          ref: "template",
+          attrs: {
+            rules: _vm.rules,
+            model: _vm.formData,
+            disabled: _vm.formDisable,
+          },
+        },
+        [
           _c(
             "el-form-item",
             {
               attrs: {
-                label: "线型",
-                prop: "lineType",
+                label: "参数名称",
+                prop: "paramId",
                 "label-width": "120px",
               },
             },
@@ -2405,22 +2453,19 @@ var __vue_render__$4 = function () {
               _c(
                 "el-select",
                 {
-                  attrs: {
-                    placeholder: "请选择",
-                    disabled: _vm.formData.isGradient,
-                  },
+                  attrs: { filterable: "", placeholder: "请选择" },
                   model: {
-                    value: _vm.formData.lineType,
+                    value: _vm.formData.paramId,
                     callback: function ($$v) {
-                      _vm.$set(_vm.formData, "lineType", $$v);
+                      _vm.$set(_vm.formData, "paramId", $$v);
                     },
-                    expression: "formData.lineType",
+                    expression: "formData.paramId",
                   },
                 },
-                _vm._l(_vm.lines, function (item) {
+                _vm._l(_vm.params, function (item) {
                   return _c("el-option", {
-                    key: item.value,
-                    attrs: { label: item.name, value: item.value },
+                    key: item.paramId,
+                    attrs: { label: item.paramName, value: item.paramId },
                   })
                 }),
                 1
@@ -2431,228 +2476,185 @@ var __vue_render__$4 = function () {
           _vm._v(" "),
           _c(
             "el-form-item",
-            {
-              attrs: {
-                label: "曲线顺序",
-                prop: "lineSort",
-                "label-width": "120px",
-              },
-            },
+            { attrs: { label: "最小值", prop: "min", "label-width": "120px" } },
             [
               _c("el-input", {
                 model: {
-                  value: _vm.formData.lineSort,
+                  value: _vm.formData.min,
                   callback: function ($$v) {
-                    _vm.$set(_vm.formData, "lineSort", _vm._n($$v));
+                    _vm.$set(_vm.formData, "min", $$v);
                   },
-                  expression: "formData.lineSort",
+                  expression: "formData.min",
                 },
               }),
             ],
             1
           ),
           _vm._v(" "),
-          _vm._e(),
-        ],
-        1
-      ),
-      _vm._v(" "),
-      _c(
-        "div",
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.template.createUser != "SYSTEM_USER",
-              expression: "template.createUser != 'SYSTEM_USER'",
-            },
-          ],
-          staticClass: "template-buttons",
-        },
-        [
-          _c("el-button", { on: { click: _vm.editable } }, [_vm._v("编辑")]),
-          _vm._v(" "),
           _c(
-            "el-button",
-            {
-              attrs: { type: "primary", disabled: _vm.formDisable },
-              on: {
-                click: function ($event) {
-                  return _vm.submitForm("template")
+            "el-form-item",
+            { attrs: { label: "最大值", prop: "max", "label-width": "120px" } },
+            [
+              _c("el-input", {
+                model: {
+                  value: _vm.formData.max,
+                  callback: function ($$v) {
+                    _vm.$set(_vm.formData, "max", $$v);
+                  },
+                  expression: "formData.max",
                 },
-              },
-            },
-            [_vm._v("保存")]
+              }),
+            ],
+            1
           ),
-        ],
-        1
-      ),
-    ],
-    1
-  )
-};
-var __vue_staticRenderFns__$4 = [];
-__vue_render__$4._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__$4 = undefined;
-  /* scoped */
-  const __vue_scope_id__$4 = undefined;
-  /* module identifier */
-  const __vue_module_identifier__$4 = undefined;
-  /* functional template */
-  const __vue_is_functional_template__$4 = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__$4 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
-    __vue_inject_styles__$4,
-    __vue_script__$4,
-    __vue_scope_id__$4,
-    __vue_is_functional_template__$4,
-    __vue_module_identifier__$4,
-    false,
-    undefined,
-    undefined,
-    undefined
-  );
-
-//
-Vue.use(vClickOutside);
-
-var script$3 = {
-  name: "VueSimpleContextMenu",
-  props: {
-    options: {
-      type: Array,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      item: null,
-      menuWidth: null,
-      menuHeight: null,
-    };
-  },
-  methods: {
-    showMenu(event, item) {
-      this.item = item;
-
-      const menu = this.$refs.refUl;
-      if (!menu) {
-        return;
-      }
-
-      if (!this.menuWidth || !this.menuHeight) {
-        menu.style.visibility = "hidden";
-        menu.style.display = "block";
-        this.menuWidth = menu.offsetWidth;
-        this.menuHeight = menu.offsetHeight;
-        menu.removeAttribute("style");
-      }
-
-      if (this.menuWidth + event.pageX >= window.innerWidth) {
-        menu.style.left = event.pageX - this.menuWidth + 2 + "px";
-      } else {
-        menu.style.left = event.pageX - 2 + "px";
-      }
-
-      if (this.menuHeight + event.pageY >= window.innerHeight) {
-        menu.style.top = event.pageY - this.menuHeight + 2 + "px";
-      } else {
-        menu.style.top = event.pageY - 2 + "px";
-      }
-      menu.classList.add("vue-simple-context-menu--active");
-    },
-    hideContextMenu() {
-      const element = this.$refs.refUl;
-      if (element) {
-        element.classList.remove("vue-simple-context-menu--active");
-        this.$emit("menu-closed");
-      }
-    },
-    onClickOutside() {
-      this.hideContextMenu();
-    },
-    optionClicked(option) {
-      this.hideContextMenu();
-      this.$emit("option-clicked", {
-        item: this.item,
-        option: option,
-      });
-    },
-    onEscKeyRelease(event) {
-      if (event.keyCode === 27) {
-        this.hideContextMenu();
-      }
-    },
-  },
-  mounted() {
-    document.body.addEventListener("keyup", this.onEscKeyRelease);
-  },
-  beforeDestroy() {
-    document.removeEventListener("keyup", this.onEscKeyRelease);
-  },
-};
-
-var css_248z$3 = ".vue-simple-context-menu {\n  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  display: none;\n  list-style: none;\n  position: fixed;\n  z-index: 1000000;\n  background-color: var(--kd-lane-container-context-background-color, #ecf0f1);\n  border-bottom-width: 0px;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n  box-shadow: 0 3px 6px 0 rgba(var(--kd-lane-container-context-item-color, #333), 0.2);\n  border-radius: 4px;\n}\n.vue-simple-context-menu--active {\n  display: block;\n}\n.vue-simple-context-menu__item {\n  display: flex;\n  color: var(--kd-lane-container-context-item-color, #333);\n  cursor: pointer;\n  padding: 5px 15px;\n  align-items: center;\n}\n.vue-simple-context-menu__item:hover {\n  background-color: var(--kd-lane-container-context-hover-background-color, #007aff);\n  color: var(--kd-lane-container-context-hover-item-color, #fff);\n}\n.vue-simple-context-menu__divider {\n  box-sizing: content-box;\n  height: 2px;\n  background-color: var(--kd-lane-container-context-divider-color, #595a5a);\n  padding: 4px 0;\n  background-clip: content-box;\n  pointer-events: none;\n}\n.vue-simple-context-menu li:first-of-type {\n  margin-top: 4px;\n}\n.vue-simple-context-menu li:last-of-type {\n  margin-bottom: 4px;\n}";
-styleInject(css_248z$3);
-
-/* script */
-const __vue_script__$3 = script$3;
-/* template */
-var __vue_render__$3 = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", [
-    _c(
-      "ul",
-      {
-        directives: [
-          {
-            name: "click-outside",
-            rawName: "v-click-outside",
-            value: _vm.onClickOutside,
-            expression: "onClickOutside",
-          },
-        ],
-        ref: "refUl",
-        staticClass: "vue-simple-context-menu",
-      },
-      _vm._l(_vm.options, function (option, index) {
-        return _c(
-          "li",
-          {
-            key: index,
-            staticClass: "vue-simple-context-menu__item",
-            class: [
-              option.class,
-              option.type === "divider"
-                ? "vue-simple-context-menu__divider"
-                : "",
+          _vm._v(" "),
+          _c(
+            "el-form-item",
+            {
+              attrs: {
+                label: "曲线粗细",
+                prop: "lineSize",
+                "label-width": "120px",
+              },
+            },
+            [
+              _c("el-input", {
+                attrs: { max: 4, min: 1, type: "number" },
+                model: {
+                  value: _vm.formData.lineSize,
+                  callback: function ($$v) {
+                    _vm.$set(_vm.formData, "lineSize", $$v);
+                  },
+                  expression: "formData.lineSize",
+                },
+              }),
             ],
-            on: {
-              click: function ($event) {
-                $event.stopPropagation();
-                return _vm.optionClicked(option)
+            1
+          ),
+          _vm._v(" "),
+          _c(
+            "el-form-item",
+            {
+              attrs: {
+                label: "曲线颜色",
+                prop: "lineColor",
+                "label-width": "120px",
               },
             },
-          },
-          [_c("span", { domProps: { innerHTML: _vm._s(option.name) } })]
-        )
-      }),
-      0
-    ),
-  ])
+            [
+              _c("el-color-picker", {
+                attrs: { disabled: _vm.formData.isGradient },
+                model: {
+                  value: _vm.formData.lineColor,
+                  callback: function ($$v) {
+                    _vm.$set(_vm.formData, "lineColor", $$v);
+                  },
+                  expression: "formData.lineColor",
+                },
+              }),
+            ],
+            1
+          ),
+          _vm._v(" "),
+          _c(
+            "el-form-item",
+            {
+              attrs: {
+                label: "线型",
+                prop: "lineType",
+                "label-width": "120px",
+              },
+            },
+            [
+              _c(
+                "el-select",
+                {
+                  attrs: {
+                    placeholder: "请选择",
+                    disabled: _vm.formData.isGradient,
+                  },
+                  model: {
+                    value: _vm.formData.lineType,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.formData, "lineType", $$v);
+                    },
+                    expression: "formData.lineType",
+                  },
+                },
+                _vm._l(_vm.lines, function (item) {
+                  return _c("el-option", {
+                    key: item.value,
+                    attrs: { label: item.name, value: item.value },
+                  })
+                }),
+                1
+              ),
+            ],
+            1
+          ),
+          _vm._v(" "),
+          _c(
+            "el-form-item",
+            {
+              attrs: {
+                label: "曲线顺序",
+                prop: "lineSort",
+                "label-width": "120px",
+              },
+            },
+            [
+              _c("el-input", {
+                model: {
+                  value: _vm.formData.lineSort,
+                  callback: function ($$v) {
+                    _vm.$set(_vm.formData, "lineSort", _vm._n($$v));
+                  },
+                  expression: "formData.lineSort",
+                },
+              }),
+            ],
+            1
+          ),
+          _vm._v(" "),
+          _vm._e(),
+        ],
+        1
+      ),
+      _vm._v(" "),
+      _c(
+        "div",
+        {
+          directives: [
+            {
+              name: "show",
+              rawName: "v-show",
+              value: _vm.template.createUser != "SYSTEM_USER",
+              expression: "template.createUser != 'SYSTEM_USER'",
+            },
+          ],
+          staticClass: "template-buttons",
+        },
+        [
+          _c("el-button", { on: { click: _vm.editable } }, [_vm._v("编辑")]),
+          _vm._v(" "),
+          _c(
+            "el-button",
+            {
+              attrs: { type: "primary", disabled: _vm.formDisable },
+              on: {
+                click: function ($event) {
+                  return _vm.submitForm("template")
+                },
+              },
+            },
+            [_vm._v("保存")]
+          ),
+        ],
+        1
+      ),
+    ],
+    1
+  )
 };
 var __vue_staticRenderFns__$3 = [];
 __vue_render__$3._withStripped = true;
@@ -2696,7 +2698,7 @@ var script$2 = {
       setExpanded: this.setExpanded,
     };
   },
-  components: { LineEdit: __vue_component__$4, TemplateEdit: __vue_component__$6, LaneEdit: __vue_component__$5, VueSimpleContextMenu: __vue_component__$3 },
+  components: { LineEdit: __vue_component__$3, TemplateEdit: __vue_component__$5, LaneEdit: __vue_component__$4, VueSimpleContextMenu: __vue_component__$6 },
   props: {
     contextItem: {
       type: Object,
@@ -3254,6 +3256,11 @@ __vue_render__$2._withStripped = true;
     undefined
   );
 
+const ACTION_TYPE = {
+  UPSERT_LINE: "upsertLine",
+  DELETE_LINE: "delLine"
+};
+
 //
 //
 //
@@ -3447,7 +3454,8 @@ var script = {
   components: {
     HeaderItem: __vue_component__$1,
     RealTimeCurveConfig: __vue_component__$2,
-    VueSimpleContextMenu: __vue_component__$3,
+    VueSimpleContextMenu: __vue_component__$6,
+    draggable,
   },
   props: {
     // {type:"local",dataSource:{},caseId:"",versionCode:"",load, save}
@@ -3500,6 +3508,124 @@ var script = {
   mounted() {},
 
   methods: {
+    dragtoModifyLane() {
+      let promises = this.currentTemplate.lanes.map((lane, index) => {
+        lane.sort = index;
+        return this.dragUpdateLane(lane);
+      });
+      Promise.all(promises).then(() => {
+        this.setDefaultAndNotify();
+      });
+    },
+    dragtoModifyLines(event) {
+      if (Object.prototype.hasOwnProperty.call(event, "added") && event.added.element) {
+        // 拖拽新增了线条,通过lineId找到线段位置
+        let data = cloneDeep(event.added.element);
+        const currentLanes = this.currentTemplate.lanes;
+        currentLanes.forEach((lane) => {
+          const lineIndex = lane.lines.findIndex((line) => line.lineId == data.lineId);
+          if (lineIndex >= 0) {
+            data.laneId = lane.laneId;
+            data.lineSort = event.added.newIndex ?? 0;
+            this.dragUpdateLine(data).then(() => {
+              let promises = lane.lines.map((lines, index) => {
+                lines.lineSort = index;
+                return this.dragUpdateLine(lines);
+              });
+              Promise.all(promises).then(() => {
+                this.onLineChange(lane.lines[lineIndex], ACTION_TYPE.UPSERT_LINE);
+              });
+            });
+          }
+        });
+      } else if (Object.prototype.hasOwnProperty.call(event, "removed") && event.removed.element) {
+        // 拖拽删除了线条
+        let data = cloneDeep(event.removed.element);
+        this.onLineChange(data, ACTION_TYPE.DELETE_LINE);
+      } else if (Object.prototype.hasOwnProperty.call(event, "moved") && event.moved.element) {
+        // 拖拽移动了线条
+        let data = cloneDeep(event.moved.element);
+        let currentLanes = this.currentTemplate.lanes;
+        currentLanes.forEach((lane) => {
+          if (lane.laneId == data.laneId) {
+            let promises = lane.lines.map((lines, index) => {
+              lines.lineSort = index;
+              return this.dragUpdateLine(lines);
+            });
+            Promise.all(promises).then(() => {
+              let lineIndex = lane.lines.findIndex((line) => line.lineId == data.lineId);
+              this.onLineChange(lane.lines[lineIndex], ACTION_TYPE.UPSERT_LINE);
+            });
+          }
+        });
+      }
+    },
+    // 拖拽更新曲线
+    dragUpdateLine(data) {
+      return this.strategy.upsertLine(data).then((savedData) => {
+        const currentLanes = this.currentTemplate.lanes;
+        const laneIndex = currentLanes.findIndex((lane) => {
+          return lane.laneId == savedData.laneId;
+        });
+        if (laneIndex < 0) {
+          // 收说明不是更新的当前模板 替换内存中的数据
+          for (const template of this.treeTemplates) {
+            const { lanes } = template;
+            for (const lane of lanes) {
+              if (lane.laneId == savedData.laneId) {
+                const { lines } = lane;
+                const lineIndex = lines.findIndex((line) => {
+                  return line.lineId == savedData.lineId;
+                });
+                if (lineIndex < 0) {
+                  lines.push(savedData);
+                } else {
+                  this.$set(lines, lineIndex, savedData);
+                }
+                sortLaneLines(lane);
+                break;
+              }
+            }
+          }
+        } else {
+          const lane = currentLanes[laneIndex];
+          const currentLines = lane.lines;
+          const lineIndex = currentLines.findIndex((line) => {
+            return line.lineId == savedData.lineId;
+          });
+          if (lineIndex < 0) {
+            currentLines.push(savedData);
+          } else {
+            this.$set(currentLines, lineIndex, savedData);
+          }
+          this.$set(currentLanes, laneIndex, lane);
+          sortLaneLines(lane);
+          return savedData;
+        }
+      });
+    },
+    // 拖拽更新泳道
+    dragUpdateLane(data) {
+      return this.strategy.upsertLane(data).then((savedData) => {
+        const index = this.treeTemplates.findIndex((template) => {
+          return template.templateId == savedData.templateId;
+        });
+        if (index < 0) {
+          console.warn("template not found");
+        } else {
+          const template = this.treeTemplates[index];
+          const lanes = template.lanes || [];
+          const laneIndex = lanes.findIndex((lane) => lane.laneId == savedData.laneId);
+          if (laneIndex < 0) {
+            lanes.push(savedData);
+          } else {
+            this.$set(lanes, laneIndex, savedData);
+          }
+          sortLanes(template.lanes);
+        }
+        return savedData;
+      });
+    },
     getGridSize() {
       if (!this.$refs.refLaneDiv) return [];
       const isArray = Array.isArray(this.$refs.refLaneDiv);
@@ -3559,7 +3685,7 @@ var script = {
             currentLanes[laneIndex].lines.splice(lineIndex, 1);
           }
           // 以免每次保存都重新渲染
-          this.onLineChange(data, "delLine");
+          this.onLineChange(data, ACTION_TYPE.DELETE_LINE);
         }
       });
     },
@@ -3603,7 +3729,7 @@ var script = {
           this.$set(currentLanes, laneIndex, lane);
           sortLaneLines(lane);
           // 以免每次保存都重新渲染
-          this.onLineChange(savedData, "upsertLine");
+          this.onLineChange(savedData, ACTION_TYPE.UPSERT_LINE);
           return savedData;
         }
       });
@@ -3796,7 +3922,7 @@ var script = {
       const lineCount = Math.max(
         ...lanes.map((lane) => {
           return lane.lines?.length || 0;
-        })
+        }),
       );
 
       return lineCount;
@@ -3876,106 +4002,162 @@ var __vue_render__ = function () {
       _vm.currentTemplate.lanes &&
       _vm.currentTemplate.lanes.length > 0
         ? [
-            _vm._l(_vm.currentTemplate.lanes || [], function (lane, index) {
-              return [
-                _vm.$scopedSlots["lane" + lane.laneId]
-                  ? _c(
-                      "div",
-                      {
-                        key: lane.laneId,
-                        ref: "refLaneDiv",
-                        refInFor: true,
-                        staticClass: "kd-lane-chart-lane-slot-container",
-                        class: { "border-left": index != 0 },
-                        style: _vm.laneContainerStyle(lane, "slot"),
-                        attrs: { "lane-id": lane.laneId },
-                      },
-                      [
-                        _c(
+            _c(
+              "draggable",
+              {
+                staticClass: "kd-lane-chart-container",
+                attrs: {
+                  animation: 200,
+                  fallbackOnBody: true,
+                  swapThreshold: 0.65,
+                  group: "laneGroup",
+                },
+                on: { change: _vm.dragtoModifyLane },
+                model: {
+                  value: _vm.currentTemplate.lanes,
+                  callback: function ($$v) {
+                    _vm.$set(_vm.currentTemplate, "lanes", $$v);
+                  },
+                  expression: "currentTemplate.lanes",
+                },
+              },
+              [
+                _vm._l(_vm.currentTemplate.lanes || [], function (lane, index) {
+                  return [
+                    _vm.$scopedSlots["lane" + lane.laneId]
+                      ? _c(
                           "div",
                           {
-                            staticClass: "kd-lane-chart-lane-header",
-                            style: _vm.slotHeaderStyle,
+                            key: lane.laneId,
+                            ref: "refLaneDiv",
+                            refInFor: true,
+                            staticClass: "kd-lane-chart-lane-slot-container",
+                            class: { "border-left": index != 0 },
+                            style: _vm.laneContainerStyle(lane, "slot"),
+                            attrs: { "lane-id": lane.laneId },
                           },
-                          [_vm._t("lane" + lane.laneId, null, { lane: lane })],
-                          2
-                        ),
-                      ]
-                    )
-                  : _vm.$slots["lane" + lane.laneId]
-                  ? _c(
-                      "div",
-                      {
-                        key: "" + lane.laneId,
-                        ref: "refLaneDiv",
-                        refInFor: true,
-                        staticClass: "kd-lane-chart-lane-slot-container",
-                        class: { "border-left": index != 0 },
-                        style: _vm.laneContainerStyle(lane, "slot"),
-                        attrs: { "lane-id": lane.laneId },
-                      },
-                      [
-                        _c(
+                          [
+                            _c(
+                              "div",
+                              {
+                                staticClass: "kd-lane-chart-lane-header",
+                                style: _vm.slotHeaderStyle,
+                              },
+                              [
+                                _vm._t("lane" + lane.laneId, null, {
+                                  lane: lane,
+                                }),
+                              ],
+                              2
+                            ),
+                          ]
+                        )
+                      : _vm.$slots["lane" + lane.laneId]
+                      ? _c(
                           "div",
                           {
-                            staticClass: "kd-lane-chart-lane-header",
-                            style: _vm.slotHeaderStyle,
+                            key: "" + lane.laneId,
+                            ref: "refLaneDiv",
+                            refInFor: true,
+                            staticClass: "kd-lane-chart-lane-slot-container",
+                            class: { "border-left": index != 0 },
+                            style: _vm.laneContainerStyle(lane, "slot"),
+                            attrs: { "lane-id": lane.laneId },
                           },
-                          [_vm._t("lane" + lane.laneId, null, { lane: lane })],
-                          2
-                        ),
-                      ]
-                    )
-                  : [
-                      _c(
-                        "div",
-                        {
-                          key: lane.laneId,
-                          ref: "refLaneDiv",
-                          refInFor: true,
-                          staticClass: "kd-lane-chart-lane-container",
-                          class: { "border-left": index != 0 },
-                          style: _vm.laneContainerStyle(lane, "lane"),
-                          attrs: { "lane-id": lane.laneId },
-                        },
-                        [
+                          [
+                            _c(
+                              "div",
+                              {
+                                staticClass: "kd-lane-chart-lane-header",
+                                style: _vm.slotHeaderStyle,
+                              },
+                              [
+                                _vm._t("lane" + lane.laneId, null, {
+                                  lane: lane,
+                                }),
+                              ],
+                              2
+                            ),
+                          ]
+                        )
+                      : [
                           _c(
                             "div",
                             {
-                              staticClass: "kd-lane-chart-lane-header",
-                              style: _vm.headerStyle,
-                              on: {
-                                contextmenu: function ($event) {
-                                  $event.preventDefault();
-                                  return _vm.showContextMenu($event, lane)
-                                },
-                              },
+                              key: lane.laneId,
+                              ref: "refLaneDiv",
+                              refInFor: true,
+                              staticClass: "kd-lane-chart-lane-container",
+                              class: { "border-left": index != 0 },
+                              style: _vm.laneContainerStyle(lane, "lane"),
+                              attrs: { "lane-id": lane.laneId },
                             },
-                            _vm._l(lane.lines || [], function (line) {
-                              return _c("HeaderItem", {
-                                key: line.lineId,
-                                attrs: {
-                                  itemHeight: _vm.headerItemHeight,
-                                  line: line,
-                                  paramsNameMap: _vm.paramsNameMap,
-                                  themeName: _vm.themeName,
-                                },
-                                on: { updateLine: _vm.upsertLine },
-                                nativeOn: {
-                                  contextmenu: function ($event) {
-                                    $event.preventDefault();
-                                    return _vm.showContextMenu($event, line)
+                            [
+                              _c(
+                                "div",
+                                {
+                                  staticClass: "kd-lane-chart-lane-header",
+                                  style: _vm.headerStyle,
+                                  on: {
+                                    contextmenu: function ($event) {
+                                      $event.preventDefault();
+                                      return _vm.showContextMenu($event, lane)
+                                    },
                                   },
                                 },
-                              })
-                            }),
-                            1
+                                [
+                                  _c(
+                                    "draggable",
+                                    {
+                                      attrs: {
+                                        animation: 200,
+                                        fallbackOnBody: true,
+                                        swapThreshold: 0.65,
+                                        group: "lineGroup",
+                                      },
+                                      on: { change: _vm.dragtoModifyLines },
+                                      model: {
+                                        value: lane.lines,
+                                        callback: function ($$v) {
+                                          _vm.$set(lane, "lines", $$v);
+                                        },
+                                        expression: "lane.lines",
+                                      },
+                                    },
+                                    _vm._l(lane.lines || [], function (line) {
+                                      return _c("HeaderItem", {
+                                        key: line.lineId,
+                                        attrs: {
+                                          itemHeight: _vm.headerItemHeight,
+                                          line: line,
+                                          paramsNameMap: _vm.paramsNameMap,
+                                          themeName: _vm.themeName,
+                                        },
+                                        on: { updateLine: _vm.upsertLine },
+                                        nativeOn: {
+                                          contextmenu: function ($event) {
+                                            $event.preventDefault();
+                                            return _vm.showContextMenu(
+                                              $event,
+                                              line
+                                            )
+                                          },
+                                        },
+                                      })
+                                    }),
+                                    1
+                                  ),
+                                ],
+                                1
+                              ),
+                            ]
                           ),
-                        ]
-                      ),
-                    ],
-              ]
-            }),
+                        ],
+                  ]
+                }),
+              ],
+              2
+            ),
           ]
         : [
             _c(