kd-lane-container 0.0.9 → 0.1.0

package/README.md

@@ -67,6 +67,40 @@ 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"
@@ -335,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

@@ -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;
@@ -3504,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();
     },
@@ -3831,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 */
@@ -3867,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(
@@ -3887,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(
@@ -3907,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(
@@ -3950,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(