index.ts 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763
  1. import { ModuleControl } from "queenjs";
  2. import { reactive } from "vue";
  3. import { EditorModule } from "../../module";
  4. import { DesignComp } from "../../objects/DesignTemp/DesignComp";
  5. import { Matrix } from "./matrix";
  6. import { GroupActionCtrl } from "../TransferCtrl/GroupCtrl";
  7. import { Point } from "./objects/point";
  8. import { ObjsContainer } from "./ObjsContainer";
  9. import Event from "./event";
  10. import { DisplayObject } from "./objects/displayObject";
  11. import { CompObject } from "./compObj";
  12. import { each, eachRight } from "lodash";
  13. import { string } from "vue-types";
  14. import { Project, VectorLenth } from "./objects/mathUtils";
  15. /**
  16. * 页面画布空间进行选择
  17. */
  18. const MODE_SEL_RECT = 1;
  19. const MODE_MOVING = 2;
  20. const MODE_ROTATE = 3;
  21. const MODE_SCALE = 4;
  22. const MODE_NONE = 0;
  23. export class SelectCtrl extends ModuleControl<EditorModule> {
  24. transEvent = {
  25. startX: 0,
  26. startY: 0,
  27. offsetX: 0,
  28. offsetY: 0,
  29. width: 0,
  30. height: 0,
  31. };
  32. transferStyle = reactive({
  33. showGizmo: false,
  34. width: 0,
  35. height: 0,
  36. matrix: "matrix(1,0,0,1,0,0)",
  37. matrixInvert: "matrix(1,0,0,1,0,0)",
  38. });
  39. selected: any[] = []; //选中的所有组件ids
  40. mouseDownSelects: any[] = []; //鼠标按下时选中的
  41. pageEl?: HTMLElement;
  42. selCanvas = {} as HTMLCanvasElement;
  43. _downed = false;
  44. _selCtx = {} as CanvasRenderingContext2D;
  45. _state = MODE_SEL_RECT;
  46. _selDownX = 0;
  47. _selDownY = 0;
  48. _selBox = {} as DOMRect;
  49. _selCanvaseSize = { w: 0, h: 0 };
  50. _downClientX = 0;
  51. _downClientY = 0;
  52. //groupCtrl = new GroupActionCtrl(this.module);
  53. bus = new Event();
  54. viewport?:HTMLElement;
  55. initEvents(pageEl: HTMLElement, selCanvas: HTMLCanvasElement, viewport:HTMLElement) {
  56. this.viewport = viewport;
  57. this.pageEl = pageEl;
  58. this.selCanvas = selCanvas;
  59. const b = selCanvas.getBoundingClientRect();
  60. selCanvas.width = b.width * 2;
  61. selCanvas.height = b.height * 2;
  62. this._selCtx = selCanvas.getContext("2d") as CanvasRenderingContext2D;
  63. this._selCanvaseSize.w = selCanvas.width * 2;
  64. this._selCanvaseSize.h = selCanvas.height * 2;
  65. document.addEventListener("mousedown", this.onDocMouseDown.bind(this));
  66. document.addEventListener("mousemove", this.onDocMouseMove.bind(this));
  67. document.addEventListener("mouseup", this.onDocMouseUp.bind(this));
  68. window.addEventListener("resize", this.onResize.bind(this));
  69. }
  70. _mouseDownFlag = "";
  71. onDocMouseDown(e: MouseEvent) {
  72. if (!this.pageEl || !this.selCanvas) return;
  73. let box = this.pageEl.getBoundingClientRect();
  74. const pageX = e.clientX - box?.left;
  75. const pageY = e.clientY - box?.top;
  76. const card = this.store.currStreamCard.$el;
  77. box = card.getBoundingClientRect();
  78. const cardX = pageX;
  79. const cardY = e.clientY - box.top;
  80. const sel = this.selCanvas.getBoundingClientRect();
  81. const selX = e.clientX - sel.left;
  82. const sely = e.clientY - sel.top;
  83. this._selDownX = selX;
  84. this._selDownY = sely;
  85. this._selBox = sel;
  86. this._downClientX = e.clientX;
  87. this._downClientY = e.clientY;
  88. console.log(cardX, selX, cardY, sely);
  89. this._downed = true;
  90. this._mouseDownFlag = this.getDivFlag(e.target as any);
  91. if (!this._mouseDownFlag) {
  92. //选框点击判断
  93. let isClickSelRect = false;
  94. if (this.selected.length > 0) {
  95. isClickSelRect = this.objContainer?.testClick(cardX, cardY) as boolean;
  96. if (isClickSelRect) {
  97. this._state = MODE_MOVING;
  98. }
  99. }
  100. if (!isClickSelRect) {
  101. //判断是否有点击到card stream
  102. const comps = this.compClickTest(e);
  103. this.mouseDownSelects = comps;
  104. console.log("comps=>", comps);
  105. if (comps.length < 1) {
  106. const view = this.viewport?.getBoundingClientRect() as any;
  107. const isOut = (e.clientX < view.left || e.clientX > (view.right) || e.clientY < view.top || e.clientY > view.bottom)
  108. if (!isOut) {
  109. this._state = MODE_SEL_RECT;
  110. }
  111. } else {
  112. this._state = MODE_MOVING;
  113. const obj = this.compMap[comps[0].id];
  114. this.selecteObjs([new CompObject(obj)]);
  115. }
  116. }
  117. } else if (this._mouseDownFlag == "rotate") {
  118. this._state = MODE_ROTATE;
  119. } else if (this._mouseDownFlag == "move") {
  120. this._state = MODE_MOVING;
  121. } else if (this._mouseDownFlag.indexOf("scale") > -1) {
  122. this._state = MODE_SCALE;
  123. }
  124. this._movePreClientX = this._downClientX;
  125. this._movePreClientY = this._downClientY;
  126. }
  127. getDivFlag(div: HTMLElement) {
  128. let c: any = div;
  129. if (!c) return;
  130. let i = 0;
  131. do {
  132. if (c.editable) return c.editable;
  133. c = div.parentElement;
  134. i += 1;
  135. if (i > 3) {
  136. return;
  137. }
  138. } while (c);
  139. }
  140. compClickTest(e: MouseEvent) {
  141. const cards = this.store.streamCardIds;
  142. let n = cards.length;
  143. const compMap = this.store.designData.compMap;
  144. //@ts-ignore
  145. const pbox = this.pageEl.getBoundingClientRect();
  146. const pageX = e.clientX - pbox?.left;
  147. const Out = [];
  148. while (n--) {
  149. const cardComp = compMap[cards[n]];
  150. const box = cardComp.$el.getBoundingClientRect();
  151. const cardY = e.clientY - box.top;
  152. const cardChilds = cardComp.children.default || [];
  153. for (const key of cardChilds) {
  154. const c = compMap[key];
  155. const m = Matrix.createFromDiv(c.$el);
  156. const localp = m.applyInverse(new Point(pageX, cardY));
  157. const cw = this.helper.designSizeToPx(c.layout.size?.[0] as number);
  158. const ch = this.helper.designSizeToPx(c.layout.size?.[1] as number);
  159. const out =
  160. localp.x < 0 || localp.x > cw || localp.y < 0 || localp.y > ch;
  161. if (!out) {
  162. Out.push({
  163. id: key,
  164. el: c.$el,
  165. cardX: pageX,
  166. cardY: cardY,
  167. cardId: cards[n],
  168. startMatrix: m,
  169. });
  170. }
  171. }
  172. }
  173. return Out;
  174. }
  175. streamCardClickTest(e: MouseEvent) {
  176. const cards = this.store.streamCardIds;
  177. let n = cards.length;
  178. const compMap = this.store.designData.compMap;
  179. //@ts-ignore
  180. const pbox = this.pageEl.getBoundingClientRect();
  181. const pageX = e.clientX - pbox?.left;
  182. if (pageX < 0 || pageX > pbox.width) return "";
  183. while (n--) {
  184. const card = compMap[cards[n]];
  185. const box = card.$el.getBoundingClientRect();
  186. if (e.clientY >= box.top && e.clientY <= box.bottom)
  187. return { id: cards[n], x: pageX, y: e.clientY - box.top };
  188. }
  189. return "";
  190. }
  191. _moveSelectUpdated = false;
  192. updateSelects() {
  193. if (this._moveSelectUpdated) return;
  194. this._moveSelectUpdated = true;
  195. //鼠标按下并移动中 修正当前选中的对象
  196. if (this.selected.length < 1) {
  197. //没有被选中的
  198. this.selected = this.mouseDownSelects;
  199. } else {
  200. //当前有选中的
  201. let findSeleted = false;
  202. let n = this.selected.length;
  203. if (this.mouseDownSelects.length > 0) {
  204. while (n--) {
  205. const item = this.mouseDownSelects.find(
  206. (item) => item.id == this.selected[n].id
  207. );
  208. if (item) findSeleted = true;
  209. }
  210. }
  211. if (!findSeleted) {
  212. this.selected = this.mouseDownSelects;
  213. }
  214. }
  215. if (this.selected.length > 0) {
  216. this._state = MODE_MOVING;
  217. }
  218. }
  219. translate(xOffset:number, yOffset:number) {
  220. const objContainer = this.objContainer as ObjsContainer;
  221. objContainer.translate(xOffset, yOffset);
  222. this.upgateGizmoStyle();
  223. }
  224. movingMousemove(e: MouseEvent) {
  225. const objContainer = this.objContainer as ObjsContainer;
  226. objContainer.translate(
  227. e.clientX - this._movePreClientX,
  228. e.clientY - this._movePreClientY
  229. );
  230. this.upgateGizmoStyle();
  231. }
  232. _movePreClientX = 0;
  233. _movePreClientY = 0;
  234. onDocMouseMove(e: MouseEvent) {
  235. if (!this.pageEl) return;
  236. if (!this._downed) {
  237. this.checkHover();
  238. return;
  239. }
  240. switch (this._state) {
  241. case MODE_SEL_RECT: //选框模式
  242. this.drawSelRect(e);
  243. break;
  244. case MODE_MOVING:
  245. this.movingMousemove(e);
  246. break;
  247. case MODE_ROTATE:
  248. this.rotateMousemove(e);
  249. break;
  250. case MODE_SCALE:
  251. this.scaleMousemove(e);
  252. }
  253. this._movePreClientY = e.clientY;
  254. this._movePreClientX = e.clientX;
  255. }
  256. get compMap() {
  257. return this.store.designData.compMap;
  258. }
  259. onDocMouseUp(e: MouseEvent) {
  260. let isClick = false;
  261. const dx = Math.abs(e.clientX - this._downClientX);
  262. const dy = Math.abs(e.clientY - this._downClientY);
  263. if (dx < 2 && dy < 2) {
  264. isClick = true;
  265. }
  266. if (isClick) {
  267. this._state = MODE_NONE;
  268. if (this.mouseDownSelects.length < 1) this.selecteObjs([]);
  269. else {
  270. const objs = this.mouseDownSelects.map(
  271. (item) => new CompObject(this.compMap[item.id])
  272. );
  273. this.selecteObjs(objs);
  274. }
  275. }
  276. console.log("up");
  277. if (this._state == MODE_SEL_RECT && !isClick) {
  278. //选择空间转 streamCard空间
  279. const card = this.store.currStreamCard;
  280. const box = card.$el.getBoundingClientRect();
  281. this.rectSelect(
  282. this._lastSelRect[0] - box.left,
  283. this._lastSelRect[1] - box.top,
  284. this._lastSelRect[2],
  285. this._lastSelRect[3]
  286. );
  287. }
  288. if (this._state == MODE_ROTATE) {
  289. this.rotateMouseUp(e);
  290. }
  291. if (this._state == MODE_SCALE) {
  292. this.scaleMouseUp(e);
  293. }
  294. this._state = MODE_NONE;
  295. this._downed = false;
  296. this._moveSelectUpdated = false;
  297. this._selCtx?.clearRect(
  298. 0,
  299. 0,
  300. this._selCanvaseSize.w,
  301. this._selCanvaseSize.h
  302. );
  303. this.upgateGizmoStyle();
  304. }
  305. rectSelect(x: number, y: number, width: number, height: number) {
  306. const childs =
  307. this.compMap[this.store.currStreamCardId].children.default || [];
  308. let n = childs.length;
  309. const outs = [];
  310. while (n--) {
  311. const o = new CompObject(this.compMap[childs[n]]);
  312. if (o.testRect({ x, y, w: width, h: height }, true)) {
  313. //相交
  314. outs.push(o);
  315. }
  316. }
  317. console.log(outs);
  318. this.selecteObjs(outs);
  319. }
  320. upgateGizmoStyle() {
  321. if (this.selected.length < 1) {
  322. this.transferStyle.showGizmo = false;
  323. return;
  324. }
  325. this.transferStyle.showGizmo = false;
  326. const selector = this.objContainer as ObjsContainer;
  327. if (!selector) {
  328. return;
  329. }
  330. this.transferStyle.showGizmo = true;
  331. let obj = selector.parent;
  332. let w = selector.rect.width,
  333. h = selector.rect.height;
  334. let tmp = new Matrix();
  335. tmp.copyFrom(obj.worldTransform);
  336. // tmp.scale(0.5 , 0.5);
  337. let matrix = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},${tmp.tx},${tmp.ty})`;
  338. tmp.invert();
  339. let matrixInvert = `matrix(${tmp.a},${tmp.b},${tmp.c},${tmp.d},0,0)`;
  340. this.transferStyle.width = w;
  341. this.transferStyle.height = h;
  342. this.transferStyle.matrix = matrix;
  343. this.transferStyle.matrixInvert = matrixInvert;
  344. }
  345. selectId(id: string) {
  346. //选中ids之前 id对应组件必须已经渲染
  347. console.log("selectId=>", id);
  348. }
  349. _lastSelRect = [0, 0, 0, 0];
  350. drawSelRect(e: MouseEvent) {
  351. const ctx = this._selCtx;
  352. const dx = this._selDownX;
  353. const dy = this._selDownY;
  354. const currX = e.clientX - this._selBox.left;
  355. const currY = e.clientY - this._selBox.top;
  356. const x = Math.min(currX, dx),
  357. y = Math.min(dy, currY);
  358. ctx.clearRect(0, 0, this._selCanvaseSize.w, this._selCanvaseSize.h);
  359. ctx.fillStyle = "rgba(232, 139, 0, 0.16)";
  360. const w = Math.abs(currX - dx);
  361. const h = Math.abs(currY - dy);
  362. ctx.fillRect(x * 2, y * 2, w * 2, h * 2);
  363. ctx.lineWidth = 2;
  364. ctx.strokeStyle = "#E88B00";
  365. ctx.strokeRect(x * 2, y * 2, w * 2, h * 2);
  366. this._lastSelRect[0] = x + this._selBox.left;
  367. this._lastSelRect[1] = y + this._selBox.top;
  368. this._lastSelRect[2] = w;
  369. this._lastSelRect[3] = h;
  370. }
  371. checkHover() {
  372. this.selCanvas;
  373. }
  374. onResize() {
  375. const b = this.selCanvas.getBoundingClientRect();
  376. this.selCanvas.width = b.width * 2;
  377. this.selCanvas.height = b.height * 2;
  378. this._selCtx = this.selCanvas.getContext("2d") as CanvasRenderingContext2D;
  379. this._selCanvaseSize.w = b.width * 2;
  380. this._selCanvaseSize.h = b.height * 2;
  381. }
  382. //
  383. checkIntersect(compId: string, e: MouseEvent) {
  384. const currCard = this.store.currStreamCard.$el;
  385. const comp = this.store.designData.compMap[compId];
  386. //排除坐标没有在streamCard空间内的坐标
  387. //把当前的card坐标转为 组件的自己local坐标判断是否在方框外面
  388. const cardBox = currCard.getBoundingClientRect();
  389. const cardX = e.clientX - cardBox.left;
  390. const cardY = e.clientY - cardBox.top;
  391. //const m = Matrix.createFromComp(comp.layout.transform)
  392. }
  393. objContainer?: ObjsContainer;
  394. selecteObjs(objs: any[], ContainerBox?: ObjsContainer) {
  395. if (this.selected.length == 0 && objs.length == 0) return;
  396. if (
  397. this.selected.length == 1 &&
  398. objs.length == 1 &&
  399. this.selected[0] == objs[0]
  400. )
  401. return;
  402. if (objs.length == 1) {
  403. this.actions.pickComp(objs[0].comp.id);
  404. }
  405. // objs = this.getSceneObjOrderArr(objs);
  406. const preObjContainer = this.objContainer;
  407. if (this.objContainer) {
  408. this.objContainer.destroy();
  409. this.objContainer = undefined;
  410. }
  411. let newObjContainer = undefined;
  412. if (objs.length > 0 && objs[0]) {
  413. newObjContainer = ContainerBox ? ContainerBox : new ObjsContainer(objs);
  414. if (ContainerBox) {
  415. objs.forEach((obj) => {
  416. ContainerBox.parent.addChildWorldNoChange(obj);
  417. });
  418. ContainerBox.selected = objs;
  419. ContainerBox.parent.updateTransform();
  420. }
  421. }
  422. this.objContainer = newObjContainer;
  423. const pre = this.selected.slice(0);
  424. this.selected = objs;
  425. // if (history) {
  426. // this.editor.history.record({
  427. // undo: () => {
  428. // this.selected = pre;
  429. // if (preObjContainer) {
  430. // let parent = preObjContainer.parent;
  431. // pre.forEach(obj => {
  432. // parent.addChildWorldNoChange(obj);
  433. // });
  434. // parent.updateTransform();
  435. // this.objContainer = preObjContainer;
  436. // } else {
  437. // this.objContainer = null;
  438. // }
  439. // this.emitChange();
  440. // }, redo: () => {
  441. // this.selected = objs;
  442. // if (preObjContainer) {
  443. // preObjContainer.destroy();
  444. // }
  445. // if (newObjContainer) {
  446. // let parent = newObjContainer.parent;
  447. // objs.forEach(obj => {
  448. // parent.addChildWorldNoChange(obj);
  449. // });
  450. // parent.updateTransform();
  451. // this.objContainer = newObjContainer;
  452. // } else {
  453. // this.objContainer = null;
  454. // }
  455. // this.emitChange();
  456. // }
  457. // })
  458. // }
  459. this.emitChange();
  460. this.upgateGizmoStyle();
  461. return this.selected;
  462. }
  463. emitChange() {
  464. const selected = this.selected;
  465. if (selected.length && selected[0]) {
  466. this.bus.emit("showProps", selected[0].from);
  467. } else {
  468. this.bus.emit("showProps");
  469. }
  470. this.bus.emit("selectedChange");
  471. }
  472. rotateCenter?: { x: number; y: number };
  473. ratatePre = 0;
  474. objinitAngleRad = 0;
  475. rotateCmd = false;
  476. lastRad = 0;
  477. rotateMousemove(e: MouseEvent) {
  478. const card = this.store.currStreamCard;
  479. const rect = card.$el.getBoundingClientRect();
  480. let StartX = e.clientX - rect.left;
  481. let StartY = e.clientY - rect.top;
  482. const objContainer = this.objContainer as ObjsContainer;
  483. //获取当前屏幕坐标和选框中心点坐标,计算旋转值
  484. if (!this.rotateCenter) {
  485. //let rect = this.objContainer.parent.getBounds(false);
  486. let center = objContainer.setPivot(4);
  487. this.rotateCenter = center;
  488. let vec = { x: StartX - center.x, y: StartY - center.y };
  489. let angle = Math.atan2(vec.y, vec.x);
  490. if (angle < 0) angle += 2 * Math.PI;
  491. this.ratatePre = angle;
  492. this.objinitAngleRad = objContainer.parent.rotation;
  493. this.rotateCmd = true;
  494. return;
  495. }
  496. let center = this.rotateCenter;
  497. let vec = { x: StartX - center.x, y: StartY - center.y };
  498. let angle = Math.atan2(vec.y, vec.x);
  499. if (angle < 0) angle += 2 * Math.PI;
  500. let dta = this.objinitAngleRad + angle - this.ratatePre;
  501. if (e.shiftKey) {
  502. //规整到0 90 180 270
  503. if (dta < 0) dta += 2 * Math.PI;
  504. let Deg45 = Math.PI / 4.0;
  505. let Deg90 = Math.PI / 2.0;
  506. let Deg135 = Deg45 * 3;
  507. let Deg225 = Deg45 * 5;
  508. let Deg270 = Deg45 * 6;
  509. let Deg315 = Deg45 * 7;
  510. if (dta < Deg45) {
  511. dta = 0;
  512. } else if (dta < Deg135) {
  513. dta = Deg90;
  514. } else if (dta < Deg225) {
  515. dta = Math.PI;
  516. } else if (dta < Deg315) {
  517. dta = Deg270;
  518. } else {
  519. dta = 0;
  520. }
  521. }
  522. this.lastRad = dta;
  523. console.log("rotate=>", dta);
  524. objContainer.rotate(dta);
  525. // this.emit("translateChange", this.objContainer)
  526. this.upgateGizmoStyle();
  527. }
  528. rotateMouseUp(e: MouseEvent) {
  529. this.rotateCenter = undefined;
  530. if (!this.rotateCmd) return;
  531. let scope = this;
  532. let last = this.lastRad;
  533. let initrad = scope.objinitAngleRad;
  534. // this.editor.history.record({undo:function(){
  535. // scope.objContainer.setPivot(4);
  536. // scope.objContainer.rotate( initrad );
  537. // scope.emitChange();
  538. // }, redo:function(){
  539. // scope.objContainer.setPivot(4);
  540. // scope.objContainer.rotate( last );
  541. // scope.emitChange();
  542. // }});
  543. this.rotateCmd = false;
  544. }
  545. //缩放选中的对象
  546. scalePivot?: any;
  547. scaleIndex = 0;
  548. mainAxisVector = { x: 0, y: 0 };
  549. initScale = { x: 1, y: 1 };
  550. mainAxisVectorLenth = 0;
  551. xAxisVector = { x: 1, y: 1 };
  552. xAxisVectorLength = 0;
  553. yAxisVector = { x: 1, y: 1 };
  554. yAxisVectorLength = 0;
  555. scaleCmd = false;
  556. lastScale = { x: 1, y: 1 };
  557. scaleMousemove(event: MouseEvent) {
  558. let dirIndexs = [
  559. "scaleBottomright",
  560. "scaleBottomleft",
  561. "scaleTopleft",
  562. "scaleTopright",
  563. ];
  564. let dirOrth = ["scaleright", "scaleleft", "scalebottom", "scaletop"];
  565. const rect = this.store.currStreamCard.$el.getBoundingClientRect();
  566. let StartX = event.clientX - rect.left;
  567. let StartY = event.clientY - rect.top;
  568. const objContainer = this.objContainer as ObjsContainer;
  569. //获取当前屏幕坐标和选框中心点坐标,计算旋转值
  570. if (!this.scalePivot) {
  571. let dir = this._mouseDownFlag;
  572. let scaleIndex = dirIndexs.indexOf(dir);
  573. if (scaleIndex == -1) {
  574. scaleIndex = dirOrth.indexOf(dir);
  575. if (scaleIndex == 2) scaleIndex = 0;
  576. }
  577. let pivot = objContainer.setPivot(scaleIndex);
  578. this.scaleIndex = scaleIndex;
  579. this.scalePivot = pivot;
  580. this.mainAxisVector = { x: StartX - pivot.x, y: StartY - pivot.y };
  581. let scale = objContainer.parent.scale;
  582. this.initScale = { x: scale.x, y: scale.y };
  583. this.mainAxisVectorLenth = VectorLenth(
  584. this.mainAxisVector.x,
  585. this.mainAxisVector.y
  586. );
  587. let ret = objContainer.getPivotXY(scaleIndex);
  588. this.xAxisVector = ret.x;
  589. this.xAxisVectorLength = VectorLenth(ret.x.x, ret.x.y);
  590. this.yAxisVector = ret.y;
  591. this.yAxisVectorLength = VectorLenth(ret.y.x, ret.y.y);
  592. return;
  593. }
  594. this.scaleCmd = true;
  595. let center = this.scalePivot;
  596. let vec = { x: StartX - center.x, y: StartY - center.y };
  597. if (event.shiftKey) {
  598. //按住shift 自由缩放
  599. let dtaX = Project(vec, this.xAxisVector) / this.xAxisVectorLength;
  600. let dtaY = Project(vec, this.yAxisVector) / this.yAxisVectorLength;
  601. this.lastScale.x = dtaX * this.initScale.x;
  602. this.lastScale.y = dtaY * this.initScale.y;
  603. objContainer.scale(this.lastScale.x, this.lastScale.y);
  604. } else {
  605. let mainVec = this.mainAxisVector;
  606. let dtaScale = Project(vec, mainVec) / this.mainAxisVectorLenth;
  607. let i = dirOrth.indexOf(this._mouseDownFlag);
  608. if (i == -1) {
  609. this.lastScale.x = dtaScale * this.initScale.x;
  610. this.lastScale.y = dtaScale * this.initScale.y;
  611. objContainer.scale(this.lastScale.x, this.lastScale.y);
  612. } else if (i == 0 || i == 1) {
  613. this.lastScale.x = dtaScale * this.initScale.x;
  614. objContainer.scaleX(this.lastScale.x);
  615. } else if (i == 2 || i == 3) {
  616. this.lastScale.y = dtaScale * this.initScale.y;
  617. objContainer.scaleY(this.lastScale.y);
  618. }
  619. }
  620. this.upgateGizmoStyle();
  621. }
  622. scaleMouseUp(event: MouseEvent) {
  623. this.scalePivot = undefined;
  624. if (this.scaleCmd) {
  625. let preScale = { x: this.initScale.x, y: this.initScale.y };
  626. let scaleIndex = this.scaleIndex;
  627. let lastScale = { x: this.lastScale.x, y: this.lastScale.y };
  628. // this.editor.history.record({
  629. // undo:()=>{
  630. // this.objContainer.setPivot( scaleIndex );
  631. // this.objContainer.scale(preScale.x, preScale.y);
  632. // this.emitChange();
  633. // },
  634. // redo:()=>{
  635. // this.objContainer.setPivot( scaleIndex );
  636. // this.objContainer.scale(lastScale.x, lastScale.y);
  637. // this.emitChange();
  638. // }
  639. // });
  640. this.scaleCmd = false;
  641. // this.emit("objSizeChanged");
  642. // this.editor.draw();
  643. }
  644. // this.emitTransformed = false;
  645. }
  646. }