@studiometa/ui 1.0.1 → 1.1.0

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.
@@ -8,8 +8,10 @@ export interface DraggableProps extends BaseProps {
8
8
  x: boolean;
9
9
  y: boolean;
10
10
  fitBounds: boolean;
11
+ strictFitBounds: boolean;
11
12
  sensitivity: number;
12
13
  dropSensitivity: number;
14
+ margin: string;
13
15
  };
14
16
  }
15
17
  declare const Draggable_base: import("@studiometa/js-toolkit").BaseDecorator<import("@studiometa/js-toolkit").BaseInterface, Base<BaseProps>>;
@@ -27,6 +29,8 @@ export declare class Draggable<T extends BaseProps = BaseProps> extends Draggabl
27
29
  props: {
28
30
  x: number;
29
31
  y: number;
32
+ progressX: number;
33
+ progressY: number;
30
34
  originX: number;
31
35
  originY: number;
32
36
  dampedX: number;
@@ -45,7 +49,41 @@ export declare class Draggable<T extends BaseProps = BaseProps> extends Draggabl
45
49
  */
46
50
  get parent(): HTMLElement;
47
51
  /**
48
- * The bounds values.
52
+ * Draggable area bounds.
53
+ * @private Use the `bounds` getter instead.
54
+ */
55
+ __bounds: {
56
+ yMin: number;
57
+ yMax: number;
58
+ xMin: number;
59
+ xMax: number;
60
+ };
61
+ /**
62
+ * Cached margin values.
63
+ * @private
64
+ */
65
+ __margin: {
66
+ top: number;
67
+ right: number;
68
+ bottom: number;
69
+ left: number;
70
+ };
71
+ /**
72
+ * Cached margin option for invalidation.
73
+ * @private
74
+ */
75
+ __marginOption: string;
76
+ /**
77
+ * Offset from the bounds.
78
+ */
79
+ get margin(): {
80
+ top: number;
81
+ right: number;
82
+ bottom: number;
83
+ left: number;
84
+ };
85
+ /**
86
+ * Draggable area bounds.
49
87
  */
50
88
  get bounds(): {
51
89
  yMin: number;
@@ -53,6 +91,11 @@ export declare class Draggable<T extends BaseProps = BaseProps> extends Draggabl
53
91
  xMin: number;
54
92
  xMax: number;
55
93
  };
94
+ /**
95
+ * Resized hook.
96
+ * Reset bounds on resize.
97
+ */
98
+ resized(): void;
56
99
  /**
57
100
  * Drag service hook.
58
101
  */
@@ -1,5 +1,12 @@
1
1
  import { Base, withDrag } from "@studiometa/js-toolkit";
2
- import { domScheduler, transform, damp, clamp, getOffsetSizes } from "@studiometa/js-toolkit/utils";
2
+ import {
3
+ clamp,
4
+ damp,
5
+ domScheduler,
6
+ getOffsetSizes,
7
+ map,
8
+ transform
9
+ } from "@studiometa/js-toolkit/utils";
3
10
  class Draggable extends withDrag(Base, {
4
11
  // @ts-expect-error draggable is instance of Draggable.
5
12
  target: (draggable) => draggable.target
@@ -8,9 +15,17 @@ class Draggable extends withDrag(Base, {
8
15
  * Config.
9
16
  */
10
17
  static config = {
11
- name: "DraggableElement",
18
+ name: "Draggable",
12
19
  refs: ["target"],
13
- emits: ["drag-start", "drag-drag", "drag-drop", "drag-inertia", "drag-stop", "drag-fit"],
20
+ emits: [
21
+ "drag-start",
22
+ "drag-drag",
23
+ "drag-drop",
24
+ "drag-inertia",
25
+ "drag-stop",
26
+ "drag-fit",
27
+ "drag-render"
28
+ ],
14
29
  options: {
15
30
  x: {
16
31
  type: Boolean,
@@ -21,8 +36,10 @@ class Draggable extends withDrag(Base, {
21
36
  default: true
22
37
  },
23
38
  fitBounds: Boolean,
39
+ strictFitBounds: Boolean,
24
40
  sensitivity: { type: Number, default: 0.5 },
25
- dropSensitivity: { type: Number, default: 0.1 }
41
+ dropSensitivity: { type: Number, default: 0.1 },
42
+ margin: { type: String, default: "0" }
26
43
  }
27
44
  };
28
45
  /**
@@ -31,6 +48,8 @@ class Draggable extends withDrag(Base, {
31
48
  props = {
32
49
  x: 0,
33
50
  y: 0,
51
+ progressX: 0,
52
+ progressY: 0,
34
53
  originX: 0,
35
54
  originY: 0,
36
55
  dampedX: 0,
@@ -53,38 +72,100 @@ class Draggable extends withDrag(Base, {
53
72
  return this.$el;
54
73
  }
55
74
  /**
56
- * The bounds values.
75
+ * Draggable area bounds.
76
+ * @private Use the `bounds` getter instead.
77
+ */
78
+ __bounds;
79
+ /**
80
+ * Cached margin values.
81
+ * @private
82
+ */
83
+ __margin;
84
+ /**
85
+ * Cached margin option for invalidation.
86
+ * @private
87
+ */
88
+ __marginOption;
89
+ /**
90
+ * Offset from the bounds.
91
+ */
92
+ get margin() {
93
+ const marginOption = this.$options.margin;
94
+ if (this.__margin && this.__marginOption === marginOption) {
95
+ return this.__margin;
96
+ }
97
+ const values = marginOption.split(" ").map(Number);
98
+ let [top = 0] = values;
99
+ let right = top;
100
+ let bottom = top;
101
+ let left = top;
102
+ switch (values.length) {
103
+ case 4:
104
+ [top, right, bottom, left] = values;
105
+ break;
106
+ case 3:
107
+ [top, right, bottom] = values;
108
+ left = right;
109
+ break;
110
+ case 2:
111
+ [top, right] = values;
112
+ left = right;
113
+ bottom = top;
114
+ break;
115
+ }
116
+ this.__margin = { top, right, bottom, left };
117
+ this.__marginOption = marginOption;
118
+ return this.__margin;
119
+ }
120
+ /**
121
+ * Draggable area bounds.
57
122
  */
58
123
  get bounds() {
59
- const targetSizes = getOffsetSizes(this.target);
60
- const parentSizes = getOffsetSizes(this.parent);
61
- const xMin = targetSizes.x - parentSizes.x;
62
- const yMin = targetSizes.y - parentSizes.y;
63
- const xMax = xMin + targetSizes.width - parentSizes.width;
64
- const yMax = yMin + targetSizes.height - parentSizes.height;
65
- return {
66
- yMin: yMin * -1,
67
- yMax: yMax * -1,
68
- xMin: xMin * -1,
69
- xMax: xMax * -1
70
- };
124
+ if (!this.__bounds) {
125
+ const { target, parent, margin } = this;
126
+ const targetSizes = getOffsetSizes(target);
127
+ const parentSizes = getOffsetSizes(parent);
128
+ const xMin = targetSizes.x - parentSizes.x;
129
+ const yMin = targetSizes.y - parentSizes.y;
130
+ const xMax = xMin + targetSizes.width - parentSizes.width;
131
+ const yMax = yMin + targetSizes.height - parentSizes.height;
132
+ this.__bounds = {
133
+ yMin: (yMin - margin.top) * -1,
134
+ yMax: (yMax + margin.bottom) * -1,
135
+ xMin: (xMin - margin.left) * -1,
136
+ xMax: (xMax + margin.right) * -1
137
+ };
138
+ }
139
+ return this.__bounds;
140
+ }
141
+ /**
142
+ * Resized hook.
143
+ * Reset bounds on resize.
144
+ */
145
+ resized() {
146
+ this.__bounds = null;
71
147
  }
72
148
  /**
73
149
  * Drag service hook.
74
150
  */
75
151
  dragged(props) {
76
152
  this.$emit(`drag-${props.mode}`, this.props);
153
+ const { fitBounds, strictFitBounds, sensitivity, dropSensitivity } = this.$options;
154
+ const { bounds } = this;
77
155
  if (props.mode === props.MODES.START) {
78
156
  this.props.originX = this.props.x;
79
157
  this.props.originY = this.props.y;
80
- this.dampFactor = this.$options.sensitivity;
158
+ this.dampFactor = sensitivity;
81
159
  this.render();
82
- } else if (props.mode === props.MODES.DRAG || props.mode === props.MODES.INERTIA && !this.$options.fitBounds) {
160
+ } else if (props.mode === props.MODES.DRAG || props.mode === props.MODES.INERTIA && !fitBounds) {
83
161
  this.props.x = this.props.originX + props.x - props.origin.x;
84
162
  this.props.y = this.props.originY + props.y - props.origin.y;
163
+ if (strictFitBounds) {
164
+ this.props.x = clamp(this.props.x, bounds.xMin, bounds.xMax);
165
+ this.props.y = clamp(this.props.y, bounds.yMin, bounds.yMax);
166
+ }
85
167
  this.render();
86
- } else if (props.mode === props.MODES.DROP && this.$options.fitBounds) {
87
- const { bounds } = this;
168
+ } else if (props.mode === props.MODES.DROP && fitBounds) {
88
169
  this.props.x = clamp(
89
170
  this.props.originX + props.final.x - props.origin.x,
90
171
  bounds.xMin,
@@ -95,7 +176,7 @@ class Draggable extends withDrag(Base, {
95
176
  bounds.yMin,
96
177
  bounds.yMax
97
178
  );
98
- this.dampFactor = this.$options.dropSensitivity;
179
+ this.dampFactor = dropSensitivity;
99
180
  this.$services.enable("ticked");
100
181
  }
101
182
  }
@@ -108,15 +189,20 @@ class Draggable extends withDrag(Base, {
108
189
  }
109
190
  }
110
191
  render() {
111
- this.props.dampedX = damp(this.props.x, this.props.dampedX, this.dampFactor);
112
- this.props.dampedY = damp(this.props.y, this.props.dampedY, this.dampFactor);
192
+ const { props } = this;
193
+ props.dampedX = damp(props.x, props.dampedX, this.dampFactor);
194
+ props.dampedY = damp(props.y, props.dampedY, this.dampFactor);
113
195
  domScheduler.read(() => {
196
+ const { bounds } = this;
114
197
  const { x, y } = this.$options;
115
198
  domScheduler.write(() => {
199
+ props.progressX = map(props.x, bounds.xMin, bounds.xMax, 0, 1);
200
+ props.progressY = map(props.y, bounds.yMin, bounds.yMax, 0, 1);
116
201
  transform(this.target, {
117
- x: x ? this.props.dampedX : 0,
118
- y: y ? this.props.dampedY : 0
202
+ x: x ? props.dampedX : 0,
203
+ y: y ? props.dampedY : 0
119
204
  });
205
+ this.$emit("drag-render", this.props);
120
206
  });
121
207
  });
122
208
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../packages/ui/Draggable/Draggable.ts"],
4
- "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport { domScheduler, transform, damp, clamp, getOffsetSizes } from '@studiometa/js-toolkit/utils';\n\nexport interface DraggableProps extends BaseProps {\n $refs: {\n target: HTMLElement;\n };\n $options: {\n x: boolean;\n y: boolean;\n fitBounds: boolean;\n sensitivity: number;\n dropSensitivity: number;\n };\n}\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base, {\n // @ts-expect-error draggable is instance of Draggable.\n target: (draggable) => draggable.target,\n})<T & DraggableProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'DraggableElement',\n refs: ['target'],\n emits: ['drag-start', 'drag-drag', 'drag-drop', 'drag-inertia', 'drag-stop', 'drag-fit'],\n options: {\n x: {\n type: Boolean,\n default: true,\n },\n y: {\n type: Boolean,\n default: true,\n },\n fitBounds: Boolean,\n sensitivity: { type: Number, default: 0.5 },\n dropSensitivity: { type: Number, default: 0.1 },\n },\n };\n\n /**\n * Props for the target position.\n */\n props = {\n x: 0,\n y: 0,\n originX: 0,\n originY: 0,\n dampedX: 0,\n dampedY: 0,\n };\n\n /**\n * Smooth factor.\n */\n dampFactor = 0.5;\n\n /**\n * The draggable element, defaults to `this.$refs.target`.\n */\n get target(): HTMLElement {\n return this.$refs.target;\n }\n\n /**\n * The bouding element, defaults to `this.$el`.\n */\n get parent(): HTMLElement {\n return this.$el;\n }\n\n /**\n * The bounds values.\n */\n get bounds() {\n const targetSizes = getOffsetSizes(this.target);\n const parentSizes = getOffsetSizes(this.parent);\n const xMin = targetSizes.x - parentSizes.x;\n const yMin = targetSizes.y - parentSizes.y;\n const xMax = xMin + targetSizes.width - parentSizes.width;\n const yMax = yMin + targetSizes.height - parentSizes.height;\n\n return {\n yMin: yMin * -1,\n yMax: yMax * -1,\n xMin: xMin * -1,\n xMax: xMax * -1,\n };\n }\n\n /**\n * Drag service hook.\n */\n dragged(props: DragServiceProps) {\n this.$emit(`drag-${props.mode}`, this.props);\n\n if (props.mode === props.MODES.START) {\n this.props.originX = this.props.x;\n this.props.originY = this.props.y;\n this.dampFactor = this.$options.sensitivity;\n this.render();\n } else if (\n props.mode === props.MODES.DRAG ||\n (props.mode === props.MODES.INERTIA && !this.$options.fitBounds)\n ) {\n this.props.x = this.props.originX + props.x - props.origin.x;\n this.props.y = this.props.originY + props.y - props.origin.y;\n this.render();\n } else if (props.mode === props.MODES.DROP && this.$options.fitBounds) {\n const { bounds } = this;\n this.props.x = clamp(\n this.props.originX + props.final.x - props.origin.x,\n bounds.xMin,\n bounds.xMax,\n );\n this.props.y = clamp(\n this.props.originY + props.final.y - props.origin.y,\n bounds.yMin,\n bounds.yMax,\n );\n this.dampFactor = this.$options.dropSensitivity;\n this.$services.enable('ticked');\n }\n }\n\n ticked() {\n this.$emit(`drag-inertia`, this.props);\n this.render();\n if (this.props.dampedX === this.props.x && this.props.dampedY === this.props.y) {\n this.$services.disable('ticked');\n this.$emit('drag-fit', this.props);\n }\n }\n\n render() {\n this.props.dampedX = damp(this.props.x, this.props.dampedX, this.dampFactor);\n this.props.dampedY = damp(this.props.y, this.props.dampedY, this.dampFactor);\n\n domScheduler.read(() => {\n const { x, y } = this.$options;\n domScheduler.write(() => {\n transform(this.target, {\n x: x ? this.props.dampedX : 0,\n y: y ? this.props.dampedY : 0,\n });\n });\n });\n }\n}\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { Base, withDrag } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig, DragServiceProps } from '@studiometa/js-toolkit';\nimport {\n clamp,\n damp,\n domScheduler,\n getOffsetSizes,\n map,\n transform,\n} from '@studiometa/js-toolkit/utils';\n\nexport interface DraggableProps extends BaseProps {\n $refs: {\n target: HTMLElement;\n };\n $options: {\n x: boolean;\n y: boolean;\n fitBounds: boolean;\n strictFitBounds: boolean;\n sensitivity: number;\n dropSensitivity: number;\n margin: string;\n };\n}\n\n/**\n * Draggable class.\n */\nexport class Draggable<T extends BaseProps = BaseProps> extends withDrag(Base, {\n // @ts-expect-error draggable is instance of Draggable.\n target: (draggable) => draggable.target,\n})<T & DraggableProps> {\n /**\n * Config.\n */\n static config: BaseConfig = {\n name: 'Draggable',\n refs: ['target'],\n emits: [\n 'drag-start',\n 'drag-drag',\n 'drag-drop',\n 'drag-inertia',\n 'drag-stop',\n 'drag-fit',\n 'drag-render',\n ],\n options: {\n x: {\n type: Boolean,\n default: true,\n },\n y: {\n type: Boolean,\n default: true,\n },\n fitBounds: Boolean,\n strictFitBounds: Boolean,\n sensitivity: { type: Number, default: 0.5 },\n dropSensitivity: { type: Number, default: 0.1 },\n margin: { type: String, default: '0' },\n },\n };\n\n /**\n * Props for the target position.\n */\n props = {\n x: 0,\n y: 0,\n progressX: 0,\n progressY: 0,\n originX: 0,\n originY: 0,\n dampedX: 0,\n dampedY: 0,\n };\n\n /**\n * Smooth factor.\n */\n dampFactor = 0.5;\n\n /**\n * The draggable element, defaults to `this.$refs.target`.\n */\n get target(): HTMLElement {\n return this.$refs.target;\n }\n\n /**\n * The bouding element, defaults to `this.$el`.\n */\n get parent(): HTMLElement {\n return this.$el;\n }\n\n /**\n * Draggable area bounds.\n * @private Use the `bounds` getter instead.\n */\n __bounds: {\n yMin: number;\n yMax: number;\n xMin: number;\n xMax: number;\n };\n\n /**\n * Cached margin values.\n * @private\n */\n __margin: { top: number; right: number; bottom: number; left: number };\n\n /**\n * Cached margin option for invalidation.\n * @private\n */\n __marginOption: string;\n\n /**\n * Offset from the bounds.\n */\n get margin() {\n const marginOption = this.$options.margin;\n\n if (this.__margin && this.__marginOption === marginOption) {\n return this.__margin;\n }\n\n const values = marginOption.split(' ').map(Number);\n let [top = 0] = values;\n let right = top;\n let bottom = top;\n let left = top;\n\n switch (values.length) {\n case 4:\n [top, right, bottom, left] = values;\n break;\n case 3:\n [top, right, bottom] = values;\n left = right;\n break;\n case 2:\n [top, right] = values;\n left = right;\n bottom = top;\n break;\n }\n\n this.__margin = { top, right, bottom, left };\n this.__marginOption = marginOption;\n\n return this.__margin;\n }\n\n /**\n * Draggable area bounds.\n */\n get bounds() {\n if (!this.__bounds) {\n const { target, parent, margin } = this;\n const targetSizes = getOffsetSizes(target);\n const parentSizes = getOffsetSizes(parent);\n const xMin = targetSizes.x - parentSizes.x;\n const yMin = targetSizes.y - parentSizes.y;\n const xMax = xMin + targetSizes.width - parentSizes.width;\n const yMax = yMin + targetSizes.height - parentSizes.height;\n\n this.__bounds = {\n yMin: (yMin - margin.top) * -1,\n yMax: (yMax + margin.bottom) * -1,\n xMin: (xMin - margin.left) * -1,\n xMax: (xMax + margin.right) * -1,\n };\n }\n\n return this.__bounds;\n }\n\n /**\n * Resized hook.\n * Reset bounds on resize.\n */\n resized() {\n this.__bounds = null;\n }\n\n /**\n * Drag service hook.\n */\n dragged(props: DragServiceProps) {\n this.$emit(`drag-${props.mode}`, this.props);\n const { fitBounds, strictFitBounds, sensitivity, dropSensitivity } = this.$options;\n const { bounds } = this;\n\n if (props.mode === props.MODES.START) {\n this.props.originX = this.props.x;\n this.props.originY = this.props.y;\n this.dampFactor = sensitivity;\n this.render();\n } else if (\n props.mode === props.MODES.DRAG ||\n (props.mode === props.MODES.INERTIA && !fitBounds)\n ) {\n this.props.x = this.props.originX + props.x - props.origin.x;\n this.props.y = this.props.originY + props.y - props.origin.y;\n\n if (strictFitBounds) {\n this.props.x = clamp(this.props.x, bounds.xMin, bounds.xMax);\n this.props.y = clamp(this.props.y, bounds.yMin, bounds.yMax);\n }\n\n this.render();\n } else if (props.mode === props.MODES.DROP && fitBounds) {\n this.props.x = clamp(\n this.props.originX + props.final.x - props.origin.x,\n bounds.xMin,\n bounds.xMax,\n );\n this.props.y = clamp(\n this.props.originY + props.final.y - props.origin.y,\n bounds.yMin,\n bounds.yMax,\n );\n this.dampFactor = dropSensitivity;\n this.$services.enable('ticked');\n }\n }\n\n ticked() {\n this.$emit(`drag-inertia`, this.props);\n this.render();\n if (this.props.dampedX === this.props.x && this.props.dampedY === this.props.y) {\n this.$services.disable('ticked');\n this.$emit('drag-fit', this.props);\n }\n }\n\n render() {\n const { props } = this;\n props.dampedX = damp(props.x, props.dampedX, this.dampFactor);\n props.dampedY = damp(props.y, props.dampedY, this.dampFactor);\n\n domScheduler.read(() => {\n const { bounds } = this;\n const { x, y } = this.$options;\n\n domScheduler.write(() => {\n props.progressX = map(props.x, bounds.xMin, bounds.xMax, 0, 1);\n props.progressY = map(props.y, bounds.yMin, bounds.yMax, 0, 1);\n\n transform(this.target, {\n x: x ? props.dampedX : 0,\n y: y ? props.dampedY : 0,\n });\n\n this.$emit('drag-render', this.props);\n });\n });\n }\n}\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studiometa/ui",
3
- "version": "1.0.1",
3
+ "version": "1.1.0",
4
4
  "description": "A set of opiniated, unstyled and accessible components",
5
5
  "publishConfig": {
6
6
  "access": "public"