Demo  |   文档  |   博客  |   支持库  |   论坛  |   关于  |   EN
  • 首页
  • 产品
  • 解决方案
  • 下载
  • 合作
  • TWAVER DOCUMENT CENTER
    • 开发指南 – TWaver Doodle
      • 产品概述
      • 场景编辑器
      • 机柜面板编辑器
      • 设备面板编辑器
      • 组件模板编辑器
112 views. Last update: March 22, 2016
  1. TWAVER DOCUMENT CENTER
  2. 开发指南 – TWaver Doodle
  3. 设备面板编辑器
Print

IN THIS PAGE

  • 1 功能介绍
  • 2 组成部份
    • 2.1 工具栏
      • 2.1.1 对齐方式
      • 2.1.2 分布方式
      • 2.1.3 拖拽模式(默认)/框选模式:
      • 2.1.4 开启鼠标编辑(默认)/关闭鼠标编辑:
      • 2.1.5 OverView:全局视图
      • 2.1.6 Export:导出数据
      • 2.1.7 Save:保存数据
    • 2.2 组件栏
    • 2.3 工作区
    • 2.4 属性框
  • 3 系统集成

功能介绍

设备面板编辑器是可视化创建设备面板的编辑工具。

组成部份

主要分为4个部分,上边为工具栏,左边为组件栏,中间为工作区,工作区右上角为设备属性框。如下图所示
deviceEditor

工具栏

  • 对齐方式

    • 上对齐:所有选中的元素最上面对齐在同一条水平线上。
      alignUp
    • 下对齐:所有选中的元素最下面对齐在同一条水平线上。
      alignDown
    • 左对齐:所有选中的元素最左边对齐在同一条竖直线上。
      alignLeft
    • 右对齐:所有选中的元素最右边对齐在同一条竖直线上。
      alignRight
    • 水平对齐:所有选中的元素中间位置对齐在平均中间位置的水平对齐同一条水平线上。
      alignHor
    • 垂直对齐:所有选中的元素中间位置对齐在平均中间位置的垂直对齐同一条竖直线上。
      alignVer
  • 分布方式

    • 水平分布:所有选中的元素X坐标,按输入的间距摆放。
      flowHor
    • 垂直分布:所有选中的元素Y坐标,按输入的间距摆放。
      flowVer
  • 拖拽模式(默认)/框选模式:

    点击切换空白区域鼠标操作模式。

    1. 拖拽模式(默认):鼠标在空白处拖动时,整个视图一起移动。
    2. 框选模式:鼠标拖动时,会出现选择框,可以批量选中图元。
  • 开启鼠标编辑(默认)/关闭鼠标编辑:

    点击切换选中节点上的鼠标操作模式。

    1. 开启鼠标编辑(默认):选中的节点边框上会出现9个鼠标操作点,可以直接拖拽操作图元尺寸和旋转。如下图,白色方块可以修改尺寸,黄色圆点可以旋转图元。
      comp
    2. 关闭鼠标编辑:选中图元时,不会出现编辑图元的界面。
  • OverView:全局视图

    点击按钮,可以最大化显示工作区里的内容。滚动鼠标滚轮缩放或者拖拽视图后,可以点击该按钮快速重置机柜视图。

  • Export:导出数据

    点击按钮,可以导出已经编辑完的结果。
    Export

  • Save:保存数据

    。
    点击按钮,可以保存数据到localStorage中,key值等于弹框中输入的名称。默认为设备的client中的panel属性值。

组件栏

显示make中注册的模型,类别为”设备”的所有模型。如果在make中注册设备,请参照make使用手册。
设备面板:注册的默认设备面板背板。默认有1U到8U的背板
面板部件面板上可以添加的部件。

工作区

  • 默认根据设备的高度现实对应高度的背板。在左边的背板部件栏中,拖拽部件到背板上。
  • 拖拽过程中想取消动作,可以拖出工作区。
  • 删除摆放后的设备,可以选中设备,点击键盘delete键删除。
  • 选中部件按空格可以顺时针旋转90度。
  • 选中部件按ctrl键,在鼠标位置会显示选中部件的边框,点击时在该位置复制该部件。
    copy

属性框

