@libresign/pdf-elements 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/pdf-elements.common.js +1691 -1675
- package/dist/pdf-elements.common.js.map +1 -1
- package/dist/pdf-elements.css +1 -1
- package/dist/pdf-elements.umd.js +1691 -1675
- package/dist/pdf-elements.umd.js.map +1 -1
- package/dist/pdf-elements.umd.min.js +2 -2
- package/dist/pdf-elements.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/PDFElements.vue +9 -0
- package/src/index.js +6 -0
- package/src/utils/asyncReader.js +4 -0
|
@@ -2666,7 +2666,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
2666
2666
|
"default": () => (/* binding */ entry_lib)
|
|
2667
2667
|
});
|
|
2668
2668
|
|
|
2669
|
-
// UNUSED EXPORTS: PDFElements
|
|
2669
|
+
// UNUSED EXPORTS: PDFElements, setWorkerPath
|
|
2670
2670
|
|
|
2671
2671
|
;// ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
|
|
2672
2672
|
/* eslint-disable no-var */
|
|
@@ -2686,1008 +2686,56 @@ if (typeof window !== 'undefined') {
|
|
|
2686
2686
|
// Indicate to webpack that this file can be concatenated
|
|
2687
2687
|
/* harmony default export */ const setPublicPath = (null);
|
|
2688
2688
|
|
|
2689
|
-
;// ./node_modules/
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
|
|
2703
|
-
|
|
2704
|
-
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
|
|
2708
|
-
|
|
2709
|
-
|
|
2710
|
-
|
|
2711
|
-
staticClass: "page-slot"
|
|
2712
|
-
}, [_c('div', {
|
|
2713
|
-
staticClass: "page-wrapper",
|
|
2714
|
-
on: {
|
|
2715
|
-
"mousedown": function ($event) {
|
|
2716
|
-
return _vm.selectPage(docIndex, pIndex);
|
|
2717
|
-
},
|
|
2718
|
-
"touchstart": function ($event) {
|
|
2719
|
-
return _vm.selectPage(docIndex, pIndex);
|
|
2720
|
-
}
|
|
2721
|
-
}
|
|
2722
|
-
}, [_c('div', {
|
|
2723
|
-
staticClass: "page-canvas",
|
|
2724
|
-
class: {
|
|
2725
|
-
'shadow-outline': docIndex === _vm.selectedDocIndex && pIndex === _vm.selectedPageIndex
|
|
2726
|
-
}
|
|
2727
|
-
}, [_c('PDFPage', {
|
|
2728
|
-
ref: `page${docIndex}-${pIndex}`,
|
|
2729
|
-
refInFor: true,
|
|
2730
|
-
attrs: {
|
|
2731
|
-
"page": page,
|
|
2732
|
-
"scale": _vm.scale
|
|
2733
|
-
},
|
|
2734
|
-
on: {
|
|
2735
|
-
"onMeasure": function ($event) {
|
|
2736
|
-
return _vm.onMeasure($event, docIndex, pIndex);
|
|
2737
|
-
}
|
|
2738
|
-
}
|
|
2739
|
-
}), _c('div', {
|
|
2740
|
-
staticClass: "overlay"
|
|
2741
|
-
}, [_vm.isAddingMode && _vm.previewPageDocIndex === docIndex && _vm.previewPageIndex === pIndex && _vm.previewElement && _vm.previewVisible ? _c('div', {
|
|
2742
|
-
staticClass: "preview-element",
|
|
2743
|
-
style: {
|
|
2744
|
-
left: `${_vm.previewPosition.x * _vm.previewScale.x}px`,
|
|
2745
|
-
top: `${_vm.previewPosition.y * _vm.previewScale.y}px`,
|
|
2746
|
-
width: `${_vm.previewElement.width * _vm.previewScale.x}px`,
|
|
2747
|
-
height: `${_vm.previewElement.height * _vm.previewScale.y}px`
|
|
2748
|
-
}
|
|
2749
|
-
}, [_vm._t("custom", null, {
|
|
2750
|
-
"object": _vm.previewElement,
|
|
2751
|
-
"isSelected": false
|
|
2752
|
-
})], 2) : _vm._e(), _vm._l(pdfDoc.allObjects[pIndex], function (object) {
|
|
2753
|
-
return _c('DraggableElement', {
|
|
2754
|
-
key: object.id,
|
|
2755
|
-
ref: `draggable${docIndex}-${pIndex}-${object.id}`,
|
|
2756
|
-
refInFor: true,
|
|
2757
|
-
attrs: {
|
|
2758
|
-
"object": object,
|
|
2759
|
-
"pages-scale": _vm.getRenderPageScale(docIndex, pIndex),
|
|
2760
|
-
"page-width": _vm.getPageWidth(docIndex, pIndex),
|
|
2761
|
-
"page-height": _vm.getPageHeight(docIndex, pIndex),
|
|
2762
|
-
"on-update": payload => _vm.updateObject(docIndex, object.id, payload),
|
|
2763
|
-
"on-delete": () => _vm.deleteObject(docIndex, object.id),
|
|
2764
|
-
"on-drag-start": (mouseX, mouseY, pointerOffset, dragShift) => _vm.startDraggingElement(docIndex, pIndex, object, mouseX, mouseY, pointerOffset, dragShift),
|
|
2765
|
-
"on-drag-move": _vm.updateDraggingPosition,
|
|
2766
|
-
"on-drag-end": _vm.stopDraggingElement,
|
|
2767
|
-
"is-being-dragged-globally": _vm.isDraggingElement && _vm.draggingObject && _vm.draggingObject.id === object.id,
|
|
2768
|
-
"dragging-client-pos": _vm.draggingClientPosition,
|
|
2769
|
-
"current-doc-index": docIndex,
|
|
2770
|
-
"current-page-index": pIndex,
|
|
2771
|
-
"global-drag-doc-index": _vm.draggingDocIndex,
|
|
2772
|
-
"global-drag-page-index": _vm.draggingPageIndex,
|
|
2773
|
-
"show-selection-ui": _vm.showSelectionHandles && !_vm.hideSelectionUI && object.resizable !== false,
|
|
2774
|
-
"show-default-actions": _vm.showElementActions && !_vm.hideSelectionUI
|
|
2775
|
-
},
|
|
2776
|
-
scopedSlots: _vm._u([{
|
|
2777
|
-
key: "default",
|
|
2778
|
-
fn: function (slotProps) {
|
|
2779
|
-
return [_vm._t(slotProps.object.type ? `element-${slotProps.object.type}` : 'custom', function () {
|
|
2780
|
-
return [_vm._t("custom", null, {
|
|
2781
|
-
"object": slotProps.object,
|
|
2782
|
-
"onDelete": slotProps.onDelete,
|
|
2783
|
-
"onResize": slotProps.onResize
|
|
2784
|
-
})];
|
|
2785
|
-
}, {
|
|
2786
|
-
"object": slotProps.object,
|
|
2787
|
-
"onDelete": slotProps.onDelete,
|
|
2788
|
-
"onResize": slotProps.onResize
|
|
2789
|
-
})];
|
|
2790
|
-
}
|
|
2791
|
-
}, {
|
|
2792
|
-
key: "actions",
|
|
2793
|
-
fn: function (slotProps) {
|
|
2794
|
-
return [_vm._t("actions", null, {
|
|
2795
|
-
"object": slotProps.object,
|
|
2796
|
-
"onDelete": slotProps.onDelete
|
|
2797
|
-
})];
|
|
2798
|
-
}
|
|
2799
|
-
}], null, true)
|
|
2800
|
-
});
|
|
2801
|
-
})], 2)], 1), _vm.showPageFooter ? _c('div', {
|
|
2802
|
-
staticClass: "page-footer"
|
|
2803
|
-
}, [_c('span', [_vm._v(_vm._s(pdfDoc.name))]), _c('span', [_vm._v(_vm._s(_vm.formatPageNumber(pIndex + 1, pdfDoc.numPages)))])]) : _vm._e()])]);
|
|
2804
|
-
}), 0);
|
|
2805
|
-
}), 0) : _vm._e(), _vm.isDraggingElement && _vm.draggingObject ? _c('div', {
|
|
2806
|
-
staticClass: "drag-portal",
|
|
2807
|
-
style: {
|
|
2808
|
-
position: 'fixed',
|
|
2809
|
-
left: `${_vm.draggingClientPosition.x}px`,
|
|
2810
|
-
top: `${_vm.draggingClientPosition.y}px`,
|
|
2811
|
-
width: `${_vm.draggingObject.width * _vm.draggingScale}px`,
|
|
2812
|
-
height: `${_vm.draggingObject.height * _vm.draggingScale}px`,
|
|
2813
|
-
pointerEvents: 'none'
|
|
2814
|
-
}
|
|
2815
|
-
}, [_vm._t(_vm.draggingObject.type ? `element-${_vm.draggingObject.type}` : 'custom', function () {
|
|
2816
|
-
return [_vm._t("custom", null, {
|
|
2817
|
-
"object": _vm.draggingObject,
|
|
2818
|
-
"isSelected": false
|
|
2819
|
-
})];
|
|
2820
|
-
}, {
|
|
2821
|
-
"object": _vm.draggingObject,
|
|
2822
|
-
"isSelected": false
|
|
2823
|
-
})], 2) : _vm._e()]);
|
|
2824
|
-
};
|
|
2825
|
-
var staticRenderFns = [];
|
|
2826
|
-
|
|
2827
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
2828
|
-
var es_array_push = __webpack_require__(4114);
|
|
2829
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
2830
|
-
var es_iterator_constructor = __webpack_require__(8111);
|
|
2831
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.filter.js
|
|
2832
|
-
var es_iterator_filter = __webpack_require__(2489);
|
|
2833
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
|
|
2834
|
-
var es_iterator_find = __webpack_require__(116);
|
|
2835
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.for-each.js
|
|
2836
|
-
var es_iterator_for_each = __webpack_require__(7588);
|
|
2837
|
-
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.map.js
|
|
2838
|
-
var es_iterator_map = __webpack_require__(1701);
|
|
2839
|
-
;// ./node_modules/debounce/index.js
|
|
2840
|
-
function debounce(function_, wait = 100, options = {}) {
|
|
2841
|
-
if (typeof function_ !== 'function') {
|
|
2842
|
-
throw new TypeError(`Expected the first parameter to be a function, got \`${typeof function_}\`.`);
|
|
2843
|
-
}
|
|
2844
|
-
|
|
2845
|
-
if (wait < 0) {
|
|
2846
|
-
throw new RangeError('`wait` must not be negative.');
|
|
2847
|
-
}
|
|
2848
|
-
|
|
2849
|
-
if (typeof options === 'boolean') {
|
|
2850
|
-
throw new TypeError('The `options` parameter must be an object, not a boolean. Use `{immediate: true}` instead.');
|
|
2851
|
-
}
|
|
2852
|
-
|
|
2853
|
-
const {immediate} = options;
|
|
2854
|
-
|
|
2855
|
-
let storedContext;
|
|
2856
|
-
let storedArguments;
|
|
2857
|
-
let timeoutId;
|
|
2858
|
-
let timestamp;
|
|
2859
|
-
let result;
|
|
2860
|
-
|
|
2861
|
-
function run() {
|
|
2862
|
-
const callContext = storedContext;
|
|
2863
|
-
const callArguments = storedArguments;
|
|
2864
|
-
storedContext = undefined;
|
|
2865
|
-
storedArguments = undefined;
|
|
2866
|
-
result = function_.apply(callContext, callArguments);
|
|
2867
|
-
return result;
|
|
2868
|
-
}
|
|
2869
|
-
|
|
2870
|
-
function later() {
|
|
2871
|
-
const last = Date.now() - timestamp;
|
|
2872
|
-
|
|
2873
|
-
if (last < wait && last >= 0) {
|
|
2874
|
-
timeoutId = setTimeout(later, wait - last);
|
|
2875
|
-
} else {
|
|
2876
|
-
timeoutId = undefined;
|
|
2877
|
-
|
|
2878
|
-
if (!immediate) {
|
|
2879
|
-
result = run();
|
|
2880
|
-
}
|
|
2881
|
-
}
|
|
2882
|
-
}
|
|
2883
|
-
|
|
2884
|
-
const debounced = function (...arguments_) {
|
|
2885
|
-
if (
|
|
2886
|
-
storedContext
|
|
2887
|
-
&& this !== storedContext
|
|
2888
|
-
&& Object.getPrototypeOf(this) === Object.getPrototypeOf(storedContext)
|
|
2889
|
-
) {
|
|
2890
|
-
throw new Error('Debounced method called with different contexts of the same prototype.');
|
|
2891
|
-
}
|
|
2892
|
-
|
|
2893
|
-
storedContext = this; // eslint-disable-line unicorn/no-this-assignment
|
|
2894
|
-
storedArguments = arguments_;
|
|
2895
|
-
timestamp = Date.now();
|
|
2689
|
+
;// ./node_modules/pdfjs-dist/build/pdf.mjs
|
|
2690
|
+
/**
|
|
2691
|
+
* @licstart The following is the entire license notice for the
|
|
2692
|
+
* JavaScript code in this page
|
|
2693
|
+
*
|
|
2694
|
+
* Copyright 2024 Mozilla Foundation
|
|
2695
|
+
*
|
|
2696
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
2697
|
+
* you may not use this file except in compliance with the License.
|
|
2698
|
+
* You may obtain a copy of the License at
|
|
2699
|
+
*
|
|
2700
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
2701
|
+
*
|
|
2702
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
2703
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
2704
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
2705
|
+
* See the License for the specific language governing permissions and
|
|
2706
|
+
* limitations under the License.
|
|
2707
|
+
*
|
|
2708
|
+
* @licend The above is the entire license notice for the
|
|
2709
|
+
* JavaScript code in this page
|
|
2710
|
+
*/
|
|
2896
2711
|
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
storedContext = undefined;
|
|
2925
|
-
storedArguments = undefined;
|
|
2926
|
-
};
|
|
2927
|
-
|
|
2928
|
-
debounced.flush = () => {
|
|
2929
|
-
if (!timeoutId) {
|
|
2930
|
-
return;
|
|
2931
|
-
}
|
|
2932
|
-
|
|
2933
|
-
debounced.trigger();
|
|
2934
|
-
};
|
|
2935
|
-
|
|
2936
|
-
debounced.trigger = () => {
|
|
2937
|
-
result = run();
|
|
2938
|
-
|
|
2939
|
-
debounced.clear();
|
|
2940
|
-
};
|
|
2941
|
-
|
|
2942
|
-
return debounced;
|
|
2943
|
-
}
|
|
2944
|
-
|
|
2945
|
-
;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFPage.vue?vue&type=template&id=2c9e224a&scoped=true
|
|
2946
|
-
var PDFPagevue_type_template_id_2c9e224a_scoped_true_render = function render() {
|
|
2947
|
-
var _vm = this,
|
|
2948
|
-
_c = _vm._self._c;
|
|
2949
|
-
return _c('canvas', {
|
|
2950
|
-
ref: "canvas"
|
|
2951
|
-
});
|
|
2952
|
-
};
|
|
2953
|
-
var PDFPagevue_type_template_id_2c9e224a_scoped_true_staticRenderFns = [];
|
|
2954
|
-
|
|
2955
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFPage.vue?vue&type=script&lang=js
|
|
2956
|
-
/* harmony default export */ const PDFPagevue_type_script_lang_js = ({
|
|
2957
|
-
name: 'PDFPage',
|
|
2958
|
-
props: {
|
|
2959
|
-
page: {
|
|
2960
|
-
type: Promise,
|
|
2961
|
-
required: true
|
|
2962
|
-
},
|
|
2963
|
-
scale: {
|
|
2964
|
-
type: Number,
|
|
2965
|
-
default: 1
|
|
2966
|
-
}
|
|
2967
|
-
},
|
|
2968
|
-
data() {
|
|
2969
|
-
return {
|
|
2970
|
-
dynamicScale: this.scale,
|
|
2971
|
-
isRendering: false,
|
|
2972
|
-
boundMeasure: null
|
|
2973
|
-
};
|
|
2974
|
-
},
|
|
2975
|
-
watch: {
|
|
2976
|
-
scale(newScale) {
|
|
2977
|
-
this.dynamicScale = newScale;
|
|
2978
|
-
this.render();
|
|
2979
|
-
}
|
|
2980
|
-
},
|
|
2981
|
-
mounted() {
|
|
2982
|
-
this.boundMeasure = this.measure.bind(this);
|
|
2983
|
-
window.addEventListener('resize', this.boundMeasure);
|
|
2984
|
-
this.render();
|
|
2985
|
-
},
|
|
2986
|
-
beforeUnmount() {
|
|
2987
|
-
if (this.boundMeasure) {
|
|
2988
|
-
window.removeEventListener('resize', this.boundMeasure);
|
|
2989
|
-
}
|
|
2990
|
-
},
|
|
2991
|
-
methods: {
|
|
2992
|
-
getCanvasMeasurement() {
|
|
2993
|
-
return {
|
|
2994
|
-
canvasWidth: this.$refs.canvas.width,
|
|
2995
|
-
canvasHeight: this.$refs.canvas.height
|
|
2996
|
-
};
|
|
2997
|
-
},
|
|
2998
|
-
measure() {
|
|
2999
|
-
this.$emit('onMeasure', {
|
|
3000
|
-
scale: this.dynamicScale
|
|
3001
|
-
});
|
|
3002
|
-
},
|
|
3003
|
-
async render() {
|
|
3004
|
-
if (this.isRendering) return;
|
|
3005
|
-
this.isRendering = true;
|
|
3006
|
-
try {
|
|
3007
|
-
const _page = await this.page;
|
|
3008
|
-
const canvas = this.$refs.canvas;
|
|
3009
|
-
const context = canvas.getContext('2d');
|
|
3010
|
-
const viewport = _page.getViewport({
|
|
3011
|
-
scale: this.dynamicScale
|
|
3012
|
-
});
|
|
3013
|
-
canvas.width = viewport.width;
|
|
3014
|
-
canvas.height = viewport.height;
|
|
3015
|
-
await _page.render({
|
|
3016
|
-
canvasContext: context,
|
|
3017
|
-
viewport
|
|
3018
|
-
}).promise;
|
|
3019
|
-
this.measure();
|
|
3020
|
-
} finally {
|
|
3021
|
-
this.isRendering = false;
|
|
3022
|
-
}
|
|
3023
|
-
}
|
|
3024
|
-
}
|
|
3025
|
-
});
|
|
3026
|
-
;// ./src/components/PDFPage.vue?vue&type=script&lang=js
|
|
3027
|
-
/* harmony default export */ const components_PDFPagevue_type_script_lang_js = (PDFPagevue_type_script_lang_js);
|
|
3028
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFPage.vue?vue&type=style&index=0&id=2c9e224a&prod&scoped=true&lang=css
|
|
3029
|
-
// extracted by mini-css-extract-plugin
|
|
3030
|
-
|
|
3031
|
-
;// ./src/components/PDFPage.vue?vue&type=style&index=0&id=2c9e224a&prod&scoped=true&lang=css
|
|
3032
|
-
|
|
3033
|
-
;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
3034
|
-
/* globals __VUE_SSR_CONTEXT__ */
|
|
3035
|
-
|
|
3036
|
-
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
|
|
3037
|
-
// This module is a runtime utility for cleaner component module output and will
|
|
3038
|
-
// be included in the final webpack user bundle.
|
|
3039
|
-
|
|
3040
|
-
function normalizeComponent(
|
|
3041
|
-
scriptExports,
|
|
3042
|
-
render,
|
|
3043
|
-
staticRenderFns,
|
|
3044
|
-
functionalTemplate,
|
|
3045
|
-
injectStyles,
|
|
3046
|
-
scopeId,
|
|
3047
|
-
moduleIdentifier /* server only */,
|
|
3048
|
-
shadowMode /* vue-cli only */
|
|
3049
|
-
) {
|
|
3050
|
-
// Vue.extend constructor export interop
|
|
3051
|
-
var options =
|
|
3052
|
-
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
|
|
3053
|
-
|
|
3054
|
-
// render functions
|
|
3055
|
-
if (render) {
|
|
3056
|
-
options.render = render
|
|
3057
|
-
options.staticRenderFns = staticRenderFns
|
|
3058
|
-
options._compiled = true
|
|
3059
|
-
}
|
|
3060
|
-
|
|
3061
|
-
// functional template
|
|
3062
|
-
if (functionalTemplate) {
|
|
3063
|
-
options.functional = true
|
|
3064
|
-
}
|
|
3065
|
-
|
|
3066
|
-
// scopedId
|
|
3067
|
-
if (scopeId) {
|
|
3068
|
-
options._scopeId = 'data-v-' + scopeId
|
|
3069
|
-
}
|
|
3070
|
-
|
|
3071
|
-
var hook
|
|
3072
|
-
if (moduleIdentifier) {
|
|
3073
|
-
// server build
|
|
3074
|
-
hook = function (context) {
|
|
3075
|
-
// 2.3 injection
|
|
3076
|
-
context =
|
|
3077
|
-
context || // cached call
|
|
3078
|
-
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
|
3079
|
-
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
|
|
3080
|
-
// 2.2 with runInNewContext: true
|
|
3081
|
-
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
|
3082
|
-
context = __VUE_SSR_CONTEXT__
|
|
3083
|
-
}
|
|
3084
|
-
// inject component styles
|
|
3085
|
-
if (injectStyles) {
|
|
3086
|
-
injectStyles.call(this, context)
|
|
3087
|
-
}
|
|
3088
|
-
// register component module identifier for async chunk inferrence
|
|
3089
|
-
if (context && context._registeredComponents) {
|
|
3090
|
-
context._registeredComponents.add(moduleIdentifier)
|
|
3091
|
-
}
|
|
3092
|
-
}
|
|
3093
|
-
// used by ssr in case component is cached and beforeCreate
|
|
3094
|
-
// never gets called
|
|
3095
|
-
options._ssrRegister = hook
|
|
3096
|
-
} else if (injectStyles) {
|
|
3097
|
-
hook = shadowMode
|
|
3098
|
-
? function () {
|
|
3099
|
-
injectStyles.call(
|
|
3100
|
-
this,
|
|
3101
|
-
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
|
3102
|
-
)
|
|
3103
|
-
}
|
|
3104
|
-
: injectStyles
|
|
3105
|
-
}
|
|
3106
|
-
|
|
3107
|
-
if (hook) {
|
|
3108
|
-
if (options.functional) {
|
|
3109
|
-
// for template-only hot-reload because in that case the render fn doesn't
|
|
3110
|
-
// go through the normalizer
|
|
3111
|
-
options._injectStyles = hook
|
|
3112
|
-
// register for functional component in vue file
|
|
3113
|
-
var originalRender = options.render
|
|
3114
|
-
options.render = function renderWithStyleInjection(h, context) {
|
|
3115
|
-
hook.call(context)
|
|
3116
|
-
return originalRender(h, context)
|
|
3117
|
-
}
|
|
3118
|
-
} else {
|
|
3119
|
-
// inject component registration as beforeCreate hook
|
|
3120
|
-
var existing = options.beforeCreate
|
|
3121
|
-
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
|
|
3122
|
-
}
|
|
3123
|
-
}
|
|
3124
|
-
|
|
3125
|
-
return {
|
|
3126
|
-
exports: scriptExports,
|
|
3127
|
-
options: options
|
|
3128
|
-
}
|
|
3129
|
-
}
|
|
3130
|
-
|
|
3131
|
-
;// ./src/components/PDFPage.vue
|
|
3132
|
-
|
|
3133
|
-
|
|
3134
|
-
|
|
3135
|
-
;
|
|
3136
|
-
|
|
3137
|
-
|
|
3138
|
-
/* normalize component */
|
|
3139
|
-
|
|
3140
|
-
var component = normalizeComponent(
|
|
3141
|
-
components_PDFPagevue_type_script_lang_js,
|
|
3142
|
-
PDFPagevue_type_template_id_2c9e224a_scoped_true_render,
|
|
3143
|
-
PDFPagevue_type_template_id_2c9e224a_scoped_true_staticRenderFns,
|
|
3144
|
-
false,
|
|
3145
|
-
null,
|
|
3146
|
-
"2c9e224a",
|
|
3147
|
-
null
|
|
3148
|
-
|
|
3149
|
-
)
|
|
3150
|
-
|
|
3151
|
-
/* harmony default export */ const PDFPage = (component.exports);
|
|
3152
|
-
;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/DraggableElement.vue?vue&type=template&id=55db89ce&scoped=true
|
|
3153
|
-
var DraggableElementvue_type_template_id_55db89ce_scoped_true_render = function render() {
|
|
3154
|
-
var _vm = this,
|
|
3155
|
-
_c = _vm._self._c;
|
|
3156
|
-
return _c('div', {
|
|
3157
|
-
staticClass: "draggable-wrapper"
|
|
3158
|
-
}, [_vm.isSelected && !_vm.isBeingDraggedGlobally && _vm.showSelectionUi && _vm.showDefaultActions ? _c('div', {
|
|
3159
|
-
staticClass: "actions-toolbar",
|
|
3160
|
-
style: _vm.toolbarStyle
|
|
3161
|
-
}, [_vm._t("actions", function () {
|
|
3162
|
-
return [_c('button', {
|
|
3163
|
-
staticClass: "action-btn",
|
|
3164
|
-
attrs: {
|
|
3165
|
-
"type": "button",
|
|
3166
|
-
"title": "Delete"
|
|
3167
|
-
},
|
|
3168
|
-
on: {
|
|
3169
|
-
"click": function ($event) {
|
|
3170
|
-
$event.stopPropagation();
|
|
3171
|
-
return _vm.onDelete.apply(null, arguments);
|
|
3172
|
-
}
|
|
3173
|
-
}
|
|
3174
|
-
}, [_c('svg', {
|
|
3175
|
-
attrs: {
|
|
3176
|
-
"width": "16",
|
|
3177
|
-
"height": "16",
|
|
3178
|
-
"viewBox": "0 0 16 16",
|
|
3179
|
-
"fill": "currentColor"
|
|
3180
|
-
}
|
|
3181
|
-
}, [_c('path', {
|
|
3182
|
-
attrs: {
|
|
3183
|
-
"d": "M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.5a.5.5 0 0 0 0 1h.5v10.5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5V3.5h.5a.5.5 0 0 0 0-1H11Zm1 1v10.5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5V3.5h8Z"
|
|
3184
|
-
}
|
|
3185
|
-
})])])];
|
|
3186
|
-
}, {
|
|
3187
|
-
"object": _vm.object,
|
|
3188
|
-
"onDelete": _vm.onDelete
|
|
3189
|
-
})], 2) : _vm._e(), _c('div', {
|
|
3190
|
-
staticClass: "draggable-element",
|
|
3191
|
-
class: {
|
|
3192
|
-
selected: _vm.isSelected && _vm.showSelectionUi
|
|
3193
|
-
},
|
|
3194
|
-
style: [_vm.elementStyle, _vm.dragElementStyle],
|
|
3195
|
-
attrs: {
|
|
3196
|
-
"draggable": "false"
|
|
3197
|
-
},
|
|
3198
|
-
on: {
|
|
3199
|
-
"dragstart": function ($event) {
|
|
3200
|
-
$event.preventDefault();
|
|
3201
|
-
},
|
|
3202
|
-
"mousedown": _vm.handleElementClick,
|
|
3203
|
-
"touchstart": _vm.handleElementClick
|
|
3204
|
-
}
|
|
3205
|
-
}, [_vm._t("default", null, {
|
|
3206
|
-
"object": _vm.object,
|
|
3207
|
-
"isSelected": _vm.isSelected,
|
|
3208
|
-
"onDelete": _vm.onDelete,
|
|
3209
|
-
"onResize": _vm.startResizeFromSlot
|
|
3210
|
-
}), _vm.isSelected && _vm.showSelectionUi ? _vm._l(_vm.resizeDirections, function (dir) {
|
|
3211
|
-
return _c('button', {
|
|
3212
|
-
key: dir,
|
|
3213
|
-
staticClass: "resize-handle",
|
|
3214
|
-
class: `handle-${dir}`,
|
|
3215
|
-
attrs: {
|
|
3216
|
-
"type": "button"
|
|
3217
|
-
},
|
|
3218
|
-
on: {
|
|
3219
|
-
"mousedown": function ($event) {
|
|
3220
|
-
$event.stopPropagation();
|
|
3221
|
-
$event.preventDefault();
|
|
3222
|
-
return _vm.startResize(dir, $event);
|
|
3223
|
-
},
|
|
3224
|
-
"touchstart": function ($event) {
|
|
3225
|
-
$event.stopPropagation();
|
|
3226
|
-
$event.preventDefault();
|
|
3227
|
-
return _vm.startResize(dir, $event);
|
|
3228
|
-
}
|
|
3229
|
-
}
|
|
3230
|
-
});
|
|
3231
|
-
}) : _vm._e()], 2)]);
|
|
3232
|
-
};
|
|
3233
|
-
var DraggableElementvue_type_template_id_55db89ce_scoped_true_staticRenderFns = [];
|
|
3234
|
-
|
|
3235
|
-
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/DraggableElement.vue?vue&type=script&lang=js
|
|
3236
|
-
/* harmony default export */ const DraggableElementvue_type_script_lang_js = ({
|
|
3237
|
-
name: 'DraggableElement',
|
|
3238
|
-
props: {
|
|
3239
|
-
object: {
|
|
3240
|
-
type: Object,
|
|
3241
|
-
required: true
|
|
3242
|
-
},
|
|
3243
|
-
pagesScale: {
|
|
3244
|
-
type: Number,
|
|
3245
|
-
default: 1
|
|
3246
|
-
},
|
|
3247
|
-
pageWidth: {
|
|
3248
|
-
type: Number,
|
|
3249
|
-
required: true
|
|
3250
|
-
},
|
|
3251
|
-
pageHeight: {
|
|
3252
|
-
type: Number,
|
|
3253
|
-
required: true
|
|
3254
|
-
},
|
|
3255
|
-
onUpdate: {
|
|
3256
|
-
type: Function,
|
|
3257
|
-
default: () => {}
|
|
3258
|
-
},
|
|
3259
|
-
onDelete: {
|
|
3260
|
-
type: Function,
|
|
3261
|
-
default: () => {}
|
|
3262
|
-
},
|
|
3263
|
-
onDragStart: {
|
|
3264
|
-
type: Function,
|
|
3265
|
-
default: () => {}
|
|
3266
|
-
},
|
|
3267
|
-
onDragMove: {
|
|
3268
|
-
type: Function,
|
|
3269
|
-
default: () => {}
|
|
3270
|
-
},
|
|
3271
|
-
onDragEnd: {
|
|
3272
|
-
type: Function,
|
|
3273
|
-
default: () => {}
|
|
3274
|
-
},
|
|
3275
|
-
isBeingDraggedGlobally: {
|
|
3276
|
-
type: Boolean,
|
|
3277
|
-
default: false
|
|
3278
|
-
},
|
|
3279
|
-
draggingClientPos: {
|
|
3280
|
-
type: Object,
|
|
3281
|
-
default: () => ({
|
|
3282
|
-
x: 0,
|
|
3283
|
-
y: 0
|
|
3284
|
-
})
|
|
3285
|
-
},
|
|
3286
|
-
currentDocIndex: {
|
|
3287
|
-
type: Number,
|
|
3288
|
-
default: -1
|
|
3289
|
-
},
|
|
3290
|
-
currentPageIndex: {
|
|
3291
|
-
type: Number,
|
|
3292
|
-
default: -1
|
|
3293
|
-
},
|
|
3294
|
-
globalDragDocIndex: {
|
|
3295
|
-
type: Number,
|
|
3296
|
-
default: -1
|
|
3297
|
-
},
|
|
3298
|
-
globalDragPageIndex: {
|
|
3299
|
-
type: Number,
|
|
3300
|
-
default: -1
|
|
3301
|
-
},
|
|
3302
|
-
showSelectionUi: {
|
|
3303
|
-
type: Boolean,
|
|
3304
|
-
default: true
|
|
3305
|
-
},
|
|
3306
|
-
showDefaultActions: {
|
|
3307
|
-
type: Boolean,
|
|
3308
|
-
default: true
|
|
3309
|
-
}
|
|
3310
|
-
},
|
|
3311
|
-
data() {
|
|
3312
|
-
return {
|
|
3313
|
-
isSelected: false,
|
|
3314
|
-
mode: 'idle',
|
|
3315
|
-
direction: '',
|
|
3316
|
-
startX: 0,
|
|
3317
|
-
startY: 0,
|
|
3318
|
-
startLeft: 0,
|
|
3319
|
-
startTop: 0,
|
|
3320
|
-
startWidth: 0,
|
|
3321
|
-
startHeight: 0,
|
|
3322
|
-
offsetX: 0,
|
|
3323
|
-
offsetY: 0,
|
|
3324
|
-
resizeOffsetX: 0,
|
|
3325
|
-
resizeOffsetY: 0,
|
|
3326
|
-
resizeOffsetW: 0,
|
|
3327
|
-
resizeOffsetH: 0,
|
|
3328
|
-
aspectRatio: 1,
|
|
3329
|
-
lastMouseX: 0,
|
|
3330
|
-
lastMouseY: 0,
|
|
3331
|
-
pointerOffsetDoc: {
|
|
3332
|
-
x: 0,
|
|
3333
|
-
y: 0
|
|
3334
|
-
},
|
|
3335
|
-
currentPageRect: null,
|
|
3336
|
-
rafId: null
|
|
3337
|
-
};
|
|
3338
|
-
},
|
|
3339
|
-
computed: {
|
|
3340
|
-
resizeDirections() {
|
|
3341
|
-
return ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
3342
|
-
},
|
|
3343
|
-
elementStyle() {
|
|
3344
|
-
const scale = this.pagesScale || 1;
|
|
3345
|
-
const currentX = this.object.x + this.offsetX + this.resizeOffsetX;
|
|
3346
|
-
const currentY = this.object.y + this.offsetY + this.resizeOffsetY;
|
|
3347
|
-
const currentWidth = this.object.width + this.resizeOffsetW;
|
|
3348
|
-
const currentHeight = this.object.height + this.resizeOffsetH;
|
|
3349
|
-
return {
|
|
3350
|
-
left: `${currentX * scale}px`,
|
|
3351
|
-
top: `${currentY * scale}px`,
|
|
3352
|
-
width: `${currentWidth * scale}px`,
|
|
3353
|
-
height: `${currentHeight * scale}px`
|
|
3354
|
-
};
|
|
3355
|
-
},
|
|
3356
|
-
toolbarStyle() {
|
|
3357
|
-
const scale = this.pagesScale || 1;
|
|
3358
|
-
const x = this.object.x + this.offsetX + this.resizeOffsetX;
|
|
3359
|
-
const y = this.object.y + this.offsetY + this.resizeOffsetY;
|
|
3360
|
-
const width = this.object.width + this.resizeOffsetW;
|
|
3361
|
-
return {
|
|
3362
|
-
left: `${(x + width / 2) * scale}px`,
|
|
3363
|
-
top: `${(y - 48) * scale}px`,
|
|
3364
|
-
transform: 'translateX(-50%)'
|
|
3365
|
-
};
|
|
3366
|
-
},
|
|
3367
|
-
dragElementStyle() {
|
|
3368
|
-
if (!this.isBeingDraggedGlobally || !this.draggingClientPos) {
|
|
3369
|
-
return {};
|
|
3370
|
-
}
|
|
3371
|
-
return {
|
|
3372
|
-
opacity: 0,
|
|
3373
|
-
pointerEvents: 'none'
|
|
3374
|
-
};
|
|
3375
|
-
}
|
|
3376
|
-
},
|
|
3377
|
-
mounted() {
|
|
3378
|
-
this.handleClickOutside = this.handleClickOutside.bind(this);
|
|
3379
|
-
this.boundHandleMove = this.handleMove.bind(this);
|
|
3380
|
-
this.boundStopInteraction = this.stopInteraction.bind(this);
|
|
3381
|
-
document.addEventListener('mousedown', this.handleClickOutside);
|
|
3382
|
-
document.addEventListener('touchstart', this.handleClickOutside);
|
|
3383
|
-
},
|
|
3384
|
-
beforeUnmount() {
|
|
3385
|
-
document.removeEventListener('mousedown', this.handleClickOutside);
|
|
3386
|
-
document.removeEventListener('touchstart', this.handleClickOutside);
|
|
3387
|
-
window.removeEventListener('mousemove', this.boundHandleMove);
|
|
3388
|
-
window.removeEventListener('mouseup', this.boundStopInteraction);
|
|
3389
|
-
window.removeEventListener('touchmove', this.boundHandleMove);
|
|
3390
|
-
window.removeEventListener('touchend', this.boundStopInteraction);
|
|
3391
|
-
if (this.rafId) cancelAnimationFrame(this.rafId);
|
|
3392
|
-
},
|
|
3393
|
-
methods: {
|
|
3394
|
-
handleElementClick(event) {
|
|
3395
|
-
if (event.target.closest('.delete-handle') || event.target.closest('[data-stop-drag]') || event.target.closest('.actions-toolbar')) {
|
|
3396
|
-
return;
|
|
3397
|
-
}
|
|
3398
|
-
event.preventDefault();
|
|
3399
|
-
this.isSelected = true;
|
|
3400
|
-
this.startDrag(event);
|
|
3401
|
-
},
|
|
3402
|
-
handleClickOutside(event) {
|
|
3403
|
-
if (this.$el && !this.$el.contains(event.target)) {
|
|
3404
|
-
this.isSelected = false;
|
|
3405
|
-
}
|
|
3406
|
-
},
|
|
3407
|
-
startResizeFromSlot(direction, event) {
|
|
3408
|
-
if (!direction || !event) return;
|
|
3409
|
-
this.startResize(direction, event);
|
|
3410
|
-
},
|
|
3411
|
-
startDrag(event) {
|
|
3412
|
-
if (event.target.classList.contains('delete')) return;
|
|
3413
|
-
if (event.target.classList.contains('resize-handle')) return;
|
|
3414
|
-
this.mode = 'drag';
|
|
3415
|
-
this.startX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
|
|
3416
|
-
this.startY = event.type.includes('touch') ? event.touches[0].clientY : event.clientY;
|
|
3417
|
-
this.startLeft = this.object.x;
|
|
3418
|
-
this.startTop = this.object.y;
|
|
3419
|
-
this.offsetX = 0;
|
|
3420
|
-
this.offsetY = 0;
|
|
3421
|
-
this.resetResizeOffsets();
|
|
3422
|
-
const elementRect = this.$el.querySelector('.draggable-element').getBoundingClientRect();
|
|
3423
|
-
this.pointerOffsetDoc.x = this.startX - elementRect.left;
|
|
3424
|
-
this.pointerOffsetDoc.y = this.startY - elementRect.top;
|
|
3425
|
-
const pageRect = this.capturePageRect();
|
|
3426
|
-
this.currentPageRect = pageRect;
|
|
3427
|
-
let dragElementShift = {
|
|
3428
|
-
x: 0,
|
|
3429
|
-
y: 0
|
|
3430
|
-
};
|
|
3431
|
-
if (pageRect) {
|
|
3432
|
-
const expectedLeft = pageRect.left + this.object.x * this.pagesScale;
|
|
3433
|
-
const expectedTop = pageRect.top + this.object.y * this.pagesScale;
|
|
3434
|
-
dragElementShift = {
|
|
3435
|
-
x: elementRect.left - expectedLeft,
|
|
3436
|
-
y: elementRect.top - expectedTop
|
|
3437
|
-
};
|
|
3438
|
-
}
|
|
3439
|
-
this.onDragStart(this.startX, this.startY, {
|
|
3440
|
-
...this.pointerOffsetDoc
|
|
3441
|
-
}, dragElementShift);
|
|
3442
|
-
window.addEventListener('mousemove', this.boundHandleMove);
|
|
3443
|
-
window.addEventListener('mouseup', this.boundStopInteraction);
|
|
3444
|
-
window.addEventListener('touchmove', this.boundHandleMove);
|
|
3445
|
-
window.addEventListener('touchend', this.boundStopInteraction);
|
|
3446
|
-
},
|
|
3447
|
-
startResize(direction, event) {
|
|
3448
|
-
this.mode = 'resize';
|
|
3449
|
-
this.direction = direction;
|
|
3450
|
-
this.startX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
|
|
3451
|
-
this.startY = event.type.includes('touch') ? event.touches[0].clientY : event.clientY;
|
|
3452
|
-
this.startLeft = this.object.x;
|
|
3453
|
-
this.startTop = this.object.y;
|
|
3454
|
-
this.startWidth = this.object.width;
|
|
3455
|
-
this.startHeight = this.object.height;
|
|
3456
|
-
this.aspectRatio = this.startWidth / this.startHeight;
|
|
3457
|
-
this.offsetX = 0;
|
|
3458
|
-
this.offsetY = 0;
|
|
3459
|
-
this.resetResizeOffsets();
|
|
3460
|
-
window.addEventListener('mousemove', this.boundHandleMove);
|
|
3461
|
-
window.addEventListener('mouseup', this.boundStopInteraction);
|
|
3462
|
-
window.addEventListener('touchmove', this.boundHandleMove);
|
|
3463
|
-
window.addEventListener('touchend', this.boundStopInteraction);
|
|
3464
|
-
},
|
|
3465
|
-
handleMove(event) {
|
|
3466
|
-
if (this.mode === 'idle') return;
|
|
3467
|
-
event.preventDefault();
|
|
3468
|
-
if (this.rafId) return;
|
|
3469
|
-
this.rafId = requestAnimationFrame(() => {
|
|
3470
|
-
const currentX = event.type.includes('touch') ? event.touches[0]?.clientX : event.clientX;
|
|
3471
|
-
const currentY = event.type.includes('touch') ? event.touches[0]?.clientY : event.clientY;
|
|
3472
|
-
if (currentX === undefined || currentY === undefined) return;
|
|
3473
|
-
this.lastMouseX = currentX;
|
|
3474
|
-
this.lastMouseY = currentY;
|
|
3475
|
-
const deltaX = (currentX - this.startX) / this.pagesScale;
|
|
3476
|
-
const deltaY = (currentY - this.startY) / this.pagesScale;
|
|
3477
|
-
if (this.mode === 'drag') {
|
|
3478
|
-
const pageRect = this.currentPageRect;
|
|
3479
|
-
if (pageRect) {
|
|
3480
|
-
const newElementLeft = currentX - this.pointerOffsetDoc.x;
|
|
3481
|
-
const newElementTop = currentY - this.pointerOffsetDoc.y;
|
|
3482
|
-
const newX = (newElementLeft - pageRect.left) / this.pagesScale;
|
|
3483
|
-
const newY = (newElementTop - pageRect.top) / this.pagesScale;
|
|
3484
|
-
this.offsetX = newX - this.object.x;
|
|
3485
|
-
this.offsetY = newY - this.object.y;
|
|
3486
|
-
} else {
|
|
3487
|
-
this.offsetX = deltaX;
|
|
3488
|
-
this.offsetY = deltaY;
|
|
3489
|
-
}
|
|
3490
|
-
this.onDragMove(currentX, currentY);
|
|
3491
|
-
if (this.isBeingDraggedGlobally) {
|
|
3492
|
-
this.onUpdate({
|
|
3493
|
-
_globalDrag: true,
|
|
3494
|
-
_mouseX: currentX,
|
|
3495
|
-
_mouseY: currentY
|
|
3496
|
-
});
|
|
3497
|
-
}
|
|
3498
|
-
this.rafId = null;
|
|
3499
|
-
return;
|
|
3500
|
-
}
|
|
3501
|
-
const minSize = 16;
|
|
3502
|
-
let newWidth = this.startWidth;
|
|
3503
|
-
let newHeight = this.startHeight;
|
|
3504
|
-
let newLeft = this.startLeft;
|
|
3505
|
-
let newTop = this.startTop;
|
|
3506
|
-
const widthChange = this.direction.includes('right') ? deltaX : this.direction.includes('left') ? -deltaX : 0;
|
|
3507
|
-
newWidth = this.startWidth + widthChange;
|
|
3508
|
-
if (newWidth < minSize) newWidth = minSize;
|
|
3509
|
-
newHeight = newWidth / this.aspectRatio;
|
|
3510
|
-
if (this.direction.includes('left')) {
|
|
3511
|
-
newLeft = this.startLeft + (this.startWidth - newWidth);
|
|
3512
|
-
if (newLeft < 0) {
|
|
3513
|
-
const overflow = -newLeft;
|
|
3514
|
-
newLeft = 0;
|
|
3515
|
-
newWidth = newWidth - overflow;
|
|
3516
|
-
newHeight = newWidth / this.aspectRatio;
|
|
3517
|
-
}
|
|
3518
|
-
}
|
|
3519
|
-
if (this.direction.includes('top')) {
|
|
3520
|
-
newTop = this.startTop + (this.startHeight - newHeight);
|
|
3521
|
-
if (newTop < 0) {
|
|
3522
|
-
const overflow = -newTop;
|
|
3523
|
-
newTop = 0;
|
|
3524
|
-
newHeight = newHeight - overflow;
|
|
3525
|
-
newWidth = newHeight * this.aspectRatio;
|
|
3526
|
-
if (this.direction.includes('left')) {
|
|
3527
|
-
newLeft = this.startLeft + (this.startWidth - newWidth);
|
|
3528
|
-
}
|
|
3529
|
-
}
|
|
3530
|
-
}
|
|
3531
|
-
if (newLeft + newWidth > this.pageWidth) {
|
|
3532
|
-
const excess = newLeft + newWidth - this.pageWidth;
|
|
3533
|
-
newWidth -= excess;
|
|
3534
|
-
newHeight = newWidth / this.aspectRatio;
|
|
3535
|
-
}
|
|
3536
|
-
if (newTop + newHeight > this.pageHeight) {
|
|
3537
|
-
const excess = newTop + newHeight - this.pageHeight;
|
|
3538
|
-
newHeight -= excess;
|
|
3539
|
-
newWidth = newHeight * this.aspectRatio;
|
|
3540
|
-
if (this.direction.includes('left')) {
|
|
3541
|
-
newLeft = this.startLeft + (this.startWidth - newWidth);
|
|
3542
|
-
}
|
|
3543
|
-
}
|
|
3544
|
-
this.resizeOffsetX = newLeft - this.object.x;
|
|
3545
|
-
this.resizeOffsetY = newTop - this.object.y;
|
|
3546
|
-
this.resizeOffsetW = newWidth - this.object.width;
|
|
3547
|
-
this.resizeOffsetH = newHeight - this.object.height;
|
|
3548
|
-
this.rafId = null;
|
|
3549
|
-
});
|
|
3550
|
-
},
|
|
3551
|
-
stopInteraction() {
|
|
3552
|
-
if (this.mode === 'idle') return;
|
|
3553
|
-
if (this.mode === 'drag' && (this.offsetX !== 0 || this.offsetY !== 0)) {
|
|
3554
|
-
if (this.isBeingDraggedGlobally) {
|
|
3555
|
-
this.onUpdate({
|
|
3556
|
-
_globalDrag: true,
|
|
3557
|
-
_mouseX: this.lastMouseX,
|
|
3558
|
-
_mouseY: this.lastMouseY
|
|
3559
|
-
});
|
|
3560
|
-
} else {
|
|
3561
|
-
const x = Math.max(0, Math.min(this.object.x + this.offsetX, this.pageWidth - this.object.width));
|
|
3562
|
-
const y = Math.max(0, Math.min(this.object.y + this.offsetY, this.pageHeight - this.object.height));
|
|
3563
|
-
this.onUpdate({
|
|
3564
|
-
x,
|
|
3565
|
-
y
|
|
3566
|
-
});
|
|
3567
|
-
}
|
|
3568
|
-
}
|
|
3569
|
-
if (this.mode === 'resize' && (this.resizeOffsetW !== 0 || this.resizeOffsetH !== 0 || this.resizeOffsetX !== 0 || this.resizeOffsetY !== 0)) {
|
|
3570
|
-
const x = this.object.x + this.resizeOffsetX;
|
|
3571
|
-
const y = this.object.y + this.resizeOffsetY;
|
|
3572
|
-
const width = this.object.width + this.resizeOffsetW;
|
|
3573
|
-
const height = this.object.height + this.resizeOffsetH;
|
|
3574
|
-
this.onUpdate({
|
|
3575
|
-
x,
|
|
3576
|
-
y,
|
|
3577
|
-
width,
|
|
3578
|
-
height
|
|
3579
|
-
});
|
|
3580
|
-
}
|
|
3581
|
-
this.resetOffsets();
|
|
3582
|
-
this.onDragEnd();
|
|
3583
|
-
window.removeEventListener('mousemove', this.boundHandleMove);
|
|
3584
|
-
window.removeEventListener('mouseup', this.boundStopInteraction);
|
|
3585
|
-
window.removeEventListener('touchmove', this.boundHandleMove);
|
|
3586
|
-
window.removeEventListener('touchend', this.boundStopInteraction);
|
|
3587
|
-
},
|
|
3588
|
-
capturePageRect() {
|
|
3589
|
-
const wrapper = this.$el.closest('.page-wrapper');
|
|
3590
|
-
if (!wrapper) return null;
|
|
3591
|
-
const canvas = wrapper.querySelector('canvas');
|
|
3592
|
-
return canvas ? canvas.getBoundingClientRect() : null;
|
|
3593
|
-
},
|
|
3594
|
-
resetResizeOffsets() {
|
|
3595
|
-
this.resizeOffsetX = 0;
|
|
3596
|
-
this.resizeOffsetY = 0;
|
|
3597
|
-
this.resizeOffsetW = 0;
|
|
3598
|
-
this.resizeOffsetH = 0;
|
|
3599
|
-
},
|
|
3600
|
-
resetOffsets() {
|
|
3601
|
-
this.mode = 'idle';
|
|
3602
|
-
this.offsetX = 0;
|
|
3603
|
-
this.offsetY = 0;
|
|
3604
|
-
this.resetResizeOffsets();
|
|
3605
|
-
this.pointerOffsetDoc = {
|
|
3606
|
-
x: 0,
|
|
3607
|
-
y: 0
|
|
3608
|
-
};
|
|
3609
|
-
this.currentPageRect = null;
|
|
3610
|
-
}
|
|
3611
|
-
}
|
|
3612
|
-
});
|
|
3613
|
-
;// ./src/components/DraggableElement.vue?vue&type=script&lang=js
|
|
3614
|
-
/* harmony default export */ const components_DraggableElementvue_type_script_lang_js = (DraggableElementvue_type_script_lang_js);
|
|
3615
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/DraggableElement.vue?vue&type=style&index=0&id=55db89ce&prod&scoped=true&lang=css
|
|
3616
|
-
// extracted by mini-css-extract-plugin
|
|
3617
|
-
|
|
3618
|
-
;// ./src/components/DraggableElement.vue?vue&type=style&index=0&id=55db89ce&prod&scoped=true&lang=css
|
|
3619
|
-
|
|
3620
|
-
;// ./src/components/DraggableElement.vue
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
|
|
3624
|
-
;
|
|
3625
|
-
|
|
3626
|
-
|
|
3627
|
-
/* normalize component */
|
|
3628
|
-
|
|
3629
|
-
var DraggableElement_component = normalizeComponent(
|
|
3630
|
-
components_DraggableElementvue_type_script_lang_js,
|
|
3631
|
-
DraggableElementvue_type_template_id_55db89ce_scoped_true_render,
|
|
3632
|
-
DraggableElementvue_type_template_id_55db89ce_scoped_true_staticRenderFns,
|
|
3633
|
-
false,
|
|
3634
|
-
null,
|
|
3635
|
-
"55db89ce",
|
|
3636
|
-
null
|
|
3637
|
-
|
|
3638
|
-
)
|
|
3639
|
-
|
|
3640
|
-
/* harmony default export */ const DraggableElement = (DraggableElement_component.exports);
|
|
3641
|
-
;// ./node_modules/pdfjs-dist/build/pdf.mjs
|
|
3642
|
-
/**
|
|
3643
|
-
* @licstart The following is the entire license notice for the
|
|
3644
|
-
* JavaScript code in this page
|
|
3645
|
-
*
|
|
3646
|
-
* Copyright 2024 Mozilla Foundation
|
|
3647
|
-
*
|
|
3648
|
-
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
3649
|
-
* you may not use this file except in compliance with the License.
|
|
3650
|
-
* You may obtain a copy of the License at
|
|
3651
|
-
*
|
|
3652
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
3653
|
-
*
|
|
3654
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
3655
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
3656
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
3657
|
-
* See the License for the specific language governing permissions and
|
|
3658
|
-
* limitations under the License.
|
|
3659
|
-
*
|
|
3660
|
-
* @licend The above is the entire license notice for the
|
|
3661
|
-
* JavaScript code in this page
|
|
3662
|
-
*/
|
|
3663
|
-
|
|
3664
|
-
/**
|
|
3665
|
-
* pdfjsVersion = 5.4.530
|
|
3666
|
-
* pdfjsBuild = 50cc4adac
|
|
3667
|
-
*/
|
|
3668
|
-
/******/ // The require scope
|
|
3669
|
-
/******/ var __nested_webpack_require_899__ = {};
|
|
3670
|
-
/******/
|
|
3671
|
-
/************************************************************************/
|
|
3672
|
-
/******/ /* webpack/runtime/define property getters */
|
|
3673
|
-
/******/ (() => {
|
|
3674
|
-
/******/ // define getter functions for harmony exports
|
|
3675
|
-
/******/ __nested_webpack_require_899__.d = (exports, definition) => {
|
|
3676
|
-
/******/ for(var key in definition) {
|
|
3677
|
-
/******/ if(__nested_webpack_require_899__.o(definition, key) && !__nested_webpack_require_899__.o(exports, key)) {
|
|
3678
|
-
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
3679
|
-
/******/ }
|
|
3680
|
-
/******/ }
|
|
3681
|
-
/******/ };
|
|
3682
|
-
/******/ })();
|
|
3683
|
-
/******/
|
|
3684
|
-
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
3685
|
-
/******/ (() => {
|
|
3686
|
-
/******/ __nested_webpack_require_899__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
3687
|
-
/******/ })();
|
|
3688
|
-
/******/
|
|
3689
|
-
/************************************************************************/
|
|
3690
|
-
var __nested_webpack_exports__ = {};
|
|
2712
|
+
/**
|
|
2713
|
+
* pdfjsVersion = 5.4.530
|
|
2714
|
+
* pdfjsBuild = 50cc4adac
|
|
2715
|
+
*/
|
|
2716
|
+
/******/ // The require scope
|
|
2717
|
+
/******/ var __nested_webpack_require_899__ = {};
|
|
2718
|
+
/******/
|
|
2719
|
+
/************************************************************************/
|
|
2720
|
+
/******/ /* webpack/runtime/define property getters */
|
|
2721
|
+
/******/ (() => {
|
|
2722
|
+
/******/ // define getter functions for harmony exports
|
|
2723
|
+
/******/ __nested_webpack_require_899__.d = (exports, definition) => {
|
|
2724
|
+
/******/ for(var key in definition) {
|
|
2725
|
+
/******/ if(__nested_webpack_require_899__.o(definition, key) && !__nested_webpack_require_899__.o(exports, key)) {
|
|
2726
|
+
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
2727
|
+
/******/ }
|
|
2728
|
+
/******/ }
|
|
2729
|
+
/******/ };
|
|
2730
|
+
/******/ })();
|
|
2731
|
+
/******/
|
|
2732
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
2733
|
+
/******/ (() => {
|
|
2734
|
+
/******/ __nested_webpack_require_899__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
2735
|
+
/******/ })();
|
|
2736
|
+
/******/
|
|
2737
|
+
/************************************************************************/
|
|
2738
|
+
var __nested_webpack_exports__ = {};
|
|
3691
2739
|
|
|
3692
2740
|
;// ./src/shared/util.js
|
|
3693
2741
|
const isNodeJS = typeof process === "object" && process + "" === "[object process]" && !process.versions.nw && !(process.versions.electron && process.type && process.type !== "browser");
|
|
@@ -15976,7 +15024,7 @@ for (const op in OPS) {
|
|
|
15976
15024
|
}
|
|
15977
15025
|
|
|
15978
15026
|
;// ./src/display/worker_options.js
|
|
15979
|
-
class
|
|
15027
|
+
class pdf_GlobalWorkerOptions {
|
|
15980
15028
|
static #port = null;
|
|
15981
15029
|
static #src = "";
|
|
15982
15030
|
static get workerPort() {
|
|
@@ -18108,7 +17156,7 @@ function getDocument(src = {}) {
|
|
|
18108
17156
|
if (!worker) {
|
|
18109
17157
|
worker = PDFWorker.create({
|
|
18110
17158
|
verbosity,
|
|
18111
|
-
port:
|
|
17159
|
+
port: pdf_GlobalWorkerOptions.workerPort
|
|
18112
17160
|
});
|
|
18113
17161
|
task._worker = worker;
|
|
18114
17162
|
}
|
|
@@ -18861,7 +17909,7 @@ class PDFWorker {
|
|
|
18861
17909
|
static {
|
|
18862
17910
|
if (isNodeJS) {
|
|
18863
17911
|
this.#isWorkerDisabled = true;
|
|
18864
|
-
|
|
17912
|
+
pdf_GlobalWorkerOptions.workerSrc ||= "./pdf.worker.mjs";
|
|
18865
17913
|
}
|
|
18866
17914
|
this._isSameOrigin = (baseUrl, otherUrl) => {
|
|
18867
17915
|
const base = URL.parse(baseUrl);
|
|
@@ -19033,8 +18081,8 @@ class PDFWorker {
|
|
|
19033
18081
|
return new PDFWorker(params);
|
|
19034
18082
|
}
|
|
19035
18083
|
static get workerSrc() {
|
|
19036
|
-
if (
|
|
19037
|
-
return
|
|
18084
|
+
if (pdf_GlobalWorkerOptions.workerSrc) {
|
|
18085
|
+
return pdf_GlobalWorkerOptions.workerSrc;
|
|
19038
18086
|
}
|
|
19039
18087
|
throw new Error('No "GlobalWorkerOptions.workerSrc" specified.');
|
|
19040
18088
|
}
|
|
@@ -29261,784 +28309,1739 @@ class AnnotationEditorLayer {
|
|
|
29261
28309
|
if (this.isEmpty) {
|
|
29262
28310
|
this.div.hidden = true;
|
|
29263
28311
|
}
|
|
29264
|
-
const {
|
|
29265
|
-
classList
|
|
29266
|
-
} = this.div;
|
|
29267
|
-
for (const editorType of AnnotationEditorLayer.#editorTypes.values()) {
|
|
29268
|
-
classList.remove(`${editorType._type}Editing`);
|
|
28312
|
+
const {
|
|
28313
|
+
classList
|
|
28314
|
+
} = this.div;
|
|
28315
|
+
for (const editorType of AnnotationEditorLayer.#editorTypes.values()) {
|
|
28316
|
+
classList.remove(`${editorType._type}Editing`);
|
|
28317
|
+
}
|
|
28318
|
+
this.disableTextSelection();
|
|
28319
|
+
this.toggleAnnotationLayerPointerEvents(true);
|
|
28320
|
+
annotationLayer?.updateFakeAnnotations(needFakeAnnotation);
|
|
28321
|
+
this.#isDisabling = false;
|
|
28322
|
+
}
|
|
28323
|
+
getEditableAnnotation(id) {
|
|
28324
|
+
return this.#annotationLayer?.getEditableAnnotation(id) || null;
|
|
28325
|
+
}
|
|
28326
|
+
setActiveEditor(editor) {
|
|
28327
|
+
const currentActive = this.#uiManager.getActive();
|
|
28328
|
+
if (currentActive === editor) {
|
|
28329
|
+
return;
|
|
28330
|
+
}
|
|
28331
|
+
this.#uiManager.setActiveEditor(editor);
|
|
28332
|
+
}
|
|
28333
|
+
enableTextSelection() {
|
|
28334
|
+
this.div.tabIndex = -1;
|
|
28335
|
+
if (this.#textLayer?.div && !this.#textSelectionAC) {
|
|
28336
|
+
this.#textSelectionAC = new AbortController();
|
|
28337
|
+
const signal = this.#uiManager.combinedSignal(this.#textSelectionAC);
|
|
28338
|
+
this.#textLayer.div.addEventListener("pointerdown", this.#textLayerPointerDown.bind(this), {
|
|
28339
|
+
signal
|
|
28340
|
+
});
|
|
28341
|
+
this.#textLayer.div.classList.add("highlighting");
|
|
28342
|
+
}
|
|
28343
|
+
}
|
|
28344
|
+
disableTextSelection() {
|
|
28345
|
+
this.div.tabIndex = 0;
|
|
28346
|
+
if (this.#textLayer?.div && this.#textSelectionAC) {
|
|
28347
|
+
this.#textSelectionAC.abort();
|
|
28348
|
+
this.#textSelectionAC = null;
|
|
28349
|
+
this.#textLayer.div.classList.remove("highlighting");
|
|
28350
|
+
}
|
|
28351
|
+
}
|
|
28352
|
+
#textLayerPointerDown(event) {
|
|
28353
|
+
this.#uiManager.unselectAll();
|
|
28354
|
+
const {
|
|
28355
|
+
target
|
|
28356
|
+
} = event;
|
|
28357
|
+
if (target === this.#textLayer.div || (target.getAttribute("role") === "img" || target.classList.contains("endOfContent")) && this.#textLayer.div.contains(target)) {
|
|
28358
|
+
const {
|
|
28359
|
+
isMac
|
|
28360
|
+
} = util_FeatureTest.platform;
|
|
28361
|
+
if (event.button !== 0 || event.ctrlKey && isMac) {
|
|
28362
|
+
return;
|
|
28363
|
+
}
|
|
28364
|
+
this.#uiManager.showAllEditors("highlight", true, true);
|
|
28365
|
+
this.#textLayer.div.classList.add("free");
|
|
28366
|
+
this.toggleDrawing();
|
|
28367
|
+
HighlightEditor.startHighlighting(this, this.#uiManager.direction === "ltr", {
|
|
28368
|
+
target: this.#textLayer.div,
|
|
28369
|
+
x: event.x,
|
|
28370
|
+
y: event.y
|
|
28371
|
+
});
|
|
28372
|
+
this.#textLayer.div.addEventListener("pointerup", () => {
|
|
28373
|
+
this.#textLayer.div.classList.remove("free");
|
|
28374
|
+
this.toggleDrawing(true);
|
|
28375
|
+
}, {
|
|
28376
|
+
once: true,
|
|
28377
|
+
signal: this.#uiManager._signal
|
|
28378
|
+
});
|
|
28379
|
+
event.preventDefault();
|
|
28380
|
+
}
|
|
28381
|
+
}
|
|
28382
|
+
enableClick() {
|
|
28383
|
+
if (this.#clickAC) {
|
|
28384
|
+
return;
|
|
28385
|
+
}
|
|
28386
|
+
this.#clickAC = new AbortController();
|
|
28387
|
+
const signal = this.#uiManager.combinedSignal(this.#clickAC);
|
|
28388
|
+
this.div.addEventListener("pointerdown", this.pointerdown.bind(this), {
|
|
28389
|
+
signal
|
|
28390
|
+
});
|
|
28391
|
+
const pointerup = this.pointerup.bind(this);
|
|
28392
|
+
this.div.addEventListener("pointerup", pointerup, {
|
|
28393
|
+
signal
|
|
28394
|
+
});
|
|
28395
|
+
this.div.addEventListener("pointercancel", pointerup, {
|
|
28396
|
+
signal
|
|
28397
|
+
});
|
|
28398
|
+
}
|
|
28399
|
+
disableClick() {
|
|
28400
|
+
this.#clickAC?.abort();
|
|
28401
|
+
this.#clickAC = null;
|
|
28402
|
+
}
|
|
28403
|
+
attach(editor) {
|
|
28404
|
+
this.#editors.set(editor.id, editor);
|
|
28405
|
+
const {
|
|
28406
|
+
annotationElementId
|
|
28407
|
+
} = editor;
|
|
28408
|
+
if (annotationElementId && this.#uiManager.isDeletedAnnotationElement(annotationElementId)) {
|
|
28409
|
+
this.#uiManager.removeDeletedAnnotationElement(editor);
|
|
28410
|
+
}
|
|
28411
|
+
}
|
|
28412
|
+
detach(editor) {
|
|
28413
|
+
this.#editors.delete(editor.id);
|
|
28414
|
+
this.#accessibilityManager?.removePointerInTextLayer(editor.contentDiv);
|
|
28415
|
+
if (!this.#isDisabling && editor.annotationElementId) {
|
|
28416
|
+
this.#uiManager.addDeletedAnnotationElement(editor);
|
|
28417
|
+
}
|
|
28418
|
+
}
|
|
28419
|
+
remove(editor) {
|
|
28420
|
+
this.detach(editor);
|
|
28421
|
+
this.#uiManager.removeEditor(editor);
|
|
28422
|
+
editor.div.remove();
|
|
28423
|
+
editor.isAttachedToDOM = false;
|
|
28424
|
+
}
|
|
28425
|
+
changeParent(editor) {
|
|
28426
|
+
if (editor.parent === this) {
|
|
28427
|
+
return;
|
|
28428
|
+
}
|
|
28429
|
+
if (editor.parent && editor.annotationElementId) {
|
|
28430
|
+
this.#uiManager.addDeletedAnnotationElement(editor);
|
|
28431
|
+
AnnotationEditor.deleteAnnotationElement(editor);
|
|
28432
|
+
editor.annotationElementId = null;
|
|
28433
|
+
}
|
|
28434
|
+
this.attach(editor);
|
|
28435
|
+
editor.parent?.detach(editor);
|
|
28436
|
+
editor.setParent(this);
|
|
28437
|
+
if (editor.div && editor.isAttachedToDOM) {
|
|
28438
|
+
editor.div.remove();
|
|
28439
|
+
this.div.append(editor.div);
|
|
28440
|
+
}
|
|
28441
|
+
}
|
|
28442
|
+
add(editor) {
|
|
28443
|
+
if (editor.parent === this && editor.isAttachedToDOM) {
|
|
28444
|
+
return;
|
|
28445
|
+
}
|
|
28446
|
+
this.changeParent(editor);
|
|
28447
|
+
this.#uiManager.addEditor(editor);
|
|
28448
|
+
this.attach(editor);
|
|
28449
|
+
if (!editor.isAttachedToDOM) {
|
|
28450
|
+
const div = editor.render();
|
|
28451
|
+
this.div.append(div);
|
|
28452
|
+
editor.isAttachedToDOM = true;
|
|
28453
|
+
}
|
|
28454
|
+
editor.fixAndSetPosition();
|
|
28455
|
+
editor.onceAdded(!this.#isEnabling);
|
|
28456
|
+
this.#uiManager.addToAnnotationStorage(editor);
|
|
28457
|
+
editor._reportTelemetry(editor.telemetryInitialData);
|
|
28458
|
+
}
|
|
28459
|
+
moveEditorInDOM(editor) {
|
|
28460
|
+
if (!editor.isAttachedToDOM) {
|
|
28461
|
+
return;
|
|
28462
|
+
}
|
|
28463
|
+
const {
|
|
28464
|
+
activeElement
|
|
28465
|
+
} = document;
|
|
28466
|
+
if (editor.div.contains(activeElement) && !this.#editorFocusTimeoutId) {
|
|
28467
|
+
editor._focusEventsAllowed = false;
|
|
28468
|
+
this.#editorFocusTimeoutId = setTimeout(() => {
|
|
28469
|
+
this.#editorFocusTimeoutId = null;
|
|
28470
|
+
if (!editor.div.contains(document.activeElement)) {
|
|
28471
|
+
editor.div.addEventListener("focusin", () => {
|
|
28472
|
+
editor._focusEventsAllowed = true;
|
|
28473
|
+
}, {
|
|
28474
|
+
once: true,
|
|
28475
|
+
signal: this.#uiManager._signal
|
|
28476
|
+
});
|
|
28477
|
+
activeElement.focus();
|
|
28478
|
+
} else {
|
|
28479
|
+
editor._focusEventsAllowed = true;
|
|
28480
|
+
}
|
|
28481
|
+
}, 0);
|
|
28482
|
+
}
|
|
28483
|
+
editor._structTreeParentId = this.#accessibilityManager?.moveElementInDOM(this.div, editor.div, editor.contentDiv, true);
|
|
28484
|
+
}
|
|
28485
|
+
addOrRebuild(editor) {
|
|
28486
|
+
if (editor.needsToBeRebuilt()) {
|
|
28487
|
+
editor.parent ||= this;
|
|
28488
|
+
editor.rebuild();
|
|
28489
|
+
editor.show();
|
|
28490
|
+
} else {
|
|
28491
|
+
this.add(editor);
|
|
28492
|
+
}
|
|
28493
|
+
}
|
|
28494
|
+
addUndoableEditor(editor) {
|
|
28495
|
+
const cmd = () => editor._uiManager.rebuild(editor);
|
|
28496
|
+
const undo = () => {
|
|
28497
|
+
editor.remove();
|
|
28498
|
+
};
|
|
28499
|
+
this.addCommands({
|
|
28500
|
+
cmd,
|
|
28501
|
+
undo,
|
|
28502
|
+
mustExec: false
|
|
28503
|
+
});
|
|
28504
|
+
}
|
|
28505
|
+
getEditorByUID(uid) {
|
|
28506
|
+
for (const editor of this.#editors.values()) {
|
|
28507
|
+
if (editor.uid === uid) {
|
|
28508
|
+
return editor;
|
|
28509
|
+
}
|
|
28510
|
+
}
|
|
28511
|
+
return null;
|
|
28512
|
+
}
|
|
28513
|
+
getNextId() {
|
|
28514
|
+
return this.#uiManager.getId();
|
|
28515
|
+
}
|
|
28516
|
+
get #currentEditorType() {
|
|
28517
|
+
return AnnotationEditorLayer.#editorTypes.get(this.#uiManager.getMode());
|
|
28518
|
+
}
|
|
28519
|
+
combinedSignal(ac) {
|
|
28520
|
+
return this.#uiManager.combinedSignal(ac);
|
|
28521
|
+
}
|
|
28522
|
+
#createNewEditor(params) {
|
|
28523
|
+
const editorType = this.#currentEditorType;
|
|
28524
|
+
return editorType ? new editorType.prototype.constructor(params) : null;
|
|
28525
|
+
}
|
|
28526
|
+
canCreateNewEmptyEditor() {
|
|
28527
|
+
return this.#currentEditorType?.canCreateNewEmptyEditor();
|
|
28528
|
+
}
|
|
28529
|
+
async pasteEditor(options, params) {
|
|
28530
|
+
this.updateToolbar(options);
|
|
28531
|
+
await this.#uiManager.updateMode(options.mode);
|
|
28532
|
+
const {
|
|
28533
|
+
offsetX,
|
|
28534
|
+
offsetY
|
|
28535
|
+
} = this.#getCenterPoint();
|
|
28536
|
+
const id = this.getNextId();
|
|
28537
|
+
const editor = this.#createNewEditor({
|
|
28538
|
+
parent: this,
|
|
28539
|
+
id,
|
|
28540
|
+
x: offsetX,
|
|
28541
|
+
y: offsetY,
|
|
28542
|
+
uiManager: this.#uiManager,
|
|
28543
|
+
isCentered: true,
|
|
28544
|
+
...params
|
|
28545
|
+
});
|
|
28546
|
+
if (editor) {
|
|
28547
|
+
this.add(editor);
|
|
28548
|
+
}
|
|
28549
|
+
}
|
|
28550
|
+
async deserialize(data) {
|
|
28551
|
+
return (await AnnotationEditorLayer.#editorTypes.get(data.annotationType ?? data.annotationEditorType)?.deserialize(data, this, this.#uiManager)) || null;
|
|
28552
|
+
}
|
|
28553
|
+
createAndAddNewEditor(event, isCentered, data = {}) {
|
|
28554
|
+
const id = this.getNextId();
|
|
28555
|
+
const editor = this.#createNewEditor({
|
|
28556
|
+
parent: this,
|
|
28557
|
+
id,
|
|
28558
|
+
x: event.offsetX,
|
|
28559
|
+
y: event.offsetY,
|
|
28560
|
+
uiManager: this.#uiManager,
|
|
28561
|
+
isCentered,
|
|
28562
|
+
...data
|
|
28563
|
+
});
|
|
28564
|
+
if (editor) {
|
|
28565
|
+
this.add(editor);
|
|
29269
28566
|
}
|
|
29270
|
-
|
|
29271
|
-
this.toggleAnnotationLayerPointerEvents(true);
|
|
29272
|
-
annotationLayer?.updateFakeAnnotations(needFakeAnnotation);
|
|
29273
|
-
this.#isDisabling = false;
|
|
28567
|
+
return editor;
|
|
29274
28568
|
}
|
|
29275
|
-
|
|
29276
|
-
return this
|
|
28569
|
+
get boundingClientRect() {
|
|
28570
|
+
return this.div.getBoundingClientRect();
|
|
29277
28571
|
}
|
|
29278
|
-
|
|
29279
|
-
const
|
|
29280
|
-
|
|
28572
|
+
#getCenterPoint() {
|
|
28573
|
+
const {
|
|
28574
|
+
x,
|
|
28575
|
+
y,
|
|
28576
|
+
width,
|
|
28577
|
+
height
|
|
28578
|
+
} = this.boundingClientRect;
|
|
28579
|
+
const tlX = Math.max(0, x);
|
|
28580
|
+
const tlY = Math.max(0, y);
|
|
28581
|
+
const brX = Math.min(window.innerWidth, x + width);
|
|
28582
|
+
const brY = Math.min(window.innerHeight, y + height);
|
|
28583
|
+
const centerX = (tlX + brX) / 2 - x;
|
|
28584
|
+
const centerY = (tlY + brY) / 2 - y;
|
|
28585
|
+
const [offsetX, offsetY] = this.viewport.rotation % 180 === 0 ? [centerX, centerY] : [centerY, centerX];
|
|
28586
|
+
return {
|
|
28587
|
+
offsetX,
|
|
28588
|
+
offsetY
|
|
28589
|
+
};
|
|
28590
|
+
}
|
|
28591
|
+
addNewEditor(data = {}) {
|
|
28592
|
+
this.createAndAddNewEditor(this.#getCenterPoint(), true, data);
|
|
28593
|
+
}
|
|
28594
|
+
setSelected(editor) {
|
|
28595
|
+
this.#uiManager.setSelected(editor);
|
|
28596
|
+
}
|
|
28597
|
+
toggleSelected(editor) {
|
|
28598
|
+
this.#uiManager.toggleSelected(editor);
|
|
28599
|
+
}
|
|
28600
|
+
unselect(editor) {
|
|
28601
|
+
this.#uiManager.unselect(editor);
|
|
28602
|
+
}
|
|
28603
|
+
pointerup(event) {
|
|
28604
|
+
const {
|
|
28605
|
+
isMac
|
|
28606
|
+
} = util_FeatureTest.platform;
|
|
28607
|
+
if (event.button !== 0 || event.ctrlKey && isMac) {
|
|
29281
28608
|
return;
|
|
29282
28609
|
}
|
|
29283
|
-
this
|
|
29284
|
-
|
|
29285
|
-
enableTextSelection() {
|
|
29286
|
-
this.div.tabIndex = -1;
|
|
29287
|
-
if (this.#textLayer?.div && !this.#textSelectionAC) {
|
|
29288
|
-
this.#textSelectionAC = new AbortController();
|
|
29289
|
-
const signal = this.#uiManager.combinedSignal(this.#textSelectionAC);
|
|
29290
|
-
this.#textLayer.div.addEventListener("pointerdown", this.#textLayerPointerDown.bind(this), {
|
|
29291
|
-
signal
|
|
29292
|
-
});
|
|
29293
|
-
this.#textLayer.div.classList.add("highlighting");
|
|
28610
|
+
if (event.target !== this.div) {
|
|
28611
|
+
return;
|
|
29294
28612
|
}
|
|
29295
|
-
|
|
29296
|
-
|
|
29297
|
-
|
|
29298
|
-
|
|
29299
|
-
|
|
29300
|
-
|
|
29301
|
-
this.#textLayer.div.classList.remove("highlighting");
|
|
28613
|
+
if (!this.#hadPointerDown) {
|
|
28614
|
+
return;
|
|
28615
|
+
}
|
|
28616
|
+
this.#hadPointerDown = false;
|
|
28617
|
+
if (this.#currentEditorType?.isDrawer && this.#currentEditorType.supportMultipleDrawings) {
|
|
28618
|
+
return;
|
|
29302
28619
|
}
|
|
28620
|
+
if (!this.#allowClick) {
|
|
28621
|
+
this.#allowClick = true;
|
|
28622
|
+
return;
|
|
28623
|
+
}
|
|
28624
|
+
const currentMode = this.#uiManager.getMode();
|
|
28625
|
+
if (currentMode === AnnotationEditorType.STAMP || currentMode === AnnotationEditorType.SIGNATURE) {
|
|
28626
|
+
this.#uiManager.unselectAll();
|
|
28627
|
+
return;
|
|
28628
|
+
}
|
|
28629
|
+
this.createAndAddNewEditor(event, false);
|
|
29303
28630
|
}
|
|
29304
|
-
|
|
29305
|
-
this.#uiManager.
|
|
28631
|
+
pointerdown(event) {
|
|
28632
|
+
if (this.#uiManager.getMode() === AnnotationEditorType.HIGHLIGHT) {
|
|
28633
|
+
this.enableTextSelection();
|
|
28634
|
+
}
|
|
28635
|
+
if (this.#hadPointerDown) {
|
|
28636
|
+
this.#hadPointerDown = false;
|
|
28637
|
+
return;
|
|
28638
|
+
}
|
|
29306
28639
|
const {
|
|
29307
|
-
|
|
29308
|
-
} =
|
|
29309
|
-
if (
|
|
29310
|
-
|
|
29311
|
-
isMac
|
|
29312
|
-
} = util_FeatureTest.platform;
|
|
29313
|
-
if (event.button !== 0 || event.ctrlKey && isMac) {
|
|
29314
|
-
return;
|
|
29315
|
-
}
|
|
29316
|
-
this.#uiManager.showAllEditors("highlight", true, true);
|
|
29317
|
-
this.#textLayer.div.classList.add("free");
|
|
29318
|
-
this.toggleDrawing();
|
|
29319
|
-
HighlightEditor.startHighlighting(this, this.#uiManager.direction === "ltr", {
|
|
29320
|
-
target: this.#textLayer.div,
|
|
29321
|
-
x: event.x,
|
|
29322
|
-
y: event.y
|
|
29323
|
-
});
|
|
29324
|
-
this.#textLayer.div.addEventListener("pointerup", () => {
|
|
29325
|
-
this.#textLayer.div.classList.remove("free");
|
|
29326
|
-
this.toggleDrawing(true);
|
|
29327
|
-
}, {
|
|
29328
|
-
once: true,
|
|
29329
|
-
signal: this.#uiManager._signal
|
|
29330
|
-
});
|
|
29331
|
-
event.preventDefault();
|
|
28640
|
+
isMac
|
|
28641
|
+
} = util_FeatureTest.platform;
|
|
28642
|
+
if (event.button !== 0 || event.ctrlKey && isMac) {
|
|
28643
|
+
return;
|
|
29332
28644
|
}
|
|
29333
|
-
|
|
29334
|
-
enableClick() {
|
|
29335
|
-
if (this.#clickAC) {
|
|
28645
|
+
if (event.target !== this.div) {
|
|
29336
28646
|
return;
|
|
29337
28647
|
}
|
|
29338
|
-
this.#
|
|
29339
|
-
|
|
29340
|
-
|
|
29341
|
-
|
|
29342
|
-
}
|
|
29343
|
-
const
|
|
29344
|
-
this.
|
|
29345
|
-
|
|
28648
|
+
this.#hadPointerDown = true;
|
|
28649
|
+
if (this.#currentEditorType?.isDrawer) {
|
|
28650
|
+
this.startDrawingSession(event);
|
|
28651
|
+
return;
|
|
28652
|
+
}
|
|
28653
|
+
const editor = this.#uiManager.getActive();
|
|
28654
|
+
this.#allowClick = !editor || editor.isEmpty();
|
|
28655
|
+
}
|
|
28656
|
+
startDrawingSession(event) {
|
|
28657
|
+
this.div.focus({
|
|
28658
|
+
preventScroll: true
|
|
29346
28659
|
});
|
|
29347
|
-
this
|
|
28660
|
+
if (this.#drawingAC) {
|
|
28661
|
+
this.#currentEditorType.startDrawing(this, this.#uiManager, false, event);
|
|
28662
|
+
return;
|
|
28663
|
+
}
|
|
28664
|
+
this.#uiManager.setCurrentDrawingSession(this);
|
|
28665
|
+
this.#drawingAC = new AbortController();
|
|
28666
|
+
const signal = this.#uiManager.combinedSignal(this.#drawingAC);
|
|
28667
|
+
this.div.addEventListener("blur", ({
|
|
28668
|
+
relatedTarget
|
|
28669
|
+
}) => {
|
|
28670
|
+
if (relatedTarget && !this.div.contains(relatedTarget)) {
|
|
28671
|
+
this.#focusedElement = null;
|
|
28672
|
+
this.commitOrRemove();
|
|
28673
|
+
}
|
|
28674
|
+
}, {
|
|
29348
28675
|
signal
|
|
29349
28676
|
});
|
|
28677
|
+
this.#currentEditorType.startDrawing(this, this.#uiManager, false, event);
|
|
29350
28678
|
}
|
|
29351
|
-
|
|
29352
|
-
|
|
29353
|
-
|
|
29354
|
-
|
|
29355
|
-
|
|
29356
|
-
|
|
29357
|
-
|
|
29358
|
-
|
|
29359
|
-
|
|
29360
|
-
if (annotationElementId && this.#uiManager.isDeletedAnnotationElement(annotationElementId)) {
|
|
29361
|
-
this.#uiManager.removeDeletedAnnotationElement(editor);
|
|
28679
|
+
pause(on) {
|
|
28680
|
+
if (on) {
|
|
28681
|
+
const {
|
|
28682
|
+
activeElement
|
|
28683
|
+
} = document;
|
|
28684
|
+
if (this.div.contains(activeElement)) {
|
|
28685
|
+
this.#focusedElement = activeElement;
|
|
28686
|
+
}
|
|
28687
|
+
return;
|
|
29362
28688
|
}
|
|
29363
|
-
|
|
29364
|
-
|
|
29365
|
-
|
|
29366
|
-
|
|
29367
|
-
|
|
29368
|
-
this.#uiManager.addDeletedAnnotationElement(editor);
|
|
28689
|
+
if (this.#focusedElement) {
|
|
28690
|
+
setTimeout(() => {
|
|
28691
|
+
this.#focusedElement?.focus();
|
|
28692
|
+
this.#focusedElement = null;
|
|
28693
|
+
}, 0);
|
|
29369
28694
|
}
|
|
29370
28695
|
}
|
|
29371
|
-
|
|
29372
|
-
this
|
|
29373
|
-
|
|
29374
|
-
editor.div.remove();
|
|
29375
|
-
editor.isAttachedToDOM = false;
|
|
29376
|
-
}
|
|
29377
|
-
changeParent(editor) {
|
|
29378
|
-
if (editor.parent === this) {
|
|
29379
|
-
return;
|
|
28696
|
+
endDrawingSession(isAborted = false) {
|
|
28697
|
+
if (!this.#drawingAC) {
|
|
28698
|
+
return null;
|
|
29380
28699
|
}
|
|
29381
|
-
|
|
29382
|
-
|
|
29383
|
-
|
|
29384
|
-
|
|
28700
|
+
this.#uiManager.setCurrentDrawingSession(null);
|
|
28701
|
+
this.#drawingAC.abort();
|
|
28702
|
+
this.#drawingAC = null;
|
|
28703
|
+
this.#focusedElement = null;
|
|
28704
|
+
return this.#currentEditorType.endDrawing(isAborted);
|
|
28705
|
+
}
|
|
28706
|
+
findNewParent(editor, x, y) {
|
|
28707
|
+
const layer = this.#uiManager.findParent(x, y);
|
|
28708
|
+
if (layer === null || layer === this) {
|
|
28709
|
+
return false;
|
|
29385
28710
|
}
|
|
29386
|
-
|
|
29387
|
-
|
|
29388
|
-
|
|
29389
|
-
|
|
29390
|
-
|
|
29391
|
-
this.
|
|
28711
|
+
layer.changeParent(editor);
|
|
28712
|
+
return true;
|
|
28713
|
+
}
|
|
28714
|
+
commitOrRemove() {
|
|
28715
|
+
if (this.#drawingAC) {
|
|
28716
|
+
this.endDrawingSession();
|
|
28717
|
+
return true;
|
|
29392
28718
|
}
|
|
28719
|
+
return false;
|
|
29393
28720
|
}
|
|
29394
|
-
|
|
29395
|
-
if (
|
|
28721
|
+
onScaleChanging() {
|
|
28722
|
+
if (!this.#drawingAC) {
|
|
29396
28723
|
return;
|
|
29397
28724
|
}
|
|
29398
|
-
this.
|
|
29399
|
-
this.#uiManager.addEditor(editor);
|
|
29400
|
-
this.attach(editor);
|
|
29401
|
-
if (!editor.isAttachedToDOM) {
|
|
29402
|
-
const div = editor.render();
|
|
29403
|
-
this.div.append(div);
|
|
29404
|
-
editor.isAttachedToDOM = true;
|
|
29405
|
-
}
|
|
29406
|
-
editor.fixAndSetPosition();
|
|
29407
|
-
editor.onceAdded(!this.#isEnabling);
|
|
29408
|
-
this.#uiManager.addToAnnotationStorage(editor);
|
|
29409
|
-
editor._reportTelemetry(editor.telemetryInitialData);
|
|
28725
|
+
this.#currentEditorType.onScaleChangingWhenDrawing(this);
|
|
29410
28726
|
}
|
|
29411
|
-
|
|
29412
|
-
|
|
29413
|
-
|
|
28727
|
+
destroy() {
|
|
28728
|
+
this.commitOrRemove();
|
|
28729
|
+
if (this.#uiManager.getActive()?.parent === this) {
|
|
28730
|
+
this.#uiManager.commitOrRemove();
|
|
28731
|
+
this.#uiManager.setActiveEditor(null);
|
|
29414
28732
|
}
|
|
29415
|
-
|
|
29416
|
-
|
|
29417
|
-
|
|
29418
|
-
if (editor.div.contains(activeElement) && !this.#editorFocusTimeoutId) {
|
|
29419
|
-
editor._focusEventsAllowed = false;
|
|
29420
|
-
this.#editorFocusTimeoutId = setTimeout(() => {
|
|
29421
|
-
this.#editorFocusTimeoutId = null;
|
|
29422
|
-
if (!editor.div.contains(document.activeElement)) {
|
|
29423
|
-
editor.div.addEventListener("focusin", () => {
|
|
29424
|
-
editor._focusEventsAllowed = true;
|
|
29425
|
-
}, {
|
|
29426
|
-
once: true,
|
|
29427
|
-
signal: this.#uiManager._signal
|
|
29428
|
-
});
|
|
29429
|
-
activeElement.focus();
|
|
29430
|
-
} else {
|
|
29431
|
-
editor._focusEventsAllowed = true;
|
|
29432
|
-
}
|
|
29433
|
-
}, 0);
|
|
28733
|
+
if (this.#editorFocusTimeoutId) {
|
|
28734
|
+
clearTimeout(this.#editorFocusTimeoutId);
|
|
28735
|
+
this.#editorFocusTimeoutId = null;
|
|
29434
28736
|
}
|
|
29435
|
-
editor
|
|
28737
|
+
for (const editor of this.#editors.values()) {
|
|
28738
|
+
this.#accessibilityManager?.removePointerInTextLayer(editor.contentDiv);
|
|
28739
|
+
editor.setParent(null);
|
|
28740
|
+
editor.isAttachedToDOM = false;
|
|
28741
|
+
editor.div.remove();
|
|
28742
|
+
}
|
|
28743
|
+
this.div = null;
|
|
28744
|
+
this.#editors.clear();
|
|
28745
|
+
this.#uiManager.removeLayer(this);
|
|
29436
28746
|
}
|
|
29437
|
-
|
|
29438
|
-
|
|
29439
|
-
editor.
|
|
29440
|
-
|
|
29441
|
-
|
|
29442
|
-
}
|
|
28747
|
+
#cleanup() {
|
|
28748
|
+
for (const editor of this.#editors.values()) {
|
|
28749
|
+
if (editor.isEmpty()) {
|
|
28750
|
+
editor.remove();
|
|
28751
|
+
}
|
|
28752
|
+
}
|
|
28753
|
+
}
|
|
28754
|
+
render({
|
|
28755
|
+
viewport
|
|
28756
|
+
}) {
|
|
28757
|
+
this.viewport = viewport;
|
|
28758
|
+
setLayerDimensions(this.div, viewport);
|
|
28759
|
+
for (const editor of this.#uiManager.getEditors(this.pageIndex)) {
|
|
29443
28760
|
this.add(editor);
|
|
28761
|
+
editor.rebuild();
|
|
29444
28762
|
}
|
|
28763
|
+
this.updateMode();
|
|
29445
28764
|
}
|
|
29446
|
-
|
|
29447
|
-
|
|
29448
|
-
|
|
29449
|
-
|
|
29450
|
-
|
|
29451
|
-
this.
|
|
29452
|
-
|
|
29453
|
-
|
|
29454
|
-
|
|
28765
|
+
update({
|
|
28766
|
+
viewport
|
|
28767
|
+
}) {
|
|
28768
|
+
this.#uiManager.commitOrRemove();
|
|
28769
|
+
this.#cleanup();
|
|
28770
|
+
const oldRotation = this.viewport.rotation;
|
|
28771
|
+
const rotation = viewport.rotation;
|
|
28772
|
+
this.viewport = viewport;
|
|
28773
|
+
setLayerDimensions(this.div, {
|
|
28774
|
+
rotation
|
|
29455
28775
|
});
|
|
29456
|
-
|
|
29457
|
-
|
|
29458
|
-
|
|
29459
|
-
if (editor.uid === uid) {
|
|
29460
|
-
return editor;
|
|
28776
|
+
if (oldRotation !== rotation) {
|
|
28777
|
+
for (const editor of this.#editors.values()) {
|
|
28778
|
+
editor.rotate(rotation);
|
|
29461
28779
|
}
|
|
29462
28780
|
}
|
|
29463
|
-
return null;
|
|
29464
28781
|
}
|
|
29465
|
-
|
|
29466
|
-
|
|
28782
|
+
get pageDimensions() {
|
|
28783
|
+
const {
|
|
28784
|
+
pageWidth,
|
|
28785
|
+
pageHeight
|
|
28786
|
+
} = this.viewport.rawDims;
|
|
28787
|
+
return [pageWidth, pageHeight];
|
|
29467
28788
|
}
|
|
29468
|
-
get
|
|
29469
|
-
return
|
|
28789
|
+
get scale() {
|
|
28790
|
+
return this.#uiManager.viewParameters.realScale;
|
|
29470
28791
|
}
|
|
29471
|
-
|
|
29472
|
-
|
|
28792
|
+
}
|
|
28793
|
+
|
|
28794
|
+
;// ./src/display/draw_layer.js
|
|
28795
|
+
|
|
28796
|
+
|
|
28797
|
+
class DrawLayer {
|
|
28798
|
+
#parent = null;
|
|
28799
|
+
#mapping = new Map();
|
|
28800
|
+
#toUpdate = new Map();
|
|
28801
|
+
static #id = 0;
|
|
28802
|
+
constructor({
|
|
28803
|
+
pageIndex
|
|
28804
|
+
}) {
|
|
28805
|
+
this.pageIndex = pageIndex;
|
|
29473
28806
|
}
|
|
29474
|
-
|
|
29475
|
-
|
|
29476
|
-
|
|
28807
|
+
setParent(parent) {
|
|
28808
|
+
if (!this.#parent) {
|
|
28809
|
+
this.#parent = parent;
|
|
28810
|
+
return;
|
|
28811
|
+
}
|
|
28812
|
+
if (this.#parent !== parent) {
|
|
28813
|
+
if (this.#mapping.size > 0) {
|
|
28814
|
+
for (const root of this.#mapping.values()) {
|
|
28815
|
+
root.remove();
|
|
28816
|
+
parent.append(root);
|
|
28817
|
+
}
|
|
28818
|
+
}
|
|
28819
|
+
this.#parent = parent;
|
|
28820
|
+
}
|
|
29477
28821
|
}
|
|
29478
|
-
|
|
29479
|
-
return this
|
|
28822
|
+
static get _svgFactory() {
|
|
28823
|
+
return shadow(this, "_svgFactory", new DOMSVGFactory());
|
|
29480
28824
|
}
|
|
29481
|
-
|
|
29482
|
-
this.updateToolbar(options);
|
|
29483
|
-
await this.#uiManager.updateMode(options.mode);
|
|
28825
|
+
static #setBox(element, [x, y, width, height]) {
|
|
29484
28826
|
const {
|
|
29485
|
-
|
|
29486
|
-
|
|
29487
|
-
|
|
29488
|
-
|
|
29489
|
-
|
|
29490
|
-
|
|
29491
|
-
id,
|
|
29492
|
-
x: offsetX,
|
|
29493
|
-
y: offsetY,
|
|
29494
|
-
uiManager: this.#uiManager,
|
|
29495
|
-
isCentered: true,
|
|
29496
|
-
...params
|
|
29497
|
-
});
|
|
29498
|
-
if (editor) {
|
|
29499
|
-
this.add(editor);
|
|
29500
|
-
}
|
|
28827
|
+
style
|
|
28828
|
+
} = element;
|
|
28829
|
+
style.top = `${100 * y}%`;
|
|
28830
|
+
style.left = `${100 * x}%`;
|
|
28831
|
+
style.width = `${100 * width}%`;
|
|
28832
|
+
style.height = `${100 * height}%`;
|
|
29501
28833
|
}
|
|
29502
|
-
|
|
29503
|
-
|
|
28834
|
+
#createSVG() {
|
|
28835
|
+
const svg = DrawLayer._svgFactory.create(1, 1, true);
|
|
28836
|
+
this.#parent.append(svg);
|
|
28837
|
+
svg.setAttribute("aria-hidden", true);
|
|
28838
|
+
return svg;
|
|
29504
28839
|
}
|
|
29505
|
-
|
|
29506
|
-
const
|
|
29507
|
-
|
|
29508
|
-
|
|
29509
|
-
|
|
29510
|
-
|
|
29511
|
-
|
|
29512
|
-
|
|
29513
|
-
|
|
29514
|
-
|
|
29515
|
-
|
|
29516
|
-
if (editor) {
|
|
29517
|
-
this.add(editor);
|
|
29518
|
-
}
|
|
29519
|
-
return editor;
|
|
28840
|
+
#createClipPath(defs, pathId) {
|
|
28841
|
+
const clipPath = DrawLayer._svgFactory.createElement("clipPath");
|
|
28842
|
+
defs.append(clipPath);
|
|
28843
|
+
const clipPathId = `clip_${pathId}`;
|
|
28844
|
+
clipPath.setAttribute("id", clipPathId);
|
|
28845
|
+
clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
|
|
28846
|
+
const clipPathUse = DrawLayer._svgFactory.createElement("use");
|
|
28847
|
+
clipPath.append(clipPathUse);
|
|
28848
|
+
clipPathUse.setAttribute("href", `#${pathId}`);
|
|
28849
|
+
clipPathUse.classList.add("clip");
|
|
28850
|
+
return clipPathId;
|
|
29520
28851
|
}
|
|
29521
|
-
|
|
29522
|
-
|
|
28852
|
+
#updateProperties(element, properties) {
|
|
28853
|
+
for (const [key, value] of Object.entries(properties)) {
|
|
28854
|
+
if (value === null) {
|
|
28855
|
+
element.removeAttribute(key);
|
|
28856
|
+
} else {
|
|
28857
|
+
element.setAttribute(key, value);
|
|
28858
|
+
}
|
|
28859
|
+
}
|
|
29523
28860
|
}
|
|
29524
|
-
|
|
29525
|
-
const
|
|
29526
|
-
|
|
29527
|
-
|
|
29528
|
-
|
|
29529
|
-
|
|
29530
|
-
|
|
29531
|
-
const
|
|
29532
|
-
|
|
29533
|
-
|
|
29534
|
-
|
|
29535
|
-
|
|
29536
|
-
|
|
29537
|
-
const
|
|
28861
|
+
draw(properties, isPathUpdatable = false, hasClip = false) {
|
|
28862
|
+
const id = DrawLayer.#id++;
|
|
28863
|
+
const root = this.#createSVG();
|
|
28864
|
+
const defs = DrawLayer._svgFactory.createElement("defs");
|
|
28865
|
+
root.append(defs);
|
|
28866
|
+
const path = DrawLayer._svgFactory.createElement("path");
|
|
28867
|
+
defs.append(path);
|
|
28868
|
+
const pathId = `path_p${this.pageIndex}_${id}`;
|
|
28869
|
+
path.setAttribute("id", pathId);
|
|
28870
|
+
path.setAttribute("vector-effect", "non-scaling-stroke");
|
|
28871
|
+
if (isPathUpdatable) {
|
|
28872
|
+
this.#toUpdate.set(id, path);
|
|
28873
|
+
}
|
|
28874
|
+
const clipPathId = hasClip ? this.#createClipPath(defs, pathId) : null;
|
|
28875
|
+
const use = DrawLayer._svgFactory.createElement("use");
|
|
28876
|
+
root.append(use);
|
|
28877
|
+
use.setAttribute("href", `#${pathId}`);
|
|
28878
|
+
this.updateProperties(root, properties);
|
|
28879
|
+
this.#mapping.set(id, root);
|
|
29538
28880
|
return {
|
|
29539
|
-
|
|
29540
|
-
|
|
28881
|
+
id,
|
|
28882
|
+
clipPathId: `url(#${clipPathId})`
|
|
29541
28883
|
};
|
|
29542
28884
|
}
|
|
29543
|
-
|
|
29544
|
-
|
|
29545
|
-
|
|
29546
|
-
|
|
29547
|
-
|
|
29548
|
-
|
|
29549
|
-
|
|
29550
|
-
this
|
|
28885
|
+
drawOutline(properties, mustRemoveSelfIntersections) {
|
|
28886
|
+
const id = DrawLayer.#id++;
|
|
28887
|
+
const root = this.#createSVG();
|
|
28888
|
+
const defs = DrawLayer._svgFactory.createElement("defs");
|
|
28889
|
+
root.append(defs);
|
|
28890
|
+
const path = DrawLayer._svgFactory.createElement("path");
|
|
28891
|
+
defs.append(path);
|
|
28892
|
+
const pathId = `path_p${this.pageIndex}_${id}`;
|
|
28893
|
+
path.setAttribute("id", pathId);
|
|
28894
|
+
path.setAttribute("vector-effect", "non-scaling-stroke");
|
|
28895
|
+
let maskId;
|
|
28896
|
+
if (mustRemoveSelfIntersections) {
|
|
28897
|
+
const mask = DrawLayer._svgFactory.createElement("mask");
|
|
28898
|
+
defs.append(mask);
|
|
28899
|
+
maskId = `mask_p${this.pageIndex}_${id}`;
|
|
28900
|
+
mask.setAttribute("id", maskId);
|
|
28901
|
+
mask.setAttribute("maskUnits", "objectBoundingBox");
|
|
28902
|
+
const rect = DrawLayer._svgFactory.createElement("rect");
|
|
28903
|
+
mask.append(rect);
|
|
28904
|
+
rect.setAttribute("width", "1");
|
|
28905
|
+
rect.setAttribute("height", "1");
|
|
28906
|
+
rect.setAttribute("fill", "white");
|
|
28907
|
+
const use = DrawLayer._svgFactory.createElement("use");
|
|
28908
|
+
mask.append(use);
|
|
28909
|
+
use.setAttribute("href", `#${pathId}`);
|
|
28910
|
+
use.setAttribute("stroke", "none");
|
|
28911
|
+
use.setAttribute("fill", "black");
|
|
28912
|
+
use.setAttribute("fill-rule", "nonzero");
|
|
28913
|
+
use.classList.add("mask");
|
|
28914
|
+
}
|
|
28915
|
+
const use1 = DrawLayer._svgFactory.createElement("use");
|
|
28916
|
+
root.append(use1);
|
|
28917
|
+
use1.setAttribute("href", `#${pathId}`);
|
|
28918
|
+
if (maskId) {
|
|
28919
|
+
use1.setAttribute("mask", `url(#${maskId})`);
|
|
28920
|
+
}
|
|
28921
|
+
const use2 = use1.cloneNode();
|
|
28922
|
+
root.append(use2);
|
|
28923
|
+
use1.classList.add("mainOutline");
|
|
28924
|
+
use2.classList.add("secondaryOutline");
|
|
28925
|
+
this.updateProperties(root, properties);
|
|
28926
|
+
this.#mapping.set(id, root);
|
|
28927
|
+
return id;
|
|
29551
28928
|
}
|
|
29552
|
-
|
|
29553
|
-
this.#
|
|
28929
|
+
finalizeDraw(id, properties) {
|
|
28930
|
+
this.#toUpdate.delete(id);
|
|
28931
|
+
this.updateProperties(id, properties);
|
|
29554
28932
|
}
|
|
29555
|
-
|
|
29556
|
-
|
|
29557
|
-
isMac
|
|
29558
|
-
} = util_FeatureTest.platform;
|
|
29559
|
-
if (event.button !== 0 || event.ctrlKey && isMac) {
|
|
28933
|
+
updateProperties(elementOrId, properties) {
|
|
28934
|
+
if (!properties) {
|
|
29560
28935
|
return;
|
|
29561
28936
|
}
|
|
29562
|
-
|
|
28937
|
+
const {
|
|
28938
|
+
root,
|
|
28939
|
+
bbox,
|
|
28940
|
+
rootClass,
|
|
28941
|
+
path
|
|
28942
|
+
} = properties;
|
|
28943
|
+
const element = typeof elementOrId === "number" ? this.#mapping.get(elementOrId) : elementOrId;
|
|
28944
|
+
if (!element) {
|
|
29563
28945
|
return;
|
|
29564
28946
|
}
|
|
29565
|
-
if (
|
|
29566
|
-
|
|
28947
|
+
if (root) {
|
|
28948
|
+
this.#updateProperties(element, root);
|
|
29567
28949
|
}
|
|
29568
|
-
|
|
29569
|
-
|
|
29570
|
-
return;
|
|
28950
|
+
if (bbox) {
|
|
28951
|
+
DrawLayer.#setBox(element, bbox);
|
|
29571
28952
|
}
|
|
29572
|
-
if (
|
|
29573
|
-
|
|
29574
|
-
|
|
28953
|
+
if (rootClass) {
|
|
28954
|
+
const {
|
|
28955
|
+
classList
|
|
28956
|
+
} = element;
|
|
28957
|
+
for (const [className, value] of Object.entries(rootClass)) {
|
|
28958
|
+
classList.toggle(className, value);
|
|
28959
|
+
}
|
|
29575
28960
|
}
|
|
29576
|
-
|
|
29577
|
-
|
|
29578
|
-
|
|
29579
|
-
|
|
28961
|
+
if (path) {
|
|
28962
|
+
const defs = element.firstElementChild;
|
|
28963
|
+
const pathElement = defs.firstElementChild;
|
|
28964
|
+
this.#updateProperties(pathElement, path);
|
|
29580
28965
|
}
|
|
29581
|
-
this.createAndAddNewEditor(event, false);
|
|
29582
28966
|
}
|
|
29583
|
-
|
|
29584
|
-
if (
|
|
29585
|
-
this.enableTextSelection();
|
|
29586
|
-
}
|
|
29587
|
-
if (this.#hadPointerDown) {
|
|
29588
|
-
this.#hadPointerDown = false;
|
|
28967
|
+
updateParent(id, layer) {
|
|
28968
|
+
if (layer === this) {
|
|
29589
28969
|
return;
|
|
29590
28970
|
}
|
|
29591
|
-
const
|
|
29592
|
-
|
|
29593
|
-
} = util_FeatureTest.platform;
|
|
29594
|
-
if (event.button !== 0 || event.ctrlKey && isMac) {
|
|
28971
|
+
const root = this.#mapping.get(id);
|
|
28972
|
+
if (!root) {
|
|
29595
28973
|
return;
|
|
29596
28974
|
}
|
|
29597
|
-
|
|
28975
|
+
layer.#parent.append(root);
|
|
28976
|
+
this.#mapping.delete(id);
|
|
28977
|
+
layer.#mapping.set(id, root);
|
|
28978
|
+
}
|
|
28979
|
+
remove(id) {
|
|
28980
|
+
this.#toUpdate.delete(id);
|
|
28981
|
+
if (this.#parent === null) {
|
|
29598
28982
|
return;
|
|
29599
28983
|
}
|
|
29600
|
-
this.#
|
|
29601
|
-
|
|
29602
|
-
|
|
29603
|
-
|
|
28984
|
+
this.#mapping.get(id).remove();
|
|
28985
|
+
this.#mapping.delete(id);
|
|
28986
|
+
}
|
|
28987
|
+
destroy() {
|
|
28988
|
+
this.#parent = null;
|
|
28989
|
+
for (const root of this.#mapping.values()) {
|
|
28990
|
+
root.remove();
|
|
29604
28991
|
}
|
|
29605
|
-
|
|
29606
|
-
this.#
|
|
28992
|
+
this.#mapping.clear();
|
|
28993
|
+
this.#toUpdate.clear();
|
|
29607
28994
|
}
|
|
29608
|
-
|
|
29609
|
-
|
|
29610
|
-
|
|
29611
|
-
|
|
29612
|
-
|
|
29613
|
-
|
|
29614
|
-
|
|
28995
|
+
}
|
|
28996
|
+
|
|
28997
|
+
;// ./src/pdf.js
|
|
28998
|
+
|
|
28999
|
+
|
|
29000
|
+
|
|
29001
|
+
|
|
29002
|
+
|
|
29003
|
+
|
|
29004
|
+
|
|
29005
|
+
|
|
29006
|
+
|
|
29007
|
+
|
|
29008
|
+
|
|
29009
|
+
|
|
29010
|
+
|
|
29011
|
+
|
|
29012
|
+
|
|
29013
|
+
|
|
29014
|
+
{
|
|
29015
|
+
globalThis._pdfjsTestingUtils = {
|
|
29016
|
+
HighlightOutliner: HighlightOutliner
|
|
29017
|
+
};
|
|
29018
|
+
}
|
|
29019
|
+
globalThis.pdfjsLib = {
|
|
29020
|
+
AbortException: AbortException,
|
|
29021
|
+
AnnotationEditorLayer: AnnotationEditorLayer,
|
|
29022
|
+
AnnotationEditorParamsType: AnnotationEditorParamsType,
|
|
29023
|
+
AnnotationEditorType: AnnotationEditorType,
|
|
29024
|
+
AnnotationEditorUIManager: AnnotationEditorUIManager,
|
|
29025
|
+
AnnotationLayer: AnnotationLayer,
|
|
29026
|
+
AnnotationMode: AnnotationMode,
|
|
29027
|
+
AnnotationType: AnnotationType,
|
|
29028
|
+
applyOpacity: applyOpacity,
|
|
29029
|
+
build: build,
|
|
29030
|
+
ColorPicker: ColorPicker,
|
|
29031
|
+
createValidAbsoluteUrl: createValidAbsoluteUrl,
|
|
29032
|
+
CSSConstants: CSSConstants,
|
|
29033
|
+
DOMSVGFactory: DOMSVGFactory,
|
|
29034
|
+
DrawLayer: DrawLayer,
|
|
29035
|
+
FeatureTest: util_FeatureTest,
|
|
29036
|
+
fetchData: fetchData,
|
|
29037
|
+
findContrastColor: findContrastColor,
|
|
29038
|
+
getDocument: getDocument,
|
|
29039
|
+
getFilenameFromUrl: getFilenameFromUrl,
|
|
29040
|
+
getPdfFilenameFromUrl: getPdfFilenameFromUrl,
|
|
29041
|
+
getRGB: getRGB,
|
|
29042
|
+
getUuid: getUuid,
|
|
29043
|
+
getXfaPageViewport: getXfaPageViewport,
|
|
29044
|
+
GlobalWorkerOptions: pdf_GlobalWorkerOptions,
|
|
29045
|
+
ImageKind: util_ImageKind,
|
|
29046
|
+
InvalidPDFException: InvalidPDFException,
|
|
29047
|
+
isDataScheme: isDataScheme,
|
|
29048
|
+
isPdfFile: isPdfFile,
|
|
29049
|
+
isValidExplicitDest: isValidExplicitDest,
|
|
29050
|
+
MathClamp: MathClamp,
|
|
29051
|
+
noContextMenu: noContextMenu,
|
|
29052
|
+
normalizeUnicode: normalizeUnicode,
|
|
29053
|
+
OPS: OPS,
|
|
29054
|
+
OutputScale: OutputScale,
|
|
29055
|
+
PasswordResponses: PasswordResponses,
|
|
29056
|
+
PDFDataRangeTransport: PDFDataRangeTransport,
|
|
29057
|
+
PDFDateString: PDFDateString,
|
|
29058
|
+
PDFWorker: PDFWorker,
|
|
29059
|
+
PermissionFlag: PermissionFlag,
|
|
29060
|
+
PixelsPerInch: PixelsPerInch,
|
|
29061
|
+
RenderingCancelledException: RenderingCancelledException,
|
|
29062
|
+
renderRichText: renderRichText,
|
|
29063
|
+
ResponseException: ResponseException,
|
|
29064
|
+
setLayerDimensions: setLayerDimensions,
|
|
29065
|
+
shadow: shadow,
|
|
29066
|
+
SignatureExtractor: SignatureExtractor,
|
|
29067
|
+
stopEvent: stopEvent,
|
|
29068
|
+
SupportedImageMimeTypes: SupportedImageMimeTypes,
|
|
29069
|
+
TextLayer: TextLayer,
|
|
29070
|
+
TouchManager: TouchManager,
|
|
29071
|
+
updateUrlHash: updateUrlHash,
|
|
29072
|
+
Util: Util,
|
|
29073
|
+
VerbosityLevel: VerbosityLevel,
|
|
29074
|
+
version: version,
|
|
29075
|
+
XfaLayer: XfaLayer
|
|
29076
|
+
};
|
|
29077
|
+
|
|
29078
|
+
|
|
29079
|
+
|
|
29080
|
+
//# sourceMappingURL=pdf.mjs.map
|
|
29081
|
+
;// ./node_modules/pdfjs-dist/build/pdf.worker.min.mjs
|
|
29082
|
+
const pdf_worker_min_namespaceObject = __webpack_require__.p + "pdf.worker.min.mjs";
|
|
29083
|
+
;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFElements.vue?vue&type=template&id=00b0fcba&scoped=true
|
|
29084
|
+
var render = function render() {
|
|
29085
|
+
var _vm = this,
|
|
29086
|
+
_c = _vm._self._c;
|
|
29087
|
+
return _c('div', {
|
|
29088
|
+
staticClass: "pdf-elements-root",
|
|
29089
|
+
style: {
|
|
29090
|
+
width: _vm.width,
|
|
29091
|
+
height: _vm.height
|
|
29092
|
+
}
|
|
29093
|
+
}, [_vm.pdfDocuments.length ? _c('div', {
|
|
29094
|
+
staticClass: "pages-container",
|
|
29095
|
+
style: {
|
|
29096
|
+
transform: `scale(${_vm.visualScale / _vm.scale})`,
|
|
29097
|
+
transformOrigin: 'top center'
|
|
29098
|
+
}
|
|
29099
|
+
}, _vm._l(_vm.pdfDocuments, function (pdfDoc, docIndex) {
|
|
29100
|
+
return _c('div', {
|
|
29101
|
+
key: docIndex
|
|
29102
|
+
}, _vm._l(pdfDoc.pages, function (page, pIndex) {
|
|
29103
|
+
return _c('div', {
|
|
29104
|
+
key: `${docIndex}-${pIndex}`,
|
|
29105
|
+
staticClass: "page-slot"
|
|
29106
|
+
}, [_c('div', {
|
|
29107
|
+
staticClass: "page-wrapper",
|
|
29108
|
+
on: {
|
|
29109
|
+
"mousedown": function ($event) {
|
|
29110
|
+
return _vm.selectPage(docIndex, pIndex);
|
|
29111
|
+
},
|
|
29112
|
+
"touchstart": function ($event) {
|
|
29113
|
+
return _vm.selectPage(docIndex, pIndex);
|
|
29114
|
+
}
|
|
29115
|
+
}
|
|
29116
|
+
}, [_c('div', {
|
|
29117
|
+
staticClass: "page-canvas",
|
|
29118
|
+
class: {
|
|
29119
|
+
'shadow-outline': docIndex === _vm.selectedDocIndex && pIndex === _vm.selectedPageIndex
|
|
29120
|
+
}
|
|
29121
|
+
}, [_c('PDFPage', {
|
|
29122
|
+
ref: `page${docIndex}-${pIndex}`,
|
|
29123
|
+
refInFor: true,
|
|
29124
|
+
attrs: {
|
|
29125
|
+
"page": page,
|
|
29126
|
+
"scale": _vm.scale
|
|
29127
|
+
},
|
|
29128
|
+
on: {
|
|
29129
|
+
"onMeasure": function ($event) {
|
|
29130
|
+
return _vm.onMeasure($event, docIndex, pIndex);
|
|
29131
|
+
}
|
|
29132
|
+
}
|
|
29133
|
+
}), _c('div', {
|
|
29134
|
+
staticClass: "overlay"
|
|
29135
|
+
}, [_vm.isAddingMode && _vm.previewPageDocIndex === docIndex && _vm.previewPageIndex === pIndex && _vm.previewElement && _vm.previewVisible ? _c('div', {
|
|
29136
|
+
staticClass: "preview-element",
|
|
29137
|
+
style: {
|
|
29138
|
+
left: `${_vm.previewPosition.x * _vm.previewScale.x}px`,
|
|
29139
|
+
top: `${_vm.previewPosition.y * _vm.previewScale.y}px`,
|
|
29140
|
+
width: `${_vm.previewElement.width * _vm.previewScale.x}px`,
|
|
29141
|
+
height: `${_vm.previewElement.height * _vm.previewScale.y}px`
|
|
29142
|
+
}
|
|
29143
|
+
}, [_vm._t("custom", null, {
|
|
29144
|
+
"object": _vm.previewElement,
|
|
29145
|
+
"isSelected": false
|
|
29146
|
+
})], 2) : _vm._e(), _vm._l(pdfDoc.allObjects[pIndex], function (object) {
|
|
29147
|
+
return _c('DraggableElement', {
|
|
29148
|
+
key: object.id,
|
|
29149
|
+
ref: `draggable${docIndex}-${pIndex}-${object.id}`,
|
|
29150
|
+
refInFor: true,
|
|
29151
|
+
attrs: {
|
|
29152
|
+
"object": object,
|
|
29153
|
+
"pages-scale": _vm.getRenderPageScale(docIndex, pIndex),
|
|
29154
|
+
"page-width": _vm.getPageWidth(docIndex, pIndex),
|
|
29155
|
+
"page-height": _vm.getPageHeight(docIndex, pIndex),
|
|
29156
|
+
"on-update": payload => _vm.updateObject(docIndex, object.id, payload),
|
|
29157
|
+
"on-delete": () => _vm.deleteObject(docIndex, object.id),
|
|
29158
|
+
"on-drag-start": (mouseX, mouseY, pointerOffset, dragShift) => _vm.startDraggingElement(docIndex, pIndex, object, mouseX, mouseY, pointerOffset, dragShift),
|
|
29159
|
+
"on-drag-move": _vm.updateDraggingPosition,
|
|
29160
|
+
"on-drag-end": _vm.stopDraggingElement,
|
|
29161
|
+
"is-being-dragged-globally": _vm.isDraggingElement && _vm.draggingObject && _vm.draggingObject.id === object.id,
|
|
29162
|
+
"dragging-client-pos": _vm.draggingClientPosition,
|
|
29163
|
+
"current-doc-index": docIndex,
|
|
29164
|
+
"current-page-index": pIndex,
|
|
29165
|
+
"global-drag-doc-index": _vm.draggingDocIndex,
|
|
29166
|
+
"global-drag-page-index": _vm.draggingPageIndex,
|
|
29167
|
+
"show-selection-ui": _vm.showSelectionHandles && !_vm.hideSelectionUI && object.resizable !== false,
|
|
29168
|
+
"show-default-actions": _vm.showElementActions && !_vm.hideSelectionUI
|
|
29169
|
+
},
|
|
29170
|
+
scopedSlots: _vm._u([{
|
|
29171
|
+
key: "default",
|
|
29172
|
+
fn: function (slotProps) {
|
|
29173
|
+
return [_vm._t(slotProps.object.type ? `element-${slotProps.object.type}` : 'custom', function () {
|
|
29174
|
+
return [_vm._t("custom", null, {
|
|
29175
|
+
"object": slotProps.object,
|
|
29176
|
+
"onDelete": slotProps.onDelete,
|
|
29177
|
+
"onResize": slotProps.onResize
|
|
29178
|
+
})];
|
|
29179
|
+
}, {
|
|
29180
|
+
"object": slotProps.object,
|
|
29181
|
+
"onDelete": slotProps.onDelete,
|
|
29182
|
+
"onResize": slotProps.onResize
|
|
29183
|
+
})];
|
|
29184
|
+
}
|
|
29185
|
+
}, {
|
|
29186
|
+
key: "actions",
|
|
29187
|
+
fn: function (slotProps) {
|
|
29188
|
+
return [_vm._t("actions", null, {
|
|
29189
|
+
"object": slotProps.object,
|
|
29190
|
+
"onDelete": slotProps.onDelete
|
|
29191
|
+
})];
|
|
29192
|
+
}
|
|
29193
|
+
}], null, true)
|
|
29194
|
+
});
|
|
29195
|
+
})], 2)], 1), _vm.showPageFooter ? _c('div', {
|
|
29196
|
+
staticClass: "page-footer"
|
|
29197
|
+
}, [_c('span', [_vm._v(_vm._s(pdfDoc.name))]), _c('span', [_vm._v(_vm._s(_vm.formatPageNumber(pIndex + 1, pdfDoc.numPages)))])]) : _vm._e()])]);
|
|
29198
|
+
}), 0);
|
|
29199
|
+
}), 0) : _vm._e(), _vm.isDraggingElement && _vm.draggingObject ? _c('div', {
|
|
29200
|
+
staticClass: "drag-portal",
|
|
29201
|
+
style: {
|
|
29202
|
+
position: 'fixed',
|
|
29203
|
+
left: `${_vm.draggingClientPosition.x}px`,
|
|
29204
|
+
top: `${_vm.draggingClientPosition.y}px`,
|
|
29205
|
+
width: `${_vm.draggingObject.width * _vm.draggingScale}px`,
|
|
29206
|
+
height: `${_vm.draggingObject.height * _vm.draggingScale}px`,
|
|
29207
|
+
pointerEvents: 'none'
|
|
29615
29208
|
}
|
|
29616
|
-
|
|
29617
|
-
|
|
29618
|
-
|
|
29619
|
-
|
|
29620
|
-
|
|
29621
|
-
|
|
29622
|
-
|
|
29623
|
-
|
|
29624
|
-
|
|
29625
|
-
|
|
29626
|
-
|
|
29627
|
-
|
|
29628
|
-
|
|
29629
|
-
|
|
29630
|
-
|
|
29631
|
-
|
|
29632
|
-
|
|
29633
|
-
|
|
29634
|
-
|
|
29635
|
-
|
|
29636
|
-
|
|
29637
|
-
|
|
29638
|
-
|
|
29639
|
-
|
|
29209
|
+
}, [_vm._t(_vm.draggingObject.type ? `element-${_vm.draggingObject.type}` : 'custom', function () {
|
|
29210
|
+
return [_vm._t("custom", null, {
|
|
29211
|
+
"object": _vm.draggingObject,
|
|
29212
|
+
"isSelected": false
|
|
29213
|
+
})];
|
|
29214
|
+
}, {
|
|
29215
|
+
"object": _vm.draggingObject,
|
|
29216
|
+
"isSelected": false
|
|
29217
|
+
})], 2) : _vm._e()]);
|
|
29218
|
+
};
|
|
29219
|
+
var staticRenderFns = [];
|
|
29220
|
+
|
|
29221
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
|
|
29222
|
+
var es_array_push = __webpack_require__(4114);
|
|
29223
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.constructor.js
|
|
29224
|
+
var es_iterator_constructor = __webpack_require__(8111);
|
|
29225
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.filter.js
|
|
29226
|
+
var es_iterator_filter = __webpack_require__(2489);
|
|
29227
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.find.js
|
|
29228
|
+
var es_iterator_find = __webpack_require__(116);
|
|
29229
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.for-each.js
|
|
29230
|
+
var es_iterator_for_each = __webpack_require__(7588);
|
|
29231
|
+
// EXTERNAL MODULE: ./node_modules/core-js/modules/es.iterator.map.js
|
|
29232
|
+
var es_iterator_map = __webpack_require__(1701);
|
|
29233
|
+
;// ./node_modules/debounce/index.js
|
|
29234
|
+
function debounce(function_, wait = 100, options = {}) {
|
|
29235
|
+
if (typeof function_ !== 'function') {
|
|
29236
|
+
throw new TypeError(`Expected the first parameter to be a function, got \`${typeof function_}\`.`);
|
|
29237
|
+
}
|
|
29238
|
+
|
|
29239
|
+
if (wait < 0) {
|
|
29240
|
+
throw new RangeError('`wait` must not be negative.');
|
|
29241
|
+
}
|
|
29242
|
+
|
|
29243
|
+
if (typeof options === 'boolean') {
|
|
29244
|
+
throw new TypeError('The `options` parameter must be an object, not a boolean. Use `{immediate: true}` instead.');
|
|
29245
|
+
}
|
|
29246
|
+
|
|
29247
|
+
const {immediate} = options;
|
|
29248
|
+
|
|
29249
|
+
let storedContext;
|
|
29250
|
+
let storedArguments;
|
|
29251
|
+
let timeoutId;
|
|
29252
|
+
let timestamp;
|
|
29253
|
+
let result;
|
|
29254
|
+
|
|
29255
|
+
function run() {
|
|
29256
|
+
const callContext = storedContext;
|
|
29257
|
+
const callArguments = storedArguments;
|
|
29258
|
+
storedContext = undefined;
|
|
29259
|
+
storedArguments = undefined;
|
|
29260
|
+
result = function_.apply(callContext, callArguments);
|
|
29261
|
+
return result;
|
|
29262
|
+
}
|
|
29263
|
+
|
|
29264
|
+
function later() {
|
|
29265
|
+
const last = Date.now() - timestamp;
|
|
29266
|
+
|
|
29267
|
+
if (last < wait && last >= 0) {
|
|
29268
|
+
timeoutId = setTimeout(later, wait - last);
|
|
29269
|
+
} else {
|
|
29270
|
+
timeoutId = undefined;
|
|
29271
|
+
|
|
29272
|
+
if (!immediate) {
|
|
29273
|
+
result = run();
|
|
29274
|
+
}
|
|
29275
|
+
}
|
|
29276
|
+
}
|
|
29277
|
+
|
|
29278
|
+
const debounced = function (...arguments_) {
|
|
29279
|
+
if (
|
|
29280
|
+
storedContext
|
|
29281
|
+
&& this !== storedContext
|
|
29282
|
+
&& Object.getPrototypeOf(this) === Object.getPrototypeOf(storedContext)
|
|
29283
|
+
) {
|
|
29284
|
+
throw new Error('Debounced method called with different contexts of the same prototype.');
|
|
29285
|
+
}
|
|
29286
|
+
|
|
29287
|
+
storedContext = this; // eslint-disable-line unicorn/no-this-assignment
|
|
29288
|
+
storedArguments = arguments_;
|
|
29289
|
+
timestamp = Date.now();
|
|
29290
|
+
|
|
29291
|
+
const callNow = immediate && !timeoutId;
|
|
29292
|
+
|
|
29293
|
+
if (!timeoutId) {
|
|
29294
|
+
timeoutId = setTimeout(later, wait);
|
|
29295
|
+
}
|
|
29296
|
+
|
|
29297
|
+
if (callNow) {
|
|
29298
|
+
result = run();
|
|
29299
|
+
return result;
|
|
29300
|
+
}
|
|
29301
|
+
|
|
29302
|
+
return undefined;
|
|
29303
|
+
};
|
|
29304
|
+
|
|
29305
|
+
Object.defineProperty(debounced, 'isPending', {
|
|
29306
|
+
get() {
|
|
29307
|
+
return timeoutId !== undefined;
|
|
29308
|
+
},
|
|
29309
|
+
});
|
|
29310
|
+
|
|
29311
|
+
debounced.clear = () => {
|
|
29312
|
+
if (!timeoutId) {
|
|
29313
|
+
return;
|
|
29314
|
+
}
|
|
29315
|
+
|
|
29316
|
+
clearTimeout(timeoutId);
|
|
29317
|
+
timeoutId = undefined;
|
|
29318
|
+
storedContext = undefined;
|
|
29319
|
+
storedArguments = undefined;
|
|
29320
|
+
};
|
|
29321
|
+
|
|
29322
|
+
debounced.flush = () => {
|
|
29323
|
+
if (!timeoutId) {
|
|
29324
|
+
return;
|
|
29325
|
+
}
|
|
29326
|
+
|
|
29327
|
+
debounced.trigger();
|
|
29328
|
+
};
|
|
29329
|
+
|
|
29330
|
+
debounced.trigger = () => {
|
|
29331
|
+
result = run();
|
|
29332
|
+
|
|
29333
|
+
debounced.clear();
|
|
29334
|
+
};
|
|
29335
|
+
|
|
29336
|
+
return debounced;
|
|
29337
|
+
}
|
|
29338
|
+
|
|
29339
|
+
;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFPage.vue?vue&type=template&id=2c9e224a&scoped=true
|
|
29340
|
+
var PDFPagevue_type_template_id_2c9e224a_scoped_true_render = function render() {
|
|
29341
|
+
var _vm = this,
|
|
29342
|
+
_c = _vm._self._c;
|
|
29343
|
+
return _c('canvas', {
|
|
29344
|
+
ref: "canvas"
|
|
29345
|
+
});
|
|
29346
|
+
};
|
|
29347
|
+
var PDFPagevue_type_template_id_2c9e224a_scoped_true_staticRenderFns = [];
|
|
29348
|
+
|
|
29349
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFPage.vue?vue&type=script&lang=js
|
|
29350
|
+
/* harmony default export */ const PDFPagevue_type_script_lang_js = ({
|
|
29351
|
+
name: 'PDFPage',
|
|
29352
|
+
props: {
|
|
29353
|
+
page: {
|
|
29354
|
+
type: Promise,
|
|
29355
|
+
required: true
|
|
29356
|
+
},
|
|
29357
|
+
scale: {
|
|
29358
|
+
type: Number,
|
|
29359
|
+
default: 1
|
|
29640
29360
|
}
|
|
29641
|
-
|
|
29642
|
-
|
|
29643
|
-
|
|
29644
|
-
|
|
29645
|
-
|
|
29361
|
+
},
|
|
29362
|
+
data() {
|
|
29363
|
+
return {
|
|
29364
|
+
dynamicScale: this.scale,
|
|
29365
|
+
isRendering: false,
|
|
29366
|
+
boundMeasure: null
|
|
29367
|
+
};
|
|
29368
|
+
},
|
|
29369
|
+
watch: {
|
|
29370
|
+
scale(newScale) {
|
|
29371
|
+
this.dynamicScale = newScale;
|
|
29372
|
+
this.render();
|
|
29646
29373
|
}
|
|
29647
|
-
}
|
|
29648
|
-
|
|
29649
|
-
|
|
29650
|
-
|
|
29374
|
+
},
|
|
29375
|
+
mounted() {
|
|
29376
|
+
this.boundMeasure = this.measure.bind(this);
|
|
29377
|
+
window.addEventListener('resize', this.boundMeasure);
|
|
29378
|
+
this.render();
|
|
29379
|
+
},
|
|
29380
|
+
beforeUnmount() {
|
|
29381
|
+
if (this.boundMeasure) {
|
|
29382
|
+
window.removeEventListener('resize', this.boundMeasure);
|
|
29651
29383
|
}
|
|
29652
|
-
|
|
29653
|
-
|
|
29654
|
-
|
|
29655
|
-
|
|
29656
|
-
|
|
29657
|
-
|
|
29658
|
-
|
|
29659
|
-
|
|
29660
|
-
|
|
29661
|
-
|
|
29384
|
+
},
|
|
29385
|
+
methods: {
|
|
29386
|
+
getCanvasMeasurement() {
|
|
29387
|
+
return {
|
|
29388
|
+
canvasWidth: this.$refs.canvas.width,
|
|
29389
|
+
canvasHeight: this.$refs.canvas.height
|
|
29390
|
+
};
|
|
29391
|
+
},
|
|
29392
|
+
measure() {
|
|
29393
|
+
this.$emit('onMeasure', {
|
|
29394
|
+
scale: this.dynamicScale
|
|
29395
|
+
});
|
|
29396
|
+
},
|
|
29397
|
+
async render() {
|
|
29398
|
+
if (this.isRendering) return;
|
|
29399
|
+
this.isRendering = true;
|
|
29400
|
+
try {
|
|
29401
|
+
const _page = await this.page;
|
|
29402
|
+
const canvas = this.$refs.canvas;
|
|
29403
|
+
const context = canvas.getContext('2d');
|
|
29404
|
+
const viewport = _page.getViewport({
|
|
29405
|
+
scale: this.dynamicScale
|
|
29406
|
+
});
|
|
29407
|
+
canvas.width = viewport.width;
|
|
29408
|
+
canvas.height = viewport.height;
|
|
29409
|
+
await _page.render({
|
|
29410
|
+
canvasContext: context,
|
|
29411
|
+
viewport
|
|
29412
|
+
}).promise;
|
|
29413
|
+
this.measure();
|
|
29414
|
+
} finally {
|
|
29415
|
+
this.isRendering = false;
|
|
29416
|
+
}
|
|
29662
29417
|
}
|
|
29663
|
-
layer.changeParent(editor);
|
|
29664
|
-
return true;
|
|
29665
29418
|
}
|
|
29666
|
-
|
|
29667
|
-
|
|
29668
|
-
|
|
29669
|
-
|
|
29670
|
-
|
|
29671
|
-
|
|
29419
|
+
});
|
|
29420
|
+
;// ./src/components/PDFPage.vue?vue&type=script&lang=js
|
|
29421
|
+
/* harmony default export */ const components_PDFPagevue_type_script_lang_js = (PDFPagevue_type_script_lang_js);
|
|
29422
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFPage.vue?vue&type=style&index=0&id=2c9e224a&prod&scoped=true&lang=css
|
|
29423
|
+
// extracted by mini-css-extract-plugin
|
|
29424
|
+
|
|
29425
|
+
;// ./src/components/PDFPage.vue?vue&type=style&index=0&id=2c9e224a&prod&scoped=true&lang=css
|
|
29426
|
+
|
|
29427
|
+
;// ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
|
|
29428
|
+
/* globals __VUE_SSR_CONTEXT__ */
|
|
29429
|
+
|
|
29430
|
+
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
|
|
29431
|
+
// This module is a runtime utility for cleaner component module output and will
|
|
29432
|
+
// be included in the final webpack user bundle.
|
|
29433
|
+
|
|
29434
|
+
function normalizeComponent(
|
|
29435
|
+
scriptExports,
|
|
29436
|
+
render,
|
|
29437
|
+
staticRenderFns,
|
|
29438
|
+
functionalTemplate,
|
|
29439
|
+
injectStyles,
|
|
29440
|
+
scopeId,
|
|
29441
|
+
moduleIdentifier /* server only */,
|
|
29442
|
+
shadowMode /* vue-cli only */
|
|
29443
|
+
) {
|
|
29444
|
+
// Vue.extend constructor export interop
|
|
29445
|
+
var options =
|
|
29446
|
+
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
|
|
29447
|
+
|
|
29448
|
+
// render functions
|
|
29449
|
+
if (render) {
|
|
29450
|
+
options.render = render
|
|
29451
|
+
options.staticRenderFns = staticRenderFns
|
|
29452
|
+
options._compiled = true
|
|
29672
29453
|
}
|
|
29673
|
-
|
|
29674
|
-
|
|
29675
|
-
|
|
29676
|
-
|
|
29677
|
-
this.#currentEditorType.onScaleChangingWhenDrawing(this);
|
|
29454
|
+
|
|
29455
|
+
// functional template
|
|
29456
|
+
if (functionalTemplate) {
|
|
29457
|
+
options.functional = true
|
|
29678
29458
|
}
|
|
29679
|
-
|
|
29680
|
-
|
|
29681
|
-
|
|
29682
|
-
|
|
29683
|
-
this.#uiManager.setActiveEditor(null);
|
|
29684
|
-
}
|
|
29685
|
-
if (this.#editorFocusTimeoutId) {
|
|
29686
|
-
clearTimeout(this.#editorFocusTimeoutId);
|
|
29687
|
-
this.#editorFocusTimeoutId = null;
|
|
29688
|
-
}
|
|
29689
|
-
for (const editor of this.#editors.values()) {
|
|
29690
|
-
this.#accessibilityManager?.removePointerInTextLayer(editor.contentDiv);
|
|
29691
|
-
editor.setParent(null);
|
|
29692
|
-
editor.isAttachedToDOM = false;
|
|
29693
|
-
editor.div.remove();
|
|
29694
|
-
}
|
|
29695
|
-
this.div = null;
|
|
29696
|
-
this.#editors.clear();
|
|
29697
|
-
this.#uiManager.removeLayer(this);
|
|
29459
|
+
|
|
29460
|
+
// scopedId
|
|
29461
|
+
if (scopeId) {
|
|
29462
|
+
options._scopeId = 'data-v-' + scopeId
|
|
29698
29463
|
}
|
|
29699
|
-
|
|
29700
|
-
|
|
29701
|
-
|
|
29702
|
-
|
|
29464
|
+
|
|
29465
|
+
var hook
|
|
29466
|
+
if (moduleIdentifier) {
|
|
29467
|
+
// server build
|
|
29468
|
+
hook = function (context) {
|
|
29469
|
+
// 2.3 injection
|
|
29470
|
+
context =
|
|
29471
|
+
context || // cached call
|
|
29472
|
+
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
|
29473
|
+
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
|
|
29474
|
+
// 2.2 with runInNewContext: true
|
|
29475
|
+
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
|
29476
|
+
context = __VUE_SSR_CONTEXT__
|
|
29477
|
+
}
|
|
29478
|
+
// inject component styles
|
|
29479
|
+
if (injectStyles) {
|
|
29480
|
+
injectStyles.call(this, context)
|
|
29481
|
+
}
|
|
29482
|
+
// register component module identifier for async chunk inferrence
|
|
29483
|
+
if (context && context._registeredComponents) {
|
|
29484
|
+
context._registeredComponents.add(moduleIdentifier)
|
|
29703
29485
|
}
|
|
29704
29486
|
}
|
|
29487
|
+
// used by ssr in case component is cached and beforeCreate
|
|
29488
|
+
// never gets called
|
|
29489
|
+
options._ssrRegister = hook
|
|
29490
|
+
} else if (injectStyles) {
|
|
29491
|
+
hook = shadowMode
|
|
29492
|
+
? function () {
|
|
29493
|
+
injectStyles.call(
|
|
29494
|
+
this,
|
|
29495
|
+
(options.functional ? this.parent : this).$root.$options.shadowRoot
|
|
29496
|
+
)
|
|
29497
|
+
}
|
|
29498
|
+
: injectStyles
|
|
29705
29499
|
}
|
|
29706
|
-
|
|
29707
|
-
|
|
29708
|
-
|
|
29709
|
-
|
|
29710
|
-
|
|
29711
|
-
|
|
29712
|
-
|
|
29713
|
-
|
|
29714
|
-
|
|
29715
|
-
|
|
29716
|
-
|
|
29717
|
-
update({
|
|
29718
|
-
viewport
|
|
29719
|
-
}) {
|
|
29720
|
-
this.#uiManager.commitOrRemove();
|
|
29721
|
-
this.#cleanup();
|
|
29722
|
-
const oldRotation = this.viewport.rotation;
|
|
29723
|
-
const rotation = viewport.rotation;
|
|
29724
|
-
this.viewport = viewport;
|
|
29725
|
-
setLayerDimensions(this.div, {
|
|
29726
|
-
rotation
|
|
29727
|
-
});
|
|
29728
|
-
if (oldRotation !== rotation) {
|
|
29729
|
-
for (const editor of this.#editors.values()) {
|
|
29730
|
-
editor.rotate(rotation);
|
|
29500
|
+
|
|
29501
|
+
if (hook) {
|
|
29502
|
+
if (options.functional) {
|
|
29503
|
+
// for template-only hot-reload because in that case the render fn doesn't
|
|
29504
|
+
// go through the normalizer
|
|
29505
|
+
options._injectStyles = hook
|
|
29506
|
+
// register for functional component in vue file
|
|
29507
|
+
var originalRender = options.render
|
|
29508
|
+
options.render = function renderWithStyleInjection(h, context) {
|
|
29509
|
+
hook.call(context)
|
|
29510
|
+
return originalRender(h, context)
|
|
29731
29511
|
}
|
|
29512
|
+
} else {
|
|
29513
|
+
// inject component registration as beforeCreate hook
|
|
29514
|
+
var existing = options.beforeCreate
|
|
29515
|
+
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
|
|
29732
29516
|
}
|
|
29733
29517
|
}
|
|
29734
|
-
|
|
29735
|
-
|
|
29736
|
-
|
|
29737
|
-
|
|
29738
|
-
} = this.viewport.rawDims;
|
|
29739
|
-
return [pageWidth, pageHeight];
|
|
29740
|
-
}
|
|
29741
|
-
get scale() {
|
|
29742
|
-
return this.#uiManager.viewParameters.realScale;
|
|
29518
|
+
|
|
29519
|
+
return {
|
|
29520
|
+
exports: scriptExports,
|
|
29521
|
+
options: options
|
|
29743
29522
|
}
|
|
29744
29523
|
}
|
|
29745
29524
|
|
|
29746
|
-
;// ./src/
|
|
29525
|
+
;// ./src/components/PDFPage.vue
|
|
29747
29526
|
|
|
29748
29527
|
|
|
29749
|
-
|
|
29750
|
-
|
|
29751
|
-
|
|
29752
|
-
|
|
29753
|
-
|
|
29754
|
-
|
|
29755
|
-
|
|
29756
|
-
|
|
29757
|
-
|
|
29758
|
-
|
|
29759
|
-
|
|
29760
|
-
|
|
29761
|
-
|
|
29762
|
-
|
|
29763
|
-
|
|
29764
|
-
|
|
29765
|
-
|
|
29766
|
-
|
|
29767
|
-
|
|
29768
|
-
|
|
29528
|
+
|
|
29529
|
+
;
|
|
29530
|
+
|
|
29531
|
+
|
|
29532
|
+
/* normalize component */
|
|
29533
|
+
|
|
29534
|
+
var component = normalizeComponent(
|
|
29535
|
+
components_PDFPagevue_type_script_lang_js,
|
|
29536
|
+
PDFPagevue_type_template_id_2c9e224a_scoped_true_render,
|
|
29537
|
+
PDFPagevue_type_template_id_2c9e224a_scoped_true_staticRenderFns,
|
|
29538
|
+
false,
|
|
29539
|
+
null,
|
|
29540
|
+
"2c9e224a",
|
|
29541
|
+
null
|
|
29542
|
+
|
|
29543
|
+
)
|
|
29544
|
+
|
|
29545
|
+
/* harmony default export */ const PDFPage = (component.exports);
|
|
29546
|
+
;// ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/DraggableElement.vue?vue&type=template&id=55db89ce&scoped=true
|
|
29547
|
+
var DraggableElementvue_type_template_id_55db89ce_scoped_true_render = function render() {
|
|
29548
|
+
var _vm = this,
|
|
29549
|
+
_c = _vm._self._c;
|
|
29550
|
+
return _c('div', {
|
|
29551
|
+
staticClass: "draggable-wrapper"
|
|
29552
|
+
}, [_vm.isSelected && !_vm.isBeingDraggedGlobally && _vm.showSelectionUi && _vm.showDefaultActions ? _c('div', {
|
|
29553
|
+
staticClass: "actions-toolbar",
|
|
29554
|
+
style: _vm.toolbarStyle
|
|
29555
|
+
}, [_vm._t("actions", function () {
|
|
29556
|
+
return [_c('button', {
|
|
29557
|
+
staticClass: "action-btn",
|
|
29558
|
+
attrs: {
|
|
29559
|
+
"type": "button",
|
|
29560
|
+
"title": "Delete"
|
|
29561
|
+
},
|
|
29562
|
+
on: {
|
|
29563
|
+
"click": function ($event) {
|
|
29564
|
+
$event.stopPropagation();
|
|
29565
|
+
return _vm.onDelete.apply(null, arguments);
|
|
29769
29566
|
}
|
|
29770
29567
|
}
|
|
29771
|
-
|
|
29772
|
-
|
|
29773
|
-
|
|
29774
|
-
|
|
29775
|
-
|
|
29776
|
-
|
|
29777
|
-
static #setBox(element, [x, y, width, height]) {
|
|
29778
|
-
const {
|
|
29779
|
-
style
|
|
29780
|
-
} = element;
|
|
29781
|
-
style.top = `${100 * y}%`;
|
|
29782
|
-
style.left = `${100 * x}%`;
|
|
29783
|
-
style.width = `${100 * width}%`;
|
|
29784
|
-
style.height = `${100 * height}%`;
|
|
29785
|
-
}
|
|
29786
|
-
#createSVG() {
|
|
29787
|
-
const svg = DrawLayer._svgFactory.create(1, 1, true);
|
|
29788
|
-
this.#parent.append(svg);
|
|
29789
|
-
svg.setAttribute("aria-hidden", true);
|
|
29790
|
-
return svg;
|
|
29791
|
-
}
|
|
29792
|
-
#createClipPath(defs, pathId) {
|
|
29793
|
-
const clipPath = DrawLayer._svgFactory.createElement("clipPath");
|
|
29794
|
-
defs.append(clipPath);
|
|
29795
|
-
const clipPathId = `clip_${pathId}`;
|
|
29796
|
-
clipPath.setAttribute("id", clipPathId);
|
|
29797
|
-
clipPath.setAttribute("clipPathUnits", "objectBoundingBox");
|
|
29798
|
-
const clipPathUse = DrawLayer._svgFactory.createElement("use");
|
|
29799
|
-
clipPath.append(clipPathUse);
|
|
29800
|
-
clipPathUse.setAttribute("href", `#${pathId}`);
|
|
29801
|
-
clipPathUse.classList.add("clip");
|
|
29802
|
-
return clipPathId;
|
|
29803
|
-
}
|
|
29804
|
-
#updateProperties(element, properties) {
|
|
29805
|
-
for (const [key, value] of Object.entries(properties)) {
|
|
29806
|
-
if (value === null) {
|
|
29807
|
-
element.removeAttribute(key);
|
|
29808
|
-
} else {
|
|
29809
|
-
element.setAttribute(key, value);
|
|
29568
|
+
}, [_c('svg', {
|
|
29569
|
+
attrs: {
|
|
29570
|
+
"width": "16",
|
|
29571
|
+
"height": "16",
|
|
29572
|
+
"viewBox": "0 0 16 16",
|
|
29573
|
+
"fill": "currentColor"
|
|
29810
29574
|
}
|
|
29575
|
+
}, [_c('path', {
|
|
29576
|
+
attrs: {
|
|
29577
|
+
"d": "M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.5a.5.5 0 0 0 0 1h.5v10.5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5V3.5h.5a.5.5 0 0 0 0-1H11Zm1 1v10.5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5V3.5h8Z"
|
|
29578
|
+
}
|
|
29579
|
+
})])])];
|
|
29580
|
+
}, {
|
|
29581
|
+
"object": _vm.object,
|
|
29582
|
+
"onDelete": _vm.onDelete
|
|
29583
|
+
})], 2) : _vm._e(), _c('div', {
|
|
29584
|
+
staticClass: "draggable-element",
|
|
29585
|
+
class: {
|
|
29586
|
+
selected: _vm.isSelected && _vm.showSelectionUi
|
|
29587
|
+
},
|
|
29588
|
+
style: [_vm.elementStyle, _vm.dragElementStyle],
|
|
29589
|
+
attrs: {
|
|
29590
|
+
"draggable": "false"
|
|
29591
|
+
},
|
|
29592
|
+
on: {
|
|
29593
|
+
"dragstart": function ($event) {
|
|
29594
|
+
$event.preventDefault();
|
|
29595
|
+
},
|
|
29596
|
+
"mousedown": _vm.handleElementClick,
|
|
29597
|
+
"touchstart": _vm.handleElementClick
|
|
29811
29598
|
}
|
|
29812
|
-
}
|
|
29813
|
-
|
|
29814
|
-
|
|
29815
|
-
|
|
29816
|
-
|
|
29817
|
-
|
|
29818
|
-
|
|
29819
|
-
|
|
29820
|
-
|
|
29821
|
-
|
|
29822
|
-
|
|
29823
|
-
|
|
29824
|
-
|
|
29825
|
-
|
|
29826
|
-
|
|
29827
|
-
|
|
29828
|
-
|
|
29829
|
-
|
|
29830
|
-
|
|
29831
|
-
|
|
29599
|
+
}, [_vm._t("default", null, {
|
|
29600
|
+
"object": _vm.object,
|
|
29601
|
+
"isSelected": _vm.isSelected,
|
|
29602
|
+
"onDelete": _vm.onDelete,
|
|
29603
|
+
"onResize": _vm.startResizeFromSlot
|
|
29604
|
+
}), _vm.isSelected && _vm.showSelectionUi ? _vm._l(_vm.resizeDirections, function (dir) {
|
|
29605
|
+
return _c('button', {
|
|
29606
|
+
key: dir,
|
|
29607
|
+
staticClass: "resize-handle",
|
|
29608
|
+
class: `handle-${dir}`,
|
|
29609
|
+
attrs: {
|
|
29610
|
+
"type": "button"
|
|
29611
|
+
},
|
|
29612
|
+
on: {
|
|
29613
|
+
"mousedown": function ($event) {
|
|
29614
|
+
$event.stopPropagation();
|
|
29615
|
+
$event.preventDefault();
|
|
29616
|
+
return _vm.startResize(dir, $event);
|
|
29617
|
+
},
|
|
29618
|
+
"touchstart": function ($event) {
|
|
29619
|
+
$event.stopPropagation();
|
|
29620
|
+
$event.preventDefault();
|
|
29621
|
+
return _vm.startResize(dir, $event);
|
|
29622
|
+
}
|
|
29623
|
+
}
|
|
29624
|
+
});
|
|
29625
|
+
}) : _vm._e()], 2)]);
|
|
29626
|
+
};
|
|
29627
|
+
var DraggableElementvue_type_template_id_55db89ce_scoped_true_staticRenderFns = [];
|
|
29628
|
+
|
|
29629
|
+
;// ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/DraggableElement.vue?vue&type=script&lang=js
|
|
29630
|
+
/* harmony default export */ const DraggableElementvue_type_script_lang_js = ({
|
|
29631
|
+
name: 'DraggableElement',
|
|
29632
|
+
props: {
|
|
29633
|
+
object: {
|
|
29634
|
+
type: Object,
|
|
29635
|
+
required: true
|
|
29636
|
+
},
|
|
29637
|
+
pagesScale: {
|
|
29638
|
+
type: Number,
|
|
29639
|
+
default: 1
|
|
29640
|
+
},
|
|
29641
|
+
pageWidth: {
|
|
29642
|
+
type: Number,
|
|
29643
|
+
required: true
|
|
29644
|
+
},
|
|
29645
|
+
pageHeight: {
|
|
29646
|
+
type: Number,
|
|
29647
|
+
required: true
|
|
29648
|
+
},
|
|
29649
|
+
onUpdate: {
|
|
29650
|
+
type: Function,
|
|
29651
|
+
default: () => {}
|
|
29652
|
+
},
|
|
29653
|
+
onDelete: {
|
|
29654
|
+
type: Function,
|
|
29655
|
+
default: () => {}
|
|
29656
|
+
},
|
|
29657
|
+
onDragStart: {
|
|
29658
|
+
type: Function,
|
|
29659
|
+
default: () => {}
|
|
29660
|
+
},
|
|
29661
|
+
onDragMove: {
|
|
29662
|
+
type: Function,
|
|
29663
|
+
default: () => {}
|
|
29664
|
+
},
|
|
29665
|
+
onDragEnd: {
|
|
29666
|
+
type: Function,
|
|
29667
|
+
default: () => {}
|
|
29668
|
+
},
|
|
29669
|
+
isBeingDraggedGlobally: {
|
|
29670
|
+
type: Boolean,
|
|
29671
|
+
default: false
|
|
29672
|
+
},
|
|
29673
|
+
draggingClientPos: {
|
|
29674
|
+
type: Object,
|
|
29675
|
+
default: () => ({
|
|
29676
|
+
x: 0,
|
|
29677
|
+
y: 0
|
|
29678
|
+
})
|
|
29679
|
+
},
|
|
29680
|
+
currentDocIndex: {
|
|
29681
|
+
type: Number,
|
|
29682
|
+
default: -1
|
|
29683
|
+
},
|
|
29684
|
+
currentPageIndex: {
|
|
29685
|
+
type: Number,
|
|
29686
|
+
default: -1
|
|
29687
|
+
},
|
|
29688
|
+
globalDragDocIndex: {
|
|
29689
|
+
type: Number,
|
|
29690
|
+
default: -1
|
|
29691
|
+
},
|
|
29692
|
+
globalDragPageIndex: {
|
|
29693
|
+
type: Number,
|
|
29694
|
+
default: -1
|
|
29695
|
+
},
|
|
29696
|
+
showSelectionUi: {
|
|
29697
|
+
type: Boolean,
|
|
29698
|
+
default: true
|
|
29699
|
+
},
|
|
29700
|
+
showDefaultActions: {
|
|
29701
|
+
type: Boolean,
|
|
29702
|
+
default: true
|
|
29703
|
+
}
|
|
29704
|
+
},
|
|
29705
|
+
data() {
|
|
29832
29706
|
return {
|
|
29833
|
-
|
|
29834
|
-
|
|
29707
|
+
isSelected: false,
|
|
29708
|
+
mode: 'idle',
|
|
29709
|
+
direction: '',
|
|
29710
|
+
startX: 0,
|
|
29711
|
+
startY: 0,
|
|
29712
|
+
startLeft: 0,
|
|
29713
|
+
startTop: 0,
|
|
29714
|
+
startWidth: 0,
|
|
29715
|
+
startHeight: 0,
|
|
29716
|
+
offsetX: 0,
|
|
29717
|
+
offsetY: 0,
|
|
29718
|
+
resizeOffsetX: 0,
|
|
29719
|
+
resizeOffsetY: 0,
|
|
29720
|
+
resizeOffsetW: 0,
|
|
29721
|
+
resizeOffsetH: 0,
|
|
29722
|
+
aspectRatio: 1,
|
|
29723
|
+
lastMouseX: 0,
|
|
29724
|
+
lastMouseY: 0,
|
|
29725
|
+
pointerOffsetDoc: {
|
|
29726
|
+
x: 0,
|
|
29727
|
+
y: 0
|
|
29728
|
+
},
|
|
29729
|
+
currentPageRect: null,
|
|
29730
|
+
rafId: null
|
|
29835
29731
|
};
|
|
29836
|
-
}
|
|
29837
|
-
|
|
29838
|
-
|
|
29839
|
-
|
|
29840
|
-
|
|
29841
|
-
|
|
29842
|
-
|
|
29843
|
-
|
|
29844
|
-
|
|
29845
|
-
|
|
29846
|
-
|
|
29847
|
-
|
|
29848
|
-
|
|
29849
|
-
|
|
29850
|
-
|
|
29851
|
-
|
|
29852
|
-
|
|
29853
|
-
|
|
29854
|
-
|
|
29855
|
-
|
|
29856
|
-
|
|
29857
|
-
|
|
29858
|
-
|
|
29859
|
-
|
|
29860
|
-
|
|
29861
|
-
|
|
29862
|
-
|
|
29863
|
-
|
|
29864
|
-
|
|
29865
|
-
|
|
29866
|
-
|
|
29867
|
-
|
|
29868
|
-
|
|
29869
|
-
|
|
29870
|
-
|
|
29871
|
-
|
|
29872
|
-
|
|
29873
|
-
const use2 = use1.cloneNode();
|
|
29874
|
-
root.append(use2);
|
|
29875
|
-
use1.classList.add("mainOutline");
|
|
29876
|
-
use2.classList.add("secondaryOutline");
|
|
29877
|
-
this.updateProperties(root, properties);
|
|
29878
|
-
this.#mapping.set(id, root);
|
|
29879
|
-
return id;
|
|
29880
|
-
}
|
|
29881
|
-
finalizeDraw(id, properties) {
|
|
29882
|
-
this.#toUpdate.delete(id);
|
|
29883
|
-
this.updateProperties(id, properties);
|
|
29884
|
-
}
|
|
29885
|
-
updateProperties(elementOrId, properties) {
|
|
29886
|
-
if (!properties) {
|
|
29887
|
-
return;
|
|
29888
|
-
}
|
|
29889
|
-
const {
|
|
29890
|
-
root,
|
|
29891
|
-
bbox,
|
|
29892
|
-
rootClass,
|
|
29893
|
-
path
|
|
29894
|
-
} = properties;
|
|
29895
|
-
const element = typeof elementOrId === "number" ? this.#mapping.get(elementOrId) : elementOrId;
|
|
29896
|
-
if (!element) {
|
|
29897
|
-
return;
|
|
29898
|
-
}
|
|
29899
|
-
if (root) {
|
|
29900
|
-
this.#updateProperties(element, root);
|
|
29901
|
-
}
|
|
29902
|
-
if (bbox) {
|
|
29903
|
-
DrawLayer.#setBox(element, bbox);
|
|
29732
|
+
},
|
|
29733
|
+
computed: {
|
|
29734
|
+
resizeDirections() {
|
|
29735
|
+
return ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
|
|
29736
|
+
},
|
|
29737
|
+
elementStyle() {
|
|
29738
|
+
const scale = this.pagesScale || 1;
|
|
29739
|
+
const currentX = this.object.x + this.offsetX + this.resizeOffsetX;
|
|
29740
|
+
const currentY = this.object.y + this.offsetY + this.resizeOffsetY;
|
|
29741
|
+
const currentWidth = this.object.width + this.resizeOffsetW;
|
|
29742
|
+
const currentHeight = this.object.height + this.resizeOffsetH;
|
|
29743
|
+
return {
|
|
29744
|
+
left: `${currentX * scale}px`,
|
|
29745
|
+
top: `${currentY * scale}px`,
|
|
29746
|
+
width: `${currentWidth * scale}px`,
|
|
29747
|
+
height: `${currentHeight * scale}px`
|
|
29748
|
+
};
|
|
29749
|
+
},
|
|
29750
|
+
toolbarStyle() {
|
|
29751
|
+
const scale = this.pagesScale || 1;
|
|
29752
|
+
const x = this.object.x + this.offsetX + this.resizeOffsetX;
|
|
29753
|
+
const y = this.object.y + this.offsetY + this.resizeOffsetY;
|
|
29754
|
+
const width = this.object.width + this.resizeOffsetW;
|
|
29755
|
+
return {
|
|
29756
|
+
left: `${(x + width / 2) * scale}px`,
|
|
29757
|
+
top: `${(y - 48) * scale}px`,
|
|
29758
|
+
transform: 'translateX(-50%)'
|
|
29759
|
+
};
|
|
29760
|
+
},
|
|
29761
|
+
dragElementStyle() {
|
|
29762
|
+
if (!this.isBeingDraggedGlobally || !this.draggingClientPos) {
|
|
29763
|
+
return {};
|
|
29764
|
+
}
|
|
29765
|
+
return {
|
|
29766
|
+
opacity: 0,
|
|
29767
|
+
pointerEvents: 'none'
|
|
29768
|
+
};
|
|
29904
29769
|
}
|
|
29905
|
-
|
|
29906
|
-
|
|
29907
|
-
|
|
29908
|
-
|
|
29909
|
-
|
|
29910
|
-
|
|
29770
|
+
},
|
|
29771
|
+
mounted() {
|
|
29772
|
+
this.handleClickOutside = this.handleClickOutside.bind(this);
|
|
29773
|
+
this.boundHandleMove = this.handleMove.bind(this);
|
|
29774
|
+
this.boundStopInteraction = this.stopInteraction.bind(this);
|
|
29775
|
+
document.addEventListener('mousedown', this.handleClickOutside);
|
|
29776
|
+
document.addEventListener('touchstart', this.handleClickOutside);
|
|
29777
|
+
},
|
|
29778
|
+
beforeUnmount() {
|
|
29779
|
+
document.removeEventListener('mousedown', this.handleClickOutside);
|
|
29780
|
+
document.removeEventListener('touchstart', this.handleClickOutside);
|
|
29781
|
+
window.removeEventListener('mousemove', this.boundHandleMove);
|
|
29782
|
+
window.removeEventListener('mouseup', this.boundStopInteraction);
|
|
29783
|
+
window.removeEventListener('touchmove', this.boundHandleMove);
|
|
29784
|
+
window.removeEventListener('touchend', this.boundStopInteraction);
|
|
29785
|
+
if (this.rafId) cancelAnimationFrame(this.rafId);
|
|
29786
|
+
},
|
|
29787
|
+
methods: {
|
|
29788
|
+
handleElementClick(event) {
|
|
29789
|
+
if (event.target.closest('.delete-handle') || event.target.closest('[data-stop-drag]') || event.target.closest('.actions-toolbar')) {
|
|
29790
|
+
return;
|
|
29791
|
+
}
|
|
29792
|
+
event.preventDefault();
|
|
29793
|
+
this.isSelected = true;
|
|
29794
|
+
this.startDrag(event);
|
|
29795
|
+
},
|
|
29796
|
+
handleClickOutside(event) {
|
|
29797
|
+
if (this.$el && !this.$el.contains(event.target)) {
|
|
29798
|
+
this.isSelected = false;
|
|
29799
|
+
}
|
|
29800
|
+
},
|
|
29801
|
+
startResizeFromSlot(direction, event) {
|
|
29802
|
+
if (!direction || !event) return;
|
|
29803
|
+
this.startResize(direction, event);
|
|
29804
|
+
},
|
|
29805
|
+
startDrag(event) {
|
|
29806
|
+
if (event.target.classList.contains('delete')) return;
|
|
29807
|
+
if (event.target.classList.contains('resize-handle')) return;
|
|
29808
|
+
this.mode = 'drag';
|
|
29809
|
+
this.startX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
|
|
29810
|
+
this.startY = event.type.includes('touch') ? event.touches[0].clientY : event.clientY;
|
|
29811
|
+
this.startLeft = this.object.x;
|
|
29812
|
+
this.startTop = this.object.y;
|
|
29813
|
+
this.offsetX = 0;
|
|
29814
|
+
this.offsetY = 0;
|
|
29815
|
+
this.resetResizeOffsets();
|
|
29816
|
+
const elementRect = this.$el.querySelector('.draggable-element').getBoundingClientRect();
|
|
29817
|
+
this.pointerOffsetDoc.x = this.startX - elementRect.left;
|
|
29818
|
+
this.pointerOffsetDoc.y = this.startY - elementRect.top;
|
|
29819
|
+
const pageRect = this.capturePageRect();
|
|
29820
|
+
this.currentPageRect = pageRect;
|
|
29821
|
+
let dragElementShift = {
|
|
29822
|
+
x: 0,
|
|
29823
|
+
y: 0
|
|
29824
|
+
};
|
|
29825
|
+
if (pageRect) {
|
|
29826
|
+
const expectedLeft = pageRect.left + this.object.x * this.pagesScale;
|
|
29827
|
+
const expectedTop = pageRect.top + this.object.y * this.pagesScale;
|
|
29828
|
+
dragElementShift = {
|
|
29829
|
+
x: elementRect.left - expectedLeft,
|
|
29830
|
+
y: elementRect.top - expectedTop
|
|
29831
|
+
};
|
|
29832
|
+
}
|
|
29833
|
+
this.onDragStart(this.startX, this.startY, {
|
|
29834
|
+
...this.pointerOffsetDoc
|
|
29835
|
+
}, dragElementShift);
|
|
29836
|
+
window.addEventListener('mousemove', this.boundHandleMove);
|
|
29837
|
+
window.addEventListener('mouseup', this.boundStopInteraction);
|
|
29838
|
+
window.addEventListener('touchmove', this.boundHandleMove);
|
|
29839
|
+
window.addEventListener('touchend', this.boundStopInteraction);
|
|
29840
|
+
},
|
|
29841
|
+
startResize(direction, event) {
|
|
29842
|
+
this.mode = 'resize';
|
|
29843
|
+
this.direction = direction;
|
|
29844
|
+
this.startX = event.type.includes('touch') ? event.touches[0].clientX : event.clientX;
|
|
29845
|
+
this.startY = event.type.includes('touch') ? event.touches[0].clientY : event.clientY;
|
|
29846
|
+
this.startLeft = this.object.x;
|
|
29847
|
+
this.startTop = this.object.y;
|
|
29848
|
+
this.startWidth = this.object.width;
|
|
29849
|
+
this.startHeight = this.object.height;
|
|
29850
|
+
this.aspectRatio = this.startWidth / this.startHeight;
|
|
29851
|
+
this.offsetX = 0;
|
|
29852
|
+
this.offsetY = 0;
|
|
29853
|
+
this.resetResizeOffsets();
|
|
29854
|
+
window.addEventListener('mousemove', this.boundHandleMove);
|
|
29855
|
+
window.addEventListener('mouseup', this.boundStopInteraction);
|
|
29856
|
+
window.addEventListener('touchmove', this.boundHandleMove);
|
|
29857
|
+
window.addEventListener('touchend', this.boundStopInteraction);
|
|
29858
|
+
},
|
|
29859
|
+
handleMove(event) {
|
|
29860
|
+
if (this.mode === 'idle') return;
|
|
29861
|
+
event.preventDefault();
|
|
29862
|
+
if (this.rafId) return;
|
|
29863
|
+
this.rafId = requestAnimationFrame(() => {
|
|
29864
|
+
const currentX = event.type.includes('touch') ? event.touches[0]?.clientX : event.clientX;
|
|
29865
|
+
const currentY = event.type.includes('touch') ? event.touches[0]?.clientY : event.clientY;
|
|
29866
|
+
if (currentX === undefined || currentY === undefined) return;
|
|
29867
|
+
this.lastMouseX = currentX;
|
|
29868
|
+
this.lastMouseY = currentY;
|
|
29869
|
+
const deltaX = (currentX - this.startX) / this.pagesScale;
|
|
29870
|
+
const deltaY = (currentY - this.startY) / this.pagesScale;
|
|
29871
|
+
if (this.mode === 'drag') {
|
|
29872
|
+
const pageRect = this.currentPageRect;
|
|
29873
|
+
if (pageRect) {
|
|
29874
|
+
const newElementLeft = currentX - this.pointerOffsetDoc.x;
|
|
29875
|
+
const newElementTop = currentY - this.pointerOffsetDoc.y;
|
|
29876
|
+
const newX = (newElementLeft - pageRect.left) / this.pagesScale;
|
|
29877
|
+
const newY = (newElementTop - pageRect.top) / this.pagesScale;
|
|
29878
|
+
this.offsetX = newX - this.object.x;
|
|
29879
|
+
this.offsetY = newY - this.object.y;
|
|
29880
|
+
} else {
|
|
29881
|
+
this.offsetX = deltaX;
|
|
29882
|
+
this.offsetY = deltaY;
|
|
29883
|
+
}
|
|
29884
|
+
this.onDragMove(currentX, currentY);
|
|
29885
|
+
if (this.isBeingDraggedGlobally) {
|
|
29886
|
+
this.onUpdate({
|
|
29887
|
+
_globalDrag: true,
|
|
29888
|
+
_mouseX: currentX,
|
|
29889
|
+
_mouseY: currentY
|
|
29890
|
+
});
|
|
29891
|
+
}
|
|
29892
|
+
this.rafId = null;
|
|
29893
|
+
return;
|
|
29894
|
+
}
|
|
29895
|
+
const minSize = 16;
|
|
29896
|
+
let newWidth = this.startWidth;
|
|
29897
|
+
let newHeight = this.startHeight;
|
|
29898
|
+
let newLeft = this.startLeft;
|
|
29899
|
+
let newTop = this.startTop;
|
|
29900
|
+
const widthChange = this.direction.includes('right') ? deltaX : this.direction.includes('left') ? -deltaX : 0;
|
|
29901
|
+
newWidth = this.startWidth + widthChange;
|
|
29902
|
+
if (newWidth < minSize) newWidth = minSize;
|
|
29903
|
+
newHeight = newWidth / this.aspectRatio;
|
|
29904
|
+
if (this.direction.includes('left')) {
|
|
29905
|
+
newLeft = this.startLeft + (this.startWidth - newWidth);
|
|
29906
|
+
if (newLeft < 0) {
|
|
29907
|
+
const overflow = -newLeft;
|
|
29908
|
+
newLeft = 0;
|
|
29909
|
+
newWidth = newWidth - overflow;
|
|
29910
|
+
newHeight = newWidth / this.aspectRatio;
|
|
29911
|
+
}
|
|
29912
|
+
}
|
|
29913
|
+
if (this.direction.includes('top')) {
|
|
29914
|
+
newTop = this.startTop + (this.startHeight - newHeight);
|
|
29915
|
+
if (newTop < 0) {
|
|
29916
|
+
const overflow = -newTop;
|
|
29917
|
+
newTop = 0;
|
|
29918
|
+
newHeight = newHeight - overflow;
|
|
29919
|
+
newWidth = newHeight * this.aspectRatio;
|
|
29920
|
+
if (this.direction.includes('left')) {
|
|
29921
|
+
newLeft = this.startLeft + (this.startWidth - newWidth);
|
|
29922
|
+
}
|
|
29923
|
+
}
|
|
29924
|
+
}
|
|
29925
|
+
if (newLeft + newWidth > this.pageWidth) {
|
|
29926
|
+
const excess = newLeft + newWidth - this.pageWidth;
|
|
29927
|
+
newWidth -= excess;
|
|
29928
|
+
newHeight = newWidth / this.aspectRatio;
|
|
29929
|
+
}
|
|
29930
|
+
if (newTop + newHeight > this.pageHeight) {
|
|
29931
|
+
const excess = newTop + newHeight - this.pageHeight;
|
|
29932
|
+
newHeight -= excess;
|
|
29933
|
+
newWidth = newHeight * this.aspectRatio;
|
|
29934
|
+
if (this.direction.includes('left')) {
|
|
29935
|
+
newLeft = this.startLeft + (this.startWidth - newWidth);
|
|
29936
|
+
}
|
|
29937
|
+
}
|
|
29938
|
+
this.resizeOffsetX = newLeft - this.object.x;
|
|
29939
|
+
this.resizeOffsetY = newTop - this.object.y;
|
|
29940
|
+
this.resizeOffsetW = newWidth - this.object.width;
|
|
29941
|
+
this.resizeOffsetH = newHeight - this.object.height;
|
|
29942
|
+
this.rafId = null;
|
|
29943
|
+
});
|
|
29944
|
+
},
|
|
29945
|
+
stopInteraction() {
|
|
29946
|
+
if (this.mode === 'idle') return;
|
|
29947
|
+
if (this.mode === 'drag' && (this.offsetX !== 0 || this.offsetY !== 0)) {
|
|
29948
|
+
if (this.isBeingDraggedGlobally) {
|
|
29949
|
+
this.onUpdate({
|
|
29950
|
+
_globalDrag: true,
|
|
29951
|
+
_mouseX: this.lastMouseX,
|
|
29952
|
+
_mouseY: this.lastMouseY
|
|
29953
|
+
});
|
|
29954
|
+
} else {
|
|
29955
|
+
const x = Math.max(0, Math.min(this.object.x + this.offsetX, this.pageWidth - this.object.width));
|
|
29956
|
+
const y = Math.max(0, Math.min(this.object.y + this.offsetY, this.pageHeight - this.object.height));
|
|
29957
|
+
this.onUpdate({
|
|
29958
|
+
x,
|
|
29959
|
+
y
|
|
29960
|
+
});
|
|
29961
|
+
}
|
|
29911
29962
|
}
|
|
29963
|
+
if (this.mode === 'resize' && (this.resizeOffsetW !== 0 || this.resizeOffsetH !== 0 || this.resizeOffsetX !== 0 || this.resizeOffsetY !== 0)) {
|
|
29964
|
+
const x = this.object.x + this.resizeOffsetX;
|
|
29965
|
+
const y = this.object.y + this.resizeOffsetY;
|
|
29966
|
+
const width = this.object.width + this.resizeOffsetW;
|
|
29967
|
+
const height = this.object.height + this.resizeOffsetH;
|
|
29968
|
+
this.onUpdate({
|
|
29969
|
+
x,
|
|
29970
|
+
y,
|
|
29971
|
+
width,
|
|
29972
|
+
height
|
|
29973
|
+
});
|
|
29974
|
+
}
|
|
29975
|
+
this.resetOffsets();
|
|
29976
|
+
this.onDragEnd();
|
|
29977
|
+
window.removeEventListener('mousemove', this.boundHandleMove);
|
|
29978
|
+
window.removeEventListener('mouseup', this.boundStopInteraction);
|
|
29979
|
+
window.removeEventListener('touchmove', this.boundHandleMove);
|
|
29980
|
+
window.removeEventListener('touchend', this.boundStopInteraction);
|
|
29981
|
+
},
|
|
29982
|
+
capturePageRect() {
|
|
29983
|
+
const wrapper = this.$el.closest('.page-wrapper');
|
|
29984
|
+
if (!wrapper) return null;
|
|
29985
|
+
const canvas = wrapper.querySelector('canvas');
|
|
29986
|
+
return canvas ? canvas.getBoundingClientRect() : null;
|
|
29987
|
+
},
|
|
29988
|
+
resetResizeOffsets() {
|
|
29989
|
+
this.resizeOffsetX = 0;
|
|
29990
|
+
this.resizeOffsetY = 0;
|
|
29991
|
+
this.resizeOffsetW = 0;
|
|
29992
|
+
this.resizeOffsetH = 0;
|
|
29993
|
+
},
|
|
29994
|
+
resetOffsets() {
|
|
29995
|
+
this.mode = 'idle';
|
|
29996
|
+
this.offsetX = 0;
|
|
29997
|
+
this.offsetY = 0;
|
|
29998
|
+
this.resetResizeOffsets();
|
|
29999
|
+
this.pointerOffsetDoc = {
|
|
30000
|
+
x: 0,
|
|
30001
|
+
y: 0
|
|
30002
|
+
};
|
|
30003
|
+
this.currentPageRect = null;
|
|
29912
30004
|
}
|
|
29913
|
-
if (path) {
|
|
29914
|
-
const defs = element.firstElementChild;
|
|
29915
|
-
const pathElement = defs.firstElementChild;
|
|
29916
|
-
this.#updateProperties(pathElement, path);
|
|
29917
|
-
}
|
|
29918
|
-
}
|
|
29919
|
-
updateParent(id, layer) {
|
|
29920
|
-
if (layer === this) {
|
|
29921
|
-
return;
|
|
29922
|
-
}
|
|
29923
|
-
const root = this.#mapping.get(id);
|
|
29924
|
-
if (!root) {
|
|
29925
|
-
return;
|
|
29926
|
-
}
|
|
29927
|
-
layer.#parent.append(root);
|
|
29928
|
-
this.#mapping.delete(id);
|
|
29929
|
-
layer.#mapping.set(id, root);
|
|
29930
|
-
}
|
|
29931
|
-
remove(id) {
|
|
29932
|
-
this.#toUpdate.delete(id);
|
|
29933
|
-
if (this.#parent === null) {
|
|
29934
|
-
return;
|
|
29935
|
-
}
|
|
29936
|
-
this.#mapping.get(id).remove();
|
|
29937
|
-
this.#mapping.delete(id);
|
|
29938
|
-
}
|
|
29939
|
-
destroy() {
|
|
29940
|
-
this.#parent = null;
|
|
29941
|
-
for (const root of this.#mapping.values()) {
|
|
29942
|
-
root.remove();
|
|
29943
|
-
}
|
|
29944
|
-
this.#mapping.clear();
|
|
29945
|
-
this.#toUpdate.clear();
|
|
29946
30005
|
}
|
|
29947
|
-
}
|
|
29948
|
-
|
|
29949
|
-
|
|
29950
|
-
|
|
29951
|
-
|
|
29952
|
-
|
|
29953
|
-
|
|
29954
|
-
|
|
29955
|
-
|
|
29956
|
-
|
|
29957
|
-
|
|
29958
|
-
|
|
29959
|
-
|
|
30006
|
+
});
|
|
30007
|
+
;// ./src/components/DraggableElement.vue?vue&type=script&lang=js
|
|
30008
|
+
/* harmony default export */ const components_DraggableElementvue_type_script_lang_js = (DraggableElementvue_type_script_lang_js);
|
|
30009
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/DraggableElement.vue?vue&type=style&index=0&id=55db89ce&prod&scoped=true&lang=css
|
|
30010
|
+
// extracted by mini-css-extract-plugin
|
|
29960
30011
|
|
|
30012
|
+
;// ./src/components/DraggableElement.vue?vue&type=style&index=0&id=55db89ce&prod&scoped=true&lang=css
|
|
29961
30013
|
|
|
30014
|
+
;// ./src/components/DraggableElement.vue
|
|
29962
30015
|
|
|
29963
30016
|
|
|
29964
30017
|
|
|
30018
|
+
;
|
|
29965
30019
|
|
|
29966
|
-
{
|
|
29967
|
-
globalThis._pdfjsTestingUtils = {
|
|
29968
|
-
HighlightOutliner: HighlightOutliner
|
|
29969
|
-
};
|
|
29970
|
-
}
|
|
29971
|
-
globalThis.pdfjsLib = {
|
|
29972
|
-
AbortException: AbortException,
|
|
29973
|
-
AnnotationEditorLayer: AnnotationEditorLayer,
|
|
29974
|
-
AnnotationEditorParamsType: AnnotationEditorParamsType,
|
|
29975
|
-
AnnotationEditorType: AnnotationEditorType,
|
|
29976
|
-
AnnotationEditorUIManager: AnnotationEditorUIManager,
|
|
29977
|
-
AnnotationLayer: AnnotationLayer,
|
|
29978
|
-
AnnotationMode: AnnotationMode,
|
|
29979
|
-
AnnotationType: AnnotationType,
|
|
29980
|
-
applyOpacity: applyOpacity,
|
|
29981
|
-
build: build,
|
|
29982
|
-
ColorPicker: ColorPicker,
|
|
29983
|
-
createValidAbsoluteUrl: createValidAbsoluteUrl,
|
|
29984
|
-
CSSConstants: CSSConstants,
|
|
29985
|
-
DOMSVGFactory: DOMSVGFactory,
|
|
29986
|
-
DrawLayer: DrawLayer,
|
|
29987
|
-
FeatureTest: util_FeatureTest,
|
|
29988
|
-
fetchData: fetchData,
|
|
29989
|
-
findContrastColor: findContrastColor,
|
|
29990
|
-
getDocument: getDocument,
|
|
29991
|
-
getFilenameFromUrl: getFilenameFromUrl,
|
|
29992
|
-
getPdfFilenameFromUrl: getPdfFilenameFromUrl,
|
|
29993
|
-
getRGB: getRGB,
|
|
29994
|
-
getUuid: getUuid,
|
|
29995
|
-
getXfaPageViewport: getXfaPageViewport,
|
|
29996
|
-
GlobalWorkerOptions: GlobalWorkerOptions,
|
|
29997
|
-
ImageKind: util_ImageKind,
|
|
29998
|
-
InvalidPDFException: InvalidPDFException,
|
|
29999
|
-
isDataScheme: isDataScheme,
|
|
30000
|
-
isPdfFile: isPdfFile,
|
|
30001
|
-
isValidExplicitDest: isValidExplicitDest,
|
|
30002
|
-
MathClamp: MathClamp,
|
|
30003
|
-
noContextMenu: noContextMenu,
|
|
30004
|
-
normalizeUnicode: normalizeUnicode,
|
|
30005
|
-
OPS: OPS,
|
|
30006
|
-
OutputScale: OutputScale,
|
|
30007
|
-
PasswordResponses: PasswordResponses,
|
|
30008
|
-
PDFDataRangeTransport: PDFDataRangeTransport,
|
|
30009
|
-
PDFDateString: PDFDateString,
|
|
30010
|
-
PDFWorker: PDFWorker,
|
|
30011
|
-
PermissionFlag: PermissionFlag,
|
|
30012
|
-
PixelsPerInch: PixelsPerInch,
|
|
30013
|
-
RenderingCancelledException: RenderingCancelledException,
|
|
30014
|
-
renderRichText: renderRichText,
|
|
30015
|
-
ResponseException: ResponseException,
|
|
30016
|
-
setLayerDimensions: setLayerDimensions,
|
|
30017
|
-
shadow: shadow,
|
|
30018
|
-
SignatureExtractor: SignatureExtractor,
|
|
30019
|
-
stopEvent: stopEvent,
|
|
30020
|
-
SupportedImageMimeTypes: SupportedImageMimeTypes,
|
|
30021
|
-
TextLayer: TextLayer,
|
|
30022
|
-
TouchManager: TouchManager,
|
|
30023
|
-
updateUrlHash: updateUrlHash,
|
|
30024
|
-
Util: Util,
|
|
30025
|
-
VerbosityLevel: VerbosityLevel,
|
|
30026
|
-
version: version,
|
|
30027
|
-
XfaLayer: XfaLayer
|
|
30028
|
-
};
|
|
30029
30020
|
|
|
30021
|
+
/* normalize component */
|
|
30030
30022
|
|
|
30023
|
+
var DraggableElement_component = normalizeComponent(
|
|
30024
|
+
components_DraggableElementvue_type_script_lang_js,
|
|
30025
|
+
DraggableElementvue_type_template_id_55db89ce_scoped_true_render,
|
|
30026
|
+
DraggableElementvue_type_template_id_55db89ce_scoped_true_staticRenderFns,
|
|
30027
|
+
false,
|
|
30028
|
+
null,
|
|
30029
|
+
"55db89ce",
|
|
30030
|
+
null
|
|
30031
|
+
|
|
30032
|
+
)
|
|
30031
30033
|
|
|
30032
|
-
|
|
30033
|
-
;// ./node_modules/pdfjs-dist/build/pdf.worker.min.mjs
|
|
30034
|
-
const pdf_worker_min_namespaceObject = __webpack_require__.p + "pdf.worker.min.mjs";
|
|
30034
|
+
/* harmony default export */ const DraggableElement = (DraggableElement_component.exports);
|
|
30035
30035
|
;// ./src/utils/asyncReader.js
|
|
30036
30036
|
// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
|
|
30037
30037
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
30038
30038
|
|
|
30039
30039
|
|
|
30040
30040
|
|
|
30041
|
-
|
|
30041
|
+
pdf_GlobalWorkerOptions.workerSrc = pdf_worker_min_namespaceObject;
|
|
30042
|
+
function setWorkerPath(path) {
|
|
30043
|
+
GlobalWorkerOptions.workerSrc = path;
|
|
30044
|
+
}
|
|
30042
30045
|
function readAsArrayBuffer(file) {
|
|
30043
30046
|
return new Promise((resolve, reject) => {
|
|
30044
30047
|
const reader = new FileReader();
|
|
@@ -30248,6 +30251,11 @@ function readAsPDF(file) {
|
|
|
30248
30251
|
this.$emit('pdf-elements:end-init', {
|
|
30249
30252
|
docsCount: docs.length
|
|
30250
30253
|
});
|
|
30254
|
+
this.$nextTick(() => {
|
|
30255
|
+
if (this.autoFitZoom) {
|
|
30256
|
+
this.adjustZoomToFit();
|
|
30257
|
+
}
|
|
30258
|
+
});
|
|
30251
30259
|
}
|
|
30252
30260
|
},
|
|
30253
30261
|
selectPage(docIndex, pageIndex) {
|
|
@@ -30700,16 +30708,20 @@ function readAsPDF(file) {
|
|
|
30700
30708
|
if (Math.abs(optimalScale - this.scale) > 0.01) {
|
|
30701
30709
|
this.scale = optimalScale;
|
|
30702
30710
|
this.visualScale = optimalScale;
|
|
30711
|
+
this.pdfDocuments.forEach(doc => {
|
|
30712
|
+
doc.pagesScale = doc.pagesScale.map(() => this.scale);
|
|
30713
|
+
});
|
|
30714
|
+
this.cachePageBounds();
|
|
30703
30715
|
}
|
|
30704
30716
|
}
|
|
30705
30717
|
}
|
|
30706
30718
|
});
|
|
30707
30719
|
;// ./src/components/PDFElements.vue?vue&type=script&lang=js
|
|
30708
30720
|
/* harmony default export */ const components_PDFElementsvue_type_script_lang_js = (PDFElementsvue_type_script_lang_js);
|
|
30709
|
-
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFElements.vue?vue&type=style&index=0&id=
|
|
30721
|
+
;// ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/PDFElements.vue?vue&type=style&index=0&id=00b0fcba&prod&scoped=true&lang=css
|
|
30710
30722
|
// extracted by mini-css-extract-plugin
|
|
30711
30723
|
|
|
30712
|
-
;// ./src/components/PDFElements.vue?vue&type=style&index=0&id=
|
|
30724
|
+
;// ./src/components/PDFElements.vue?vue&type=style&index=0&id=00b0fcba&prod&scoped=true&lang=css
|
|
30713
30725
|
|
|
30714
30726
|
;// ./src/components/PDFElements.vue
|
|
30715
30727
|
|
|
@@ -30726,7 +30738,7 @@ var PDFElements_component = normalizeComponent(
|
|
|
30726
30738
|
staticRenderFns,
|
|
30727
30739
|
false,
|
|
30728
30740
|
null,
|
|
30729
|
-
"
|
|
30741
|
+
"00b0fcba",
|
|
30730
30742
|
null
|
|
30731
30743
|
|
|
30732
30744
|
)
|
|
@@ -30737,6 +30749,10 @@ var PDFElements_component = normalizeComponent(
|
|
|
30737
30749
|
// SPDX-License-Identifier: AGPL-3.0-or-later
|
|
30738
30750
|
|
|
30739
30751
|
|
|
30752
|
+
|
|
30753
|
+
pdf_GlobalWorkerOptions.workerSrc = pdf_worker_min_namespaceObject;
|
|
30754
|
+
|
|
30755
|
+
|
|
30740
30756
|
PDFElements.install = function (Vue) {
|
|
30741
30757
|
if (PDFElements.install.installed) return;
|
|
30742
30758
|
Vue.component(PDFElements.name, PDFElements);
|