可视化拖拽画布布局、标尺(2)

最近对之前的可视化布局页面进行了优化：
1.对画布编辑条件下，增加边栏，方便用户对拖出画布部分的内容进行查看。
2.优化了标尺的计算逻辑。

需求：标尺计算逻辑

旧版本标尺开发时，定位为：position: absolute;，标尺是全量实际长度。
是使用transform: translate(var(--rRulerOffsetLeft)); 通过css移动标尺实现关联移动。

image.png

更新后标尺使用flex布局。标尺长度为可视区域长度。

image.png

解决：

1. 方法一：
   对flex标尺使用div包一层，flex对div整体生效
   对包裹层position: relative, 标尺增加position: absolute; (对absolute的元素，父元素一定要为relative才生效)
   

   image.png

2. 方法二：
   flex布局后位置不变，对使用padding-top，padding-left 对显示数字和坐标进行位移。
   

   image.png

计算逻辑：

标尺逻辑

计算水平、竖直0点坐标偏移量：
水平偏移量 = （中间层画布宽度 - 实际画布宽度 * 缩放比例）/ 2 - 水平滚动条数值
垂直偏移量 = （中间层画布高度 - 实际画布高度 * 缩放比例）/ 2 - 垂直滚动条数值

尺子0点比例计算：
前侧长度 = 0点坐标偏移量 / 100 + 非整数倍粒度偏移
后侧长度 = 中间层画布长度 / 100

非整数倍粒度偏移 = padding位移值

问题：因为标尺的0点和画布的0点为不同坐标，在计算完成后会出现标尺和画布0点坐标偏差的情况。

尺子非整数粒度计算（需要为5刻度的倍数）
通过margin更新整个尺子的位置，抵消掉为了映射刻度5，多带来的padding偏移量。

基准0点坐标校准