@roomle/embedding-lib 5.0.1-debug.1 → 5.1.0-alpha.2
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/.releaserc.json +1 -1
- package/docs/md/web/embedding/CHANGELOG.md +9 -4
- package/drag-in-CXLxdfa-.mjs +265 -0
- package/drag-in-gOPgOymI.mjs +7 -0
- package/index.d.ts +48 -6
- package/package.json +2 -2
- package/roomle-embedding-lib.es.js +175 -134
- package/roomle-embedding-lib.es.min.js +8 -8
- package/roomle-embedding-lib.umd.js +14 -8
- package/roomle-embedding-lib.umd.min.js +14 -8
package/.releaserc.json
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
-
## [5.0
|
|
1
|
+
## [5.1.0-alpha.2](https://github.com/roomle-dev/roomle-ui/compare/embedding-lib-v5.1.0-alpha.1...embedding-lib-v5.1.0-alpha.2) (2024-08-20)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* make search threshold parameterizable with init-data ([cfbe6c7](https://github.com/roomle-dev/roomle-ui/commit/cfbe6c717810895cf98827b37f1dbd97c4184120))
|
|
2
7
|
|
|
3
8
|
|
|
4
9
|
### Bug Fixes
|
|
5
10
|
|
|
6
|
-
* remove
|
|
7
|
-
*
|
|
8
|
-
*
|
|
11
|
+
* remove typescript errors ([e186ab6](https://github.com/roomle-dev/roomle-ui/commit/e186ab6f8a983d10c45cefa3894e890a350e8e03))
|
|
12
|
+
* trigger onSaveDraft callback when emails is false and by default ([87cd4f2](https://github.com/roomle-dev/roomle-ui/commit/87cd4f2d00caf297d4e98059f1e6d71be75dda0b))
|
|
13
|
+
* Vector draw mode broken on test/alpha ([667a044](https://github.com/roomle-dev/roomle-ui/commit/667a04478388bf0af010d7d192526fecf0a13f5f))
|
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
var v = Object.defineProperty;
|
|
2
|
+
var P = (n, t, e) => t in n ? v(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
|
|
3
|
+
var c = (n, t, e) => P(n, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
class $ {
|
|
5
|
+
constructor(t = 16) {
|
|
6
|
+
c(this, "_computedStyleCache", /* @__PURE__ */ new Map());
|
|
7
|
+
c(this, "_maxLifetime", 16);
|
|
8
|
+
c(this, "_cacheCleanInterval", null);
|
|
9
|
+
this._maxLifetime = t;
|
|
10
|
+
}
|
|
11
|
+
get(t) {
|
|
12
|
+
const e = this._computedStyleCache.get(t), i = Date.now();
|
|
13
|
+
if (e && i - e.updated < this._maxLifetime)
|
|
14
|
+
return e.style;
|
|
15
|
+
const s = getComputedStyle(t);
|
|
16
|
+
return this._computedStyleCache.set(t, { style: s, updated: i }), this._cacheCleanInterval || (this._cacheCleanInterval = setInterval(
|
|
17
|
+
() => this._cleanUpCache,
|
|
18
|
+
Math.max(this._maxLifetime * 1e3, 5e3)
|
|
19
|
+
)), s;
|
|
20
|
+
}
|
|
21
|
+
_cleanUpCache() {
|
|
22
|
+
const t = Date.now();
|
|
23
|
+
for (const [e, { updated: i }] of this._computedStyleCache.entries())
|
|
24
|
+
t - i >= this._maxLifetime && this._computedStyleCache.delete(e);
|
|
25
|
+
this._computedStyleCache.size === 0 && this._cacheCleanInterval && (clearInterval(this._cacheCleanInterval), this._cacheCleanInterval = null);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const M = (n) => window.TouchEvent && n instanceof window.TouchEvent;
|
|
29
|
+
let D;
|
|
30
|
+
const p = (n) => (D || (D = new $()), D.get(n)), C = (n, t, e) => {
|
|
31
|
+
const i = parseFloat(n), s = window.devicePixelRatio || 1;
|
|
32
|
+
if (t === "px")
|
|
33
|
+
return i;
|
|
34
|
+
if (t === "%") {
|
|
35
|
+
const o = e === document.documentElement ? window.innerWidth : e.offsetWidth;
|
|
36
|
+
return i / 100 * o;
|
|
37
|
+
}
|
|
38
|
+
if (t === "rem") {
|
|
39
|
+
const o = parseFloat(
|
|
40
|
+
p(document.documentElement).fontSize
|
|
41
|
+
);
|
|
42
|
+
return i * o;
|
|
43
|
+
}
|
|
44
|
+
if (t === "em") {
|
|
45
|
+
const o = parseFloat(
|
|
46
|
+
p(e).fontSize
|
|
47
|
+
);
|
|
48
|
+
return i * o;
|
|
49
|
+
}
|
|
50
|
+
if (t === "vh" || t === "vw" || t === "vmin" || t === "vmax") {
|
|
51
|
+
const o = {
|
|
52
|
+
vh: window.innerHeight,
|
|
53
|
+
vw: window.innerWidth,
|
|
54
|
+
vmin: Math.min(window.innerWidth, window.innerHeight),
|
|
55
|
+
vmax: Math.max(window.innerWidth, window.innerHeight)
|
|
56
|
+
};
|
|
57
|
+
return i / 100 * o[t];
|
|
58
|
+
}
|
|
59
|
+
const r = {
|
|
60
|
+
cm: 37.7952755906,
|
|
61
|
+
mm: 3.77952755906,
|
|
62
|
+
in: 96
|
|
63
|
+
};
|
|
64
|
+
return t in r ? i * r[t] * s : (console.warn("Unable to determine coordinates for drag-in. Therefore drag-in is not possible. Check the CSS that positions the iframe of Roomle"), 0);
|
|
65
|
+
}, A = (n, t, e = { x: 0, y: 0 }) => {
|
|
66
|
+
const i = n.getBoundingClientRect(), r = p(n).transform;
|
|
67
|
+
let o = 0, l = 0;
|
|
68
|
+
if (r !== "none") {
|
|
69
|
+
const f = /translate\(\s*([-+]?\d*\.?\d+|\d+)(px|%)?,?\s*([-+]?\d*\.?\d+|\d+)?(px|%)?\s*\)/, d = r.match(f);
|
|
70
|
+
d && (o = C(d[1], d[2], n), l = C(d[3], d[4], n));
|
|
71
|
+
}
|
|
72
|
+
const { clientX: _, clientY: a } = w(t, e), h = _ - i.left - o + n.scrollLeft, u = a - i.top - l + n.scrollTop;
|
|
73
|
+
return { x: h, y: u };
|
|
74
|
+
}, w = (n, t) => {
|
|
75
|
+
const { clientX: e, clientY: i } = M(n) ? G(n) : n, s = e || t.x, r = i || t.y;
|
|
76
|
+
return { clientX: s, clientY: r };
|
|
77
|
+
}, G = (n) => {
|
|
78
|
+
if (n.touches.length) {
|
|
79
|
+
let { clientX: e, clientY: i } = n.touches[0];
|
|
80
|
+
if (n.touches.length > 1) {
|
|
81
|
+
const s = n.touches[1], r = s.clientX, o = s.clientY;
|
|
82
|
+
e = (e + r) / 2, i = (i + o) / 2;
|
|
83
|
+
}
|
|
84
|
+
return { clientX: e, clientY: i };
|
|
85
|
+
}
|
|
86
|
+
const t = n.changedTouches[0];
|
|
87
|
+
return { clientX: t.clientX, clientY: t.clientY };
|
|
88
|
+
}, N = 500, L = 10;
|
|
89
|
+
class z {
|
|
90
|
+
constructor(t, { onTouchDragStart: e }, i = {}) {
|
|
91
|
+
c(this, "_touchDragTimeOut");
|
|
92
|
+
c(this, "_onTouchDragStart");
|
|
93
|
+
c(this, "_payload", null);
|
|
94
|
+
c(this, "_delay", N);
|
|
95
|
+
c(this, "_firstTouch", null);
|
|
96
|
+
c(this, "_lastTouch", null);
|
|
97
|
+
c(this, "_epsilon", L);
|
|
98
|
+
this._payload = t, this._onTouchDragStart = e, this._delay = i.delay || N, this._epsilon = i.epsilon || L;
|
|
99
|
+
}
|
|
100
|
+
onTouchStart(t) {
|
|
101
|
+
var e;
|
|
102
|
+
!t || !((e = t == null ? void 0 : t.touches) != null && e.length) || this._touchDragTimeOut || (this._firstTouch = t.touches[t.touches.length - 1], this._touchDragTimeOut = setTimeout(() => {
|
|
103
|
+
this._clearTimeout(), this._lastTouch || (this._lastTouch = t.touches[0]), this._checkXDistance(t)();
|
|
104
|
+
}, this._delay));
|
|
105
|
+
}
|
|
106
|
+
onTouchEnd() {
|
|
107
|
+
this._resetTouches();
|
|
108
|
+
}
|
|
109
|
+
onTouchMove(t) {
|
|
110
|
+
var e;
|
|
111
|
+
!t || !((e = t == null ? void 0 : t.touches) != null && e.length) || (this._lastTouch = t.touches[0]);
|
|
112
|
+
}
|
|
113
|
+
_clearTimeout() {
|
|
114
|
+
this._touchDragTimeOut && (clearTimeout(this._touchDragTimeOut), this._touchDragTimeOut = null);
|
|
115
|
+
}
|
|
116
|
+
_resetTouches() {
|
|
117
|
+
this._clearTimeout(), this._lastTouch = null, this._firstTouch = null, this._payload = null;
|
|
118
|
+
}
|
|
119
|
+
_checkXDistance(t) {
|
|
120
|
+
return () => {
|
|
121
|
+
if (!this._firstTouch || !this._lastTouch)
|
|
122
|
+
return;
|
|
123
|
+
let e = !1;
|
|
124
|
+
e = Math.abs(
|
|
125
|
+
this._firstTouch.clientX - this._lastTouch.clientX
|
|
126
|
+
) < this._epsilon, e && (this._onTouchDragStart(this._payload, t), this._resetTouches());
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
const O = "rml-drag-in-styles", F = "rml-drag-in-drag-element", g = "rml-drag-in-overlay", m = "rml-drag-in-drag-ghost", T = "rml-drag-in-fade-in", Y = "rml-drag-in-fade-out", x = {
|
|
131
|
+
DISPLAY_NONE: "rml-display-none"
|
|
132
|
+
}, b = 0.5, S = "250ms", I = "forwards", E = (n) => n ? !0 : (console.warn("No instance set, cancel drag-in"), !1);
|
|
133
|
+
class U {
|
|
134
|
+
constructor(t) {
|
|
135
|
+
c(this, "_iframe");
|
|
136
|
+
c(this, "_currentDrag", {});
|
|
137
|
+
c(this, "_currentTouch", null);
|
|
138
|
+
c(this, "_firefoxDragPosition", { x: 0, y: 0 });
|
|
139
|
+
c(this, "_instance", null);
|
|
140
|
+
c(this, "options", {});
|
|
141
|
+
c(this, "_firefoxFallback", (t) => {
|
|
142
|
+
if (!this._currentDrag.event)
|
|
143
|
+
return;
|
|
144
|
+
const e = t || window.event;
|
|
145
|
+
this._firefoxDragPosition.x = e.pageX || 0, this._firefoxDragPosition.y = e.pageY || 0;
|
|
146
|
+
});
|
|
147
|
+
this._iframe = t, this._injectStyles(), this._initializeDragGhost(), this._firefoxFallback = this._firefoxFallback.bind(this), document.addEventListener("dragover", this._firefoxFallback);
|
|
148
|
+
}
|
|
149
|
+
_injectStyles() {
|
|
150
|
+
if (!!!document.getElementById(O)) {
|
|
151
|
+
const e = document.createElement("style");
|
|
152
|
+
e.type = "text/css", e.id = O, e.innerHTML = `
|
|
153
|
+
.${x.DISPLAY_NONE}{display:none}
|
|
154
|
+
.${g}{position:absolute;top:0;left:0;width:100%;height:100%;z-index:999;}
|
|
155
|
+
.${m}{position:absolute;top:0;left:0;width:1px;height:1px;z-index:999;pointer-events:none;background-color:transparent;}
|
|
156
|
+
@keyframes ${T} {from{opacity: 0;}to {opacity: ${b};}}
|
|
157
|
+
@keyframes ${Y} {from{opacity: ${b};}to {opacity: 0;}}
|
|
158
|
+
`, document.head.appendChild(e);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
_initializeDragGhost() {
|
|
162
|
+
const t = this._iframe.parentNode;
|
|
163
|
+
let e = t.querySelector(
|
|
164
|
+
"." + m
|
|
165
|
+
);
|
|
166
|
+
e || (e = document.createElement("div"), e.classList.add(m), e.innerText = " ", t.appendChild(e));
|
|
167
|
+
}
|
|
168
|
+
setInstance(t) {
|
|
169
|
+
this._instance = t;
|
|
170
|
+
}
|
|
171
|
+
dragStart(t, e, i = "rml_id") {
|
|
172
|
+
const s = this._iframe.parentNode;
|
|
173
|
+
if (p(s).position !== "relative") {
|
|
174
|
+
console.warn(
|
|
175
|
+
"Parent of iframe should have position relative, otherwise drag-in can not detect the x/y coordinates correctly"
|
|
176
|
+
);
|
|
177
|
+
return;
|
|
178
|
+
}
|
|
179
|
+
this._iframe.style.pointerEvents = "none";
|
|
180
|
+
let o = s.querySelector(
|
|
181
|
+
"." + g
|
|
182
|
+
);
|
|
183
|
+
o || (o = document.createElement("div"), o.classList.add(g), s.appendChild(o)), o.classList.remove(x.DISPLAY_NONE), e.target.getAttribute("draggable") || console.warn(
|
|
184
|
+
`Draggable not detected correctly! Did you add draggable="true" to the element? In Sarafi only 'draggable' is too less`
|
|
185
|
+
);
|
|
186
|
+
const _ = s.querySelector(
|
|
187
|
+
"." + m
|
|
188
|
+
);
|
|
189
|
+
this._currentDrag.event = e;
|
|
190
|
+
const a = e.target.cloneNode();
|
|
191
|
+
a.style.position = "fixed", a.style.pointerEvents = "none", a.style.opacity = "0", a.style.animation = `${T} ${S} ${I}`, a.id = F, a.style.zIndex = "9999", document.body.appendChild(a), this._currentDrag.element = a;
|
|
192
|
+
const h = e.target.getBoundingClientRect();
|
|
193
|
+
this._currentDrag.offset || (this._currentDrag.offset = { x: 0, y: 0 });
|
|
194
|
+
const { clientX: u, clientY: f } = w(
|
|
195
|
+
e,
|
|
196
|
+
this._firefoxDragPosition
|
|
197
|
+
);
|
|
198
|
+
this._currentDrag.offset.x = u - h.left, this._currentDrag.offset.y = f - h.top, a.style.top = f + "px", a.style.left = u + "px", e instanceof DragEvent && e.dataTransfer && e.dataTransfer.setDragImage && e.dataTransfer.setDragImage(_, 0, 0);
|
|
199
|
+
const { x: d, y } = A(
|
|
200
|
+
s,
|
|
201
|
+
this._currentDrag.event || e,
|
|
202
|
+
this._firefoxDragPosition
|
|
203
|
+
), R = Math.max(1, d), X = Math.max(1, y);
|
|
204
|
+
E(this._instance) && this._instance.dragInObject(t, R, X, i);
|
|
205
|
+
}
|
|
206
|
+
dragUpdate(t) {
|
|
207
|
+
var l, _;
|
|
208
|
+
const e = this._iframe.parentNode, { x: i, y: s } = A(e, t, this._firefoxDragPosition);
|
|
209
|
+
if (i === 0 && s === 0)
|
|
210
|
+
return;
|
|
211
|
+
const r = Math.max(1, i), o = Math.max(1, s);
|
|
212
|
+
if (this._currentDrag.element) {
|
|
213
|
+
const { clientX: a, clientY: h } = w(
|
|
214
|
+
t,
|
|
215
|
+
this._firefoxDragPosition
|
|
216
|
+
), u = ((l = this._currentDrag.offset) == null ? void 0 : l.x) || 0, f = ((_ = this._currentDrag.offset) == null ? void 0 : _.y) || 0;
|
|
217
|
+
this._currentDrag.element.style.left = `${a - u}px`, this._currentDrag.element.style.top = `${h - f}px`;
|
|
218
|
+
const d = (this.options.dragInOverlapX || 0) + 1, y = (this.options.dragInOverlapY || 0) + 1;
|
|
219
|
+
r > d && o > y ? this._currentDrag.element.style.animation = `${Y} ${S} ${I}` : this._currentDrag.element.style.animation = `${T} ${S} ${I}`;
|
|
220
|
+
}
|
|
221
|
+
if (!(r === 1 && o === 1) && E(this._instance)) {
|
|
222
|
+
let a = r, h = o;
|
|
223
|
+
if (M(t)) {
|
|
224
|
+
const u = this.options.fingerSize || 0;
|
|
225
|
+
a = Math.max(2, r + u), h = Math.max(2, o - u);
|
|
226
|
+
}
|
|
227
|
+
this._instance.updateDrag(a, h);
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
dragEnd() {
|
|
231
|
+
this._iframe.style.pointerEvents = "all";
|
|
232
|
+
const t = this._iframe.parentNode;
|
|
233
|
+
E(this._instance) && this._instance.dragInObjectEnd(), this._currentDrag.element && document.body.removeChild(this._currentDrag.element), this._currentDrag = {}, this._firefoxDragPosition = { x: 0, y: 0 };
|
|
234
|
+
const e = t.querySelector(
|
|
235
|
+
"." + g
|
|
236
|
+
);
|
|
237
|
+
e && e.classList.add(x.DISPLAY_NONE);
|
|
238
|
+
}
|
|
239
|
+
touchStart(t, e, i = "rml_id") {
|
|
240
|
+
var o, l;
|
|
241
|
+
e.preventDefault();
|
|
242
|
+
const s = (_, a) => {
|
|
243
|
+
this.dragStart(t, a, i);
|
|
244
|
+
}, r = {};
|
|
245
|
+
(o = this.options) != null && o.touchDragDelay && (r.delay = this.options.touchDragDelay), (l = this.options) != null && l.touchDragEpsilon && (r.epsilon = this.options.touchDragEpsilon), this._currentTouch = new z(
|
|
246
|
+
void 0,
|
|
247
|
+
{
|
|
248
|
+
onTouchDragStart: s
|
|
249
|
+
},
|
|
250
|
+
r
|
|
251
|
+
), this._currentTouch.onTouchStart(e);
|
|
252
|
+
}
|
|
253
|
+
touchMove(t) {
|
|
254
|
+
this._currentTouch && this._currentTouch.onTouchMove(t), this._currentDrag.event && this.dragUpdate(t);
|
|
255
|
+
}
|
|
256
|
+
touchEnd() {
|
|
257
|
+
this._currentTouch && this._currentTouch.onTouchEnd(), this._currentTouch = null, this.dragEnd();
|
|
258
|
+
}
|
|
259
|
+
dispose() {
|
|
260
|
+
document.removeEventListener("dragover", this._firefoxFallback);
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
export {
|
|
264
|
+
U as DragIn
|
|
265
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
var O=Object.defineProperty,P=(i,t,e)=>t in i?O(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e,c=(i,t,e)=>P(i,typeof t!="symbol"?t+"":t,e);class N{constructor(t=16){c(this,"_computedStyleCache",new Map),c(this,"_maxLifetime",16),c(this,"_cacheCleanInterval",null),this._maxLifetime=t}get(t){const e=this._computedStyleCache.get(t),n=Date.now();if(e&&n-e.updated<this._maxLifetime)return e.style;const o=getComputedStyle(t);return this._computedStyleCache.set(t,{style:o,updated:n}),this._cacheCleanInterval||(this._cacheCleanInterval=setInterval(()=>this._cleanUpCache,Math.max(this._maxLifetime*1e3,5e3))),o}_cleanUpCache(){const t=Date.now();for(const[e,{updated:n}]of this._computedStyleCache.entries())t-n>=this._maxLifetime&&this._computedStyleCache.delete(e);this._computedStyleCache.size===0&&this._cacheCleanInterval&&(clearInterval(this._cacheCleanInterval),this._cacheCleanInterval=null)}}const E=i=>window.TouchEvent&&i instanceof window.TouchEvent;let D;const f=i=>(D||(D=new N),D.get(i)),C=(i,t,e)=>{const n=parseFloat(i),o=window.devicePixelRatio||1;if(t==="px")return n;if(t==="%"){const a=e===document.documentElement?window.innerWidth:e.offsetWidth;return n/100*a}if(t==="rem"){const a=parseFloat(f(document.documentElement).fontSize);return n*a}if(t==="em"){const a=parseFloat(f(e).fontSize);return n*a}if(t==="vh"||t==="vw"||t==="vmin"||t==="vmax"){const a={vh:window.innerHeight,vw:window.innerWidth,vmin:Math.min(window.innerWidth,window.innerHeight),vmax:Math.max(window.innerWidth,window.innerHeight)};return n/100*a[t]}const s={cm:37.7952755906,mm:3.77952755906,in:96};return t in s?n*s[t]*o:(console.warn("Unable to determine coordinates for drag-in. Therefore drag-in is not possible. Check the CSS that positions the iframe of Roomle"),0)},I=(i,t,e={x:0,y:0})=>{const n=i.getBoundingClientRect(),o=f(i).transform;let s=0,a=0;if(o!=="none"){const _=/translate\(\s*([-+]?\d*\.?\d+|\d+)(px|%)?,?\s*([-+]?\d*\.?\d+|\d+)?(px|%)?\s*\)/,d=o.match(_);d&&(s=C(d[1],d[2],i),a=C(d[3],d[4],i))}const{clientX:r,clientY:l}=v(t,e),h=r-n.left-s+i.scrollLeft,u=l-n.top-a+i.scrollTop;return{x:h,y:u}},v=(i,t)=>{const{clientX:e,clientY:n}=E(i)?k(i):i,o=e||t.x,s=n||t.y;return{clientX:o,clientY:s}},k=i=>{if(i.touches.length){let{clientX:e,clientY:n}=i.touches[0];if(i.touches.length>1){const o=i.touches[1],s=o.clientX,a=o.clientY;e=(e+s)/2,n=(n+a)/2}return{clientX:e,clientY:n}}const t=i.changedTouches[0];return{clientX:t.clientX,clientY:t.clientY}},$=500,L=10;class z{constructor(t,{onTouchDragStart:e},n={}){c(this,"_touchDragTimeOut"),c(this,"_onTouchDragStart"),c(this,"_payload",null),c(this,"_delay",$),c(this,"_firstTouch",null),c(this,"_lastTouch",null),c(this,"_epsilon",L),this._payload=t,this._onTouchDragStart=e,this._delay=n.delay||$,this._epsilon=n.epsilon||L}onTouchStart(t){var e;!t||!((e=t?.touches)!=null&&e.length)||this._touchDragTimeOut||(this._firstTouch=t.touches[t.touches.length-1],this._touchDragTimeOut=setTimeout(()=>{this._clearTimeout(),this._lastTouch||(this._lastTouch=t.touches[0]),this._checkXDistance(t)()},this._delay))}onTouchEnd(){this._resetTouches()}onTouchMove(t){var e;!t||!((e=t?.touches)!=null&&e.length)||(this._lastTouch=t.touches[0])}_clearTimeout(){this._touchDragTimeOut&&(clearTimeout(this._touchDragTimeOut),this._touchDragTimeOut=null)}_resetTouches(){this._clearTimeout(),this._lastTouch=null,this._firstTouch=null,this._payload=null}_checkXDistance(t){return()=>{if(!this._firstTouch||!this._lastTouch)return;let e=!1;e=Math.abs(this._firstTouch.clientX-this._lastTouch.clientX)<this._epsilon,e&&(this._onTouchDragStart(this._payload,t),this._resetTouches())}}}const X="rml-drag-in-styles",F="rml-drag-in-drag-element",g="rml-drag-in-overlay",m="rml-drag-in-drag-ghost",x="rml-drag-in-fade-in",Y="rml-drag-in-fade-out",T={DISPLAY_NONE:"rml-display-none"},M=.5,w="250ms",S="forwards",b=i=>i?!0:(console.warn("No instance set, cancel drag-in"),!1);class A{constructor(t){c(this,"_iframe"),c(this,"_currentDrag",{}),c(this,"_currentTouch",null),c(this,"_firefoxDragPosition",{x:0,y:0}),c(this,"_instance",null),c(this,"options",{}),c(this,"_firefoxFallback",e=>{if(!this._currentDrag.event)return;const n=e||window.event;this._firefoxDragPosition.x=n.pageX||0,this._firefoxDragPosition.y=n.pageY||0}),this._iframe=t,this._injectStyles(),this._initializeDragGhost(),this._firefoxFallback=this._firefoxFallback.bind(this),document.addEventListener("dragover",this._firefoxFallback)}_injectStyles(){if(!document.getElementById(X)){const t=document.createElement("style");t.type="text/css",t.id=X,t.innerHTML=`
|
|
2
|
+
.${T.DISPLAY_NONE}{display:none}
|
|
3
|
+
.${g}{position:absolute;top:0;left:0;width:100%;height:100%;z-index:999;}
|
|
4
|
+
.${m}{position:absolute;top:0;left:0;width:1px;height:1px;z-index:999;pointer-events:none;background-color:transparent;}
|
|
5
|
+
@keyframes ${x} {from{opacity: 0;}to {opacity: ${M};}}
|
|
6
|
+
@keyframes ${Y} {from{opacity: ${M};}to {opacity: 0;}}
|
|
7
|
+
`,document.head.appendChild(t)}}_initializeDragGhost(){const t=this._iframe.parentNode;let e=t.querySelector("."+m);e||(e=document.createElement("div"),e.classList.add(m),e.innerText=" ",t.appendChild(e))}setInstance(t){this._instance=t}dragStart(t,e,n="rml_id"){const o=this._iframe.parentNode;if(f(o).position!=="relative"){console.warn("Parent of iframe should have position relative, otherwise drag-in can not detect the x/y coordinates correctly");return}this._iframe.style.pointerEvents="none";let s=o.querySelector("."+g);s||(s=document.createElement("div"),s.classList.add(g),o.appendChild(s)),s.classList.remove(T.DISPLAY_NONE),e.target.getAttribute("draggable")||console.warn(`Draggable not detected correctly! Did you add draggable="true" to the element? In Sarafi only 'draggable' is too less`);const a=o.querySelector("."+m);this._currentDrag.event=e;const r=e.target.cloneNode();r.style.position="fixed",r.style.pointerEvents="none",r.style.opacity="0",r.style.animation=`${x} ${w} ${S}`,r.id=F,r.style.zIndex="9999",document.body.appendChild(r),this._currentDrag.element=r;const l=e.target.getBoundingClientRect();this._currentDrag.offset||(this._currentDrag.offset={x:0,y:0});const{clientX:h,clientY:u}=v(e,this._firefoxDragPosition);this._currentDrag.offset.x=h-l.left,this._currentDrag.offset.y=u-l.top,r.style.top=u+"px",r.style.left=h+"px",e instanceof DragEvent&&e.dataTransfer&&e.dataTransfer.setDragImage&&e.dataTransfer.setDragImage(a,0,0);const{x:_,y:d}=I(o,this._currentDrag.event||e,this._firefoxDragPosition),p=Math.max(1,_),y=Math.max(1,d);b(this._instance)&&this._instance.dragInObject(t,p,y,n)}dragUpdate(t){var e,n;const o=this._iframe.parentNode,{x:s,y:a}=I(o,t,this._firefoxDragPosition);if(s===0&&a===0)return;const r=Math.max(1,s),l=Math.max(1,a);if(this._currentDrag.element){const{clientX:h,clientY:u}=v(t,this._firefoxDragPosition),_=((e=this._currentDrag.offset)==null?void 0:e.x)||0,d=((n=this._currentDrag.offset)==null?void 0:n.y)||0;this._currentDrag.element.style.left=`${h-_}px`,this._currentDrag.element.style.top=`${u-d}px`;const p=(this.options.dragInOverlapX||0)+1,y=(this.options.dragInOverlapY||0)+1;r>p&&l>y?this._currentDrag.element.style.animation=`${Y} ${w} ${S}`:this._currentDrag.element.style.animation=`${x} ${w} ${S}`}if(!(r===1&&l===1)&&b(this._instance)){let h=r,u=l;if(E(t)){const _=this.options.fingerSize||0;h=Math.max(2,r+_),u=Math.max(2,l-_)}this._instance.updateDrag(h,u)}}dragEnd(){this._iframe.style.pointerEvents="all";const t=this._iframe.parentNode;b(this._instance)&&this._instance.dragInObjectEnd(),this._currentDrag.element&&document.body.removeChild(this._currentDrag.element),this._currentDrag={},this._firefoxDragPosition={x:0,y:0};const e=t.querySelector("."+g);e&&e.classList.add(T.DISPLAY_NONE)}touchStart(t,e,n="rml_id"){var o,s;e.preventDefault();const a=(l,h)=>{this.dragStart(t,h,n)},r={};(o=this.options)!=null&&o.touchDragDelay&&(r.delay=this.options.touchDragDelay),(s=this.options)!=null&&s.touchDragEpsilon&&(r.epsilon=this.options.touchDragEpsilon),this._currentTouch=new z(void 0,{onTouchDragStart:a},r),this._currentTouch.onTouchStart(e)}touchMove(t){this._currentTouch&&this._currentTouch.onTouchMove(t),this._currentDrag.event&&this.dragUpdate(t)}touchEnd(){this._currentTouch&&this._currentTouch.onTouchEnd(),this._currentTouch=null,this.dragEnd()}dispose(){document.removeEventListener("dragover",this._firefoxFallback)}}export{A as DragIn};
|
package/index.d.ts
CHANGED
|
@@ -3,21 +3,59 @@ import { default as default_3 } from '@roomle/web-sdk/lib/definitions/configurat
|
|
|
3
3
|
import { default as default_4 } from '@roomle/web-sdk/lib/definitions/configurator-core/src/roomle-configurator';
|
|
4
4
|
import { default as default_5 } from '@roomle/web-sdk/lib/definitions/glb-viewer-core/src/roomle-glb-viewer';
|
|
5
5
|
import { ExposedAnalyticsCallbacks } from '../../../src/configurator/embedding/exposed-analytics-callbacks';
|
|
6
|
-
import { ExposedApi } from '
|
|
6
|
+
import { ExposedApi } from '../../../../src/configurator/embedding/exposed-api';
|
|
7
|
+
import { ExposedApi as ExposedApi_2 } from '../../../src/configurator/embedding/exposed-api';
|
|
7
8
|
import { GlobalCallback } from '@roomle/web-sdk/lib/definitions/common-core/src/services/global-callback';
|
|
9
|
+
import { RapiId } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
|
|
8
10
|
import { UiInitData } from '../../../src/configurator/embedding/types';
|
|
9
11
|
|
|
12
|
+
declare interface AvailablePlugins {
|
|
13
|
+
dragIn?: DragIn;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
declare class DragIn {
|
|
17
|
+
private _iframe;
|
|
18
|
+
private _currentDrag;
|
|
19
|
+
private _currentTouch;
|
|
20
|
+
private _firefoxDragPosition;
|
|
21
|
+
private _instance;
|
|
22
|
+
options: {
|
|
23
|
+
dragInOverlapX?: number;
|
|
24
|
+
dragInOverlapY?: number;
|
|
25
|
+
fingerSize?: number;
|
|
26
|
+
touchDragDelay?: number;
|
|
27
|
+
touchDragEpsilon?: number;
|
|
28
|
+
};
|
|
29
|
+
private _injectStyles;
|
|
30
|
+
private _initializeDragGhost;
|
|
31
|
+
constructor(iframe: HTMLIFrameElement);
|
|
32
|
+
setInstance(instance: ExposedApi): void;
|
|
33
|
+
private _firefoxFallback;
|
|
34
|
+
dragStart(id: RapiId, event: DragEvent | TouchEvent, type?: string): void;
|
|
35
|
+
dragUpdate(event: DragEvent | TouchEvent): void;
|
|
36
|
+
dragEnd(): void;
|
|
37
|
+
touchStart(id: RapiId, event: TouchEvent, type?: string): void;
|
|
38
|
+
touchMove(event: TouchEvent): void;
|
|
39
|
+
touchEnd(): void;
|
|
40
|
+
dispose(): void;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare type PluginDefinitions = Array<keyof AvailablePlugins | {
|
|
44
|
+
name: keyof AvailablePlugins;
|
|
45
|
+
loader: () => Promise<any>;
|
|
46
|
+
}>;
|
|
47
|
+
|
|
10
48
|
declare type RoomleConfiguratorApi = RoomleEmbeddingApi<default_4, default_3>;
|
|
11
49
|
|
|
12
50
|
declare class RoomleEmbeddingApi<SdkType, SdkCallbacks> implements RoomleEmbeddingApiKeys {
|
|
13
|
-
static createPlanner(configuratorId: string, container: HTMLElement, initData: UiInitData): Promise<RoomlePlannerApi>;
|
|
51
|
+
static createPlanner(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomlePlannerApi>;
|
|
14
52
|
/**
|
|
15
53
|
* Method to create a new instance of a Roomle Configurator
|
|
16
54
|
* @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
|
|
17
55
|
* @param container DOM container in which the configurator should be placed
|
|
18
56
|
* @param initData settings with which the configurator should be started
|
|
19
57
|
*/
|
|
20
|
-
static createConfigurator(configuratorId: string, container: HTMLElement, initData: UiInitData): Promise<RoomleConfiguratorApi>;
|
|
58
|
+
static createConfigurator(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomleConfiguratorApi>;
|
|
21
59
|
/**
|
|
22
60
|
* Method to create a new instance of a Roomle Configurator
|
|
23
61
|
* @deprecated please use "createConfigurator"
|
|
@@ -25,29 +63,32 @@ declare class RoomleEmbeddingApi<SdkType, SdkCallbacks> implements RoomleEmbeddi
|
|
|
25
63
|
* @param container DOM container in which the configurator should be placed
|
|
26
64
|
* @param initData settings with which the configurator should be started
|
|
27
65
|
*/
|
|
28
|
-
static create(configuratorId: string, container: HTMLElement, initData: UiInitData): Promise<RoomleConfiguratorApi>;
|
|
66
|
+
static create(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins: PluginDefinitions): Promise<RoomleConfiguratorApi>;
|
|
29
67
|
/**
|
|
30
68
|
* Method to create a new instance of a Roomle Viewer
|
|
31
69
|
* @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
|
|
32
70
|
* @param container DOM container in which the configurator should be placed
|
|
33
71
|
* @param initData settings with which the configurator should be started
|
|
34
72
|
*/
|
|
35
|
-
static createViewer(configuratorId: string, container: HTMLElement, initData: UiInitData): Promise<RoomleViewerApi>;
|
|
73
|
+
static createViewer(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomleViewerApi>;
|
|
36
74
|
private static _create;
|
|
37
|
-
ui:
|
|
75
|
+
ui: ExposedApi_2;
|
|
38
76
|
extended: SdkType;
|
|
77
|
+
configurator: default_4;
|
|
39
78
|
analytics: {
|
|
40
79
|
callbacks: ExposedAnalyticsCallbacks;
|
|
41
80
|
};
|
|
42
81
|
global: {
|
|
43
82
|
callbacks: GlobalCallback;
|
|
44
83
|
};
|
|
84
|
+
plugins: AvailablePlugins;
|
|
45
85
|
private _waitForIframe;
|
|
46
86
|
private _container;
|
|
47
87
|
private _messageHandler;
|
|
48
88
|
private _configuratorSettings;
|
|
49
89
|
private _initData;
|
|
50
90
|
private _iframe;
|
|
91
|
+
pluginsLoaded: Array<Promise<void>>;
|
|
51
92
|
private constructor();
|
|
52
93
|
teardown(): void;
|
|
53
94
|
private _createIframe;
|
|
@@ -60,6 +101,7 @@ export default RoomleEmbeddingApi;
|
|
|
60
101
|
|
|
61
102
|
declare interface RoomleEmbeddingApiKeys {
|
|
62
103
|
extended: any;
|
|
104
|
+
configurator: any;
|
|
63
105
|
ui: any;
|
|
64
106
|
analytics: any;
|
|
65
107
|
global: any;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roomle/embedding-lib",
|
|
3
|
-
"version": "5.0
|
|
3
|
+
"version": "5.1.0-alpha.2",
|
|
4
4
|
"description": "This is a small library which can be used to communicate with the Roomle Configurator",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./roomle-embedding-lib.umd.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"npm": "8.3.1"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@roomle/web-sdk": "2.83.0-alpha.
|
|
32
|
+
"@roomle/web-sdk": "2.83.0-alpha.5"
|
|
33
33
|
},
|
|
34
34
|
"repository": {
|
|
35
35
|
"type": "git",
|