行列

### RDS服务端 #### puppeteer > 用于在服务端生成图片和pdf https://github.com/puppeteer/puppeteer Apache-2.0 License #### node-printer > 用于在服务端调用打印机 https://github.com/alepee/node-printer MIT 以上资源通过`npm`包的形式进行安装和使用

### Magix.View > 提供区块化的方案，方便对页面进行无限拆分和自由组装功能。传送门：https://thx.github.io/magix/ > 可以用`react`或`vue`中的组件概念来理解`magix view` #### 生命周期 ##### ctor方法 > 仅在对象实例化时调用一次，可在该方法内绑定事件及在销毁时做一些清理工作 该方法很少用，它的特点是在继承时，子类无法覆盖也无法阻止父类的`ctor`方法被调用，请参考下面的`init`方法 ##### init方法 > 仅在对象实例化时调用一次，可在该方法内绑定事件及在销毁时做一些清理工作 在有继承时，子类可以覆盖父类的`init`方法，覆盖后父类的`init`方法将不再被执行，除非子类显式调用。 ##### assign方法 接收外部(父view)传递进来的数据，在对像生命周期之间，该方法可能会被调用很多次。 在该方法内部处理接收到的外部数据，并做业务处理，不能在该方法内部使用异步，异步请放在`render`方法中 ##### render方法 渲染`view`，可在该方法内部使用任何你想要的方式，或同步或异步获取等，组织好数据后渲染界面 #### 数据和更新 ##### set方法...

### 设计器 #### 数据 Magix.State是一个用于存放全局数据和带`pubsub`的一个对象，一共5个方法 1. set用于存放全局数据 2. get用于读取存放的数据 3. on用于监听事件 4. off用于取消事件的监听 5. fire用于触发一个事件 `desinger`文件夹，包含整个设计器的基础功能，如标尺，历史记录、工具栏、剪切板等。 同时在该文件夹下，`elements.ts`、`selection.ts`，`snap.ts`，`clipboard.ts`，`generic.ts`为重点核心文件。这些文件对存放在Magix.State中的数据进行操作或修改，同时再用事件的方式派发出去。 除此之外的其它如`elements`元素目录或`panels`面板目录，这些目录下的文件则多以监听State中事件的变化，然后再取出自己需要的数据进行界面渲染。 这种方式是插件化的基础，把设计器基础功能与插件化的扩展功能分别开来，方便自由拆装。 #### 代码阅读 一次性看懂是不现实的，先对整体的流程有一个概念，比如如何开发，如何打包。然后再逐层深入，看开发命令是怎么启动的，打包是怎么回事，我要修改的话大概会改在哪里，心里先有一个总览。 然后找到入口，跟随入口及关键函数，不需要过多的细致阅读，先总体过一遍，知道哪些区块或界面是在哪个地方被调用的。 designer目录是需要花时间看的。 elements可设计元素，先从简单的看起，比如基础的线条，矩形，圆等。看懂后可以看图片或文本元素，它们比基础的元素多了数据绑定，然后再看单元格元素，它的数据绑定就比单个元素的要复杂些。再就需要看容器元素，这个因为支持嵌套，所以也就更复杂些。最后再看数据表格，因为该元素即包含容器的功能，也包含普通元素的功能。至此元素的学习就结束了。 其它目录都是辅助性的，并不复杂，前期可以跳过不看。 阅读时可以先找到相应功能的入口，打上断点，边看边调试代码，这样效率会快一些。 ### 查看State上绑定的事件和数据 可以在调试工具`console`面板中，输入以下代码...

### Magix.State存放的数据及事件 #### 数据 在`tmpl/desinger/index.ts`的`init`方法中，一次性把设计器中需要的数据全部在这里进行了初始化，大约在`280`行左右，可自行查看 除设计器需要的数据外，还有零星的其它一些数据，这里不再一一说明。 #### 事件 设计器通过Magix.State向外派发事件，供其它面板或元素监听。以下是派发的核心事件列表 | 事件名| 解释 | |----|----| |@:{event#magix.busy}|magix框架内部繁忙| |@:{event#example.change}| 变更设计区示例| |@:{event#toolbox.drag.element.move}| 顶部元素列表某个元素正在被拖动中| |@:{event#drag.element.move}| 正在拖着某个元素移动| |@:{event#toolbox.add.element}| 顶部元素列表通过单击添加元素| |@:{event#toolbox.drag.element.drop}| 顶部元素列表某个元素在拖动过程中被释放，即松开鼠标| |@:{event#drag.element.stop}|某个被拖动的元素停止拖动，即松开鼠标| |@:{event#stage.save.content}| 保存设计区中的数据| |@:{event#history.shift}| 历史记录正在被撤销或重做|...

