vue3-draggable-resizable.js 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029
  1. import {
  2. require_vue
  3. } from "./chunk-IND6KQVK.js";
  4. import "./chunk-S6VK5PVK.js";
  5. import "./chunk-YVHZHMSQ.js";
  6. import "./chunk-VNBICN6T.js";
  7. import {
  8. __commonJS,
  9. __esm,
  10. __toCommonJS
  11. } from "./chunk-2LSFTFF7.js";
  12. // node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/utils.js
  13. var require_utils = __commonJS({
  14. "node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/utils.js"(exports) {
  15. "use strict";
  16. var __assign = exports && exports.__assign || function() {
  17. __assign = Object.assign || function(t) {
  18. for (var s, i = 1, n = arguments.length; i < n; i++) {
  19. s = arguments[i];
  20. for (var p in s)
  21. if (Object.prototype.hasOwnProperty.call(s, p))
  22. t[p] = s[p];
  23. }
  24. return t;
  25. };
  26. return __assign.apply(this, arguments);
  27. };
  28. exports.__esModule = true;
  29. exports.getReferenceLineMap = exports.getId = exports.filterHandles = exports.removeEvent = exports.addEvent = exports.getElSize = exports.IDENTITY = void 0;
  30. var Vue3DraggableResizable_1 = require_Vue3DraggableResizable();
  31. exports.IDENTITY = Symbol("Vue3DraggableResizable");
  32. function getElSize(el) {
  33. var style = window.getComputedStyle(el);
  34. return {
  35. width: parseFloat(style.getPropertyValue("width")),
  36. height: parseFloat(style.getPropertyValue("height"))
  37. };
  38. }
  39. exports.getElSize = getElSize;
  40. function createEventListenerFunction(type) {
  41. return function(el, events, handler) {
  42. if (!el) {
  43. return;
  44. }
  45. if (typeof events === "string") {
  46. events = [events];
  47. }
  48. events.forEach(function(e) {
  49. return el[type](e, handler, { passive: false });
  50. });
  51. };
  52. }
  53. exports.addEvent = createEventListenerFunction("addEventListener");
  54. exports.removeEvent = createEventListenerFunction("removeEventListener");
  55. function filterHandles(handles) {
  56. if (handles && handles.length > 0) {
  57. var result_1 = [];
  58. handles.forEach(function(item) {
  59. if (Vue3DraggableResizable_1.ALL_HANDLES.includes(item) && !result_1.includes(item)) {
  60. result_1.push(item);
  61. }
  62. });
  63. return result_1;
  64. } else {
  65. return [];
  66. }
  67. }
  68. exports.filterHandles = filterHandles;
  69. function getId() {
  70. return String(Math.random()).substr(2) + String(Date.now());
  71. }
  72. exports.getId = getId;
  73. function getReferenceLineMap(containerProvider, parentSize, id) {
  74. var _a, _b;
  75. if (containerProvider.disabled.value) {
  76. return null;
  77. }
  78. var referenceLine = {
  79. row: [],
  80. col: []
  81. };
  82. var parentWidth = parentSize.parentWidth, parentHeight = parentSize.parentHeight;
  83. (_a = referenceLine.row).push.apply(_a, containerProvider.adsorbRows);
  84. (_b = referenceLine.col).push.apply(_b, containerProvider.adsorbCols);
  85. if (containerProvider.adsorbParent.value) {
  86. referenceLine.row.push(0, parentHeight.value, parentHeight.value / 2);
  87. referenceLine.col.push(0, parentWidth.value, parentWidth.value / 2);
  88. }
  89. var widgetPositionStore = containerProvider.getPositionStore(id);
  90. Object.values(widgetPositionStore).forEach(function(_a2) {
  91. var x = _a2.x, y = _a2.y, w = _a2.w, h = _a2.h;
  92. referenceLine.row.push(y, y + h, y + h / 2);
  93. referenceLine.col.push(x, x + w, x + w / 2);
  94. });
  95. var referenceLineMap = {
  96. row: referenceLine.row.reduce(function(pre, cur) {
  97. var _a2;
  98. return __assign(__assign({}, pre), (_a2 = {}, _a2[cur] = { min: cur - 5, max: cur + 5, value: cur }, _a2));
  99. }, {}),
  100. col: referenceLine.col.reduce(function(pre, cur) {
  101. var _a2;
  102. return __assign(__assign({}, pre), (_a2 = {}, _a2[cur] = { min: cur - 5, max: cur + 5, value: cur }, _a2));
  103. }, {})
  104. };
  105. return referenceLineMap;
  106. }
  107. exports.getReferenceLineMap = getReferenceLineMap;
  108. }
  109. });
  110. // node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/hooks.js
  111. var require_hooks = __commonJS({
  112. "node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/hooks.js"(exports) {
  113. "use strict";
  114. var __assign = exports && exports.__assign || function() {
  115. __assign = Object.assign || function(t) {
  116. for (var s, i = 1, n = arguments.length; i < n; i++) {
  117. s = arguments[i];
  118. for (var p in s)
  119. if (Object.prototype.hasOwnProperty.call(s, p))
  120. t[p] = s[p];
  121. }
  122. return t;
  123. };
  124. return __assign.apply(this, arguments);
  125. };
  126. exports.__esModule = true;
  127. exports.watchProps = exports.initResizeHandle = exports.initDraggableContainer = exports.initLimitSizeAndMethods = exports.initParent = exports.initState = exports.useState = void 0;
  128. var vue_1 = require_vue();
  129. var utils_1 = require_utils();
  130. function useState(initialState) {
  131. var state = vue_1.ref(initialState);
  132. var setState = function(value) {
  133. state.value = value;
  134. return value;
  135. };
  136. return [state, setState];
  137. }
  138. exports.useState = useState;
  139. function initState(props, emit) {
  140. var _a = useState(props.initW), width = _a[0], setWidth = _a[1];
  141. var _b = useState(props.initH), height = _b[0], setHeight = _b[1];
  142. var _c = useState(props.x), left = _c[0], setLeft = _c[1];
  143. var _d = useState(props.y), top = _d[0], setTop = _d[1];
  144. var _e = useState(props.active), enable = _e[0], setEnable = _e[1];
  145. var _f = useState(false), dragging = _f[0], setDragging = _f[1];
  146. var _g = useState(false), resizing = _g[0], setResizing = _g[1];
  147. var _h = useState(""), resizingHandle = _h[0], setResizingHandle = _h[1];
  148. var _j = useState(Infinity), resizingMaxWidth = _j[0], setResizingMaxWidth = _j[1];
  149. var _k = useState(Infinity), resizingMaxHeight = _k[0], setResizingMaxHeight = _k[1];
  150. var _l = useState(props.minW), resizingMinWidth = _l[0], setResizingMinWidth = _l[1];
  151. var _m = useState(props.minH), resizingMinHeight = _m[0], setResizingMinHeight = _m[1];
  152. var aspectRatio = vue_1.computed(function() {
  153. return height.value / width.value;
  154. });
  155. vue_1.watch(width, function(newVal) {
  156. emit("update:w", newVal);
  157. }, { immediate: true });
  158. vue_1.watch(height, function(newVal) {
  159. emit("update:h", newVal);
  160. }, { immediate: true });
  161. vue_1.watch(top, function(newVal) {
  162. emit("update:y", newVal);
  163. });
  164. vue_1.watch(left, function(newVal) {
  165. emit("update:x", newVal);
  166. });
  167. vue_1.watch(enable, function(newVal, oldVal) {
  168. emit("update:active", newVal);
  169. if (!oldVal && newVal) {
  170. emit("activated");
  171. } else if (oldVal && !newVal) {
  172. emit("deactivated");
  173. }
  174. });
  175. vue_1.watch(function() {
  176. return props.active;
  177. }, function(newVal) {
  178. setEnable(newVal);
  179. });
  180. return {
  181. id: utils_1.getId(),
  182. width,
  183. height,
  184. top,
  185. left,
  186. enable,
  187. dragging,
  188. resizing,
  189. resizingHandle,
  190. resizingMaxHeight,
  191. resizingMaxWidth,
  192. resizingMinWidth,
  193. resizingMinHeight,
  194. aspectRatio,
  195. setEnable,
  196. setDragging,
  197. setResizing,
  198. setResizingHandle,
  199. setResizingMaxHeight,
  200. setResizingMaxWidth,
  201. setResizingMinWidth,
  202. setResizingMinHeight,
  203. setWidth: function(val) {
  204. return setWidth(Math.floor(val));
  205. },
  206. setHeight: function(val) {
  207. return setHeight(Math.floor(val));
  208. },
  209. setTop: function(val) {
  210. return setTop(Math.floor(val));
  211. },
  212. setLeft: function(val) {
  213. return setLeft(Math.floor(val));
  214. }
  215. };
  216. }
  217. exports.initState = initState;
  218. function initParent(containerRef) {
  219. var parentWidth = vue_1.ref(0);
  220. var parentHeight = vue_1.ref(0);
  221. vue_1.onMounted(function() {
  222. if (containerRef.value && containerRef.value.parentElement) {
  223. var _a = utils_1.getElSize(containerRef.value.parentElement), width = _a.width, height = _a.height;
  224. parentWidth.value = width;
  225. parentHeight.value = height;
  226. }
  227. });
  228. return {
  229. parentWidth,
  230. parentHeight
  231. };
  232. }
  233. exports.initParent = initParent;
  234. function initLimitSizeAndMethods(props, parentSize, containerProps) {
  235. var width = containerProps.width, height = containerProps.height, left = containerProps.left, top = containerProps.top, resizingMaxWidth = containerProps.resizingMaxWidth, resizingMaxHeight = containerProps.resizingMaxHeight, resizingMinWidth = containerProps.resizingMinWidth, resizingMinHeight = containerProps.resizingMinHeight;
  236. var setWidth = containerProps.setWidth, setHeight = containerProps.setHeight, setTop = containerProps.setTop, setLeft = containerProps.setLeft;
  237. var parentWidth = parentSize.parentWidth, parentHeight = parentSize.parentHeight;
  238. var limitProps = {
  239. minWidth: vue_1.computed(function() {
  240. return resizingMinWidth.value;
  241. }),
  242. minHeight: vue_1.computed(function() {
  243. return resizingMinHeight.value;
  244. }),
  245. maxWidth: vue_1.computed(function() {
  246. var max = Infinity;
  247. if (props.parent) {
  248. max = Math.min(parentWidth.value, resizingMaxWidth.value);
  249. }
  250. return max;
  251. }),
  252. maxHeight: vue_1.computed(function() {
  253. var max = Infinity;
  254. if (props.parent) {
  255. max = Math.min(parentHeight.value, resizingMaxHeight.value);
  256. }
  257. return max;
  258. }),
  259. minLeft: vue_1.computed(function() {
  260. return props.parent ? 0 : -Infinity;
  261. }),
  262. minTop: vue_1.computed(function() {
  263. return props.parent ? 0 : -Infinity;
  264. }),
  265. maxLeft: vue_1.computed(function() {
  266. return props.parent ? parentWidth.value - width.value : Infinity;
  267. }),
  268. maxTop: vue_1.computed(function() {
  269. return props.parent ? parentHeight.value - height.value : Infinity;
  270. })
  271. };
  272. var limitMethods = {
  273. setWidth: function(val) {
  274. if (props.disabledW) {
  275. return width.value;
  276. }
  277. return setWidth(Math.min(limitProps.maxWidth.value, Math.max(limitProps.minWidth.value, val)));
  278. },
  279. setHeight: function(val) {
  280. if (props.disabledH) {
  281. return height.value;
  282. }
  283. return setHeight(Math.min(limitProps.maxHeight.value, Math.max(limitProps.minHeight.value, val)));
  284. },
  285. setTop: function(val) {
  286. if (props.disabledY) {
  287. return top.value;
  288. }
  289. return setTop(Math.min(limitProps.maxTop.value, Math.max(limitProps.minTop.value, val)));
  290. },
  291. setLeft: function(val) {
  292. if (props.disabledX) {
  293. return left.value;
  294. }
  295. return setLeft(Math.min(limitProps.maxLeft.value, Math.max(limitProps.minLeft.value, val)));
  296. }
  297. };
  298. return __assign(__assign({}, limitProps), limitMethods);
  299. }
  300. exports.initLimitSizeAndMethods = initLimitSizeAndMethods;
  301. var DOWN_HANDLES = ["mousedown", "touchstart"];
  302. var UP_HANDLES = ["mouseup", "touchend"];
  303. var MOVE_HANDLES = ["mousemove", "touchmove"];
  304. function getPosition(e) {
  305. if ("touches" in e) {
  306. return [e.touches[0].pageX, e.touches[0].pageY];
  307. } else {
  308. return [e.pageX, e.pageY];
  309. }
  310. }
  311. function initDraggableContainer(containerRef, containerProps, limitProps, draggable, emit, containerProvider, parentSize) {
  312. var x = containerProps.left, y = containerProps.top, w = containerProps.width, h = containerProps.height, dragging = containerProps.dragging, id = containerProps.id;
  313. var setDragging = containerProps.setDragging, setEnable = containerProps.setEnable, setResizing = containerProps.setResizing, setResizingHandle = containerProps.setResizingHandle;
  314. var setTop = limitProps.setTop, setLeft = limitProps.setLeft;
  315. var lstX = 0;
  316. var lstY = 0;
  317. var lstPageX = 0;
  318. var lstPageY = 0;
  319. var referenceLineMap = null;
  320. var documentElement = document.documentElement;
  321. var _unselect = function(e) {
  322. var _a;
  323. var target = e.target;
  324. if (!((_a = containerRef.value) === null || _a === void 0 ? void 0 : _a.contains(target))) {
  325. setEnable(false);
  326. setDragging(false);
  327. setResizing(false);
  328. setResizingHandle("");
  329. }
  330. };
  331. var handleUp = function() {
  332. setDragging(false);
  333. utils_1.removeEvent(documentElement, UP_HANDLES, handleUp);
  334. utils_1.removeEvent(documentElement, MOVE_HANDLES, handleDrag);
  335. referenceLineMap = null;
  336. if (containerProvider) {
  337. containerProvider.updatePosition(id, {
  338. x: x.value,
  339. y: y.value,
  340. w: w.value,
  341. h: h.value
  342. });
  343. containerProvider.setMatchedLine(null);
  344. }
  345. };
  346. var handleDrag = function(e) {
  347. e.preventDefault();
  348. if (!(dragging.value && containerRef.value))
  349. return;
  350. var _a = getPosition(e), pageX = _a[0], pageY = _a[1];
  351. var deltaX = pageX - lstPageX;
  352. var deltaY = pageY - lstPageY;
  353. var newLeft = lstX + deltaX;
  354. var newTop = lstY + deltaY;
  355. if (referenceLineMap !== null) {
  356. var widgetSelfLine = {
  357. col: [newLeft, newLeft + w.value / 2, newLeft + w.value],
  358. row: [newTop, newTop + h.value / 2, newTop + h.value]
  359. };
  360. var matchedLine = {
  361. row: widgetSelfLine.row.map(function(i, index) {
  362. var match = null;
  363. Object.values(referenceLineMap.row).forEach(function(referItem) {
  364. if (i >= referItem.min && i <= referItem.max) {
  365. match = referItem.value;
  366. }
  367. });
  368. if (match !== null) {
  369. if (index === 0) {
  370. newTop = match;
  371. } else if (index === 1) {
  372. newTop = Math.floor(match - h.value / 2);
  373. } else if (index === 2) {
  374. newTop = Math.floor(match - h.value);
  375. }
  376. }
  377. return match;
  378. }).filter(function(i) {
  379. return i !== null;
  380. }),
  381. col: widgetSelfLine.col.map(function(i, index) {
  382. var match = null;
  383. Object.values(referenceLineMap.col).forEach(function(referItem) {
  384. if (i >= referItem.min && i <= referItem.max) {
  385. match = referItem.value;
  386. }
  387. });
  388. if (match !== null) {
  389. if (index === 0) {
  390. newLeft = match;
  391. } else if (index === 1) {
  392. newLeft = Math.floor(match - w.value / 2);
  393. } else if (index === 2) {
  394. newLeft = Math.floor(match - w.value);
  395. }
  396. }
  397. return match;
  398. }).filter(function(i) {
  399. return i !== null;
  400. })
  401. };
  402. containerProvider.setMatchedLine(matchedLine);
  403. }
  404. emit("dragging", { x: setLeft(newLeft), y: setTop(newTop) });
  405. };
  406. var handleDown = function(e) {
  407. if (!draggable.value)
  408. return;
  409. setDragging(true);
  410. lstX = x.value;
  411. lstY = y.value;
  412. lstPageX = getPosition(e)[0];
  413. lstPageY = getPosition(e)[1];
  414. utils_1.addEvent(documentElement, MOVE_HANDLES, handleDrag);
  415. utils_1.addEvent(documentElement, UP_HANDLES, handleUp);
  416. if (containerProvider && !containerProvider.disabled.value) {
  417. referenceLineMap = utils_1.getReferenceLineMap(containerProvider, parentSize, id);
  418. }
  419. };
  420. vue_1.watch(dragging, function(cur, pre) {
  421. if (!pre && cur) {
  422. emit("drag-start", { x: x.value, y: y.value });
  423. setEnable(true);
  424. setDragging(true);
  425. } else {
  426. emit("drag-end", { x: x.value, y: y.value });
  427. setDragging(false);
  428. }
  429. });
  430. vue_1.onMounted(function() {
  431. var el = containerRef.value;
  432. if (!el)
  433. return;
  434. el.style.left = x + "px";
  435. el.style.top = y + "px";
  436. utils_1.addEvent(documentElement, DOWN_HANDLES, _unselect);
  437. utils_1.addEvent(el, DOWN_HANDLES, handleDown);
  438. });
  439. vue_1.onUnmounted(function() {
  440. if (!containerRef.value)
  441. return;
  442. utils_1.removeEvent(documentElement, DOWN_HANDLES, _unselect);
  443. utils_1.removeEvent(documentElement, UP_HANDLES, handleUp);
  444. utils_1.removeEvent(documentElement, MOVE_HANDLES, handleDrag);
  445. });
  446. return { containerRef };
  447. }
  448. exports.initDraggableContainer = initDraggableContainer;
  449. function initResizeHandle(containerProps, limitProps, parentSize, props, emit) {
  450. var setWidth = limitProps.setWidth, setHeight = limitProps.setHeight, setLeft = limitProps.setLeft, setTop = limitProps.setTop;
  451. var width = containerProps.width, height = containerProps.height, left = containerProps.left, top = containerProps.top, aspectRatio = containerProps.aspectRatio;
  452. var setResizing = containerProps.setResizing, setResizingHandle = containerProps.setResizingHandle, setResizingMaxWidth = containerProps.setResizingMaxWidth, setResizingMaxHeight = containerProps.setResizingMaxHeight, setResizingMinWidth = containerProps.setResizingMinWidth, setResizingMinHeight = containerProps.setResizingMinHeight;
  453. var parentWidth = parentSize.parentWidth, parentHeight = parentSize.parentHeight;
  454. var lstW = 0;
  455. var lstH = 0;
  456. var lstX = 0;
  457. var lstY = 0;
  458. var lstPageX = 0;
  459. var lstPageY = 0;
  460. var tmpAspectRatio = 1;
  461. var idx0 = "";
  462. var idx1 = "";
  463. var documentElement = document.documentElement;
  464. var resizeHandleDrag = function(e) {
  465. e.preventDefault();
  466. var _a = getPosition(e), _pageX = _a[0], _pageY = _a[1];
  467. var deltaX = _pageX - lstPageX;
  468. var deltaY = _pageY - lstPageY;
  469. var _deltaX = deltaX;
  470. var _deltaY = deltaY;
  471. if (props.lockAspectRatio) {
  472. deltaX = Math.abs(deltaX);
  473. deltaY = deltaX * tmpAspectRatio;
  474. if (idx0 === "t") {
  475. if (_deltaX < 0 || idx1 === "m" && _deltaY < 0) {
  476. deltaX = -deltaX;
  477. deltaY = -deltaY;
  478. }
  479. } else {
  480. if (_deltaX < 0 || idx1 === "m" && _deltaY < 0) {
  481. deltaX = -deltaX;
  482. deltaY = -deltaY;
  483. }
  484. }
  485. }
  486. if (idx0 === "t") {
  487. setHeight(lstH - deltaY);
  488. setTop(lstY - (height.value - lstH));
  489. } else if (idx0 === "b") {
  490. setHeight(lstH + deltaY);
  491. }
  492. if (idx1 === "l") {
  493. setWidth(lstW - deltaX);
  494. setLeft(lstX - (width.value - lstW));
  495. } else if (idx1 === "r") {
  496. setWidth(lstW + deltaX);
  497. }
  498. emit("resizing", {
  499. x: left.value,
  500. y: top.value,
  501. w: width.value,
  502. h: height.value
  503. });
  504. };
  505. var resizeHandleUp = function() {
  506. emit("resize-end", {
  507. x: left.value,
  508. y: top.value,
  509. w: width.value,
  510. h: height.value
  511. });
  512. setResizingHandle("");
  513. setResizing(false);
  514. setResizingMaxWidth(Infinity);
  515. setResizingMaxHeight(Infinity);
  516. setResizingMinWidth(props.minW);
  517. setResizingMinHeight(props.minH);
  518. utils_1.removeEvent(documentElement, MOVE_HANDLES, resizeHandleDrag);
  519. utils_1.removeEvent(documentElement, UP_HANDLES, resizeHandleUp);
  520. };
  521. var resizeHandleDown = function(e, handleType) {
  522. if (!props.resizable)
  523. return;
  524. e.stopPropagation();
  525. setResizingHandle(handleType);
  526. setResizing(true);
  527. idx0 = handleType[0];
  528. idx1 = handleType[1];
  529. if (props.lockAspectRatio) {
  530. if (["tl", "tm", "ml", "bl"].includes(handleType)) {
  531. idx0 = "t";
  532. idx1 = "l";
  533. } else {
  534. idx0 = "b";
  535. idx1 = "r";
  536. }
  537. }
  538. var minHeight = props.minH;
  539. var minWidth = props.minW;
  540. if (props.lockAspectRatio) {
  541. if (minHeight / minWidth > aspectRatio.value) {
  542. minWidth = minHeight / aspectRatio.value;
  543. } else {
  544. minHeight = minWidth * aspectRatio.value;
  545. }
  546. }
  547. setResizingMinWidth(minWidth);
  548. setResizingMinHeight(minHeight);
  549. if (props.parent) {
  550. var maxHeight = idx0 === "t" ? top.value + height.value : parentHeight.value - top.value;
  551. var maxWidth = idx1 === "l" ? left.value + width.value : parentWidth.value - left.value;
  552. if (props.lockAspectRatio) {
  553. if (maxHeight / maxWidth < aspectRatio.value) {
  554. maxWidth = maxHeight / aspectRatio.value;
  555. } else {
  556. maxHeight = maxWidth * aspectRatio.value;
  557. }
  558. }
  559. setResizingMaxHeight(maxHeight);
  560. setResizingMaxWidth(maxWidth);
  561. }
  562. lstW = width.value;
  563. lstH = height.value;
  564. lstX = left.value;
  565. lstY = top.value;
  566. var lstPagePosition = getPosition(e);
  567. lstPageX = lstPagePosition[0];
  568. lstPageY = lstPagePosition[1];
  569. tmpAspectRatio = aspectRatio.value;
  570. emit("resize-start", {
  571. x: left.value,
  572. y: top.value,
  573. w: width.value,
  574. h: height.value
  575. });
  576. utils_1.addEvent(documentElement, MOVE_HANDLES, resizeHandleDrag);
  577. utils_1.addEvent(documentElement, UP_HANDLES, resizeHandleUp);
  578. };
  579. vue_1.onUnmounted(function() {
  580. utils_1.removeEvent(documentElement, UP_HANDLES, resizeHandleUp);
  581. utils_1.removeEvent(documentElement, MOVE_HANDLES, resizeHandleDrag);
  582. });
  583. var handlesFiltered = vue_1.computed(function() {
  584. return props.resizable ? utils_1.filterHandles(props.handles) : [];
  585. });
  586. return {
  587. handlesFiltered,
  588. resizeHandleDown
  589. };
  590. }
  591. exports.initResizeHandle = initResizeHandle;
  592. function watchProps(props, limits) {
  593. var setWidth = limits.setWidth, setHeight = limits.setHeight, setLeft = limits.setLeft, setTop = limits.setTop;
  594. vue_1.watch(function() {
  595. return props.w;
  596. }, function(newVal) {
  597. setWidth(newVal);
  598. });
  599. vue_1.watch(function() {
  600. return props.h;
  601. }, function(newVal) {
  602. setHeight(newVal);
  603. });
  604. vue_1.watch(function() {
  605. return props.x;
  606. }, function(newVal) {
  607. setLeft(newVal);
  608. });
  609. vue_1.watch(function() {
  610. return props.y;
  611. }, function(newVal) {
  612. setTop(newVal);
  613. });
  614. }
  615. exports.watchProps = watchProps;
  616. }
  617. });
  618. // vite:dep-pre-bundle:external-conversion:C:/Users/zhaojinyu/Desktop/USKY/jnpf5.2/jnpf-web-vue3/node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/index.css
  619. var components_exports = {};
  620. import "C:/Users/zhaojinyu/Desktop/USKY/jnpf5.2/jnpf-web-vue3/node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/index.css";
  621. var init_components = __esm({
  622. "vite:dep-pre-bundle:external-conversion:C:/Users/zhaojinyu/Desktop/USKY/jnpf5.2/jnpf-web-vue3/node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/index.css"() {
  623. }
  624. });
  625. // node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/Vue3DraggableResizable.js
  626. var require_Vue3DraggableResizable = __commonJS({
  627. "node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/Vue3DraggableResizable.js"(exports) {
  628. "use strict";
  629. var __assign = exports && exports.__assign || function() {
  630. __assign = Object.assign || function(t) {
  631. for (var s, i = 1, n = arguments.length; i < n; i++) {
  632. s = arguments[i];
  633. for (var p in s)
  634. if (Object.prototype.hasOwnProperty.call(s, p))
  635. t[p] = s[p];
  636. }
  637. return t;
  638. };
  639. return __assign.apply(this, arguments);
  640. };
  641. var __spreadArrays = exports && exports.__spreadArrays || function() {
  642. for (var s = 0, i = 0, il = arguments.length; i < il; i++)
  643. s += arguments[i].length;
  644. for (var r = Array(s), k = 0, i = 0; i < il; i++)
  645. for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
  646. r[k] = a[j];
  647. return r;
  648. };
  649. exports.__esModule = true;
  650. exports.ALL_HANDLES = void 0;
  651. var vue_1 = require_vue();
  652. var hooks_1 = require_hooks();
  653. init_components();
  654. var utils_1 = require_utils();
  655. exports.ALL_HANDLES = [
  656. "tl",
  657. "tm",
  658. "tr",
  659. "ml",
  660. "mr",
  661. "bl",
  662. "bm",
  663. "br"
  664. ];
  665. var VdrProps = {
  666. initW: {
  667. type: Number,
  668. "default": null
  669. },
  670. initH: {
  671. type: Number,
  672. "default": null
  673. },
  674. w: {
  675. type: Number,
  676. "default": 0
  677. },
  678. h: {
  679. type: Number,
  680. "default": 0
  681. },
  682. x: {
  683. type: Number,
  684. "default": 0
  685. },
  686. y: {
  687. type: Number,
  688. "default": 0
  689. },
  690. draggable: {
  691. type: Boolean,
  692. "default": true
  693. },
  694. resizable: {
  695. type: Boolean,
  696. "default": true
  697. },
  698. disabledX: {
  699. type: Boolean,
  700. "default": false
  701. },
  702. disabledY: {
  703. type: Boolean,
  704. "default": false
  705. },
  706. disabledW: {
  707. type: Boolean,
  708. "default": false
  709. },
  710. disabledH: {
  711. type: Boolean,
  712. "default": false
  713. },
  714. minW: {
  715. type: Number,
  716. "default": 20
  717. },
  718. minH: {
  719. type: Number,
  720. "default": 20
  721. },
  722. active: {
  723. type: Boolean,
  724. "default": false
  725. },
  726. parent: {
  727. type: Boolean,
  728. "default": false
  729. },
  730. handles: {
  731. type: Array,
  732. "default": exports.ALL_HANDLES,
  733. validator: function(handles) {
  734. return utils_1.filterHandles(handles).length === handles.length;
  735. }
  736. },
  737. classNameDraggable: {
  738. type: String,
  739. "default": "draggable"
  740. },
  741. classNameResizable: {
  742. type: String,
  743. "default": "resizable"
  744. },
  745. classNameDragging: {
  746. type: String,
  747. "default": "dragging"
  748. },
  749. classNameResizing: {
  750. type: String,
  751. "default": "resizing"
  752. },
  753. classNameActive: {
  754. type: String,
  755. "default": "active"
  756. },
  757. classNameHandle: {
  758. type: String,
  759. "default": "handle"
  760. },
  761. lockAspectRatio: {
  762. type: Boolean,
  763. "default": false
  764. }
  765. };
  766. var emits = [
  767. "activated",
  768. "deactivated",
  769. "drag-start",
  770. "resize-start",
  771. "dragging",
  772. "resizing",
  773. "drag-end",
  774. "resize-end",
  775. "update:w",
  776. "update:h",
  777. "update:x",
  778. "update:y",
  779. "update:active"
  780. ];
  781. var VueDraggableResizable = vue_1.defineComponent({
  782. name: "Vue3DraggableResizable",
  783. props: VdrProps,
  784. emits,
  785. setup: function(props, _a) {
  786. var emit = _a.emit;
  787. var containerProps = hooks_1.initState(props, emit);
  788. var provideIdentity = vue_1.inject("identity", Symbol());
  789. var containerProvider = null;
  790. if (provideIdentity === utils_1.IDENTITY) {
  791. containerProvider = {
  792. updatePosition: vue_1.inject("updatePosition"),
  793. getPositionStore: vue_1.inject("getPositionStore"),
  794. disabled: vue_1.inject("disabled"),
  795. adsorbParent: vue_1.inject("adsorbParent"),
  796. adsorbCols: vue_1.inject("adsorbCols"),
  797. adsorbRows: vue_1.inject("adsorbRows"),
  798. setMatchedLine: vue_1.inject("setMatchedLine")
  799. };
  800. }
  801. var containerRef = vue_1.ref();
  802. var parentSize = hooks_1.initParent(containerRef);
  803. var limitProps = hooks_1.initLimitSizeAndMethods(props, parentSize, containerProps);
  804. hooks_1.initDraggableContainer(containerRef, containerProps, limitProps, vue_1.toRef(props, "draggable"), emit, containerProvider, parentSize);
  805. var resizeHandle = hooks_1.initResizeHandle(containerProps, limitProps, parentSize, props, emit);
  806. hooks_1.watchProps(props, limitProps);
  807. return __assign(__assign(__assign(__assign({
  808. containerRef,
  809. containerProvider
  810. }, containerProps), parentSize), limitProps), resizeHandle);
  811. },
  812. computed: {
  813. style: function() {
  814. return {
  815. width: this.width + "px",
  816. height: this.height + "px",
  817. top: this.top + "px",
  818. left: this.left + "px"
  819. };
  820. },
  821. klass: function() {
  822. var _a;
  823. return _a = {}, _a[this.classNameActive] = this.enable, _a[this.classNameDragging] = this.dragging, _a[this.classNameResizing] = this.resizing, _a[this.classNameDraggable] = this.draggable, _a[this.classNameResizable] = this.resizable, _a;
  824. }
  825. },
  826. mounted: function() {
  827. if (!this.containerRef)
  828. return;
  829. this.containerRef.ondragstart = function() {
  830. return false;
  831. };
  832. var _a = utils_1.getElSize(this.containerRef), width = _a.width, height = _a.height;
  833. this.setWidth(this.initW === null ? this.w || width : this.initW);
  834. this.setHeight(this.initH === null ? this.h || height : this.initH);
  835. if (this.containerProvider) {
  836. this.containerProvider.updatePosition(this.id, {
  837. x: this.left,
  838. y: this.top,
  839. w: this.width,
  840. h: this.height
  841. });
  842. }
  843. },
  844. render: function() {
  845. var _this = this;
  846. return vue_1.h("div", {
  847. ref: "containerRef",
  848. "class": ["vdr-container", this.klass],
  849. style: this.style
  850. }, __spreadArrays([
  851. this.$slots["default"] && this.$slots["default"]()
  852. ], this.handlesFiltered.map(function(item) {
  853. return vue_1.h("div", {
  854. "class": [
  855. "vdr-handle",
  856. "vdr-handle-" + item,
  857. _this.classNameHandle,
  858. _this.classNameHandle + "-" + item
  859. ],
  860. style: { display: _this.enable ? "block" : "none" },
  861. onMousedown: function(e) {
  862. return _this.resizeHandleDown(e, item);
  863. },
  864. onTouchstart: function(e) {
  865. return _this.resizeHandleDown(e, item);
  866. }
  867. });
  868. })));
  869. }
  870. });
  871. exports["default"] = VueDraggableResizable;
  872. }
  873. });
  874. // node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/DraggableContainer.js
  875. var require_DraggableContainer = __commonJS({
  876. "node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/components/DraggableContainer.js"(exports) {
  877. "use strict";
  878. var __spreadArrays = exports && exports.__spreadArrays || function() {
  879. for (var s = 0, i = 0, il = arguments.length; i < il; i++)
  880. s += arguments[i].length;
  881. for (var r = Array(s), k = 0, i = 0; i < il; i++)
  882. for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
  883. r[k] = a[j];
  884. return r;
  885. };
  886. exports.__esModule = true;
  887. var vue_1 = require_vue();
  888. var utils_1 = require_utils();
  889. exports["default"] = vue_1.defineComponent({
  890. name: "DraggableContainer",
  891. props: {
  892. disabled: {
  893. type: Boolean,
  894. "default": false
  895. },
  896. adsorbParent: {
  897. type: Boolean,
  898. "default": true
  899. },
  900. adsorbCols: {
  901. type: Array,
  902. "default": null
  903. },
  904. adsorbRows: {
  905. type: Array,
  906. "default": null
  907. },
  908. referenceLineVisible: {
  909. type: Boolean,
  910. "default": true
  911. },
  912. referenceLineColor: {
  913. type: String,
  914. "default": "#f00"
  915. }
  916. },
  917. setup: function(props) {
  918. var positionStore = vue_1.reactive({});
  919. var updatePosition = function(id, position) {
  920. positionStore[id] = position;
  921. };
  922. var getPositionStore = function(excludeId) {
  923. var _positionStore = Object.assign({}, positionStore);
  924. if (excludeId) {
  925. delete _positionStore[excludeId];
  926. }
  927. return _positionStore;
  928. };
  929. var state = vue_1.reactive({
  930. matchedLine: null
  931. });
  932. var matchedRows = vue_1.computed(function() {
  933. return state.matchedLine && state.matchedLine.row || [];
  934. });
  935. var matchedCols = vue_1.computed(function() {
  936. return state.matchedLine && state.matchedLine.col || [];
  937. });
  938. var setMatchedLine = function(matchedLine) {
  939. state.matchedLine = matchedLine;
  940. };
  941. vue_1.provide("identity", utils_1.IDENTITY);
  942. vue_1.provide("updatePosition", updatePosition);
  943. vue_1.provide("getPositionStore", getPositionStore);
  944. vue_1.provide("setMatchedLine", setMatchedLine);
  945. vue_1.provide("disabled", vue_1.toRef(props, "disabled"));
  946. vue_1.provide("adsorbParent", vue_1.toRef(props, "adsorbParent"));
  947. vue_1.provide("adsorbCols", props.adsorbCols || []);
  948. vue_1.provide("adsorbRows", props.adsorbRows || []);
  949. return {
  950. matchedRows,
  951. matchedCols
  952. };
  953. },
  954. methods: {
  955. renderReferenceLine: function() {
  956. var _this = this;
  957. if (!this.referenceLineVisible) {
  958. return [];
  959. }
  960. return __spreadArrays(this.matchedCols.map(function(item) {
  961. return vue_1.h("div", {
  962. style: {
  963. width: "0",
  964. height: "100%",
  965. top: "0",
  966. left: item + "px",
  967. borderLeft: "1px dashed " + _this.referenceLineColor,
  968. position: "absolute"
  969. }
  970. });
  971. }), this.matchedRows.map(function(item) {
  972. return vue_1.h("div", {
  973. style: {
  974. width: "100%",
  975. height: "0",
  976. left: "0",
  977. top: item + "px",
  978. borderTop: "1px dashed " + _this.referenceLineColor,
  979. position: "absolute"
  980. }
  981. });
  982. }));
  983. }
  984. },
  985. render: function() {
  986. return vue_1.h("div", {
  987. style: { width: "100%", height: "100%", position: "relative" }
  988. }, __spreadArrays([
  989. this.$slots["default"] && this.$slots["default"]()
  990. ], this.renderReferenceLine()));
  991. }
  992. });
  993. }
  994. });
  995. // node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/index.js
  996. var require_src = __commonJS({
  997. "node_modules/.pnpm/vue3-draggable-resizable@1.6.5/node_modules/vue3-draggable-resizable/src/index.js"(exports) {
  998. var __createBinding = exports && exports.__createBinding || (Object.create ? function(o, m, k, k2) {
  999. if (k2 === void 0)
  1000. k2 = k;
  1001. Object.defineProperty(o, k2, { enumerable: true, get: function() {
  1002. return m[k];
  1003. } });
  1004. } : function(o, m, k, k2) {
  1005. if (k2 === void 0)
  1006. k2 = k;
  1007. o[k2] = m[k];
  1008. });
  1009. exports.__esModule = true;
  1010. var Vue3DraggableResizable_1 = require_Vue3DraggableResizable();
  1011. var DraggableContainer_1 = require_DraggableContainer();
  1012. Vue3DraggableResizable_1["default"].install = function(app) {
  1013. app.component(Vue3DraggableResizable_1["default"].name, Vue3DraggableResizable_1["default"]);
  1014. app.component(DraggableContainer_1["default"].name, DraggableContainer_1["default"]);
  1015. return app;
  1016. };
  1017. var DraggableContainer_2 = require_DraggableContainer();
  1018. __createBinding(exports, DraggableContainer_2, "default", "DraggableContainer");
  1019. exports["default"] = Vue3DraggableResizable_1["default"];
  1020. }
  1021. });
  1022. export default require_src();
  1023. //# sourceMappingURL=vue3-draggable-resizable.js.map