组态编辑器配置

如果用户希望在集成编辑器和组态画面时，做一定的定制扩展，可通过编写自定义配置脚本的方式实现。 该自定义配置脚本定义在 custom/static/topv 目录下的 topv_config.js 文件中，内容如下：

window.topvConfig = {
    // 将主题颜色设置为西门子绿色
    //primaryColor: 'rgb(0, 153, 153)',
    // 将主题颜色设置为施耐德绿色
    //primaryColor: '#009530',

    editor: {
        accordion: false, // 手风琴风格
        /**
         * 打开测点标签选择器(topv用户)
         * @param tag 当前标签值，可以为空字符串
         * @param callback 回调函数，当选择完测点标签后调用
         */
        showTagSelectDialog: function(tag, callback) {
        },

        /**
         * 编辑器事件监听
         */
        handleEvent: function(editor, type, params) {
        },

        onEditorCreated: function(editor) {
        },
        config: {
        }
    },
    /**
     * 运行时配置选项
     */
    runtime: {
        /**
         * 当组态画面初始化完成后调用
         */
        onInit: function(dm, view) {

        },

        /**
         * 当组态画面销毁后调用
         */
        onDestroy: function(dm, view) {

        }
    }
}

功能选项说明

主题颜色设置

在自定义脚本中加入如下代码可以修改主题色

window.topvConfig = {
  // 将主题颜色设置为施耐德绿色
  primaryColor: '#009530'
}

手风琴风格

启用手风琴风格 topvConfig.editor.accordion = true

DANGER

设置为手风琴风格后，目录结构只有两级，第一级为文件夹，第二级为文件。根目录下不可创建文件。

手风琴风格： 默认风格：

自定义标签选择器

topv 没默认没有提供测点选择器，需要用户手动输入测点标签。但手动输入测点标签容易出现错误也不方便记忆，所以我们提供了一个方法，允许用户自定义标签选择器。如果要实现自定义标签选择器，需要用户在自定义配置脚本中实现 topvConfig.editor.showTagSelectDialog，用于**打开标签选择器，**用户选择好测点后，执行callback回调函数。 showTagSelectDialog参数说明：

参数名称	类型	说明
tag	string	当前选择的测点标签
callback	function	回调函数，用户选择好测点后，执行回调函数将把选择的标签值传入给 callback

编辑器事件监听

topvConfig.editor.handleEvent事件监听函数用于监听一些常用的编辑器事件，如下所示：

type	说明
displayViewCreated	新建图纸
displayViewSaved	保存图纸
displayViewOpened	打开图纸
displayViewClosed	关闭图纸
symbolViewCreated	新建图标
symbolViewSaved	保存图标
symbolViewOpened	打开图标
symbolViewClosed	关闭图标
fileDeleted	文件被删除

编辑器初始化

当组态编辑器初始化完成后，自动执行 topvConfig.editor.onEditorCreated函数。用户可以在编辑器创建完成后自定义扩展快捷菜单、工具栏按钮等。

组态画面初始化

当组态画面初始化完成后， 自动执行 topvConfig.runtime.onInit。用户可以在组态画面初始化后执行一些自定义操作。

组态画面销毁

当组态画面关闭后， 自动执行 topvConfig.runtime.onDestroy。用户可以在组态画面关闭后执行一些自定义操作。

跨域问题

某些操作需要调用父页面中的脚本（比如打开自定义标签选择器），会遇到跨域问题。我们可以采用 postMessage 解决跨域问题，下面是一个示例。

子页面脚本

自定义配置中的 showTagSelectDialog 实现

/**
 * 打开测点标签选择器
 * @param tag 当前标签值，可以为空字符串
 * @param callback 回调函数，当选择完测点标签后调用
 */
showTagSelectDialog: function(tag, callback) {
    const listener = function (e) {
        if (e.source === window.parent) {
            // 接收到了来自父窗口的消息
            const msg = JSON.parse(e.data)
            if (msg.type == 'tagSelected') {
              // 完成选择
              callback(msg.tag)
              window.removeEventListener(listener)
            } else if (msg.type == 'tagSelectCanceled') {
              // 取消选择
              window.removeEventListener(listener)
            }
        }
    }
    window.addEventListener('message', listener)
    // 向父页面发送请求，父页面收到消息后显示标签选择器
    window.parent.postMessage(JSON.stringify({
        type: 'showTagSelectDialog',
        tag: tag
    }), '*')
}

父页面脚本

嵌入了 iframe 的父页面脚本实现：

// <iframe onload="onFrameLoad()" src="" frameborder="0" style="width: 100%; height: 100%; overflow: hidden;" />
function onFrameLoad() {
  // 获取 iframe 元素对象
  const iframe = document.querySelector('iframe')
  // iframe 加载后监听子页面窗口的消息
  window.addEventListener('message', (e) => {
    // 判断接收到的消息是否来自 iframe
    if (e.source === iframe.contentWindow) {
      const msg = JSON.parse(e.data)
      if (msg.type == 'showTagSelectDialog') {
        // 调用本地函数显示标签选择器
        showTagSelectDialog(msg.tag, (tag) => {
          // 完成选择
          iframe.contentWindow.postMessage(JSON.stringify({
            type: 'tagSelected',
            tag: tag
          }), '*')
        }, () => {
          // 取消选择
          iframe.contentWindow.postMessage(JSON.stringify({
            type: 'tagSelectCanceled',
            tag: ''
          }), '*')
        })
      }
    }
    
  })
}