### 元素分类 目前设计器共提供了5大类元素，相应的在tmpl/elements/目录下就存在着这5大类的基类文件。 > 2020-02-05 合并了镂空、容器和普通元素，目前只有3大类 > 2021-09-25 元素支持子目录分类，svg和流程图分别以子目录存在，3大类的基类文件分别在各自的目录里。 #### 普通元素 > elements/normal.ts 普通元素指在设计阶段，元素本身不响应鼠标或键盘事件，全部交与设计器处理，元素在这个过程中仅展示自己 #### svg元素 > elements/svg/designer.ts svg元素多以点来表示整个图形，这与普通元素通过left,top以及width,height来表示图形不同，因此针对svg元素抽象了svg/designer.ts这个基类。 同时在svg中多了路径、虚圆等设计时所需要的界面提示等功能。 #### 流程图元素 > elements/flow/designer.ts 流程图元素是svg元素与普通元素的结合，以svg中的图形为基础，结合普通元素支持按快捷键Space在元素自身上显示输入框的功能。 #### 容器元素 > hod.ts >...

### designer文件解读 #### @:{get.props} 元素添加到设计器区时，设计器本身并不关心添加进来的是什么元素，有哪些属性。所以当元素添加到设计区中时，需要元素本身向设计器提供自己的默认属性都有哪些。 该方法用于返回某个元素被添加到设计区中时，默认或初始化的数据是什么样的，后续在设计器中所有的修改都是针对这份数据来的。 所有的元素返回的数据中，必须包含x,y,width,height这4个基础数据。 #### props 主要向属性面板提供如何修改@:{get.props}返回的数据。 例如： 某个元素，自身都有哪些属性出现在属性面板中，这些属性通过何种方式来修改。 比如x,y坐标信息，使用数字输入框来修改，比如颜色使用颜色组件来修改。 props提供了这样一份渲染和修改清单，供属性面板使用。 其它数据是向设计器提供缩放时、改变位置时、设计区渲染时，缩放哪些属性，都移动哪些点以及是否在设计区支持旋转、调整尺寸等信息。

### 界面细节 1. 如何处理元素的拖动响应? 2. 贴边滚动都有哪些细节需要处理？ 3. 如何设置全局鼠标样式? 4. 元素从设计区向上拖有什么问题？ 5. 如何支持其它单位? 6. 拉框选择的细节有哪些？ 7. 如何处理或合并同类型的历史记录? 8. 拖动时按了快捷键如何解决? 9. 元素是如何缩放的？ 10. 旋转后的元素需要注意哪些细节？ 11. 如何让元素只能向某一个方向拖动? 12. 打印页面有哪些关键点? 以上请联系作者获取详细解答。

### 元素添加流程 我们可以在`header`中通过按下鼠标拖动或点击的方式进行添加元素，所以在`header.ts`里，使用`@:{add.element}`来接收鼠标在元素上的按下行为，在这个方法里，我们根据鼠标有没有移动来决定是使用拖动添加还是点击添加元素。 无论是拖动添加还是点击添加，我们都是在松开鼠标时处理，因此在松开鼠标时，我们会根据情况，比如未移动鼠标，则在触发`@:{event#toolbox.add.element}`事件时，传递不同的参数。 在`header.ts`里，我们仅触发`@:{event#toolbox.add.element}`事件，然后在`stage.ts`里监听该事件，然后再由`stage.ts`调用`elements.ts`里的方法进行最终元素的添加。 这里通过事件的方式进行通讯连接，在阅读代码上确实会产生“断层”的问题，不过好处是当需要在别的地方添加元素时，只需要派发`@:{event#toolbox.add.element}`事件即可，比如流程图元素进行连线时，要添加一个连接线元素只需要派发`@:{event#toolbox.add.element}`事件即可，即并不是所有元素都由`header.ts`里添加的。

听云　https://account.tingyun.com/reg/register#/

### swiper ```css .swiper{ margin:0.25rem; border-radius: 0.12rem; box-shadow: 0 0 4px 1px #e0e0e021; overflow: hidden; touch-action: pan-x; } .swiper-item{ height: 2.9rem; background:#cdcdcd; float: left; width: 7rem; /* border-radius: 0.12rem; */...