SGraphEditScene.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467
  1. /*
  2. * *********************************************************************************************************************
  3. *
  4. * !!
  5. * .F88X
  6. * X8888Y
  7. * .}888888N;
  8. * i888888N; .:! .I$WI:
  9. * R888888I .'N88~ i8}+8Y&8"l8i$8>8W~'>W8}8]KW+8IIN"8&
  10. * .R888888I .;N8888~ .X8' "8I.!,/8" !%NY8`"8I8~~8>,88I
  11. * +888888N; .8888888Y "&&8Y.}8,
  12. * ./888888N; .R888888Y .'}~ .>}'.`+> i}! "i' +/' .'i~ !11,.:">, .~]! .i}i
  13. * ~888888%: .I888888l .]88~`1/iY88Ii+1'.R$8$8]"888888888> Y8$ W8E X8E W8888'188Il}Y88$*
  14. * 18888888 E8888881 .]W%8$`R8X'&8%++N8i,8N%N8+l8%` .}8N:.R$RE%N88N%N$K$R 188,FE$8%~Y88I
  15. * .E888888I .i8888888' .:$8I;88+`E8R:/8N,.>881.`$8E/1/]N8X.Y8N`"KF&&FK!'88*."88K./$88%RN888+~
  16. * 8888888I .,N888888~ ~88i"8W,!N8*.I88.}888%F,i$88"F88" 888:E8X.>88!i88>`888*.}Fl1]*}1YKi'
  17. * i888888N' I888Y ]88;/EX*IFKFK88X K8R .l8W 88Y ~88}'88E&%8W.X8N``]88!.$8K .:W8I
  18. * .i888888N; I8Y .&8$ .X88! i881.:%888>I88 ;88] +88+.';;;;:.Y88X 18N.,88l .+88/
  19. * .:R888888I
  20. * .&888888I Copyright (c) 2016-2020. 博锐尚格科技股份有限公司
  21. * ~8888'
  22. * .!88~ All rights reserved.
  23. *
  24. * *********************************************************************************************************************
  25. */
  26. import { SGraphScene, SGraphItem } from "@persagy-web/graph";
  27. import { SPoint } from "@persagy-web/draw";
  28. import { SMouseEvent, SUndoStack, } from "@persagy-web/base";
  29. import { SRectSelectItem, SItemStatus } from "@persagy-web/big";
  30. import { SBaseArrowEdit, SBasePolygonEdit, SBaseCircleEdit, SBaseLineEdit, SGraphAddCommand, SGraphEdit, SBasePolylineEdit, SBaseTextEdit, SBaseImageEdit, SBaseRectEdit, SBaseTriangleEdit } from './'
  31. /**
  32. * Graphy图形引擎编辑场景类
  33. *
  34. * @author 韩耀龙(han_yao_long@126.com)
  35. */
  36. export class SGraphEditScene extends SGraphScene {
  37. /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  38. //属性
  39. /** undo/redo存储栈 */
  40. protected undoStack = new SUndoStack();
  41. // get undoStack(): SUndoStack {
  42. // return this._undoStack
  43. // }
  44. // // set undoStack(val: SUndoStack) {
  45. // // this._undoStack = val
  46. // // }
  47. /**编辑命令 */
  48. _editCmd: string = ""
  49. get editCmd(): string {
  50. return this._editCmd
  51. }
  52. set editCmd(val: string) {
  53. this._editCmd = val;
  54. }
  55. /**是否可编辑 */
  56. _isEditStatus: Boolean = true; // 是否可编辑
  57. set isEditStatus(bol: Boolean) {
  58. this._isEditStatus = bol;
  59. }
  60. get isEditStatus(): Boolean {
  61. return this._isEditStatus
  62. }
  63. /////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  64. //函数
  65. constructor() {
  66. super()
  67. // // 选择绑定选额item事件
  68. this.selectContainer.connect("selectChange", this, this.selectChange);
  69. }
  70. /**
  71. * 选中item触发方法
  72. *
  73. * @param obj 变化后的对象
  74. */
  75. selectChange(obj: any) { }
  76. /**
  77. * 新增基础类直线
  78. *
  79. * @param event 鼠标事件参数
  80. */
  81. addLine(event: SMouseEvent): void {
  82. const data = {
  83. /** 名称 */
  84. name: '基础直线',
  85. /** 图标(Image),线类型(Line) */
  86. type: "Line",
  87. /** 缩放比例(Image),线类型(Line) */
  88. scale: { x: 1, y: 1, z: 1 },
  89. /** 缩放比例(Image),线类型(Line) */
  90. rolate: { x: 0, y: 0, z: 0 },
  91. /** 位置 */
  92. pos: { x: 0, y: 0 },
  93. /** 由应用自己定义 */
  94. properties: {
  95. type: "BaseLine" // 自定义类型用于区分mark与node
  96. },
  97. style: {
  98. line: [{ x: event.x, y: event.y }],
  99. default: {
  100. }
  101. }
  102. }
  103. const lineItem = new SBaseLineEdit(null, data);
  104. lineItem.status = SItemStatus.Create;
  105. this.addItem(lineItem);
  106. this.undoStack.push(new SGraphAddCommand(this, lineItem));
  107. lineItem.selectable = true;
  108. this.grabItem = lineItem;
  109. lineItem.connect("finishCreated", this, this.finishCreated);
  110. lineItem.connect("onContextMenu", this, this.getItem);
  111. if (this.view) {
  112. this.view.update();
  113. }
  114. }
  115. /**
  116. * 新增折线
  117. *
  118. * @param event 鼠标事件
  119. */
  120. addPolyLine(event: SMouseEvent): void {
  121. const data = {
  122. name: '基础折线',
  123. type: "line",
  124. pos: { x: 0, y: 0 },
  125. properties: {
  126. type: "BasePolyline",
  127. },
  128. style: {
  129. outLine: [{ x: event.x, y: event.y }],
  130. default: {
  131. }
  132. }
  133. }
  134. const item = new SBasePolylineEdit(null, data);
  135. item.status = SItemStatus.Create;
  136. item.selectable = true;
  137. this.addItem(item);
  138. this.undoStack.push(new SGraphAddCommand(this, item));
  139. this.grabItem = item;
  140. item.connect("finishCreated", this, this.finishCreated);
  141. item.connect("onContextMenu", this, this.getItem);
  142. if (this.view) {
  143. this.view.update();
  144. }
  145. }
  146. /**
  147. * 新增基础类图片
  148. *
  149. * @param event 鼠标事件参数
  150. */
  151. addImageItem(event: SMouseEvent): void {
  152. const data = {
  153. /** 名称 */
  154. name: '基础图片',
  155. num: 1,
  156. /** 图标(Image),线类型(Line) */
  157. type: "Image",
  158. /** 位置 */
  159. pos: { x: event.x, y: event.y },
  160. /** 由应用自己定义 */
  161. properties: {
  162. type: "BaseImage",
  163. },
  164. style: {
  165. default: {
  166. strokecolor: "#c0ccda",
  167. url: '',
  168. }
  169. }
  170. }
  171. const item = new SBaseImageEdit(null, data);
  172. item.selectable = true;
  173. item.moveable = true;
  174. this.addItem(item);
  175. this.undoStack.push(new SGraphAddCommand(this, item));
  176. this.finishCreated(item);
  177. }
  178. /**
  179. * 新增基础类文本
  180. *
  181. * @param event 鼠标事件参数
  182. */
  183. addTextItem(event: SMouseEvent): void {
  184. const data = {
  185. /** 名称 */
  186. name: '基础文本',
  187. /** 图标 */
  188. type: "Text",
  189. /** 位置 */
  190. pos: { x: event.x, y: event.y },
  191. size: { width: 0, height: 0 },
  192. /** 由应用自己定义 */
  193. properties: {
  194. type: "BaseText" // 自定义类型用于区分mark与node
  195. },
  196. style: {
  197. default: {
  198. text: '请在右侧属性栏输入文字!',
  199. color: "#646c73",
  200. font: 14,
  201. backgroundcolor: "#f7f9facc",
  202. }
  203. }
  204. }
  205. const item = new SBaseTextEdit(null, data);
  206. item.moveTo(event.x, event.y);
  207. item.moveable = true;
  208. this.addItem(item);
  209. this.undoStack.push(new SGraphAddCommand(this, item));
  210. this.grabItem = null;
  211. item.connect("onContextMenu", this, this.getItem);
  212. this.finishCreated(item);
  213. }
  214. /**
  215. * 添加基本矩形item
  216. * @param event 鼠标事件
  217. */
  218. addRectItem(event: SMouseEvent): void {
  219. const data = {
  220. name: '基础矩形',
  221. /** 图标(Image),线类型(Line) */
  222. type: "Zone",
  223. /** 位置 */
  224. pos: { x: 0, y: 0 },
  225. properties: {
  226. type: "BaseRect",
  227. },
  228. style: {
  229. default: {
  230. line: [{ x: event.x, y: event.y }],
  231. }
  232. }
  233. }
  234. const rectItem = new SBaseRectEdit(null, data);
  235. rectItem.status = SItemStatus.Create;
  236. this.addItem(rectItem);
  237. this.undoStack.push(new SGraphAddCommand(this, rectItem));
  238. rectItem.selectable = true;
  239. rectItem.moveable = true;
  240. this.grabItem = rectItem;
  241. rectItem.isTransform = true
  242. rectItem.connect("finishCreated", this, this.finishCreated);
  243. rectItem.connect("onContextMenu", this, this.getItem);
  244. if (this.view) {
  245. this.view.update();
  246. }
  247. }
  248. /**
  249. * 添加基本三角形item
  250. *
  251. * @param event 鼠标事件
  252. */
  253. addTriangleItem(event: SMouseEvent): void {
  254. const data = {
  255. name: '基础三角形',
  256. type: "Zone",
  257. pos: { x: 0, y: 0 },
  258. properties: {
  259. type: "BaseTriangle",
  260. },
  261. style: {
  262. default: {
  263. line: [{ x: event.x, y: event.y }],
  264. }
  265. }
  266. }
  267. const triangleItem = new SBaseTriangleEdit(null, data);
  268. triangleItem.status = SItemStatus.Create;
  269. this.addItem(triangleItem);
  270. this.undoStack.push(new SGraphAddCommand(this, triangleItem));
  271. triangleItem.selectable = true;
  272. triangleItem.moveable = true;
  273. this.grabItem = triangleItem;
  274. triangleItem.connect("finishCreated", this, this.finishCreated);
  275. triangleItem.connect("onContextMenu", this, this.getItem);
  276. if (this.view) {
  277. this.view.update();
  278. }
  279. }
  280. /**
  281. * 添加基本圆
  282. *
  283. * @param event 鼠标事件
  284. */
  285. addCircleItem(event: SMouseEvent): void {
  286. const data = {
  287. name: '基础圆形',
  288. type: "Zone",
  289. pos: { x: 0, y: 0 },
  290. properties: {
  291. type: "BaseCircle",
  292. },
  293. style: {
  294. default: {
  295. },
  296. line: [{ x: event.x, y: event.y }],
  297. }
  298. }
  299. const circleItem = new SBaseCircleEdit(null, data);
  300. circleItem.status = SItemStatus.Create;
  301. circleItem.selectable = true;
  302. this.grabItem = circleItem;
  303. this.addItem(circleItem);
  304. this.undoStack.push(new SGraphAddCommand(this, circleItem));
  305. circleItem.connect("finishCreated", this, this.finishCreated);
  306. circleItem.connect("onContextMenu", this, this.getItem);
  307. if (this.view) {
  308. this.view.update();
  309. }
  310. }
  311. /**
  312. * 添加基本多边形
  313. *
  314. * @param event 鼠标事件
  315. */
  316. addPolygonItem(event: SMouseEvent): void {
  317. const data = {
  318. name: '基础多边形',
  319. type: "Zone",
  320. pos: { x: 0, y: 0 },
  321. properties: {
  322. type: "BasePolygon",
  323. },
  324. style: {
  325. outLine: [{ x: event.x, y: event.y }],
  326. default: {
  327. }
  328. }
  329. }
  330. const polygonItem = new SBasePolygonEdit(null, data);
  331. polygonItem.status = SItemStatus.Create;
  332. polygonItem.selectable = true;
  333. this.addItem(polygonItem);
  334. this.undoStack.push(new SGraphAddCommand(this, polygonItem));
  335. this.grabItem = polygonItem;
  336. polygonItem.connect("finishCreated", this, this.finishCreated);
  337. polygonItem.connect("onContextMenu", this, this.getItem);
  338. if (this.view) {
  339. this.view.update();
  340. }
  341. }
  342. /**
  343. * 添加基本箭头item(直线类)
  344. *
  345. * @param event 鼠标事件
  346. */
  347. addBaseArrowsItem(event: SMouseEvent): void {
  348. const data = {
  349. name: '基础箭头',
  350. type: "Zone",
  351. pos: { x: 0, y: 0 },
  352. properties: {
  353. type: "BaseArrow",
  354. },
  355. style: {
  356. default: {
  357. line: [{ x: event.x, y: event.y }],
  358. }
  359. }
  360. }
  361. const arrowItem = new SBaseArrowEdit(null, data);
  362. arrowItem.status = SItemStatus.Create;
  363. arrowItem.moveable = true;
  364. this.addItem(arrowItem);
  365. this.undoStack.push(new SGraphAddCommand(this, arrowItem));
  366. arrowItem.selectable = true;
  367. this.grabItem = arrowItem;
  368. arrowItem.connect("finishCreated", this, this.finishCreated);
  369. arrowItem.connect("onContextMenu", this, this.getItem);
  370. if (this.view) {
  371. this.view.update();
  372. }
  373. }
  374. /**
  375. * 对齐指定item
  376. * @param v
  377. */
  378. changeAlignItem(v: any): void {
  379. this.selectContainer.layout(v);
  380. }
  381. /**
  382. * 保存数据
  383. *
  384. * @return any 返回需要保存的数据
  385. */
  386. saveMsgItem(): any {
  387. }
  388. /**
  389. * 重做
  390. *
  391. * @return any
  392. */
  393. redo(): void {
  394. }
  395. /**
  396. * 撤销
  397. *
  398. * @return any
  399. */
  400. undo(): void {
  401. }
  402. /**
  403. * 完成创建的回调函数
  404. *
  405. * @param item 完成创建的item
  406. */
  407. finishCreated(item: SGraphItem) {
  408. }
  409. /**
  410. * 复制
  411. *
  412. */
  413. copy() { }
  414. /**
  415. * 粘贴
  416. *
  417. */
  418. paste() { }
  419. /**
  420. * 选中状态方法
  421. *
  422. * @param item SGraphItem
  423. */
  424. toggleItem(item: SGraphItem): void {
  425. this.selectContainer.clear()
  426. this.selectContainer.toggleItem(item)
  427. }
  428. /**
  429. * 框选
  430. */
  431. addRectSelect(event: SMouseEvent) {
  432. let point = new SPoint(event.x, event.y);
  433. let rect = new SRectSelectItem(null, point);
  434. this.addItem(rect);
  435. this.grabItem = rect;
  436. }
  437. /**
  438. * 获取item (常用与场景外的调用F)
  439. * @param event SMouseEvent 鼠标事件
  440. * @param item SGraphEdit|null 返回item
  441. *
  442. */
  443. getItem(item: SGraphEdit | null, event: SMouseEvent[]) {
  444. }
  445. }// Class GraphEditScene