# web-postil-tool

**Repository Path**: logicjwell/web-postil-tool

## Basic Information

- **Project Name**: web-postil-tool
- **Description**: 前端批注工具支持编写文本以及箭头导向
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-10-20
- **Last Updated**: 2024-10-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# web端的批注插件
## 场景

1. web端在网页上批注文字
1. 支持箭头指向

## 设计和思路

1. 注意浏览器的宽高比[所有都走canvas]
1. 编辑tab栏随着鼠标位置变化
1. 点击记下鼠标位置，然后插入文字标签, 利用定位来满足
1. 使用canvas来画线条
1. 需要矩形选中功能
1. 需要使用一定的数据结构来初始化页面
1. 可以让上层事件丢失点击pointer-events: none;

### 操作条toolBar
1. 默认放到网页最下角[可以根据自己的需要调整插入的位置]
1. 点击tool进入tool编辑功能
1. 选中tool出现蒙层启动编辑模式[禁用页面上的操作事件] pointer-events: auto;
1. 不选中的时候[放开页面上的操作事件] pointer-events: none;

### 插入文本
#### 事件描述
1. 单机空白趋于插入一个文本输入框可以输入文本
1. 单机文本域可以移动文本
1. 双击文本域可以输入文本

#### 位置计算


## 项目架构

```sh
.
├── build                           # webpack打包脚本
│   ├── webpack.base.conf.js          # 打包规则配置
│   ├── webpack.build.conf.js         # axios分装打包umd
│   ├── webpack.prod.conf.js          # demo打包配置
│   └── webpack.dev.conf.js           # demo运行环境配置
├── demo                           # 开发demo演示
│   ├── index.ts
│   └── index.html
├── src                         # 源文件
│   └── index.ts                
├── doc                   # 技术文档    
├── plan                  # 开发计划 
├── tests                 # 测试文件
└── README.md             # 说明文件

```

## 安装教程

```shell

git clone https://gitee.com/hjmeng/web-postil-tool.git   # 克隆项目到本地
cd web-postil-tool                                       # 进入项目根目录
npm i                                                 # 安装包依赖

```
### 启动脚本

```shell
#------------- demo --------------#
npm run dev            # 启动开发环境

npm run build:demo     # 打包demo环境测试

#------------- build --------------#
npm run build          # 打包npm

#------------- lint --------------#
npm run lint         # 启动lint检测

npm run lint:fix     # 启动lint修复

```

### 发布包

```shell
#------------查看当前npm源的地址-------------#
npm config get registry
#------------登录npm(如果有则不用登陆)-------------#
npm set registry https://registry.npmjs.org

npm login

#------------发布包(注意package.json中的版本)-------------#
npm version patch # 更新package中的版本号 npm version 1.0.1
npm publish

```
## 用法

### api配置

```js
console.log('api配置')

```

### 包使用

```js
console.log('包使用')

```
#### 分支说明

1. master           默认分支

1. develop          调试分支

#### 参与贡献

1.  Fork 本仓库

2.  新建 Feat_xxx 分支

3.  提交代码

4.  新建 Pull Request