TWaver MONO Design

  1. MONO Design
  2. 定制编辑器

Mono Design编辑器本身也是基于mono.js及html、javascript进行开发的网页程序。除了直接使用它以外,开发者还可以方便的对其进行修改和定制,例如通过对菜单、logo、模版等进行修改,快速创建企业自己的编辑器应用程序。本章节将介绍如何对Mono Design编辑器进行修改和定制。

编辑器程序结构

将Mono Design编辑器程序解压后,其中主要目录如下所述。其中可裁剪的部分会特别说明:

  • css:定义了编辑器程序的样式。可修改css文件中的样式来修改编辑器的外观风格。不可裁剪
  • demo:使用mono.js进行开发的各种demo演示程序。可裁剪
  • images:包含了编辑器用到的各种图片,以及demo中用到的图片。用不到的图片可裁剪
  • jsdoc:包含了mono.js的api说明文档。可裁剪
  • libs:包含了编辑器所需的各种库文件。不可裁剪
  • META-INF及WEB-INF:web工程部署所需配置。可裁剪
  • mono:编辑器程序代码。不可裁剪
  • resources:编辑器资源及配置文件,不可裁剪

根目录还包括components.html及index.html两个网页,分别对应编辑器的设备编辑器及机房编辑器,也应保留。或根据实际需要进行裁剪(例如如果编辑器只提供机房编辑,则可删除components.html)

修改模板库

左侧模板库内容来自resources目录下的三个文件:

  • testAssembles.json:组合对象定义,目前版本尚未启用;
  • testLib.json:定义了左侧模板库Room的内容列表,它是testPrimitives.json文件中定义的项的组合,项的具体内容则在testPrimitives.json中详细定义;
  • testPrimitives.json:定义了testLib.json中每个项的具体详细内容;

testLib.json

文件testLib.json定义了模版库的内容。可以直接修改成符合自己要求的模版库。下面的修改只定义了几个简单的分类和几个项:

parseLib({
  "categories":[                    
    {"id":"Rooms",
    "contents":[
      {
        "subtitle":"Floor",
        "children":[{"id":"floor01"},{"id":"floor02"},{"id":"floor03"}]
      },
      {
        "subtitle":"Room",
        "children":[{"id":"squareRoomWithFloor"},{"id":"LShapedRoomWithFloor"},{"id":"RoomByPoints"},]
      },
      {
        "subtitle":"Window",
        "children":[{"id":"window01"},{"id":"window02"},]
      },                
    ]}
  ]
})

其中children中的每一个具体项只包括了id,id具体定义的内容则在testPrimitives.json中定义。

96

testPrimitives.json

文件testPrimitives.json定义了testLib.json中定义的每个项的具体内容。

