Home Esplora Aiuto
Registrati Accedi
ydm
/
chrome-plugin
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Albero (Tree): 857431ccd1
Rami (Branch) Tag
chrome-plugin
/
lib
/
zlExpressEditor
/
ExpressEditor.html

ExpressEditor.html 28 KB
Cronologia Originale

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545 
  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4.     <meta charset="utf-8" />
    5. 

  5.     <title></title>
    6. 

  6.     <!--jquery-->
    7. 

  7.     <script src="./extra/jquery/jquery.min.js"></script>
    8. 

  8. 

  9.     <!--ztree-->
    10. 

  10.     <link href="./extra/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    11. 

  11.     <script src="./extra/ztree/js/jquery.ztree.all.min.js"></script>
    12. 

  12.     <script src="./extra/ztree/js/jquery.ztree.exhide.min.js"></script>
    13. 

  13. 

  14.     <script src="extra/layer/layer.min.js"></script>
    15. 

  15. 

  16.     <!--zlExpressEditor-->
    17. 

  17.     <link href="./css/ExpressEditor.css" rel="stylesheet" />
    18. 

  18. 

  19.     <script src="./monaco-editor/min/vs/loader.min.js"></script>
    20. 

  20.     <script src="./js/EnvironmentHelper.js"></script>
    21. 

  21.     <script src="./js/ExpressEditor.js"></script>
    22. 

  22.     <script src="./js/ExpressExecutor.js"></script>
    23. 

  23. 

  24.     <script>
    25. 

  25.         //测试代码
    26. 

  26.         (function () {
    27. 

  27.             //编辑器配置信息
    28. 

  28.             let setting = {
    29. 

  29.                 //初始化的时候需要设置的值
    30. 

  30.                 "value": "",
    31. 

  31.                 //编辑器语言
    32. 

  32.                 "language": "javascript",
    33. 

  33.                 //是否只读
    34. 

  34.                 "readonly": false,
    35. 

  35.                 //是否显示左侧资源树
    36. 

  36.                 "showResource": true,
    37. 

  37.                 //显示资源树的部件页卡
    38. 

  38.                 "showPartResource": true,
    39. 

  39.                 //左侧资源树的第一个页卡的名称
    40. 

  40.                 "partResourceTabName": "部件",
    41. 

  41.                 //显示函数资源树页卡
    42. 

  42.                 "showFunctionResource": true,
    43. 

  43.                 //显示参数资源树部件页卡
    44. 

  44.                 "showParameterResource": true,
    45. 

  45.                 //是否显示校验按钮
    46. 

  46.                 "showCheckButton": false,
    47. 

  47.                 //是否开起缩略图
    48. 

  48.                 "minimap": false,
    49. 

  49.                 //表达式返回值类型
    50. 

  50.                 "returnType": EnvironmentHelper.PropertyType.Any,
    51. 

  51.                 //资源信息[第一个页卡，可能没有]
    52. 

  52.                 "resource": [
    53. 

  53.                     {
    54. 

  54.                         //必填，且必须满足JS的变量定义规则
    55. 

  55.                         "id": "id",
    56. 

  56.                         //显示名，必填，用于在表达式编辑器显示用的名称
    57. 

  57.                         "name": "部件1",
    58. 

  58.                         /**
    59. 

  59.                          节点类型
    60. 

  60.                          path:表示参与路径提示(如例子中的“属性”);
    61. 

  61.                          group:表示不参与路径(如例子中的“方法”);
    62. 

  62.                          property:表示该节点是个属性;
    63. 

  63.                          method:表示该节点表示一个方法;
    64. 

  64.                          property和method只能出现在叶子节点;
    65. 

  65.                          */
    66. 

  66.                         "nodetype": EnvironmentHelper.ResourceNodeType.Path,
    67. 

  67.                         "nodes": [
    68. 

  68.                             {
    69. 

  69.                                 "id": "properties",
    70. 

  70.                                 "name": "属性",
    71. 

  71.                                 "nodetype": EnvironmentHelper.ResourceNodeType.Path,
    72. 

  72.                                 "nodes": [
    73. 

  73.                                     {
    74. 

  74.                                         "id": "P_BJID",
    75. 

  75.                                         "name": "部件ID",
    76. 

  76.                                         "nodetype": EnvironmentHelper.ResourceNodeType.Property,
    77. 

  77.                                         //描述信息，当用户鼠标悬停或进行“.”操作的时候出现提示
    78. 

  78.                                         "note": "描述信息",
    79. 

  79.                                         //根据nodetype的不同，有不同的description
    80. 

  80.                                         "description": {
    81. 

  81.                                             //默认值，进行表达式校验的时候使用的值，可以不指定，而后系统以给定类型虚拟一个默认值进行校验
    82. 

  82.                                             "value": 123,
    83. 

  83.                                             //必填:属性(property)的数据类型，用于校验返回结果类型
    84. 

  84.                                             "type": EnvironmentHelper.PropertyType.Number,
    85. 

  85.                                         }
    86. 

  86.                                     },
    87. 

  87.                                     {
    88. 

  88.                                         "id": "P_BJMC",
    89. 

  89.                                         "name": "部件名称",
    90. 

  90.                                         "nodetype": "property",
    91. 

  91.                                         "note": "描述信息",
    92. 

  92.                                         "description": {
    93. 

  93.                                             "value": "text",
    94. 

  94.                                             "type": "string",
    95. 

  95.                                         }
    96. 

  96.                                     },
    97. 

  97.                                     {
    98. 

  98.                                         "id": "P_CS",
    99. 

  99.                                         "name": "选项测试",
    100. 

  100.                                         "nodetype": EnvironmentHelper.ResourceNodeType.Property,
    101. 

  101.                                         "note": "描述信息",
    102. 

  102.                                         "description": {
    103. 

  103.                                             "value": [
    104. 

  104.                                                 { display: "枚举Key1", value: "枚举Value1" },
    105. 

  105.                                                 { display: "枚举Key2", value: "枚举Value2" },
    106. 

  106.                                                 { display: "枚举Key3", value: "枚举Value3" }
    107. 

  107.                                             ],
    108. 

  108.                                             "type": EnvironmentHelper.PropertyType.Enum,
    109. 

  109.                                             "selItemMode": "value",//或：display(选择“选项明细”返回name)
    110. 

  110.                                             "showMode": "表达式编辑"//或：选项值域选择(不显示运算符)
    111. 

  111.                                         }
    112. 

  112.                                     },
    113. 

  113.                                     {
    114. 

  114.                                         "id": "P_CS2",
    115. 

  115.                                         "name": "选项测试2",
    116. 

  116.                                         "nodetype": EnvironmentHelper.ResourceNodeType.Property,
    117. 

  117.                                         "note": "描述信息",
    118. 

  118.                                         "description": {
    119. 

  119.                                             "value": function (pid) {
    120. 

  120.                                                 //xxxx
    121. 

  121.                                                 return [
    122. 

  122.                                                     { display: 1, value: 1 },
    123. 

  123.                                                     { display: 2, value: 2 },
    124. 

  124.                                                     { display: 3, value: 2 }
    125. 

  125.                                                 ];
    126. 

  126.                                             },
    127. 

  127.                                             "type": EnvironmentHelper.PropertyType.Enum,
    128. 

  128.                                             "selItemMode": "value",//或：display(选择“选项明细”返回name)
    129. 

  129.                                             "showMode": "表达式编辑"//或：选项值域选择(不显示运算符)
    130. 

  130.                                         }
    131. 

  131.                                     }
    132. 

  132.                                 ]
    133. 

  133.                             },
    134. 

  134.                             {
    135. 

  135.                                 "id": "methods",
    136. 

  136.                                 "name": "方法",
    137. 

  137.                                 //group:表示该节点仅用于分组，即弹出式表达式的左侧树形界面的分组，在实际使用中，并不参数路径精算。例如本例中，是直接通过"部件1.getSelection()"进行访问该方法，绕开“方法”两个字
    138. 

  138.                                 "nodetype": "group",
    139. 

  139.                                 "nodes": [
    140. 

  140.                                     {
    141. 

  141.                                         "id": "getSelection",
    142. 

  142.                                         "name": "获取焦点行",
    143. 

  143.                                         "nodetype": "method",
    144. 

  144.                                         "note": "描述信息",
    145. 

  145.                                         "description": {
    146. 

  146.                                             "content": function () { },
    147. 

  147.                                             //方法的默认返回值，若没有返回值，则根据返回类型(returnType)虚拟一个默认返回值
    148. 

  148.                                             "returnValue": "text",
    149. 

  149.                                             //返回类型
    150. 

  150.                                             "returnType": "string",
    151. 

  151.                                             //参数信息，数组类型，每个参数按给定顺序输入
    152. 

  152.                                             "argsInfo": [{
    153. 

  153.                                                 //参数名
    154. 

  154.                                                 "argName": "arg1",
    155. 

  155.                                                 //参数的类型
    156. 

  156.                                                 "argType": "string",
    157. 

  157.                                                 //参数的描述信息，在用户输入参数的时候进行提示
    158. 

  158.                                                 "argNote": "第1个参数的描述信息"
    159. 

  159.                                             },
    160. 

  160.                                             {
    161. 

  161.                                                 "argName": "arg2",
    162. 

  162.                                                 "argType": "number",
    163. 

  163.                                                 "argNote": "第2个参数的描述信息"
    164. 

  164.                                             }]
    165. 

  165.                                         }
    166. 

  166.                                     }
    167. 

  167.                                 ]
    168. 

  168.                             }
    169. 

  169.                         ]
    170. 

  170.                     }
    171. 

  171.                 ],
    172. 

  172.                 //扩展的其他函数方法
    173. 

  173.                 "extension": [
    174. 

  174.                     {
    175. 

  175.                         //名称需要唯一
    176. 

  176.                         "name": "ComponentBase",
    177. 

  177.                         //通过文件的方式装载
    178. 

  178.                         "type": "file",
    179. 

  179.                         //基于跟目录的绝对路径的JS文件[文件路径必须使用正斜杠]
    180. 

  180.                         "filePath": "/component/ComponentBase.js",
    181. 

  181.                         //是否加入左侧资源树[可以不传，默认是true]
    182. 

  182.                         "addInResource": true
    183. 

  183.                     },
    184. 

  184.                     {
    185. 

  185.                         //名称需要唯一
    186. 

  186.                         "name": "own",
    187. 

  187.                         //通过实例的方式装载
    188. 

  188.                         "type": "instance",
    189. 

  189.                         //实例对象
    190. 

  190.                         "instance": new Object()
    191. 

  191.                     },
    192. 

  192.                     {
    193. 

  193.                         //名称需要唯一
    194. 

  194.                         "name": "selfDefined",
    195. 

  195.                         //直接通过写代码引用
    196. 

  196.                         "type": "code",
    197. 

  197.                         //基于跟目录的绝对路径的JS文件[文件路径必须使用正斜杠]
    198. 

  198.                         "jsCode": "var _self = new TableControl();"
    199. 

  199.                     }
    200. 

  200.                 ],
    201. 

  201.                 //是否启用公共函数库，公共函数库的路径在"./extra/CommonFunctions.js",该文件内定义的所有方法都将被添加到控件的智能提示库
    202. 

  202.                 "useCommonFunctions": true,
    203. 

  203.                 //扩展参数[参数页卡]，配置信息与上方资源信息(resource)相视，但不允许出现method类型的节点
    204. 

  204.                 "parameters": [
    205. 

  205.                     {
    206. 

  206.                         "id": "id",
    207. 

  207.                         "name": "系统参数",
    208. 

  208.                         "nodetype": "group",
    209. 

  209.                         "nodes": [{
    210. 

  210.                             "id": "id1",
    211. 

  211.                             "name": "系统参数1",
    212. 

  212.                             "nodetype": "property",
    213. 

  213.                             "description": {
    214. 

  214.                                 "value": "text",
    215. 

  215.                                 "type": "string",
    216. 

  216.                             }
    217. 

  217.                         }, {
    218. 

  218.                             "id": "id2",
    219. 

  219.                             "name": "系统参数2",
    220. 

  220.                             "nodetype": "property",
    221. 

  221.                             "description": {
    222. 

  222.                                 "value": "text",
    223. 

  223.                                 "type": "string",
    224. 

  224.                             }
    225. 

  225.                         }],
    226. 

  226.                     },
    227. 

  227.                     {
    228. 

  228.                         "id": "id",
    229. 

  229.                         "name": "环境参数",
    230. 

  230.                         "nodetype": "group",
    231. 

  231.                         "nodes": [{
    232. 

  232.                             "id": "id1",
    233. 

  233.                             "name": "环境参数1",
    234. 

  234.                             "nodetype": "property",
    235. 

  235.                             "description": {
    236. 

  236.                                 "value": "text",
    237. 

  237.                                 "type": "string",
    238. 

  238.                             }
    239. 

  239.                         }],
    240. 

  240.                     }
    241. 

  241.                 ],
    242. 

  242.                 //提示词（用于自动补全的词语）
    243. 

  243.                 "promptWords":["测试1","麻醉中"]
    244. 

  244.             }
    245. 

  245. 

  246.             window.onload = function () {
    247. 

  247.                 init_demo = function () {
    248. 

  248.                     InitEditor(setting);
    249. 

  249.                 }
    250. 

  250.             }
    251. 

  251.         })();
    252. 

  252. 

  253.         function init_demo() {
    254. 

  254. 

  255.         }
    256. 

  256.     </script>
    257. 

  257. 

  258. </head>
    259. 

  259. <body>
    260. 

  260.     <div class="container-fluid">
    261. 

  261.         <div class="row mt-1">
    262. 

  262.             <div class="zl-side">
    263. 

  263.                 <ul class="nav nav-tabs" id="myTab" role="tablist">
    264. 

  264.                     <li class="nav-item">
    265. 

  265.                         <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">
    266. 

  266.                             <h6 id="tabPartName">部件</h6>
    267. 

  267.                         </a>
    268. 

  268.                     </li>
    269. 

  269.                     <li class="nav-item">
    270. 

  270.                         <a class="nav-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">
    271. 

  271.                             <h6>函数</h6>
    272. 

  272.                         </a>
    273. 

  273.                     </li>
    274. 

  274.                     <li class="nav-item">
    275. 

  275.                         <a class="nav-link" id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">
    276. 

  276.                             <h6>参数</h6>
    277. 

  277.                         </a>
    278. 

  278.                     </li>
    279. 

  279.                 </ul>
    280. 

  280.                 <div class="tab-content" id="myTabContent">
    281. 

  281.                     <div class="tab-pane fade show active" id="first" role="tabpanel" aria-labelledby="first-tab">
    282. 

  282.                         <div class="row" style="height:40px;">
    283. 

  283.                             <div class="col col-12">
    284. 

  284.                                 <div class="app-property-search">
    285. 

  285.                                     <div style="display:flex;">
    286. 

  286.                                         <i style="display: flex; align-content: center; justify-content: center; flex-wrap: wrap;">
    287. 

  287.                                             <svg style="width:20px;height:20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    288. 

  288.                                                 <circle cx="11" cy="11" r="8"></circle>
    289. 

  289.                                                 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    290. 

  290.                                             </svg>
    291. 

  291.                                         </i>
    292. 

  292.                                         <input type="text" autocomplete="off" class="search" name="search" placeholder="输入名称进行搜索..." value="" />
    293. 

  293.                                     </div>
    294. 

  294.                                 </div>
    295. 

  295.                             </div>
    296. 

  296.                         </div>
    297. 

  297.                         <div class="row" style="height:calc(100% - 40px)">
    298. 

  298.                             <div class="col-12 nav-height-item">
    299. 

  299.                                 <div id="resource-tree" class="ztree"></div>
    300. 

  300.                             </div>
    301. 

  301.                         </div>
    302. 

  302.                     </div>
    303. 

  303.                     <div class="tab-pane fade" id="second" role="tabpanel" aria-labelledby="tabpanel-tab">
    304. 

  304.                         <div class="row" style="height:40px;">
    305. 

  305.                             <div class="col col-12">
    306. 

  306.                                 <div class="app-property-search">
    307. 

  307.                                     <div>
    308. 

  308.                                         <i style="display: flex; align-content: center; justify-content: center; flex-wrap: wrap;">
    309. 

  309.                                             <svg style="width:20px;height:20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    310. 

  310.                                                 <circle cx="11" cy="11" r="8"></circle>
    311. 

  311.                                                 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    312. 

  312.                                             </svg>
    313. 

  313.                                         </i>
    314. 

  314.                                         <input type="text" autocomplete="off" class="search" name="search" placeholder="输入名称进行搜索..." value="" />
    315. 

  315.                                     </div>
    316. 

  316.                                 </div>
    317. 

  317.                             </div>
    318. 

  318.                         </div>
    319. 

  319.                         <div class="row" style="height:calc(100% - 40px)">
    320. 

  320.                             <div class="col-12 nav-height-item">
    321. 

  321.                                 <div id="function-tree" class="ztree"></div>
    322. 

  322.                             </div>
    323. 

  323.                         </div>
    324. 

  324.                     </div>
    325. 

  325.                     <div class="tab-pane fade" id="third" role="tabpanel" aria-labelledby="tabpanel-tab">
    326. 

  326.                         <div class="row" style="height:40px;">
    327. 

  327.                             <div class="col col-12">
    328. 

  328.                                 <div class="app-property-search">
    329. 

  329.                                     <div>
    330. 

  330.                                         <i style="display: flex; align-content: center; justify-content: center; flex-wrap: wrap;">
    331. 

  331.                                             <svg style="width:20px;height:20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    332. 

  332.                                                 <circle cx="11" cy="11" r="8"></circle>
    333. 

  333.                                                 <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    334. 

  334.                                             </svg>
    335. 

  335.                                         </i>
    336. 

  336.                                         <input type="text" autocomplete="off" class="search" name="search" placeholder="输入名称进行搜索..." value="" />
    337. 

  337.                                     </div>
    338. 

  338.                                 </div>
    339. 

  339.                             </div>
    340. 

  340.                         </div>
    341. 

  341.                         <div class="row" style="height:calc(100% - 40px)">
    342. 

  342.                             <div class="col-12 nav-height-item">
    343. 

  343.                                 <div id="parameter-tree" class="ztree"></div>
    344. 

  344.                             </div>
    345. 

  345.                         </div>
    346. 

  346.                     </div>
    347. 

  347.                 </div>
    348. 

  348.             </div>
    349. 

  349.             <div class="zl-side-splitter side-splitter-tb">
    350. 

  350.                 <button class="zl-side-btn-svg" type="button" aria-expanded="true" title="折叠">
    351. 

  351.                     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="8px" height="24px" viewBox="0 0 8 24" enable-background="new 0 0 8 24" xml:space="preserve"><g opacity="0.8"> <polygon fill="#231F20" points="2,12 6,8 6,16  " /></g></svg>
    352. 

  352.                 </button>
    353. 

  353.             </div>
    354. 

  354.             <div class="zl-main nav-height-editor">
    355. 

  355.                 <div class="editor-btn px-3 editor-test-button" style="text-align: right;">
    356. 

  356.                     <button class="btn btn-info btn-sm btn-editor" id="editor-test">校验</button>
    357. 

  357.                 </div>
    358. 

  358.                 <div id="editor" class="editor-style"></div>
    359. 

  359.                 <div class="lay-message">
    360. 

  360.                     <div class="lay-message-title" id="messageTitle">
    361. 

  361.                         <span class="message-title-name">输出信息:</span>
    362. 

  362.                         <span class="message-title-icon"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="message-icon" x="0px" y="0px" width="8px" height="24px" viewBox="0 0 8 24" enable-background="new 0 0 8 24" xml:space="preserve"><g opacity="0.8"> <polygon fill="#231F20" points="2,12 6,8 6,16  "></polygon></g></svg></span>
    363. 

  363.                     </div>
    364. 

  364.                     <div class="lay-message-value" id="debug-message">
    365. 

  365. 

  366.                     </div>
    367. 

  367.                 </div>
    368. 

  368.             </div>
    369. 

  369.         </div>
    370. 

  370. 

  371.         <div class="row">
    372. 

  372.             <div class="col-sm-12 mt-1">
    373. 

  373.                 <div id="text">
    374. 

  374. 

  375.                 </div>
    376. 

  376.             </div>
    377. 

  377.         </div>
    378. 

  378.     </div>
    379. 

  379.     <script>
    380. 

  380.         (function () {
    381. 

  381.             //消息折叠展开
    382. 

  382.             $('#messageTitle').click(function (e) {
    383. 

  383.                 if ($(".lay-message").hasClass("message-close")) {
    384. 

  384.                     $(".lay-message").removeClass("message-close");
    385. 

  385.                 } else {
    386. 

  386.                     $(".lay-message").addClass("message-close");
    387. 

  387.                 }
    388. 

  388.             });
    389. 

  389.             //分割功能
    390. 

  390.             Divsions({
    391. 

  391.                 dDom: document.querySelector('.zl-side-splitter'),
    392. 

  392.                 direction: 'vertical',
    393. 

  393.                 foldDir: 'left',
    394. 

  394.                 minSize: [{
    395. 

  395.                     direction: 'prev',
    396. 

  396.                     minisize: 144,
    397. 

  397.                     opt: 'fold'
    398. 

  398.                 }],
    399. 

  399.                 //拖动结束后执行
    400. 

  400.                 dropEnd() {
    401. 

  401.                     if (editor) {
    402. 

  402.                         editor.layout();
    403. 

  403.                     }
    404. 

  404.                 }
    405. 

  405.             })
    406. 

  406. 

  407.             // 分割功能
    408. 

  408.             function Divsions(opt) {
    409. 

  409.                 let dDom = opt.dDom // 分割线条
    410. 

  410.                 let initX = 0; // 设置偏移量
    411. 

  411.                 let fx = opt.direction // 设置分割方向 vertical(左右) crosswise(上下分割)
    412. 

  412.                 let minsize = opt.minSize // 设置限制[{direction: 'prev', minisize: 200, opt:'fold'}]
    413. 

  413.                 let prSize = null // 记录原始大小
    414. 

  414.                 let foldDir = opt.foldDir // 折叠方向
    415. 

  415.                 let dropEnd = opt.dropEnd;
    416. 

  416. 

  417.                 dDom.addEventListener('mousedown', BindDivisionClickEvent);
    418. 

  418. 

  419.                 dDom.querySelector('button').addEventListener('click', function (e) {
    420. 

  420.                     e.stopPropagation()
    421. 

  421.                     if (e.button !== 0) return
    422. 

  422.                     Flod();
    423. 

  423.                 });
    424. 

  424. 

  425.                 /**绑定分割条的事件(左右) */
    426. 

  426.                 function BindDivisionClickEvent(e) {
    427. 

  427.                     e.preventDefault()
    428. 

  428.                     if (e.button !== 0) return
    429. 

  429.                     initX = fx === 'vertical' ? e.clientX : e.clientY;
    430. 

  430.                     fx === 'vertical' ? dDom.prOffsetLeft = dDom.offsetLeft : dDom.prOffsetTop = dDom.offsetTop
    431. 

  431.                     dDom.style.position = 'relative';
    432. 

  432.                     document.addEventListener('mousemove', BindDivsionMoveEvent);
    433. 

  433.                     document.addEventListener('mouseup', BindDivsionUpMouseEvent);
    434. 

  434.                 }
    435. 

  435. 

  436.                 function BindDivsionMoveEvent(e) {
    437. 

  437.                     if (e.button !== 0) return
    438. 

  438.                     e.preventDefault();
    439. 

  439.                     if (!dDom) return;
    440. 

  440.                     fx === 'vertical' ? dDom.style.left = (e.clientX - initX) + 'px' : dDom.style.top = (e.clientY - initX) + 'px';
    441. 

  441.                 }
    442. 

  442. 

  443.                 function BindDivsionUpMouseEvent(e) {
    444. 

  444.                     document.removeEventListener('mousemove', BindDivsionMoveEvent);
    445. 

  445.                     document.removeEventListener('mouseup', BindDivsionUpMouseEvent);
    446. 

  446.                     CalcDomWidth();
    447. 

  447.                     typeof dropEnd === 'function' && dropEnd()
    448. 

  448.                 }
    449. 

  449. 

  450.                 /**计算dom 宽度 */
    451. 

  451.                 function CalcDomWidth() {
    452. 

  452.                     CalcMiniSize()
    453. 

  453.                     dDom.style.position = ''; // 清除分割条的定位样式
    454. 

  454.                     dDom.style[fx === 'vertical' ? 'left' : 'top'] = '';
    455. 

  455.                 }
    456. 

  456. 

  457.                 /**设置大小 */
    458. 

  458.                 function setSize(size) {
    459. 

  459.                     fx === 'vertical' ? (function () {
    460. 

  460.                         dDom.previousElementSibling.style.width = size.prev; // 设置前一个的dom宽度
    461. 

  461.                         dDom.nextElementSibling.style.width = size.next; // 设置后者的宽度
    462. 

  462.                     })() : (function () {
    463. 

  463.                         dDom.previousElementSibling.style.height = size.prev; // 设置前一个的dom宽度
    464. 

  464.                         dDom.nextElementSibling.style.height = size.next; // 设置后者的宽度
    465. 

  465.                     })()
    466. 

  466. 

  467.                 }
    468. 

  468. 

  469.                 /**获取上一级的大小 */
    470. 

  470.                 function getPrevSize() {
    471. 

  471.                     let cx = fx === 'vertical' ? dDom.offsetLeft : dDom.offsetTop; // 当前鼠标距离左边框距离
    472. 

  472.                     if ((fx === 'vertical' ? dDom.prOffsetLeft : dDom.prOffsetTop) === cx) return; // 未发生位置偏移时，停止操作
    473. 

  473.                     return cx
    474. 

  474.                 }
    475. 

  475. 

  476.                 /**获取总宽度 */
    477. 

  477.                 function getAllSize() {
    478. 

  478.                     return fx === 'vertical' ? dDom.parentElement.clientWidth : dDom.parentElement.clientHeight;
    479. 

  479.                 }
    480. 

  480. 

  481.                 /**折叠 */
    482. 

  482.                 function Flod() {
    483. 

  483.                     if (dDom.classList.contains('is-flod')) {
    484. 

  484.                         foldDir === 'left' || foldDir === 'top' ? dDom.previousElementSibling.style.display = '' : dDom.nextElementSibling.style.display = '';
    485. 

  485.                         setSize(prSize)
    486. 

  486.                         dDom.classList.remove('is-flod')
    487. 

  487.                     } else {
    488. 

  488.                         prSize = {
    489. 

  489.                             prev: fx === 'vertical' ? dDom.previousElementSibling.style.width : dDom.previousElementSibling.style.height,
    490. 

  490.                             next: fx === 'vertical' ? dDom.nextElementSibling.style.width : dDom.nextElementSibling.style.height
    491. 

  491.                         }
    492. 

  492.                         // 折叠
    493. 

  493.                         // 获取折叠方向
    494. 

  494.                         if (foldDir === 'left' || foldDir === 'top') {
    495. 

  495.                             dDom.previousElementSibling.style.display = 'none';
    496. 

  496.                             dDom.nextElementSibling.style[fx === 'vertical' ? 'width' : 'height'] = 'calc(100% - 10px)'
    497. 

  497.                         } else {
    498. 

  498.                             dDom.nextElementSibling.style.display = 'none';
    499. 

  499.                             dDom.previousElementSibling.style[fx === 'vertical' ? 'width' : 'height'] = 'calc(100% - 10px)'
    500. 

  500.                         }
    501. 

  501.                         dDom.classList.add('is-flod')
    502. 

  502.                     }
    503. 

  503. 

  504.                     if (editor) {
    505. 

  505.                         editor.layout();
    506. 

  506.                         console.log("enter");
    507. 

  507.                     }
    508. 

  508.                 }
    509. 

  509. 

  510.                 /**计算最小问题 */
    511. 

  511.                 function CalcMiniSize() {
    512. 

  512.                     let pSize = getPrevSize()
    513. 

  513.                     if (pSize === undefined) return
    514. 

  514.                     let aSize = getAllSize()
    515. 

  515.                     let nSize = aSize - pSize
    516. 

  516.                     let psize = getMinSize('prev') // 获取前一个dom的最小值
    517. 

  517.                     let nsize = getMinSize('next') // 获取后一个dom的最小值
    518. 

  518. 

  519.                     let pState = psize && pSize < psize.minisize && psize.opt
    520. 

  520.                     let nState = nsize && nSize < nsize.minisize && nsize.opt
    521. 

  521.                     // 折叠
    522. 

  522.                     if (pState === 'fold' || nState === 'fold') {
    523. 

  523.                         Flod()
    524. 

  524.                     } else {
    525. 

  525.                         dDom.previousElementSibling.style.display === 'none' ? dDom.previousElementSibling.style.display = '' : '';
    526. 

  526.                         dDom.nextElementSibling.style.display === 'none' ? dDom.nextElementSibling.style.display = '' : '';
    527. 

  527.                         let f = (pSize / aSize).toFixed(2) // 算出比例
    528. 

  528.                         // 剩下则是正常执行
    529. 

  529.                         setSize({
    530. 

  530.                             prev: `calc(${f * 100}% - 5px)`,
    531. 

  531.                             next: `calc(${(1 - f) * 100}% - 5px)`
    532. 

  532.                         })
    533. 

  533.                         dDom.classList.remove('is-flod')
    534. 

  534.                     }
    535. 

  535.                 }
    536. 

  536. 

  537.                 /**获取最小宽度 */
    538. 

  538.                 function getMinSize(d) {
    539. 

  539.                     return minsize.find(a => a.direction === d);
    540. 

  540.                 }
    541. 

  541.             }
    542. 

  542.         })()
    543. 

  543.     </script>
    544. 

  544. </body>
    545. 

  545. </html>
    546.