显示当前选中设备可以编辑属性,支持bid(业务ID)、name(别名)、width(宽度)、height(高度)、x(位置X)、y(位置Y)、angle(角度)属性。

  1. bid:将bid设定为业务id,建立3D模型和业务之间的关联关系。
  2. name:部件别名。
  3. width(宽度):部件的宽度。
  4. height(高度)部件的高度。
  5. x(位置X):部件的X坐标。
  6. y(位置Y):部件的Y坐标。
  7. angle(角度):部件的旋转角度。

系统集成

  1. 指定make路径
  2. 取得显示编辑器的容器jquery对象
  3. 实例化doodle.DeviceEditor对象
  4. 对齐方式,调用align(type)方法,实现选中元素的对齐。type取值范围:up、down、left、right、center、middle
  5. 分布方式,调用flow(type, padding),实现选中元素的均匀分布. type取值范围:hor、ver
  6. 调用setDragToPan方法,切换拖拽模式(默认)和框选模式。 true-拖拽模式 false-框选模式
  7. 调用setMouseEditable方法,切换开启鼠标编辑(默认)和关闭鼠标编辑 true-开启鼠标编辑 false-关闭鼠标编辑
  8. 取得编辑结果,调用getData()方法
  9. 加载编辑结果,调用setData(data)方法,传入之前编辑的结果
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//指定make路径
    make.Default.path = 'make/';
 
    //取得显示编辑器的容器jquery对象
    var parentView = $('.main');
 
    //实例化doodle.DeviceEditor对象
    var deviceEditor = window.deviceEditor = new doodle.DeviceEditor(parentView);
 
    //对齐方式,调用align(type)方法,实现选中元素的对齐。type取值范围:up、down、left、right、center、middle
    $('.alignBox').on('click', 'input', function (e) {
        var type = $(this).data('type');
        deviceEditor.align(type);
    });
 
    //分布方式,调用flow(type, padding),实现选中元素的均匀分布. type取值范围:hor、ver
    $('#flowBox').on('click', 'input', function (e) {
        var type = $(this).data('type');
        var padding = prompt('请输入间距', 5);
        padding = parseFloat(padding);
        if (isNaN(padding)) {
            return;
        }
        deviceEditor.flow(type, padding);
    });
 
    //全局视图
    $("#overview").click(function () {
        deviceEditor.zoomOverview();
    });
 
    //拖拽模式(默认)/框选模式  true-拖拽模式 false-框选模式
    $('#panModel').on('click', function () {
        $(this).toggleClass('panModel');
        if ($(this).hasClass('panModel')) {
            deviceEditor.setDragToPan(true)
            $(this).val('框选模式');
        } else {
            deviceEditor.setDragToPan(false)
            $(this).val('拖拽模式');
        }
    })
 
    //开启鼠标编辑(默认)/关闭鼠标编辑 true-开启鼠标编辑 false-关闭鼠标编辑
    $('#editable').on('click', function (e) {
        $(this).toggleClass('editable');
        if ($(this).hasClass('editable')) {
            deviceEditor.setMouseEditable(true)
            $(this).val('禁止鼠标编辑');
        } else {
            deviceEditor.setMouseEditable(false)
            $(this).val('开启鼠标编辑');
        }
    });
 
    //取得模型的面板名称
    var panelName = doodle.Utils.getUrlParam('panelName');
 
    //调用 getData方法,取得编辑结果.
    $("#save").click(function () {
        var data = deviceEditor.getData();
        console.log(data);
        data = JSON.stringify(data);
        var mess = 'twaver.idc.equipment.newPanel';
        if (panelName && panelName.length > 0 && panelName != 'undefined') {
            mess = panelName;
        }
        var id = prompt('请输入面板名称', mess);
        localStorage.setItem(id, data);
        alert('save success');
    });
 
    //export json
    $('#export').click(function () {
        var text = deviceEditor.getData();
        if (!text) {
            alert("没有数据");
            return;
        }
        text = JSON.stringify(text);
        var content = "<div>导出数据:<br><textarea>" + text + "</textarea></div>";
        $(content).dialog({
            "title": "导出json",
            "width": 400,
            "height": 500
        });
 
    });
详细请参考编辑器中的deviceEditor.js

112 views. Last update: March 22, 2016
Print