parsePrimitives([
{
"id":"floor01",
"shape":"FloorShapedModel",
"actionType":"CreateFloorShapeNode",
"label":"Draw Floor",
"tips":"Drag and Drop to \nCanvas to Draw\n a New Floor",
"thumbnail":"floor03.png",
"ov":"floor03.png",
"ov-s":"specified shape type",
"dm":"material 0",
"dt":"floor02_3d.png",
"size":{"x":200,"y":20,"z":100},
"pos":{"x":0,"y":0,"z":0},
"rot":{"x":0,"y":0,"z":0},
"repeat":{"row":3,"column":3},
},

其中每一项定义了一个具体的模板内容。

  • id:唯一,可在testLib.json中通过id进行指定;
  • shape:所属类型,mono编辑器中目前支持这几种类型:FloorShapedModel(地板),RoomModel(房间),RoomWithFloorModel(带地板的房间),BlockModel(门窗),FloorShapedModel(管道)
  • actionType:拖拽图标到拓扑图后拓扑图所处的编辑模式,支持以下几种类型:CreateFloorShapeNode(创建地板),CreateInnerWallShapeNode(创建内墙),CreateImageShapeNode(创建房间),CreateRoomWithFloorShapeNode(创建带地板的房间),CreatePipeShapeNode(创建管道),CreateRoundPipeShapeNode(创建圆形管道)
  • label:项上显示的文字标签
  • tips:鼠标滑过项时的提示文字
  • thumbnail:项的小图标路径
  • ov:拖拽该项到2D平面上时显示的拖拽图片
  • ov-s:保留字段
  • dm:保留字段
  • dt:3D场景中3D对象所采用的贴图图片
  • size:所生成的2D和3D对象的大小
  • pos:所生成的2D和3D对象的位置
  • rot:所生成的2D和3D对象的旋转度
  • repeat:贴图的repeat
  • dshape: 所生成的2D和3D路径对象的各个点的位置
  • embeded:是否需要吸附到墙上,比如门和窗需要吸附到墙上

修改页头页脚

页头包括logo、右上角的连接栏。页脚主要是公司版权信息等。

修改logo,可以准备一张大小合适的图片(建议尺寸:300*40),并修改index.htm的下面内容:

82

将其中的图片换成您的logo图片即可。效果如下:
84

修改下面代码可以设置自己的右侧连接。如不需要,也可将这部分内容直接删除:
82

87

页脚部分,显示了公司名及版权信息,代码如下,可直接修改:

<div class="footer"><span></span>Copyright <script type="text/javascript">document.write(new Date().getFullYear())</script> My Company Name.</div>

88

修改菜单及工具栏

主菜单可以直接在index.html文件中直接修改。菜单是通过一个嵌套的ul标签实现的。
90
其中,菜单的动作可以直接在onclick中定义:

<li><a href="#" onclick="callme()">Menu Item</a></li>

下面的代码定义了一个菜单分割栏:

<li class="separator"></li>

91

请注意:菜单目前不支持多级菜单。菜单宽度如和文字宽度不相称,可调整其css样式。

工具条的定义在index.html中的如下位置:
92
通过定义input标签来增加按钮。按钮的图片、样式等,可以通过class指定并在css中设置。
93

其他

还有其他一些可以定义的内容。例如,editor启动是否显示“Room/Component“选择对话框。可以通过修改index.html中的下面代码参数实现:

<body onload="$startEditor(true)"  style="margin:0">

startEditor函数中的boolean值控制是否隐藏启动对话框。如不输入或false则显示,如输入true则隐藏,直接进入room编辑状态。

下面实例演示了如何创建一个完整的自定义房间编辑器:
94
主要代码如下:

<body onload="$startEditor(true)"  style="margin:0">
<div class="header">
    	<div class="top">
        	<div class="top_left">
            	<img class="logo" src="images/my-logo.png" />
                <div class="top_title"></div>
            </div>
            <div class="top_right">
            	<a href="http://twaver.servasoft.com">Link</a>
                |
                <a href="http://twaver.servasoft.com/forum/">Link</a>
                |
                <a href="http://twaver.servasoft.com/blog">Link</a>
                |
                <a href="demo/index.html">Link</a>  
            </div>
        </div>
        <div class="clear"></div>
        <div class="menu">

			<!-- Begin CSS Horizontal Popout Menu -->
			<div id="menuh-container">	
				<div id="menuh">			
					<ul style="width:60px; padding-right:10px;">
						<li><a href="#" class="top_parent">Menu</a>
						<ul>
						  	<li><a href="#" onclick="return false">Menu Item</a></li>
						  	<li><a href="#" onclick="return false">Menu Item</a></li>
						  	<li><a href="#" onclick="return false">Menu Item</a></li>
						</ul>
						</li>						
					</ul>
					<ul style="width:70px;">
						<li><a href="#" class="top_parent">Menu</a>
						<ul>
							<li><a href="#" onclick="return false">Menu Item</a></li>
							<li><a href="#" onclick="return false">Menu Item</a></li>
							<li><a href="#" onclick="return false">Menu Item</a></li>
							<li class="separator"></li>
							<li><a href="#" onclick="return false">Menu Item</a></li>
							<li><a href="#" onclick="return false">Menu Item</a></li>
						</ul>
						</li>
					</ul>					
					<ul style="width:65px;">
						<li><a href="#" class="top_parent" onclick="return false">Menu</a>
						<ul>
							<li><a href="#" onclick="return false">Menu Item</a></li>
						</ul>
						</li>
					</ul>
				</div>
			</div>				
			<!-- End CSS Horizontal Popout Menu -->
			<a><input type="button" class="setting" onclick="$ces4R()"/></a>
            <input id ='btn3d' type = "button" class="transform2d_two" onclick="$s3d(this)">
            <input id ='btn2d' type = "button" class="transform2d_one" onclick="$s2d(this)">        	
			<a><input type="button" class="setting" onclick="alert('do something here')"/></a>								
        </div>
    </div>
	<div id = 'main'></div>
	<div class="footer"><span></span>Copyright <script type="text/javascript">document.write(new Date().getFullYear())</script> My Company Name.</div>
</body>