@xtctwins/tctwins-dxf-next-viewer 0.0.3 → 0.0.5

package/README.md

@@ -1,5 +1,275 @@
-# Vue 3 + TypeScript + Vite
+# xtd 二维文件查看器 VUE3
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+# 安装相关依赖
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+## 网络请求 axios
+
+<https://www.npmjs.com/package/axios>
+
+```ssh
+npm i axios
+```
+
+## UI element-plus
+
+<https://www.npmjs.com/package/element-plus>
+
+```ssh
+npm i element-plus
+```
+
+## 事件总线 mitt
+
+<https://www.npmjs.com/package/mitt>
+
+```ssh
+npm i mitt
+```
+
+## 状态管理 pinia
+
+<https://www.npmjs.com/package/pinia>
+
+```ssh
+npm i pinia
+```
+
+## 3D three
+
+<https://www.npmjs.com/package/three>
+
+```ssh
+npm i three
+```
+
+# 安装依赖
+
+```ssh
+npm i @xtctwins/tctwins-dxf-next-viewer
+```
+
+# 拷贝资源
+
+```
+拷贝文件夹@xtctwins/tctwins-dxf-next-viewer/dist/tctwins-dxf-viewer到项目public目录下，确保资源访问路径为：http://{访问域名}/tctwins-dxf-viewer/*
+```
+
+# Example
+
+```vue
+<template>
+	<TctwinsDxf
+		is-pc
+		reset
+		measure
+		comment
+		hidden
+		layer
+		anno
+		screenshot
+		:dxf-file-url="fileUrl"
+		:fonts="fonts"
+		:panel-right-keys="['anno']"
+		:panel-right-width="300"
+		@event-handle="eventHandle">
+		<template #leftpanel>
+			<!-- 左侧面板内容示例 -->
+			<!-- <transition name="dxf-panel-transition">
+				<PLayerTool v-if="props.isPc && toolbar.isToolActiveByKey('layer')" />
+			</transition> -->
+		</template>
+		<template #rightpanel>
+			<!-- 右侧面板内容示例 -->
+			<!-- <transition name="dxf-panel-transition">
+				<PCommentTool v-if="props.isPc && toolbar.isToolActiveByKey('comment')" />
+			</transition>
+			<transition name="dxf-panel-transition">
+				<PAnnoTool v-if="props.isPc && toolbar.isToolActiveByKey('anno')" />
+			</transition> -->
+		</template>
+		<template #toolpanel>
+			<!-- 工具面板内容示例 -->
+			<!-- <PToolbar
+				v-if="props.isPc"
+				:toolbars="toolbar.visibleTools" /> -->
+		</template>
+	</TctwinsDxf>
+</template>
+<script setup>
+import { ref } from "vue";
+import { TctwinsDxf } from "@xtctwins/tctwins-dxf-next-viewer";
+const fileUrl = ref("https://xxxxxx/demo.xtd");
+// 字体链接列表，默认字体可取tctwins-dxf-viewer/fonts下的文字路径
+const fonts = ref([]);
+const eventHandle = (event) => {
+	console.log("通知事件", event);
+};
+</script>
+```
+
+# Components
+
+## 组件 TctwinsDxf
+
+查看器组件
+
+### Attributes
+
+| 参数            | 说明                             | 类型        | 可选值 | 默认值    |
+| --------------- | -------------------------------- | ----------- | ------ | --------- |
+| isPc            | 是否为 PC 端                     | boolean     | -      | true      |
+| fonts           | 字体链接列表                     | string[]    | -      | -         |
+| dxfFileUrl      | xtd 文件 url                     | string      | -      | -         |
+| dxfBuffer       | xtd 文件 buffer                  | ArrayBuffer | -      | -         |
+| reset           | 开启重置功能                     | boolean     | -      | false     |
+| measure         | 开启测量功能                     | boolean     | -      | false     |
+| comment         | 开启批注功能                     | boolean     | -      | false     |
+| anno            | 开启标注功能                     | boolean     | -      | false     |
+| layer           | 开启图层功能                     | boolean     | -      | false     |
+| hidden          | 隐藏批注、测量、标注等信息       | boolean     | -      | false     |
+| screenshot      | 开启截图功能                     | boolean     | -      | false     |
+| panelLeftWidth  | 右侧面板宽度                     | number      | -      | 240       |
+| panelRightWidth | 右侧面板宽度                     | number      | -      | 240       |
+| panelLeftKeys   | 左侧面板显示内容                 | string[]    | -      | ['layer'] |
+| panelRightKeys  | 右侧面板显示内容                 | string[]    | -      | []        |
+| panelExtraKeys  | 操作其他功能时，不需要关闭的面板 | number      | -      | ['layer'] |
+
+### Events
+
+| 事件名      | 说明     | 回调参数                                                      |
+| ----------- | -------- | ------------------------------------------------------------- |
+| eventHandle | 事件总线 | event: { eventTarget: string;eventName: string;content: any;} |
+
+### Slots
+
+| 方法名     | 说明         |
+| ---------- | ------------ |
+| leftpanel  | 左侧面板内容 |
+| toolpanel  | 工具面板内容 |
+| rightpanel | 右侧面板内容 |
+
+## 组件 TctwinsDxfPanel
+
+自定义左侧或右侧面板组件时使用，可添加到 TctwinsDxf 组件的 leftpanel 或 rightpanel 插槽中使用
+
+### Attributes
+
+| 参数  | 说明 | 类型   | 可选值 | 默认值 |
+| ----- | ---- | ------ | ------ | ------ |
+| title | 标题 | string | -      | -      |
+
+### Events
+
+| 事件名     | 说明     | 回调参数 |
+| ---------- | -------- | -------- |
+| closePanel | 关闭面板 | -        |
+
+### Slots
+
+| 方法名  | 说明 |
+| ------- | ---- |
+| default | -    |
+
+## 组件 TctwinsDxfDialog
+
+自定义左侧或右侧可拖动面板组件时使用，可添加到 TctwinsDxf 组件的 leftpanel 或 rightpanel 插槽中使用
+
+### Attributes
+
+| 参数  | 说明     | 类型 | 可选值 | 默认值 |
+| ----- | -------- | ---- | ------ | ------ |
+| title | 标题名称 | -    | -      | 标题   |
+| width | 宽度     | -    | -      | 240    |
+
+### Events
+
+| 事件名     | 说明     | 回调参数 |
+| ---------- | -------- | -------- |
+| closePanel | 关闭面板 | -        |
+
+### Slots
+
+| 方法名  | 说明 |
+| ------- | ---- |
+| default | -    |
+
+## 组件 TctwinsDxfTool
+
+自定义工具面板组件时使用，可添加到 TctwinsDxf 组件的 toolpanel 插槽中使用
+
+### Attributes
+
+| 参数        | 说明                             | 类型    | 可选值 | 默认值 |
+| ----------- | -------------------------------- | ------- | ------ | ------ |
+| hideAllTool | 工具显示时，是否隐藏其他全部按钮 | boolean | -      | false  |
+
+### Slots
+
+| 方法名  | 说明 |
+| ------- | ---- |
+| default | -    |
+
+# 工具方法
+
+## 方法： setToolStatusByKey(key: string, isOpen?: boolean)
+
+激活或关闭工具
+
+### 参数
+
+| 参数   | 说明     |
+| ------ | -------- |
+| key    | 工具 key |
+| isOpen | 是否激活 |
+
+### 示例
+
+```ts
+// 激活重置工具
+setToolStatusByKey("reset", true);
+```
+
+## 方法： isToolStatusByKey(key: string)
+
+判断工具是否激活
+
+### 参数
+
+| 参数 | 说明     |
+| ---- | -------- |
+| key  | 工具 key |
+
+### 示例
+
+```ts
+if (isToolStatusByKey("reset")) {
+	console.log("重置工具已激活");
+}
+```
+
+## 方法： closeAllTool()
+
+关闭所有工具
+
+### 示例
+
+```ts
+closeAllTool();
+```
+
+## 方法： toggleAllTool(showState: boolean)
+
+显示或隐藏所有工具
+
+### 参数
+
+| 参数      | 说明           |
+| --------- | -------------- |
+| showState | 显示或隐藏工具 |
+
+### 示例
+
+```ts
+// 显示所有工具
+toggleAllTool(true);
+```