draggable DraggableMixin.ts

25% Statements 4/16
100% Branches 0/0
33.33% Functions 2/6
25% Lines 4/16
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80  
 
 
 
 
 
 
1x
 
1x
 
 
 
 
 
 
 
 
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x //import mergeStyles from "../../../helpers/mergeStyles";
import { CustomElementPropertyMetadata } from "../../../interfaces";
//import styles from "./DraggableMixin.css";
 
/**
 * Allows a component to be selected when clicked
 */
const DraggableMixin = Base =>
 
    class Draggable extends Base {
 
        // static get styles(): string {
 
        //     return mergeStyles(super.styles, styles);
        // }
 
        static get properties(): Record<string, CustomElementPropertyMetadata> {
 
            return {
 
                /**
                 * Whether the component is draggable
                 */
                // draggable: {
                //     type: Boolean,
                //     value: true, // Draggable by default
                //     reflect: true
                // },
 
                /**
                 * Data to be tranferred when dragging
                 */
                data: {
                    type: [Object, Function]
                }
            };
        }
 
        constructor() {
 
            super();
 
            this.handleDragStart = this.handleDragStart.bind(this); // Bind to the draggable element since might get assigned to the parent one
        }
 
        connectedCallback() {
 
            super.connectedCallback?.();
 
            const {
                _adoptingParent: parent
            } = this;
 
            parent.setAttribute('draggable', true);
 
            parent.addEventListener('dragstart', this.handleDragStart);
        }
 
        disconnectedCallback() {
 
            super.disconnectedCallback?.();
 
            const {
                _adoptingParent: parent
            } = this;
 
            parent.removeAttribute("draggable");
 
            parent.removeEventListener('dragstart', this.handleDragStart);
        }
 
        handleDragStart(evt: DragEvent) {
 
            const data = JSON.stringify(this.data);
 
            evt.dataTransfer.setData('application/json', data);
        }
    };
 
export default DraggableMixin;