npm - kd-lane-container - Versions diffs - 0.0.8 → 0.1.0 - Mend

kd-lane-container 0.0.8 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -67,12 +67,88 @@ export default {
 ### 4.1 基本使用
+#### 4.1.1 泳道宽度配置
+从版本 0.1.0 开始，支持通过 `width` 属性自定义泳道宽度。
+**配置说明**：
+- **自定义插槽泳道**：
+  - 如果泳道配置中包含 `width` 属性（数字类型），则动态设置 `style` 为 `width: ${width}px`。
+  - 如果未配置 `width`，则动态设置 `style` 为 `width: auto`，由插槽内容决定实际宽度(之前的默认逻辑)。
+- **普通泳道**：
+  - 如果泳道配置中包含 `width` 属性（数字类型），则动态设置 `style` 为 `width: ${width}px`。
+  - 如果未配置 `width`，则动态设置 `style` 为 `flex: 1`，与其他未设置宽度的泳道平分剩余空间(之前的默认逻辑)。
+**示例配置**：
+```javascript
+lanes: [
+  { 其他属性..., width: 200 }, // 自定义宽度为 200px
+  { 其他属性..., } // 未设置宽度，使用默认逻辑
+]
+```
+#### 4.1.2 泳道尺寸获取
+新增 `getGridSize` 方法，用于获取泳道的精确尺寸（包括泳道抬头部分）。
+**注意事项**：
+- 调用时机：需确保泳道容器的 `div` 已挂载并渲染完毕，否则可能返回空数组或错误数据。
+- 返回值：返回泳道的 `x`、`y`、`width`、`height` 等尺寸信息，以及 `lane-id` 属性。
+**示例代码**：
+```javascript
+const gridSizes = this.$refs.laneContainer.getGridSize();
+console.log(gridSizes); // 输出泳道尺寸信息
+```
 ```vue
-<KdLaneContainer class="container" :config="config" :customMenuList="customMenuList" @onCustomMenuClicked="onCustomMenuClicked">
-  <!-- 自定义插槽内容 -->
+<KdLaneContainer
+  class="container"
+  :config="config"
+  :customMenuList="customMenuList"
+  @onCustomMenuClicked="onCustomMenuClicked"
+  @template-change="templateChange"
+  @line-change="lineChange"
+  :themeName="themeName"
+>
+  <!-- 动态slot，处理容器抬头自定义布局 -->
+  <template v-if="headerSlotName">
+    <div :slot="headerSlotName" class="header-slot">
+      {{ headerSlotName }}
+    </div>
+  </template>
+  <!-- 处理draw-slot中泳道div -->
+  <template v-if="lanes && lanes.length > 0" slot="draw-slot">
+    <div class="draw-slot">
+      <template v-for="lane in lanes">
+        <!-- 如果title定义了，需要和title保持一样宽度 -->
+        <div v-if="lane.laneKey == 'depth'" :key="lane.laneId" style="width: 80px; height: 100%; overflow: hidden">
+          {{ lane.laneKey }}
+        </div>
+        <!-- 平分的泳道布局 -->
+        <div v-else class="lane-div" :key="`lane-${lane.laneId}`">
+          {{ lane.laneId }}
+        </div>
+      </template>
+    </div>
+  </template>
 </KdLaneContainer>
 ```
+#### 使用步骤说明
+1. **配置组件**：
+   - 通过 `config` 属性传入初始配置，包括数据源类型、案例ID、版本号等。
+   - 通过 `customMenuList` 属性传入自定义菜单列表。
+2. **监听事件动态渲染**：
+   - 监听 `template-change` 事件，获取最新的泳道数据（`lanes`），动态渲染自定义抬头和泳道布局。
+   - 监听 `line-change` 事件，处理线条配置的变化。
+3. **主题变化处理**：
+   - 主题变更是由外部触发的，组件仅负责根据 `themeName` 属性正确渲染标题。
+   - 模板和线条的变化需要自行处理，组件不会主动通知这些变化。
 ### 4.2 场景与版本控制
 #### 4.2.1 场景唯一标识规则
@@ -293,66 +369,75 @@ handleCustomMenuClick(event) {
 }
 ```
-## 5. 组件 API
-### 5.1 Props
-| 属性名           | 类型   | 默认值  | 说明               |
-| ---------------- | ------ | ------- | ------------------ |
-| config           | Object | 必填    | 组件配置对象       |
-| headerPadding    | Number | 4       | 泳道头部内边距     |
-| headerItemHeight | Number | 20      | 头部线条项高度     |
-| itemGap          | Number | 2       | 线条项之间的间距   |
-| customMenuList   | Array  | []      | 自定义菜单列表     |
-| themeName        | String | "white" | 当前使用的主题名称 |
-### 5.2 事件
-| 事件名              | 参数     | 说明               |
-| ------------------- | -------- | ------------------ |
-| onCustomMenuClicked | event    | 自定义菜单点击事件 |
-| line-change         | line     | 线条变化事件       |
-| template-change     | template | 模板变化事件       |
-### 5.3 方法
-**注：以下方法仅在使用 `custom` 模式时需要了解和实现，local 模式下不需要考虑。**
-组件内部提供的方法主要用于模板和线条的管理：
-- upsertTemplate(data) - 新增或更新模板
-  - 参数：`data` - 模板数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整**模板对象
-- delTemplate(data) - 删除模板
-  - 参数：`data` - 模板数据（需包含`templateId`）
-  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
-- upsertLane(data) - 新增或更新泳道
-  - 参数：`data` - 泳道数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整**泳道对象
-- delLane(lane) - 删除泳道
-  - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
-  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
-- upsertLine(data) - 新增或更新线条
-  - 参数：`data` - 线条数据
-  - 返回值：`Promise<Object>` - 插入或更新后的**完整线**条对象
-- delLine(data) - 删除线条
-  - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
-  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
-- restoreSetting() - 恢复默认设置
-  - 功能：将当前场景的数据重置为初始配置状态
-  - 实现逻辑：使用构造函数传入的初始 dataSource 重新初始化数据
+## 5. 组件 API
+### 5.1 Props
+| 属性名           | 类型   | 默认值  | 说明               |
+| ---------------- | ------ | ------- | ------------------ |
+| config           | Object | 必填    | 组件配置对象       |
+| headerPadding    | Number | 4       | 泳道头部内边距     |
+| headerItemHeight | Number | 20      | 头部线条项高度     |
+| itemGap          | Number | 2       | 线条项之间的间距   |
+| customMenuList   | Array  | []      | 自定义菜单列表     |
+| themeName        | String | "white" | 当前使用的主题名称 |
+### 5.2 事件
+| 事件名              | 参数     | 说明               |
+| ------------------- | -------- | ------------------ |
+| onCustomMenuClicked | event    | 自定义菜单点击事件 |
+| line-change         | line     | 线条变化事件       |
+| template-change     | template | 模板变化事件       |
+### 5.3 方法
+#### 5.3.1 组件实例方法
+| 方法名          | 作用描述                                                                 | 入参 |
+|----------------|-------------------------------------------------------------------------|------|
+| `getGridSize`  | 获取泳道的精确尺寸（包括泳道抬头部分）                                     | 无   |
+| `restoreSetting` | 恢复组件的初始设置（如重置模板、泳道和线条配置到默认状态）                  | 无   |
+#### 5.3.2 数据源方法（仅 custom 模式需要实现）
+**注：以下方法仅在使用 `custom` 模式时需要了解和实现，local 模式下不需要考虑。**
+组件内部提供的方法主要用于模板和线条的管理：
+- upsertTemplate(data) - 新增或更新模板
+  - 参数：`data` - 模板数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整**模板对象
+- delTemplate(data) - 删除模板
+  - 参数：`data` - 模板数据（需包含`templateId`）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+- upsertLane(data) - 新增或更新泳道
+  - 参数：`data` - 泳道数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整**泳道对象
+- delLane(lane) - 删除泳道
+  - 参数：`lane` - 泳道数据（需包含`laneId`和`lines`数组）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+- upsertLine(data) - 新增或更新线条
+  - 参数：`data` - 线条数据
+  - 返回值：`Promise<Object>` - 插入或更新后的**完整线**条对象
+- delLine(data) - 删除线条
+  - 参数：`data` - 线条数据（需包含`lineId`和`laneId`）
+  - 返回值：`Promise<void>` - 操作成功或失败的 Promise
+- restoreSetting() - 恢复默认设置
+  - 功能：将当前场景的数据重置为初始配置状态
+  - 实现逻辑：使用构造函数传入的初始 dataSource 重新初始化数据
   - 返回值：`Promise<void>` - 恢复默认设置的 Promise
 ## 6. 自定义插槽

package/dist/cjs/index.js CHANGED Viewed

@@ -898,6 +898,9 @@ class ConfigDBManager {
 }
 const dbHelper = new ConfigDBManager();
+function isNumeric(val) {
+  return val != null && val !== "" && !Number.isNaN(Number(val));
+}
 function pxToNumber(pxStr) {
   if (!pxStr || typeof pxStr !== "string") return 0;
   return parseFloat(pxStr.replace("px", "")) || 0;
@@ -2114,7 +2117,7 @@ __vue_render__$5._withStripped = true;
 //
 var script$4 = {
-  inject: ["upsertLine", "setTargetData", "setExpanded"],
+  inject: ["upsertLine", "setTargetData", "setExpanded", "getThemeName"],
   props: {
     template: {
       type: Object,
@@ -2194,6 +2197,14 @@ var script$4 = {
         .validate()
         .then(() => {
           if (this.upsertLine instanceof Function) {
+            // 检查是否有主题配置
+            const themeName = this.getThemeName();
+            const themeConfig = this.formData.themeConfig;
+            if (themeName && themeConfig && themeConfig[themeName]) {
+              const theme = themeConfig[themeName];
+              theme.lineColor = this.formData.lineColor;
+            }
+            this.saving = true;
             const result = this.upsertLine(this.formData);
             if (result instanceof Promise) {
               result
@@ -2226,7 +2237,22 @@ var script$4 = {
       immediate: false,
       deep: true,
       handler(newD) {
-        this.formData = Object.assign({}, newD);
+        // 检查是否有主题配置
+        const themeName = this.getThemeName();
+        const themeConfig = newD.themeConfig;
+        let themeLineColor;
+        if (themeName && themeConfig && themeConfig[themeName]) {
+          const theme = themeConfig[themeName];
+          const lineColor = theme.lineColor;
+          if (lineColor) {
+            themeLineColor = lineColor;
+          }
+        }
+        if (themeLineColor) {
+          this.formData = Object.assign({}, newD, { lineColor: themeLineColor });
+        } else {
+          this.formData = Object.assign({}, newD);
+        }
       },
     },
   },
@@ -2511,10 +2537,6 @@ Vue__default["default"].use(vClickOutside__default["default"]);
 var script$3 = {
   name: "VueSimpleContextMenu",
   props: {
-    elementId: {
-      type: String,
-      required: true,
-    },
     options: {
       type: Array,
       required: true,
@@ -2531,7 +2553,7 @@ var script$3 = {
     showMenu(event, item) {
       this.item = item;
-      var menu = document.getElementById(this.elementId);
+      const menu = this.$refs.refUl;
       if (!menu) {
         return;
       }
@@ -2555,11 +2577,10 @@ var script$3 = {
       } else {
         menu.style.top = event.pageY - 2 + "px";
       }
       menu.classList.add("vue-simple-context-menu--active");
     },
     hideContextMenu() {
-      const element = document.getElementById(this.elementId);
+      const element = this.$refs.refUl;
       if (element) {
         element.classList.remove("vue-simple-context-menu--active");
         this.$emit("menu-closed");
@@ -2611,8 +2632,8 @@ var __vue_render__$3 = function () {
             expression: "onClickOutside",
           },
         ],
+        ref: "refUl",
         staticClass: "vue-simple-context-menu",
-        attrs: { id: _vm.elementId },
       },
       _vm._l(_vm.options, function (option, index) {
         return _c(
@@ -3201,10 +3222,7 @@ var __vue_render__$2 = function () {
       _vm._v(" "),
       _c("VueSimpleContextMenu", {
         ref: "vueSimpleContextMenu",
-        attrs: {
-          "element-id": "kd-lane-chart-context-menu-2",
-          options: _vm.contextMenuOptions,
-        },
+        attrs: { options: _vm.contextMenuOptions },
         on: { "option-clicked": _vm.optionClicked },
       }),
     ],
@@ -3428,6 +3446,9 @@ var script = {
       delLane: this.delLane,
       upsertLine: this.upsertLine,
       delLine: this.delLine,
+      getThemeName: () => {
+        return this.themeName;
+      },
     };
   },
   components: {
@@ -3486,6 +3507,26 @@ var script = {
   mounted() {},
   methods: {
+    getGridSize() {
+      if (!this.$refs.refLaneDiv) return [];
+      const isArray = Array.isArray(this.$refs.refLaneDiv);
+      if (isArray) {
+        return this.$refs.refLaneDiv.map((item) => {
+          const { x, y, width, height, top, right, bottom, left } = item.getBoundingClientRect();
+          return { x, y, width, height, top, bottom, right, left, "lane-id": item.getAttribute("lane-id") };
+        });
+      } else {
+        return [this.$refs.refLaneDiv.getBoundingClientRect()];
+      }
+    },
+    laneContainerStyle(lane, type) {
+      const isWidthNumeric = isNumeric(lane.width);
+      if (type === "slot") {
+        return isWidthNumeric ? { width: `${lane.width}px` } : { width: "auto" };
+      } else {
+        return isWidthNumeric ? { width: `${lane.width}px` } : { flex: "1" };
+      }
+    },
     setExpanded() {
       this.$refs.curveConfig.setExpanded();
     },
@@ -3813,7 +3854,7 @@ var script = {
   },
 };
-var css_248z = ".kd-lane-chart-container {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  border: 1px solid var(--kd-lane-container-border-color, #333);\n  display: flex;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container, .kd-lane-chart-container .kd-lane-chart-lane-container {\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  z-index: 1;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container .kd-lane-chart-lane-header, .kd-lane-chart-container .kd-lane-chart-lane-container .kd-lane-chart-lane-header {\n  max-height: 40%;\n  border-bottom: 1px solid var(--kd-lane-container-border-color, #333);\n  overflow: hidden;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-container {\n  flex: 1;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container {\n  width: auto;\n}\n.kd-lane-chart-container .border-left {\n  border-left: 1px solid var(--kd-lane-container-border-color, #333);\n}\n.kd-lane-chart-container .kd-lane-chart-container-draw-area {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n  border: none;\n}";
+var css_248z = ".kd-lane-chart-container {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  border: 1px solid var(--kd-lane-container-border-color, #333);\n  display: flex;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-container,\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container {\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  z-index: 1;\n}\n.kd-lane-chart-container .kd-lane-chart-lane-container .kd-lane-chart-lane-header,\n.kd-lane-chart-container .kd-lane-chart-lane-slot-container .kd-lane-chart-lane-header {\n  max-height: 40%;\n  border-bottom: 1px solid var(--kd-lane-container-border-color, #333);\n  overflow: hidden;\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.kd-lane-chart-container .border-left {\n  border-left: 1px solid var(--kd-lane-container-border-color, #333);\n}\n.kd-lane-chart-container .kd-lane-chart-container-draw-area {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 3;\n  border: none;\n}";
 styleInject(css_248z);
 /* script */
@@ -3849,8 +3890,12 @@ var __vue_render__ = function () {
                       "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(
@@ -3869,8 +3914,12 @@ var __vue_render__ = function () {
                       "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(
@@ -3889,8 +3938,12 @@ var __vue_render__ = function () {
                         "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(
@@ -3932,18 +3985,25 @@ var __vue_render__ = function () {
             }),
           ]
         : [
-            _c("div", { staticClass: "kd-lane-chart-lane-container" }, [
-              _c("div", {
-                staticClass: "kd-lane-chart-lane-header",
-                style: _vm.headerStyle,
-                on: {
-                  contextmenu: function ($event) {
-                    $event.preventDefault();
-                    return _vm.showContextMenu.apply(null, arguments)
+            _c(
+              "div",
+              {
+                ref: "refLaneDiv",
+                staticClass: "kd-lane-chart-lane-container",
+              },
+              [
+                _c("div", {
+                  staticClass: "kd-lane-chart-lane-header",
+                  style: _vm.headerStyle,
+                  on: {
+                    contextmenu: function ($event) {
+                      $event.preventDefault();
+                      return _vm.showContextMenu.apply(null, arguments)
+                    },
                   },
-                },
-              }),
-            ]),
+                }),
+              ]
+            ),
           ],
       _vm._v(" "),
       _c(
@@ -3958,10 +4018,7 @@ var __vue_render__ = function () {
       _vm._v(" "),
       _c("VueSimpleContextMenu", {
         ref: "vueSimpleContextMenu",
-        attrs: {
-          "element-id": "kd-lane-chart-context-menu",
-          options: _vm.contextMenuOptions,
-        },
+        attrs: { options: _vm.contextMenuOptions },
         on: { "option-clicked": _vm.optionClicked },
       }),
       _vm._v(" "),