SingleRowEditor.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. /**
  2. * 单行表达式编辑器
  3. * @author hjh
  4. */
  5. //表达式编辑器的唯一对外接口
  6. window.zlExpressEditor = {};
  7. //采用闭包的方式进行隔离
  8. (function () {
  9. //表达式执行器
  10. let expressExecutor;
  11. /**
  12. * 资源信息
  13. * */
  14. let resourceInfo = [];
  15. /**
  16. * 所有的叶子节点
  17. * */
  18. let allLeafNodes = [];
  19. /**
  20. * 枚举选项的所有配置信息
  21. * key:name
  22. * value:setting
  23. */
  24. let enumSettings = {};
  25. /**
  26. * 初始化编辑器环境[只以最后一次调用生效]
  27. * @param {any} setting
  28. */
  29. window.zlExpressEditor.InitEditorEnvironment = function (setting, runtime = false) {
  30. //资源信息
  31. let resource = setting.resource;
  32. allLeafNodes = [];
  33. //解析资源信息
  34. resourceInfo = EnvironmentHelper.ParseResource(resource);
  35. //提取叶子节点
  36. for (let info of resourceInfo) {
  37. let nodes = EnvironmentHelper.ExtractLeafNodes(info);
  38. allLeafNodes.push(...nodes);
  39. }
  40. //将所有的叶子节点按照文本的长度进行排序
  41. allLeafNodes = allLeafNodes.sort((a, b) => b._path.length - a._path.length);
  42. //将JS代码添加库到monaco
  43. let jscode = EnvironmentHelper.ChangeToJsLib(resourceInfo);
  44. //仅设计时才添加库
  45. if (!runtime && monaco != null) {
  46. monaco.languages.typescript.javascriptDefaults.addExtraLib(jscode, 'resource.js');
  47. }
  48. expressExecutor = new ExpressExecutor(jscode);
  49. };
  50. /**
  51. * 根据设置获取脚本环境配置
  52. * @param {any} setting
  53. * @returns
  54. */
  55. window.zlExpressEditor.GetEditorEnvironment = function (setting) {
  56. let env = {};
  57. //资源信息
  58. let resource = setting.resource;
  59. env.allLeafNodes = [];
  60. //解析资源信息
  61. env.resourceInfo = EnvironmentHelper.ParseResource(resource);
  62. //提取叶子节点
  63. for (let info of env.resourceInfo) {
  64. let nodes = EnvironmentHelper.ExtractLeafNodes(info);
  65. env.allLeafNodes.push(...nodes);
  66. }
  67. //将所有的叶子节点按照文本的长度进行排序
  68. env.allLeafNodes = env.allLeafNodes.sort((a, b) => b._path.length - a._path.length);
  69. //将JS代码添加库到monaco
  70. let jscode = EnvironmentHelper.ChangeToJsLib(env.resourceInfo);
  71. //仅设计时才添加库
  72. if (monaco != null) {
  73. monaco.languages.typescript.javascriptDefaults.addExtraLib(jscode, 'resource.js');
  74. }
  75. env.expressExecutor = new ExpressExecutor(jscode);
  76. return env;
  77. };
  78. /**
  79. * 创建单行表达式编辑器
  80. * @param {any} node html节点(div)
  81. * @param {any} setting 配置信息
  82. */
  83. window.zlExpressEditor.CreateSingleRowEditor = function (node, setting, changeCallback, env) {
  84. //debugger;
  85. //初始化资源树
  86. let _editor = monaco.editor.create(node, {
  87. minimap: {
  88. enabled: false
  89. },
  90. fontSize: 20,
  91. lineNumbers: 'off',
  92. language: setting.language ?? "javascript"
  93. });
  94. //将公共环境私有化【用于适配每个单行表达式不同的环境】
  95. _editor.resourceInfo = resourceInfo;
  96. _editor.allLeafNodes = allLeafNodes;
  97. _editor.expressExecutor = expressExecutor;
  98. if (env) {
  99. _editor.resourceInfo = env.resourceInfo;
  100. _editor.allLeafNodes = env.allLeafNodes;
  101. _editor.expressExecutor = env.expressExecutor;
  102. }
  103. if (setting.useCommonFunctions) {
  104. //启用基础函数库
  105. EnvironmentHelper.LoadExtraJsSource("./extra/commonFunctions.js");
  106. }
  107. //获取值
  108. _editor.GetJsCode = function () {
  109. return EnvironmentHelper.ChangeDisplayToCode(_editor.getModel().getValue(), _editor.allLeafNodes, enumSettings);
  110. //return _editor.getModel().getValue();
  111. };
  112. //设置值
  113. _editor.SetJsCode = function (jscode) {
  114. _editor.getModel().setValue(EnvironmentHelper.ChangeCodeToDisplay(jscode, _editor.allLeafNodes, enumSettings));
  115. //_editor.getModel().setValue(jscode);
  116. //todo:如果含有选项内容,则设置为只读,反之则设置为可写
  117. };
  118. //设置值
  119. _editor.GetFullJsCode = function () {
  120. return { display: _editor.getModel().getValue(), code: _editor.GetJsCode() };
  121. };
  122. //当内容变化的时候,调用内容变化回调
  123. if (changeCallback) {
  124. _editor.getModel().onDidChangeContent(e => changeCallback(e));
  125. }
  126. _editor.SetJsCode(setting.value);
  127. return _editor;
  128. };
  129. /**
  130. * 执行表达式代码
  131. * @param {any} jsCode
  132. */
  133. window.zlExpressEditor.ExecExpress = function (jsCode) {
  134. jsCode = EnvironmentHelper.ChangeCodeToDisplay(jsCode, allLeafNodes, enumSettings);
  135. return expressExecutor.Run(jsCode);
  136. };
  137. /**
  138. * 更新环境资源信息
  139. * @param {Array} updateData
  140. *
  141. * [{
  142. * paths:["path","path","path"],
  143. * value:obj
  144. * },{
  145. * paths:["path","path","path"],
  146. * value:obj
  147. * }]
  148. *
  149. */
  150. window.zlExpressEditor.UpdateResourceInfo = function (updateData) {
  151. if (updateData == null) {
  152. return;
  153. }
  154. //更新环境的JS
  155. let jsCode = "";
  156. updateData.forEach(p => {
  157. let target = resourceInfo;
  158. p.paths.forEach(pt => {
  159. target = target.find(i => i.id == pt);
  160. if (target == null) {
  161. //忽略并警告
  162. console.warn(`更新资源环境出错,找不到对应的path,${p.paths.join(".")}`);
  163. return;
  164. }
  165. if (target.children != null) {
  166. target = target.children;
  167. }
  168. });
  169. if (target != null) {
  170. target.propertyValue = p.value;
  171. jsCode += (target._path + " = " + target.GetValueDisplayString(target.propertyValue, target.propertType) + ";");
  172. }
  173. });
  174. //执行更新代码
  175. zlExpressEditor.ExecExpress(jsCode);
  176. };
  177. })();