# maotu-webtopo

<<<<<<< HEAD
#### 介绍
{**以下是 Gitee 平台说明，您可以替换此简介**
Gitee 是 OSCHINA 推出的基于 Git 的代码托管平台（同时支持 SVN）。专为开发者提供稳定、高效、安全的云端软件开发协作平台
无论是个人、团队、或是企业，都能够用 Gitee 实现代码托管、项目管理、协作开发。企业项目请看 [https://gitee.com/enterprises](https://gitee.com/enterprises)}

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
=======
基于 vue3 的 web 组态引擎库

探索将已有 svg 文件转为自由缩放图形库的解决方案，也可用作低代码大屏项目开发

## 说明

此开源版本的代码源自于 [maotu 插件版](https://www.npmjs.com/package/maotu) 0.3.1 版本，与插件版的差异请查阅插件版的 readme。

## 使用文档

请参考：[http://mt.yaolm.top](http://mt.yaolm.top)

## 声明

`maotu-webtopo` 使用了 `LGPL-3.0` 协议。这意味着：
*   您可以将 `maotu-webtopo` 作为库链接到您的商业项目，而无需开源您的整个项目。
*   如果您修改了 `maotu-webtopo` 的**核心库**代码，并分发了修改后的版本，您必须按照 LGPL-3.0 协议的要求，开源您所做的修改。
*   如果您仅仅是将`maotu-webtopo` 作为库链接到你的项目，而没有修改或分发它的源代码，那么你的项目无需开源。

   详细的 LGPL-3.0 许可证文本请查阅 [https://www.gnu.org/licenses/lgpl-3.0.html](https://www.gnu.org/licenses/lgpl-3.0.html)。

## 如何构建插件并使用

**构建库：**

1.  使用 `pnpm run lib` 命令构建 `maotu-webtopo`，生成 `dist` 文件夹。

**使用库：**

1. **推荐使用 pnpm 安装:**
    
    ```bash
    pnpm i maotu  # 前提是你已经发布到了 npm
    ```

  如果选择手动复制，请继续参考以下步骤

2. 将 `dist` 文件夹中的以下文件复制到你的项目：
    *   `dist/maotu.es.js`：库的入口文件。
    *   `dist/style.css`：库的样式文件。
    *  `dist/src`  ： 库的ts类型定义。
    * 将这些文件放到你项目中的合适位置。例如，你可以创建一个 `src/lib/maotu` 目录，并将它们复制到这里。

3. 确保你的项目可以访问到 `style.css` 文件。可以通过在入口文件或组件中引入的方式来实现。

**在项目中使用示例：**

```vue
<script setup lang="ts">
import { MtEdit } from "@/lib/maotu/maotu.es" // 替换为你的实际路径
import "@/lib/maotu/style.css"  // 替换为你的实际路径
</script>

<template>
  <div class="w-1/1 h-100vh">
    <mt-edit ref="MtEditRef" />
  </div>
</template>

<style scoped></style>
```

## 鸣谢

maotu的部分逻辑实现参考了以下大佬的文章

[幽月之格-可拖拽、缩放、旋转组件实现细节](https://juejin.cn/user/3597257779449165/posts)

[woai3c-一个低代码（可视化拖拽）教学项目](https://github.com/woai3c/visual-drag-demo)

>>>>>>> 6a5e8b1 (首次提交)