图纸GraphView反序列化后处理，gv相应方法，对缩放、选中、编辑、平移等操作支持和禁用；渲染元素容器类控件图纸嵌套，运行时点击交互对按下事件需特别处理：event.stopPropagation

1. 图纸编辑中对运行状态下的属性编辑设置

图纸中“可缩放”、“可平移”、“可框选”、“适配内容”都是针对运行状态下图纸的操作！也可以在onPostDeserialize()反序列化函数中通过API来设置！

注意，平移不是移动图元，而是整个图纸平移；可框选不是选中编辑，而是图纸中框住选择多个图元，需要去掉勾选“可平移”后才行，否则还没到框选就是移动图纸了！

图纸界面的属性设置在先，反序列化函数执行在后；前面通过界面属性配置API设置，后面通过手动调用API设置会覆盖前面界面属性的设置！

 

2. 图纸中反序列化函数对运行状态下的API设置

入门手册 - HT for Web

以下是copy过来的，需要具体测试了解运行效果

JavaScript function onPostDeserialize(json, dm, gv, datas) {     // 禁止鼠标缩放     gv.handleScroll = function () {};     // 禁止 touch 下双指缩放     gv.handlePinch = function () {};     // 禁止平移     gv.setPannable(false);     // 禁止框选     gv.setRectSelectable(false);     // 隐藏滚动条     gv.setScrollBarVisible(false);     // 禁止图元移动     gv.setMovableFunc(function () {       return false;     });     // 选中边框为0     gv.getSelectWidth = function () {       return 0; };

3. 编辑、运行模式下，鼠标点击交互、界面框选边框等相关

3.1 点击交互事件传入嵌套图纸

渲染元素的容器组件比如graphView、tabview，要让容器内加载图纸中的组件能正常响应点击操作（不仅仅是外观样式的相应，更是功能，比如组合框能弹出下拉，勾选框、单选框能够被选中），当前的容器组件图元（base.graphView、base.tabview、base.sideBar-ui等）属性必须勾选“可选中”，否则外观样式能响应，但是功能不响应，可能会报错（sideBar-ui中收起、展开按钮点击就会报错）：

 

图纸嵌套图纸，比如gv1内部嵌套了gv2，鼠标点击时间优先是gv2的处理然后冒泡上一层gv1，测试发现mousedown冒泡过程中，鼠标还没松开时就自动调用mouseup事件，而内部图纸（gv2）没法响应真实的mouseup事件！

注意，对于嵌套图纸中的矢量组件会出现这样的情况，但是对于嵌套图纸中的渲染元素组件点击事件按下、弹起则都是正常的。

这也就出现button按钮点击弹起样式无效且mouseup弹事件在mousedown按下时就触发等现象。如下图所示，当图纸通过graphView进行嵌套（有勾选“可选中”），点击嵌套图纸的控件时，从样式上看只有鼠标划过、进入点击按下时有变化：

 

如果对容器组件去掉可选中，虽然嵌套的图纸点击都能正常了，但是对容器本身渲染元素该有的响应就没有了：

 

3.2 去掉运行时点击选中边框

在反序列化中用initGVLoadedRunning(gv)

JavaScript //第2个参数时图元是否可以拖动; function initGVLoadedRunning(gv, controlsMovable = false) {     const g2dView = gv.getView();     g2dView.style.left = '0';     g2dView.style.right = '0';     g2dView.style.top = '0';     g2dView.style.bottom = '0';     /*运行状态下的图纸，极少被允许像编辑状态那样的选中时样式，固定写死*/     // 选中边框为0     gv.getSelectWidth = () => 0;     /*禁止图纸缩放与否，交给图纸的属性编辑，否则重写了就没法恢复缩放！     编辑状态不论对图纸是否勾选，编辑状态下图纸都是可缩放、可平移、可框选的，     （注意，要“可框选”的前提是不要勾选“可平移”）所以交由编辑器的勾选来决定     而不用这里写死！*/     // // 禁止鼠标缩放     // gv.handleScroll = () => {};     // // 禁止平移     // gv.setPannable(false);     // // 禁止框选     // gv.setRectSelectable(false);     // 禁止 touch 下双指缩放     gv.handlePinch = () => {};     /*是否能移动图元或隐藏图纸滚动条，在图纸编辑中并无属性配置，函数中给出默认参数，     并允许用户设定。默认状态是非嵌套的运行模式，不显示滚动条、禁止移动图元；允许嵌套     图纸运行模式下，能平移控件和显示滚动体*/     // 隐藏滚动条     gv.setScrollBarVisible(controlsMovable );//图元能移动，默认就不隐藏滚动条了！     // 禁止图元移动     gv.setMovableFunc(() => controlsMovable);     ///*嵌套图纸，需要对mousedown特别处理，否则真实的弹起事件会不响应，而是在按下时响应*/     /*最新的去掉了传参stopPropagation，改用下面gv.mi监听图元点击，未勾选了可选中的就不会     停止冒泡，默认勾选了可选中的图元都会停止冒泡！*/     //stopPropagation && g2dView.addEventListener('mousedown', function(e) {     //    e.stopPropagation();     //}, false);     /*嵌套图纸的mousedown特别处理，改用gv的事件监听函数，不用html原生的，这样能精确到图元     的点击，当前处理中当图元设置可选中，就会进入到onDown，设置不可选中就不会，所以很简单来     区分是否截获按下的响应事件，比如只需对内嵌图纸的背景矩形设置不可选中即可，其他任何可选中     的图标都会点击时停止onDown的事件冒泡，让click的onUp等正常响应，也让按钮3态表现正常*/     gv.mi((e) => {         const {             kind,             data         } = e         if (kind == 'onDown') {             /*再次优化，对于内嵌图纸的背景矩形，通过全屏填充来识别，不论其是否设置“可选中”都不会截获消息停止冒泡，免配置！             图元设置可选中，且并非全屏填充和组合图元，同时也没有传入允许全部都冒泡参数，这种图元的事件点击，就停止冒泡！*/             if (data.s('fullscreen') != 'fill' && data.getClassName() != 'ht.Block' && allowAllPropagation == false) {                 e.event.stopPropagation()             }         }     }); }

后台管理界面风格，控件一般不允许拖动，第二个参数一般传入false；

组态拓扑界面风格，控件一般允许拖动、缩放，第二个参数一般传入true

 

非用于嵌套、直接运行的图纸，默认第2个参数为false即可（注意，升级后的第三个参数stopPropagation去掉了，部分截图未更新，无需传入，自动根据图元节点的“可选中属性”决定是否停止冒泡！）：

 

【附】GraphView即gv的API函数与效果对照截图

• 启用图元可选中编辑 gv.setEditable(true);

• 启用图元可点击移动 gv.setMovableFunc(function () {return true;})

• 通过重写事件函数来禁用鼠标滚轮缩放图纸 gv.handleScroll = () => {};

• 启用图纸平移图纸 gv.setPannable(false);