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);