common.ts 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205
  1. import { reactive, ref } from 'vue';
  2. import { MessagePlugin } from 'tdesign-vue-next';
  3. import localforage from 'localforage';
  4. import dayjs from 'dayjs';
  5. import axios from 'axios';
  6. import router from '@/router/index';
  7. import { useUser } from '@/services/user';
  8. import { showNotification, Meta2dBackData, checkData } from '@/services/utils';
  9. import { noLoginTip, localStorageName } from '@/services/utils';
  10. import { upload, dataURLtoBlob } from '@/services/file';
  11. import { delImage, addCollection, updateCollection, getLe5leV } from '@/services/api';
  12. import { baseVer } from '@/services/upgrade';
  13. import { debounce } from './debouce';
  14. import { deepClone, isDomShapes } from '@meta2d/core';
  15. import { useSelection } from '@/services/selections';
  16. import { rootDomain } from './defaults';
  17. import { updateObject } from './object';
  18. const { select } = useSelection();
  19. const assets = reactive({
  20. home: `https://${rootDomain.slice(1)}`,
  21. account: `https://account${rootDomain}',`,
  22. '3d': `https://3d${rootDomain}`,
  23. '2d': `https://2d${rootDomain}`,
  24. helps_v: [
  25. {
  26. name: '产品介绍',
  27. url: `https://doc${rootDomain}/document/118756411`,
  28. },
  29. {
  30. name: '快速上手',
  31. url: `https://doc${rootDomain}/document/119363000`,
  32. },
  33. {
  34. name: '使用手册',
  35. url: `https://doc${rootDomain}/document/118764244`,
  36. },
  37. {
  38. name: '快捷键',
  39. url: `https://doc${rootDomain}/document/119620214`,
  40. divider: true,
  41. },
  42. {
  43. name: '企业服务与支持',
  44. url: `https://doc${rootDomain}/document/119296274`,
  45. divider: true,
  46. },
  47. {
  48. name: '关于我们',
  49. url: `https://${rootDomain.slice(1)}/about.html`,
  50. },
  51. ],
  52. });
  53. export const useAssets = () => {
  54. const getAssets = async () => {
  55. // 官网或安装包版本
  56. // if (import.meta.env.VITE_TRIAL != 1) {
  57. // return;
  58. // }
  59. // 企业版
  60. const ret = await axios.get('/api/assets');
  61. if (ret) {
  62. Object.assign(assets, ret);
  63. }
  64. };
  65. return {
  66. assets,
  67. getAssets,
  68. };
  69. };
  70. const meta2dData = reactive({
  71. name:'新建项目'
  72. });
  73. export const useMeta2dData = () => {
  74. const getMeta2dData = async () => {
  75. return meta2dData;
  76. };
  77. const setMeta2dData = async (data:any) => {
  78. for(const key in data){
  79. meta2d.store.data[key] = data[key];
  80. }
  81. updateObject(meta2dData, data);
  82. };
  83. return {
  84. meta2dData,
  85. getMeta2dData,
  86. setMeta2dData,
  87. };
  88. };
  89. const dot = ref(false);
  90. export const useDot = () => {
  91. const getDot = async () => {
  92. return dot;
  93. };
  94. const setDot = async (value = true) => {
  95. dot.value = value;
  96. if (value) {
  97. tree.patch = true;
  98. debounce(autoSave, 3000);
  99. }
  100. };
  101. return {
  102. dot,
  103. getDot,
  104. setDot,
  105. };
  106. };
  107. const { user } = useUser();
  108. export enum SaveType {
  109. Save,
  110. SaveAs,
  111. }
  112. let saveTimer: any = 0;
  113. let saveFlag: boolean = true;
  114. export function queryURLParams(value?: string) {
  115. let url = value || window.location.href.split('?')[1];
  116. const urlSearchParams = new URLSearchParams(url);
  117. const params = Object.fromEntries(urlSearchParams.entries());
  118. return params;
  119. }
  120. // TODO 保存图纸
  121. export const save = async (
  122. type: SaveType = SaveType.Save,
  123. vType?: string,
  124. notice?: boolean,
  125. userFlag?:number,
  126. onlyJson?:boolean
  127. ) => {
  128. if (!saveFlag) {
  129. return;
  130. }
  131. if (saveTimer) {
  132. clearTimeout(saveTimer);
  133. }
  134. saveFlag = false;
  135. saveTimer = setTimeout(() => {
  136. saveFlag = true;
  137. }, 2000);
  138. // 区分是模板还是方案
  139. meta2d.stopAnimate();
  140. if( vType === 'v.component'){
  141. // @ts-ignore
  142. meta2d.store.data.component = true
  143. }
  144. const data: Meta2dBackData = meta2d.data();
  145. if(!data.pens.length){
  146. MessagePlugin.warning('画布为空,无法保存!');
  147. return;
  148. }
  149. if (!(user && user.id)) {
  150. MessagePlugin.warning(noLoginTip);
  151. localforage.setItem(localStorageName, JSON.stringify(data));
  152. return;
  153. }
  154. // 保存为组件
  155. if (
  156. vType === 'v.component' &&
  157. meta2d.store.active &&
  158. meta2d.store.active.length === 1 &&
  159. meta2d.store.active[0].name === 'combine'
  160. ) {
  161. let comData: any = {
  162. center: data.center,
  163. folder: '',
  164. origin: data.origin,
  165. scale: data.scale,
  166. x: data.x,
  167. y: data.y,
  168. };
  169. // comData.name =
  170. // (meta2d.store.active[0] as any).description ||
  171. // `meta2d.${new Date().toLocaleString()}`;
  172. comData.name = (meta2d.store.active[0] as any).description ||'新建项目';
  173. let blob: Blob;
  174. try {
  175. blob = dataURLtoBlob(meta2d.activeToPng(10) + '');
  176. } catch (e) {
  177. MessagePlugin.error(
  178. '无法下载,宽度不合法,可能没有选中画笔/选中画笔大小超出浏览器最大限制'
  179. );
  180. return;
  181. }
  182. //todo 传参数
  183. const file:any = await upload(blob, true, comData.name , `/大屏/组件/默认`,'new');
  184. if (!file) {
  185. return;
  186. }
  187. // // 缩略图
  188. comData.image = file.url;
  189. comData.fullname = file.fullname;
  190. comData.component = true;
  191. const allPens = meta2d.canvas.getAllByPens(meta2d.store.active);
  192. comData.componentDatas = meta2d.toComponent(
  193. allPens,
  194. (meta2d.store.data as Meta2dBackData).showChild,
  195. false
  196. );
  197. comData.version = data.version;
  198. let ids = allPens.map(item=>item.id);
  199. comData.pens = data.pens.filter((pen)=>ids.includes(pen.id));
  200. const body = {
  201. data:comData,
  202. image:comData.image,
  203. name:comData.name,
  204. folder: '',
  205. template:userFlag===2?true:(data.isTemplate||false),
  206. case:comData.case
  207. }
  208. let ret: any = await addCollection('v.component', body); // 新增
  209. if (ret.error) {
  210. return;
  211. }
  212. MessagePlugin.success('成功保存为组件!');
  213. meta2d.emit('business-save', vType);
  214. return;
  215. }
  216. //删除老图片 新图片上传
  217. checkData(data);
  218. if (
  219. (globalThis as any).beforeSaveMeta2d &&
  220. !(await (globalThis as any).beforeSaveMeta2d(data))
  221. ) {
  222. return;
  223. }
  224. if(!data.isSystem && data.id){
  225. if(vType === 'v-template' && (data.component||data.isTemplate===false)){
  226. //模版 -> 组件/方案
  227. delete data.id;
  228. delete data._id;
  229. delete data.folder;
  230. }else if(vType === 'v.component' && !data.component){
  231. //组件 -> 模版/方案
  232. delete data.id;
  233. delete data._id;
  234. delete data.folder;
  235. }else if(!vType && (data.isTemplate&&data.component)){
  236. //方案 -> 模版/组件
  237. delete data.id;
  238. delete data._id;
  239. delete data.folder;
  240. }
  241. }
  242. const thumbFolder =
  243. vType === 'v-template'
  244. ? '模板'
  245. : vType === 'v.component'
  246. ? '组件'
  247. : '方案';
  248. const params = queryURLParams();
  249. if (type === SaveType.SaveAs) {
  250. //另存为去掉teams信息
  251. delete data.teams;
  252. delete data.folder;
  253. delete data.id;
  254. }
  255. //如果不是自己创建的团队图纸,就不去修改缩略图(没有权限去删除缩略图)
  256. if (!data.name) {
  257. // 文件名称
  258. // data.name = `meta2d.${new Date().toLocaleString()}`;
  259. data.name = `新建项目`;
  260. (meta2d.store.data as Meta2dBackData).name = data.name;
  261. }
  262. if (data.component || vType === 'v.component') {
  263. data.component = true;
  264. // pens 存储原数据用于二次编辑 ; componentDatas 组合后的数据,用于复用
  265. data.componentDatas = meta2d.toComponent(
  266. undefined,
  267. (meta2d.store.data as Meta2dBackData).showChild,
  268. false //自定义组合节点生成默认锚点
  269. );
  270. } else {
  271. data.component = false; // 必要值
  272. }
  273. let collection = data.component ? 'v.component' : 'v';
  274. if(data.id && data.ownerId !== user.id){
  275. //不是拥有者,判断有无编辑权限
  276. let temRet:any = await updateCollection(collection, {id:data.id || data._id, name: data.name});
  277. if(temRet.error){
  278. return;
  279. }
  280. }
  281. if(!onlyJson){
  282. // if (!data.id || (data.ownerId === user.id)) {
  283. // 图纸不是创建用户的图纸 先不改缩略图
  284. for (const pen of meta2d.store.data.pens) {
  285. if (['iframe'].includes(pen.name)) {
  286. //重新生成绘制图片
  287. pen.onRenderPenRaw?.(pen);
  288. }
  289. }
  290. let blob: Blob;
  291. try {
  292. blob = dataURLtoBlob(meta2d.toPng(10) + '');
  293. } catch (e) {
  294. MessagePlugin.error(
  295. '无法下载,宽度不合法,画布可能没有画笔/画布大小超出浏览器最大限制'
  296. );
  297. return;
  298. }
  299. let conflict = 'new';
  300. // if (data.id && type === SaveType.Save) {
  301. // // conflict = undefined
  302. // if (data.image && !(await delImage(data.image))) {
  303. // return;
  304. // }
  305. // }
  306. const file:any = await upload(
  307. blob,
  308. true,
  309. // 更新是缩略图路径一般为/file/2023/1025/1/1/新建项目_dfa573a5
  310. // data.image?.split('/').pop()更新操作项目名不变
  311. data.name,// + '.' + dayjs().format('YYYYMMDDHHMMss'),
  312. `/大屏/${thumbFolder}/${data.folder || '默认'}`,
  313. conflict
  314. );
  315. if (!file) {
  316. return;
  317. }
  318. // if (data.id && type === SaveType.Save) {
  319. // // conflict = undefined
  320. // if (data.image && !(await delImage(data.image))) {
  321. // return;
  322. // }
  323. // }
  324. // 缩略图
  325. data.image = file.url;
  326. data.filename = file.filename;
  327. (meta2d.store.data as Meta2dBackData).image = data.image;
  328. (meta2d.store.data as Meta2dBackData).filename = data.filename;
  329. // }
  330. }else{
  331. data.image = undefined;
  332. }
  333. let ret: any;
  334. !data.version && (data.version = baseVer);
  335. // TODO
  336. if (!data.folder) {
  337. data.folder = ''; // folder.name;
  338. }
  339. let childIds = [];
  340. data.pens.forEach((pen)=>{
  341. if(pen.name === 'iframe'){
  342. if(pen.iframe.indexOf(`view${rootDomain}`) !== -1){
  343. let params = queryURLParams(pen.iframe.split('?')[1])
  344. childIds.push(params.id);
  345. }
  346. }
  347. });
  348. // data.childIds = childIds;
  349. const body:any = {
  350. data,
  351. image:data.image,
  352. name:data.name,
  353. folder:data.folder,
  354. // shared:true,
  355. template:userFlag===2?true:(data.isTemplate||false),
  356. case:data.case,
  357. childIds
  358. }
  359. delete data.name;
  360. delete data.image;
  361. delete data.folder;
  362. delete data.case;
  363. delete data.isSystem;
  364. delete data.isTemplate;
  365. if(params.n && data.ownerId !== user.id){
  366. for (const k of delAttrs) {
  367. delete (data as any)[k];
  368. }
  369. }
  370. if (type === SaveType.SaveAs) {
  371. // 另存为一定走 新增 ,由于后端 未控制 userId 等属性,清空一下
  372. for (const k of delAttrs) {
  373. delete (data as any)[k];
  374. }
  375. body.template = false;
  376. body.component = false;
  377. ret = await addCollection(collection, body);
  378. } else {
  379. // if (data._id && data.teams && data.owner?.id !== user.id) {
  380. // // 团队图纸 不允许修改文件夹信息
  381. // delete data.folder;
  382. // ret = await updateCollection(collection, data);
  383. // } else
  384. if (data.id || data._id) {
  385. body.ownerId = data.ownerId;
  386. body.ownerName = data.ownerName;
  387. ret = await updateCollection(collection, {id:data.id || data._id,...body});
  388. } else {
  389. ret = await addCollection(collection, body); // 新增
  390. }
  391. }
  392. if (ret.error) {
  393. return;
  394. }
  395. // 保存图纸之后的钩子函数
  396. globalThis.afterSaveMeta2d && (await globalThis.afterSaveMeta2d(ret));
  397. if (
  398. !data.id ||
  399. router.currentRoute.value.query.version ||
  400. type === SaveType.SaveAs // 另存为肯定走新增,也会产生新的 id
  401. ) {
  402. data.id = ret.id;
  403. (meta2d.store.data as Meta2dBackData).id = data.id;
  404. router.replace({
  405. path: '/',
  406. query: {
  407. id: data.id,
  408. r: Date.now() + '',
  409. c: vType === 'v.component' ? 1 : undefined,
  410. },
  411. });
  412. }
  413. notice && MessagePlugin.success('保存成功!');
  414. meta2d.emit('business-save', vType);
  415. dot.value = false;
  416. localforage.removeItem(localStorageName);
  417. return true;
  418. };
  419. export const chargeDialogShow = ref(false);
  420. export const autoSaveAS = async(id:string)=>{
  421. //先请求打开图纸
  422. const ret: any = await getLe5leV(id);
  423. if(!ret.data && ret.price>0){
  424. return;
  425. }
  426. sessionStorage.setItem('opening', '1');
  427. router.push({
  428. path: '/',
  429. query: {
  430. r: Date.now() + '',
  431. },
  432. });
  433. //去除图纸一些信息
  434. for (const k of delAttrs) {
  435. delete ret[k];
  436. delete ret.data[k];
  437. }
  438. chargeDialogShow.value = false;
  439. meta2d.open(ret.data);
  440. meta2d.fitView();
  441. //另存为付费用户图纸
  442. setTimeout(()=>{
  443. save(SaveType.SaveAs, '', undefined, 1);
  444. },500)
  445. }
  446. const pen = ref(false);
  447. export const drawPen = () => {
  448. meta2d.inactive();
  449. try {
  450. if (!meta2d.canvas.drawingLineName) {
  451. // 开了钢笔,需要关掉铅笔
  452. meta2d.canvas.pencil && drawingPencil();
  453. meta2d.drawLine(meta2d.store.options.drawingLineName);
  454. } else {
  455. meta2d.finishDrawLine();
  456. meta2d.drawLine();
  457. }
  458. //钢笔
  459. pen.value = !!meta2d.canvas.drawingLineName;
  460. } catch (e: any) {
  461. MessagePlugin.warning(e.message);
  462. }
  463. };
  464. const pencil = ref(false);
  465. const drawingPencil = () => {
  466. try {
  467. if (!meta2d.canvas.pencil) {
  468. // 开了铅笔需要关掉钢笔
  469. meta2d.canvas.drawingLineName && drawPen();
  470. meta2d.drawingPencil();
  471. } else {
  472. meta2d.stopPencil();
  473. }
  474. pencil.value = meta2d.canvas.pencil || false;
  475. } catch (e: any) {
  476. MessagePlugin.warning(e.message);
  477. }
  478. };
  479. export const magnifier = ref(false);
  480. export const showMagnifier = () => {
  481. if (!meta2d.canvas.magnifierCanvas.magnifier) {
  482. meta2d.showMagnifier();
  483. } else {
  484. meta2d.hideMagnifier();
  485. }
  486. magnifier.value = meta2d.canvas.magnifierCanvas.magnifier;
  487. };
  488. export const map = ref(false);
  489. export const showMap = () => {
  490. if (!meta2d.map?.isShow) {
  491. meta2d.showMap();
  492. } else {
  493. meta2d.hideMap();
  494. }
  495. map.value = meta2d.map?.isShow;
  496. };
  497. export const title = '系统可能不会保存您所做的更改,是否继续?';
  498. export const unLogin = '未登录,系统可能不会保存您的文件,是否继续?';
  499. export const unsave = '当前文件未保存,是否继续?(开通vip可享受自动保存服务)';
  500. export function autoSave(force = false) {
  501. if (!dot.value && (!force || router.currentRoute.value.query.id)) {
  502. return;
  503. }
  504. const data: any = meta2d.data();
  505. if (
  506. user &&
  507. user.id &&
  508. user.vip &&
  509. (data.id||data._id) &&
  510. !data.component &&
  511. // data.owner &&
  512. data.ownerId === user.id
  513. ) {
  514. let _vType = '';
  515. if (data.isTemplate) {
  516. _vType = 'v-template';
  517. }
  518. save(SaveType.Save, _vType, false, undefined, true);
  519. } else {
  520. // data.updateAt = dayjs().format();
  521. localforage.setItem(localStorageName, JSON.stringify(data));
  522. }
  523. }
  524. // export const notificFn = async (fn: Function, params: any) => {
  525. // if (!(user && user.id)) {
  526. // if (await showNotification(unLogin)) {
  527. // fn(params);
  528. // }
  529. // } else {
  530. // if (dot.value) {
  531. // if (user.isVip) {
  532. // if (await save(SaveType.Save)) {
  533. // fn(params);
  534. // }
  535. // } else {
  536. // if (await showNotification(unsave)) {
  537. // fn(params);
  538. // }
  539. // }
  540. // } else {
  541. // fn(params);
  542. // }
  543. // }
  544. // };
  545. export const onScaleWindow = () => {
  546. // meta2d.fitView();
  547. meta2d.fitSizeView(true, 32);
  548. };
  549. export const onScaleFull = () => {
  550. meta2d.scale(1);
  551. // meta2d.centerView();
  552. const { x, y, origin, center } = meta2d.store.data;
  553. meta2d.translate(-x - origin.x, -y - origin.y);
  554. meta2d.translate(meta2d.store.options.x || 0, meta2d.store.options.y || 0);
  555. };
  556. export const blank = async (save = true) => {
  557. meta2d.canvas.drawingLineName && drawPen();
  558. meta2d.canvas.pencil && drawingPencil();
  559. meta2d.canvas.magnifierCanvas.magnifier && showMagnifier();
  560. meta2d.map?.isShow && showMap();
  561. save && autoSave(true);
  562. dot.value = false;
  563. sessionStorage.removeItem('openingId');
  564. meta2d.open({ pens: [], background: '#1e2430', color: '#bdc7db', width: 1920, height: 1080 } as any);
  565. select();
  566. };
  567. export const newFileDialog = ref({
  568. show:false
  569. });
  570. // let lastTime = false;
  571. export const newFile = () => {
  572. const hasPen = meta2d.store.data.pens.length;
  573. if(hasPen&&dot.value){
  574. // MessagePlugin.warning('当前画布未保存,请先保存!');
  575. // lastTime = true;
  576. // return;
  577. newFileDialog.value.show = true;
  578. return;
  579. }
  580. // lastTime = false;
  581. blank();
  582. router.push({
  583. path: '/',
  584. query: {
  585. r: Date.now() + '',
  586. },
  587. });
  588. // setTimeout(() => {
  589. // autoSave(true);
  590. // }, 300);
  591. meta2d.emit('business-assets',true);
  592. };
  593. export const inTreePanel = reactive({
  594. value: false,
  595. timer: undefined,
  596. });
  597. const tree = reactive({
  598. list: [],
  599. patch: true,
  600. });
  601. export const getPenTree = () => {
  602. tree.patch = false;
  603. const list = [];
  604. for (const item of meta2d.store.data.pens) {
  605. if (item.parentId) {
  606. continue;
  607. }
  608. const elem = calcElem(item);
  609. elem && list.push(elem);
  610. }
  611. tree.list = list.reverse();
  612. return tree.list;
  613. };
  614. const iframeTree = reactive({
  615. list: [],
  616. patch: true,
  617. });
  618. export const getIframeTree = () => {
  619. iframeTree.patch = false;
  620. const list = [];
  621. for (const item of meta2d.store.data.pens) {
  622. if (item.name !== 'iframe') {
  623. continue;
  624. }
  625. const elem = calcElem(item);
  626. elem && list.push(elem);
  627. }
  628. iframeTree.list = list.reverse();
  629. return iframeTree.list;
  630. };
  631. export const getPenAnimations = (idOrTag?: string) => {
  632. const animations = [];
  633. let pens: any[] = meta2d.store.active || [];
  634. if (idOrTag) {
  635. pens = meta2d.find(idOrTag) || [];
  636. }
  637. for (const pen of pens) {
  638. if (pen.animations) {
  639. for (const a of pen.animations) {
  640. animations.push(a.name);
  641. }
  642. }
  643. }
  644. return Array.from(new Set(animations));
  645. };
  646. const calcElem = (node: any) => {
  647. if (!node) {
  648. return;
  649. }
  650. let tag = '中';
  651. if (
  652. isDomShapes.includes(node.name) ||
  653. node.name.endsWith('Dom') ||
  654. meta2d.store.options.domShapes.includes(node.name)
  655. ) {
  656. tag = 'dom';
  657. } else if (node.canvasLayer === 1) {
  658. tag = '模板';
  659. } else if (node.name === 'image') {
  660. if(node.canvasLayer === 2){
  661. tag = '下层';
  662. }else if(node.canvasLayer===3){
  663. tag = '中层';
  664. }else{
  665. tag = '上层';
  666. }
  667. } else {
  668. tag = '中层';
  669. }
  670. const elem: any = {
  671. label: (node as any).description || node.name,
  672. value: node.id,
  673. locked: node.locked,
  674. visible: node.visible,
  675. tag,
  676. };
  677. if (!node.children) {
  678. return elem;
  679. }
  680. elem.children = [];
  681. for (const id of node.children) {
  682. const child = calcElem(meta2d.store.pens[id]);
  683. child && elem.children.push(child);
  684. }
  685. return elem;
  686. };
  687. export const setChildrenVisible = (node: any, v: boolean) => {
  688. const children = node.getChildren();
  689. if (children && children.length > 0) {
  690. for (const child of children) {
  691. child.data.visible = v;
  692. setChildrenVisible(child, v);
  693. }
  694. }
  695. };
  696. export const fonts = [
  697. '新宋体',
  698. '微软雅黑',
  699. '黑体',
  700. '楷体',
  701. '斗鱼追光体',
  702. '庞门正道标题体',
  703. 'DS-DIGI-1',
  704. 'DS-DIGIB-2',
  705. 'DS-DIGII-3',
  706. 'DS-DIGIT-4',
  707. 'ALIBABA Regular',
  708. 'ALIBABA Bold',
  709. '-apple-system',
  710. 'BlinkMacSystemFont',
  711. 'PingFang SC',
  712. 'Hiragino Sans GB',
  713. 'Microsoft YaHei UI',
  714. 'Microsoft YaHei',
  715. 'fangsong',
  716. 'Source Han Sans CN',
  717. 'sans-serif',
  718. 'serif',
  719. 'Apple Color Emoji',
  720. 'Segoe UI Emoji',
  721. 'Segoe UI Symbol',
  722. ];
  723. export const delAttrs = [
  724. 'userId',
  725. 'shared',
  726. 'team',
  727. 'owner',
  728. 'username',
  729. 'editor',
  730. 'editorId',
  731. 'editorName',
  732. 'createdAt',
  733. 'tags',
  734. 'image',
  735. 'id',
  736. '_id',
  737. 'view',
  738. 'updatedAt',
  739. 'star',
  740. 'recommend',
  741. ];
  742. export const typeOptions = [
  743. {
  744. label: '字符串',
  745. value: 'string',
  746. },
  747. {
  748. label: '整数',
  749. value: 'integer',
  750. },
  751. {
  752. label: '浮点数',
  753. value: 'float',
  754. },
  755. {
  756. label: '布尔',
  757. value: 'bool',
  758. },
  759. {
  760. label: '对象',
  761. value: 'object',
  762. },
  763. {
  764. label: '数组',
  765. value: 'array',
  766. },
  767. ];
  768. let folder = reactive<any>({
  769. _id: '',
  770. });
  771. export const useFolder = () => {
  772. const getFolder = async () => {
  773. return folder;
  774. };
  775. const setFolder = async (value: any) => {
  776. folder = deepClone(value);
  777. };
  778. return {
  779. folder,
  780. getFolder,
  781. setFolder,
  782. };
  783. };
  784. export function changeType(value: string) {
  785. if (value === 'false') {
  786. return false;
  787. } else if (value === 'true') {
  788. return true;
  789. } else if (
  790. value === '' ||
  791. isNaN(Number(value)) ||
  792. (typeof value === 'string' && value.endsWith('.'))
  793. ) {
  794. // 小数也进入这个
  795. return value;
  796. }
  797. return Number(value);
  798. }
  799. // 附加缓存数据
  800. const extendData = reactive<any>({
  801. lineIntersect: false,
  802. });
  803. export const useExtendData = () => {
  804. const setExtendData = (key: any,value:any) => {
  805. extendData[key] = value;
  806. }
  807. const getExtendData = (key: any) => {
  808. return extendData[key];
  809. }
  810. return {
  811. extendData,
  812. getExtendData,
  813. setExtendData,
  814. };
  815. };
  816. const typeMap = {
  817. 'text': 'string',
  818. // 'integer',
  819. 'textarea':'string',
  820. 'number':'float',
  821. 'switch':'bool',
  822. // 'array',
  823. 'code':'object'
  824. }
  825. export function dealDataBeforeOpen(data){
  826. data.oldV = false;
  827. data.pens.forEach((pen)=>{
  828. if(pen.image){
  829. pen.image = pen.image.split('?')[0];
  830. }
  831. if (!(pen.animations && pen.animations.length)) {
  832. if (!pen.type && pen.frames) {
  833. pen.animations = [
  834. {
  835. name: '动画1',
  836. temType: 'id',
  837. animate: 'custom',
  838. frames: deepClone(pen.frames),
  839. animateCycle: pen.animateCycle,
  840. keepAnimateState: pen.keepAnimateState,
  841. linear: pen.linear,
  842. autoPlay: pen.autoPlay,
  843. nextAnimate: pen.nextAnimate,
  844. },
  845. ];
  846. data.oldV = true;
  847. } else if (pen.type && pen.lineAnimateType !== undefined) {
  848. pen.animations = [
  849. {
  850. name: '动画1',
  851. temType: 'id',
  852. animateSpan: pen.animateSpan || 1,
  853. lineAnimateType: pen.lineAnimateType,
  854. animateColor: pen.animateColor,
  855. animateReverse: pen.animateReverse,
  856. animateCycle: pen.animateCycle,
  857. animateLineWidth: pen.animateLineWidth,
  858. autoPlay: pen.autoPlay,
  859. nextAnimate: pen.nextAnimate,
  860. },
  861. ];
  862. data.oldV = true;
  863. }
  864. }
  865. if (pen.events?.length) {
  866. for (let i = 0; i < pen.events.length; i++) {
  867. const event = pen.events[i];
  868. // pen.events.forEach((event)=>{
  869. if (event.action !== undefined) {
  870. data.oldV = true;
  871. // 老格式
  872. if (event.name === 'valueUpdate') {
  873. if (event.where && event.where.key) {
  874. /*
  875. if (!pen.realTimes) {
  876. pen.realTimes = [];
  877. }
  878. let index = pen.realTimes.findIndex(
  879. (el) => el.key === event.where.key
  880. );
  881. let trigger = {
  882. name: '状态1',
  883. conditionType: 'and',
  884. conditions: [
  885. {
  886. type: event.where?.type === 'custom' ? 'fn' : '',
  887. key: event.where?.key,
  888. operator: event.where?.comparison,
  889. value: event.where?.value,
  890. fnJs: event.where?.fnJs,
  891. },
  892. ],
  893. actions: [
  894. {
  895. action: event.action,
  896. value: event.value,
  897. params: event.params,
  898. },
  899. ],
  900. };
  901. if (index !== -1) {
  902. pen.realTimes[index].triggers.push(trigger);
  903. } else {
  904. pen.realTimes.push({
  905. label: event.where.key,
  906. key: event.where.key,
  907. triggers: [trigger],
  908. });
  909. }
  910. pen.events.splice(i, 1);
  911. i--;*/
  912. //new
  913. if (!pen.triggers) {
  914. pen.triggers = [];
  915. }
  916. let trigger = {
  917. name: '状态1',
  918. conditionType: 'and',
  919. conditions: [
  920. {
  921. type: event.where?.type === 'custom' ? 'fn' : '',
  922. key: event.where?.key,
  923. operator: event.where?.comparison,
  924. value: event.where?.value,
  925. fnJs: event.where?.fnJs,
  926. },
  927. ],
  928. actions: [
  929. {
  930. action: event.action,
  931. value: event.value,
  932. params: event.params,
  933. },
  934. ],
  935. };
  936. let index = pen.triggers.findIndex(
  937. (el) => el.temKey === event.where.key
  938. );
  939. if(index !== -1){
  940. const state = pen.triggers[index].status;
  941. const idx = state.findIndex((el)=>el.conditions?.length&&el.conditions[0].key === trigger.conditions[0].key&&el.conditions[0].operator === trigger.conditions[0].operator&&el.conditions[0].value === trigger.conditions[0].value);
  942. if(idx!==-1){
  943. state[idx].actions.push(...deepClone(trigger.actions));
  944. }else{
  945. pen.triggers[index].status.push(trigger);
  946. }
  947. }else{
  948. pen.triggers.push({
  949. temKey:event.where?.key,
  950. name:`场景状态${i+1}`,
  951. status:[trigger]
  952. });
  953. }
  954. pen.events.splice(i, 1);
  955. i--;
  956. } else {
  957. //TODO 没有选择触发条件的情况
  958. if (event.value.indexOf('pen.value') !== -1) {
  959. if (!pen.realTimes) {
  960. pen.realTimes = [];
  961. }
  962. pen.realTimes.push({
  963. label: 'value',
  964. key: 'value',
  965. triggers: [
  966. {
  967. name: '状态1',
  968. conditionType: 'and',
  969. conditions: [],
  970. actions: [
  971. {
  972. action: event.action,
  973. value: event.value,
  974. params: event.params,
  975. },
  976. ],
  977. },
  978. ],
  979. });
  980. pen.events.splice(i, 1);
  981. i--;
  982. }
  983. }
  984. } else {
  985. event.conditionType = 'and';
  986. event.actions = [
  987. {
  988. action: event.action,
  989. value: event.value,
  990. params: event.params,
  991. },
  992. ];
  993. if (event.where && event.where.type) {
  994. event.conditions = [
  995. {
  996. type: event.where.type === 'custom' ? 'fn' : '',
  997. key: event.where.key,
  998. operator: event.where.comparison,
  999. //valueType target
  1000. value: event.where.value,
  1001. fnJs: event.where.fnJs,
  1002. },
  1003. ];
  1004. }
  1005. delete event.action;
  1006. delete event.value;
  1007. delete event.params;
  1008. delete event.where;
  1009. }
  1010. }
  1011. // });
  1012. }
  1013. }
  1014. //状态格式转换
  1015. if(!(pen.triggers?.length) && pen.realTimes?.length){
  1016. pen.triggers = [];
  1017. pen.realTimes.forEach((realTime,index)=>{
  1018. const delIdx = [];
  1019. realTime.triggers?.forEach((trigger,_idx)=>{
  1020. if(trigger.conditions?.length){
  1021. trigger.conditions.forEach((condition,_idx)=>{
  1022. condition.key = realTime.key;
  1023. condition.keyLabel = realTime.label || realTime.key;
  1024. });
  1025. if(trigger.conditions?.length === 1){
  1026. const _idx2 = realTime.triggers.findIndex((el)=>el.conditions?.length&&el.conditions[0].key === trigger.conditions[0].key&&el.conditions[0].operator === trigger.conditions[0].operator&&el.conditions[0].value === trigger.conditions[0].value);
  1027. if(_idx !== _idx2){
  1028. realTime.triggers[_idx2].actions.push(...deepClone(realTime.triggers[_idx].actions));
  1029. delIdx.push(_idx);
  1030. }
  1031. }
  1032. }
  1033. });
  1034. delIdx.forEach((idx,index)=>{
  1035. realTime.triggers.splice((idx-index),1);
  1036. });
  1037. if(realTime.triggers?.length){
  1038. pen.triggers.push({
  1039. name:`状态情况${index+1}`,
  1040. status:deepClone(realTime.triggers)
  1041. });
  1042. }
  1043. delete realTime.triggers;
  1044. });
  1045. }
  1046. if(pen.triggers?.length){
  1047. pen.triggers = pen.triggers.filter((item)=>item.status?.length);
  1048. }
  1049. //绑定变量
  1050. if(pen.form&&pen.name !== 'echarts'){
  1051. if(!pen.realTimes){
  1052. pen.realTimes = [];
  1053. }
  1054. pen.form.forEach((form)=>{
  1055. pen.realTimes.push({
  1056. "label": form.name,
  1057. "key": form.key,
  1058. "type": typeMap[form.type]||'string',
  1059. "bind": {
  1060. "label": form.dataIds?.name,
  1061. "id": form.dataIds?.dataId
  1062. },
  1063. "enableMock": false
  1064. });
  1065. });
  1066. delete pen.form;
  1067. }
  1068. if(pen.name === 'table2'){
  1069. pen.name = 'tablePlus'
  1070. }
  1071. });
  1072. if(!data.networks){
  1073. data.networks = [];
  1074. }
  1075. if(data.http){
  1076. if(!data.https?.length){
  1077. data.networks.push({
  1078. name: `https`,
  1079. type:'subscribe',
  1080. headers:data.httpHeaders,
  1081. interval:data.httpTimeInterval,
  1082. protocol:'http',
  1083. url:data.http,
  1084. })
  1085. }
  1086. delete data.http;
  1087. delete data.httpHeaders;
  1088. delete data.httpTimeInterval;
  1089. }
  1090. if(data.https){
  1091. data.https.forEach((item,i)=>{
  1092. data.networks.push({
  1093. name: `https${i+1}`,
  1094. type:'subscribe',
  1095. body:item.body,
  1096. headers:item.httpHeaders,
  1097. interval:item.httpTimeInterval,
  1098. method:item.method,
  1099. protocol:'http',
  1100. url:item.http,
  1101. // id:item.id
  1102. })
  1103. });
  1104. delete data.https;
  1105. }
  1106. if(data.mqtt){
  1107. data.networks.push({
  1108. "name": "mqtt",
  1109. "type": "subscribe",
  1110. "protocol": "mqtt",
  1111. "url": data.mqtt,
  1112. "options": data.mqttOptions,
  1113. "topics": data.mqttTopics,
  1114. });
  1115. delete data.mqtt;
  1116. delete data.mqttOptions;
  1117. delete data.mqttTopics;
  1118. }
  1119. if(data.websocket){
  1120. data.networks.push({
  1121. "name": "websocket",
  1122. "type": "subscribe",
  1123. "protocol": "websocket",
  1124. "protocols": data.websocketProtocols,
  1125. "url": data.websocket,
  1126. });
  1127. delete data.websocket;
  1128. delete data.websocketProtocols;
  1129. }
  1130. }