版博士V2.0程序
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

1 год назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. import { ref, watch } from 'vue-demi';
  2. import { createDrauu } from 'drauu';
  3. import { createEventHook, unrefElement } from '@vueuse/core';
  4. import { tryOnScopeDispose } from '@vueuse/shared';
  5. var __defProp = Object.defineProperty;
  6. var __getOwnPropSymbols = Object.getOwnPropertySymbols;
  7. var __hasOwnProp = Object.prototype.hasOwnProperty;
  8. var __propIsEnum = Object.prototype.propertyIsEnumerable;
  9. var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
  10. var __spreadValues = (a, b) => {
  11. for (var prop in b || (b = {}))
  12. if (__hasOwnProp.call(b, prop))
  13. __defNormalProp(a, prop, b[prop]);
  14. if (__getOwnPropSymbols)
  15. for (var prop of __getOwnPropSymbols(b)) {
  16. if (__propIsEnum.call(b, prop))
  17. __defNormalProp(a, prop, b[prop]);
  18. }
  19. return a;
  20. };
  21. function useDrauu(target, options) {
  22. const drauuInstance = ref();
  23. let disposables = [];
  24. const onChangedHook = createEventHook();
  25. const onCanceledHook = createEventHook();
  26. const onCommittedHook = createEventHook();
  27. const onStartHook = createEventHook();
  28. const onEndHook = createEventHook();
  29. const canUndo = ref(false);
  30. const canRedo = ref(false);
  31. const altPressed = ref(false);
  32. const shiftPressed = ref(false);
  33. const brush = ref({
  34. color: "black",
  35. size: 3,
  36. arrowEnd: false,
  37. cornerRadius: 0,
  38. dasharray: void 0,
  39. fill: "transparent",
  40. mode: "draw"
  41. });
  42. watch(brush, () => {
  43. const instance = drauuInstance.value;
  44. if (instance) {
  45. instance.brush = brush.value;
  46. instance.mode = brush.value.mode;
  47. }
  48. }, { deep: true });
  49. const undo = () => {
  50. var _a;
  51. return (_a = drauuInstance.value) == null ? void 0 : _a.undo();
  52. };
  53. const redo = () => {
  54. var _a;
  55. return (_a = drauuInstance.value) == null ? void 0 : _a.redo();
  56. };
  57. const clear = () => {
  58. var _a;
  59. return (_a = drauuInstance.value) == null ? void 0 : _a.clear();
  60. };
  61. const cancel = () => {
  62. var _a;
  63. return (_a = drauuInstance.value) == null ? void 0 : _a.cancel();
  64. };
  65. const load = (svg) => {
  66. var _a;
  67. return (_a = drauuInstance.value) == null ? void 0 : _a.load(svg);
  68. };
  69. const dump = () => {
  70. var _a;
  71. return (_a = drauuInstance.value) == null ? void 0 : _a.dump();
  72. };
  73. const cleanup = () => {
  74. var _a;
  75. disposables.forEach((dispose) => dispose());
  76. (_a = drauuInstance.value) == null ? void 0 : _a.unmount();
  77. };
  78. const syncStatus = () => {
  79. if (drauuInstance.value) {
  80. canUndo.value = drauuInstance.value.canUndo();
  81. canRedo.value = drauuInstance.value.canRedo();
  82. altPressed.value = drauuInstance.value.altPressed;
  83. shiftPressed.value = drauuInstance.value.shiftPressed;
  84. }
  85. };
  86. watch(() => unrefElement(target), (el) => {
  87. if (!el || typeof SVGSVGElement === "undefined" || !(el instanceof SVGSVGElement))
  88. return;
  89. if (drauuInstance.value)
  90. cleanup();
  91. drauuInstance.value = createDrauu(__spreadValues({ el }, options));
  92. syncStatus();
  93. disposables = [
  94. drauuInstance.value.on("canceled", () => onCanceledHook.trigger()),
  95. drauuInstance.value.on("committed", () => onCommittedHook.trigger()),
  96. drauuInstance.value.on("start", () => onStartHook.trigger()),
  97. drauuInstance.value.on("end", () => onEndHook.trigger()),
  98. drauuInstance.value.on("changed", () => {
  99. syncStatus();
  100. onChangedHook.trigger();
  101. })
  102. ];
  103. }, { flush: "post" });
  104. tryOnScopeDispose(() => cleanup());
  105. return {
  106. drauuInstance,
  107. load,
  108. dump,
  109. clear,
  110. cancel,
  111. undo,
  112. redo,
  113. canUndo,
  114. canRedo,
  115. brush,
  116. onChanged: onChangedHook.on,
  117. onCommitted: onCommittedHook.on,
  118. onStart: onStartHook.on,
  119. onEnd: onEndHook.on,
  120. onCanceled: onCanceledHook.on
  121. };
  122. }
  123. export { useDrauu };