@roomle/embedding-lib 5.1.0-debug.1 → 5.1.0-debug.3
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 -2
- package/drag-in-CzvP9xkx.mjs +7 -0
- package/drag-in-DySSXLqX.mjs +265 -0
- package/index.d.ts +14 -4
- package/package.json +2 -2
- package/roomle-embedding-lib.es.js +80 -64
- package/roomle-embedding-lib.es.min.js +4 -4
- package/roomle-embedding-lib.umd.js +14 -14
- package/roomle-embedding-lib.umd.min.js +11 -11
- package/drag-in-C2fEQF9W.mjs +0 -7
- package/drag-in-CAakt8yw.mjs +0 -250
package/.releaserc.json
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
-
## [5.1.0-debug.
|
|
1
|
+
## [5.1.0-debug.3](https://github.com/roomle-dev/roomle-ui/compare/embedding-lib-v5.1.0-debug.2...embedding-lib-v5.1.0-debug.3) (2024-08-12)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* release from cd/embedding-pre-release ([4e547d5](https://github.com/roomle-dev/roomle-ui/commit/4e547d5b29d33578ab9eca1221a469d4c5a100b6))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* correct sign ([fc1db6c](https://github.com/roomle-dev/roomle-ui/commit/fc1db6c91bcfe754c5d2cd39b8c2dbdb2133c48e))
|
|
12
|
+
* prevent key events on slider to enable shifting the scene ([ebed576](https://github.com/roomle-dev/roomle-ui/commit/ebed576d0903cda0963ef0e1aca8e29a314c8ac7))
|
|
13
|
+
* run pre release of embedding ([6d8849e](https://github.com/roomle-dev/roomle-ui/commit/6d8849e6bc8a6a081c7be104f1910e23396a655d))
|
|
@@ -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,r=(i,t,e)=>P(i,typeof t!="symbol"?t+"":t,e);class N{constructor(t=16){r(this,"_computedStyleCache",new Map),r(this,"_maxLifetime",16),r(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 s=getComputedStyle(t);return this._computedStyleCache.set(t,{style:s,updated:n}),this._cacheCleanInterval||(this._cacheCleanInterval=setInterval(()=>this._cleanUpCache,Math.max(this._maxLifetime*1e3,5e3))),s}_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 b=i=>window.TouchEvent&&i instanceof window.TouchEvent;let y;const f=i=>(y||(y=new N),y.get(i)),E=(i,t,e)=>{const n=parseFloat(i),s=window.devicePixelRatio||1;if(t==="px")return n;if(t==="%"){const o=e===document.documentElement?window.innerWidth:e.offsetWidth;return n/100*o}if(t==="rem"){const o=parseFloat(f(document.documentElement).fontSize);return n*o}if(t==="em"){const o=parseFloat(f(e).fontSize);return n*o}if(t==="vh"||t==="vw"||t==="vmin"||t==="vmax"){const o={vh:window.innerHeight,vw:window.innerWidth,vmin:Math.min(window.innerWidth,window.innerHeight),vmax:Math.max(window.innerWidth,window.innerHeight)};return n/100*o[t]}const a={cm:37.7952755906,mm:3.77952755906,in:96};return t in a?n*a[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)},C=(i,t,e={x:0,y:0})=>{const n=i.getBoundingClientRect(),s=f(i).transform;let a=0,o=0;if(s!=="none"){const _=/translate\(\s*([-+]?\d*\.?\d+|\d+)(px|%)?,?\s*([-+]?\d*\.?\d+|\d+)?(px|%)?\s*\)/,u=s.match(_);u&&(a=E(u[1],u[2],i),o=E(u[3],u[4],i))}const{clientX:h,clientY:c}=D(t,e),l=h-n.left-a+i.scrollLeft,d=c-n.top-o+i.scrollTop;return{x:l,y:d}},D=(i,t)=>{const{clientX:e,clientY:n}=b(i)?k(i):i,s=e||t.x,a=n||t.y;return{clientX:s,clientY:a}},k=i=>{if(i.touches.length){let{clientX:e,clientY:n}=i.touches[0];if(i.touches.length>1){const s=i.touches[1],a=s.clientX,o=s.clientY;e=(e+a)/2,n=(n+o)/2}return{clientX:e,clientY:n}}const t=i.changedTouches[0];return{clientX:t.clientX,clientY:t.clientY}},I=500,$=10;class z{constructor(t,{onTouchDragStart:e},n={}){r(this,"_touchDragTimeOut"),r(this,"_onTouchDragStart"),r(this,"_payload",null),r(this,"_delay",I),r(this,"_firstTouch",null),r(this,"_lastTouch",null),r(this,"_epsilon",$),this._payload=t,this._onTouchDragStart=e,this._delay=n.delay||I,this._epsilon=n.epsilon||$}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 L="rml-drag-in-styles",F="rml-drag-in-drag-element",g="rml-drag-in-overlay",m="rml-drag-in-drag-ghost",v="rml-drag-in-fade-in",X="rml-drag-in-fade-out",x={DISPLAY_NONE:"rml-display-none"},Y=.5,T="250ms",w="forwards",S=i=>i?!0:(console.warn("No instance set, cancel drag-in"),!1);class A{constructor(t){r(this,"_iframe"),r(this,"_currentDrag",{}),r(this,"_currentTouch",null),r(this,"_firefoxDragPosition",{x:0,y:0}),r(this,"_instance",null),r(this,"options",{}),r(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(L)){const t=document.createElement("style");t.type="text/css",t.id=L,t.innerHTML=`
|
|
2
|
+
.${x.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 ${v} {from{opacity: 0;}to {opacity: ${Y};}}
|
|
6
|
+
@keyframes ${X} {from{opacity: ${Y};}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){const n=this._iframe.parentNode;if(f(n).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=n.querySelector("."+g);s||(s=document.createElement("div"),s.classList.add(g),n.appendChild(s)),s.classList.remove(x.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=n.querySelector("."+m);this._currentDrag.event=e;const o=e.target.cloneNode();o.style.position="fixed",o.style.pointerEvents="none",o.style.opacity="0",o.style.animation=`${v} ${T} ${w}`,o.id=F,o.style.zIndex="9999",document.body.appendChild(o),this._currentDrag.element=o;const h=e.target.getBoundingClientRect();this._currentDrag.offset||(this._currentDrag.offset={x:0,y:0});const{clientX:c,clientY:l}=D(e,this._firefoxDragPosition);this._currentDrag.offset.x=c-h.left,this._currentDrag.offset.y=l-h.top,o.style.top=l+"px",o.style.left=c+"px",e instanceof DragEvent&&e.dataTransfer&&e.dataTransfer.setDragImage&&e.dataTransfer.setDragImage(a,0,0);const{x:d,y:_}=C(n,this._currentDrag.event||e,this._firefoxDragPosition),u=Math.max(1,d),p=Math.max(1,_);S(this._instance)&&this._instance.dragInObject(t,u,p)}dragUpdate(t){var e,n;const s=this._iframe.parentNode,{x:a,y:o}=C(s,t,this._firefoxDragPosition);if(a===0&&o===0)return;const h=Math.max(1,a),c=Math.max(1,o);if(this._currentDrag.element){const{clientX:l,clientY:d}=D(t,this._firefoxDragPosition),_=((e=this._currentDrag.offset)==null?void 0:e.x)||0,u=((n=this._currentDrag.offset)==null?void 0:n.y)||0;this._currentDrag.element.style.left=`${l-_}px`,this._currentDrag.element.style.top=`${d-u}px`;const p=(this.options.dragInOverlapX||0)+1,M=(this.options.dragInOverlapY||0)+1;h>p&&c>M?this._currentDrag.element.style.animation=`${X} ${T} ${w}`:this._currentDrag.element.style.animation=`${v} ${T} ${w}`}if(!(h===1&&c===1)&&S(this._instance)){let l=h,d=c;if(b(t)){const _=this.options.fingerSize||0;l=Math.max(2,h+_),d=Math.max(2,c-_)}this._instance.updateDrag(l,d)}}dragEnd(){this._iframe.style.pointerEvents="all";const t=this._iframe.parentNode;S(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(x.DISPLAY_NONE)}touchStart(t,e){var n,s;e.preventDefault();const a=(h,c)=>{this.dragStart(t,c)},o={};(n=this.options)!=null&&n.touchDragDelay&&(o.delay=this.options.touchDragDelay),(s=this.options)!=null&&s.touchDragEpsilon&&(o.epsilon=this.options.touchDragEpsilon),this._currentTouch=new z(void 0,{onTouchDragStart:a},o),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};
|
|
@@ -0,0 +1,265 @@
|
|
|
1
|
+
var X = Object.defineProperty;
|
|
2
|
+
var v = (i, t, e) => t in i ? X(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
|
|
3
|
+
var a = (i, t, e) => v(i, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
class P {
|
|
5
|
+
constructor(t = 16) {
|
|
6
|
+
a(this, "_computedStyleCache", /* @__PURE__ */ new Map());
|
|
7
|
+
a(this, "_maxLifetime", 16);
|
|
8
|
+
a(this, "_cacheCleanInterval", null);
|
|
9
|
+
this._maxLifetime = t;
|
|
10
|
+
}
|
|
11
|
+
get(t) {
|
|
12
|
+
const e = this._computedStyleCache.get(t), n = Date.now();
|
|
13
|
+
if (e && n - e.updated < this._maxLifetime)
|
|
14
|
+
return e.style;
|
|
15
|
+
const r = getComputedStyle(t);
|
|
16
|
+
return this._computedStyleCache.set(t, { style: r, updated: n }), this._cacheCleanInterval || (this._cacheCleanInterval = setInterval(
|
|
17
|
+
() => this._cleanUpCache,
|
|
18
|
+
Math.max(this._maxLifetime * 1e3, 5e3)
|
|
19
|
+
)), r;
|
|
20
|
+
}
|
|
21
|
+
_cleanUpCache() {
|
|
22
|
+
const t = Date.now();
|
|
23
|
+
for (const [e, { updated: n }] of this._computedStyleCache.entries())
|
|
24
|
+
t - n >= this._maxLifetime && this._computedStyleCache.delete(e);
|
|
25
|
+
this._computedStyleCache.size === 0 && this._cacheCleanInterval && (clearInterval(this._cacheCleanInterval), this._cacheCleanInterval = null);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
const M = (i) => window.TouchEvent && i instanceof window.TouchEvent;
|
|
29
|
+
let D;
|
|
30
|
+
const p = (i) => (D || (D = new P()), D.get(i)), C = (i, t, e) => {
|
|
31
|
+
const n = parseFloat(i), r = window.devicePixelRatio || 1;
|
|
32
|
+
if (t === "px")
|
|
33
|
+
return n;
|
|
34
|
+
if (t === "%") {
|
|
35
|
+
const s = e === document.documentElement ? window.innerWidth : e.offsetWidth;
|
|
36
|
+
return n / 100 * s;
|
|
37
|
+
}
|
|
38
|
+
if (t === "rem") {
|
|
39
|
+
const s = parseFloat(
|
|
40
|
+
p(document.documentElement).fontSize
|
|
41
|
+
);
|
|
42
|
+
return n * s;
|
|
43
|
+
}
|
|
44
|
+
if (t === "em") {
|
|
45
|
+
const s = parseFloat(
|
|
46
|
+
p(e).fontSize
|
|
47
|
+
);
|
|
48
|
+
return n * s;
|
|
49
|
+
}
|
|
50
|
+
if (t === "vh" || t === "vw" || t === "vmin" || t === "vmax") {
|
|
51
|
+
const s = {
|
|
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 n / 100 * s[t];
|
|
58
|
+
}
|
|
59
|
+
const o = {
|
|
60
|
+
cm: 37.7952755906,
|
|
61
|
+
mm: 3.77952755906,
|
|
62
|
+
in: 96
|
|
63
|
+
};
|
|
64
|
+
return t in o ? n * o[t] * r : (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 = (i, t, e = { x: 0, y: 0 }) => {
|
|
66
|
+
const n = i.getBoundingClientRect(), o = p(i).transform;
|
|
67
|
+
let s = 0, _ = 0;
|
|
68
|
+
if (o !== "none") {
|
|
69
|
+
const f = /translate\(\s*([-+]?\d*\.?\d+|\d+)(px|%)?,?\s*([-+]?\d*\.?\d+|\d+)?(px|%)?\s*\)/, d = o.match(f);
|
|
70
|
+
d && (s = C(d[1], d[2], i), _ = C(d[3], d[4], i));
|
|
71
|
+
}
|
|
72
|
+
const { clientX: c, clientY: l } = w(t, e), h = c - n.left - s + i.scrollLeft, u = l - n.top - _ + i.scrollTop;
|
|
73
|
+
return { x: h, y: u };
|
|
74
|
+
}, w = (i, t) => {
|
|
75
|
+
const { clientX: e, clientY: n } = M(i) ? $(i) : i, r = e || t.x, o = n || t.y;
|
|
76
|
+
return { clientX: r, clientY: o };
|
|
77
|
+
}, $ = (i) => {
|
|
78
|
+
if (i.touches.length) {
|
|
79
|
+
let { clientX: e, clientY: n } = i.touches[0];
|
|
80
|
+
if (i.touches.length > 1) {
|
|
81
|
+
const r = i.touches[1], o = r.clientX, s = r.clientY;
|
|
82
|
+
e = (e + o) / 2, n = (n + s) / 2;
|
|
83
|
+
}
|
|
84
|
+
return { clientX: e, clientY: n };
|
|
85
|
+
}
|
|
86
|
+
const t = i.changedTouches[0];
|
|
87
|
+
return { clientX: t.clientX, clientY: t.clientY };
|
|
88
|
+
}, N = 500, L = 10;
|
|
89
|
+
class G {
|
|
90
|
+
constructor(t, { onTouchDragStart: e }, n = {}) {
|
|
91
|
+
a(this, "_touchDragTimeOut");
|
|
92
|
+
a(this, "_onTouchDragStart");
|
|
93
|
+
a(this, "_payload", null);
|
|
94
|
+
a(this, "_delay", N);
|
|
95
|
+
a(this, "_firstTouch", null);
|
|
96
|
+
a(this, "_lastTouch", null);
|
|
97
|
+
a(this, "_epsilon", L);
|
|
98
|
+
this._payload = t, this._onTouchDragStart = e, this._delay = n.delay || N, this._epsilon = n.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", z = "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 = (i) => i ? !0 : (console.warn("No instance set, cancel drag-in"), !1);
|
|
133
|
+
class k {
|
|
134
|
+
constructor(t) {
|
|
135
|
+
a(this, "_iframe");
|
|
136
|
+
a(this, "_currentDrag", {});
|
|
137
|
+
a(this, "_currentTouch", null);
|
|
138
|
+
a(this, "_firefoxDragPosition", { x: 0, y: 0 });
|
|
139
|
+
a(this, "_instance", null);
|
|
140
|
+
a(this, "options", {});
|
|
141
|
+
a(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) {
|
|
172
|
+
const n = this._iframe.parentNode;
|
|
173
|
+
if (p(n).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 = n.querySelector(
|
|
181
|
+
"." + g
|
|
182
|
+
);
|
|
183
|
+
o || (o = document.createElement("div"), o.classList.add(g), n.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 _ = n.querySelector(
|
|
187
|
+
"." + m
|
|
188
|
+
);
|
|
189
|
+
this._currentDrag.event = e;
|
|
190
|
+
const c = e.target.cloneNode();
|
|
191
|
+
c.style.position = "fixed", c.style.pointerEvents = "none", c.style.opacity = "0", c.style.animation = `${T} ${S} ${I}`, c.id = z, c.style.zIndex = "9999", document.body.appendChild(c), this._currentDrag.element = c;
|
|
192
|
+
const l = e.target.getBoundingClientRect();
|
|
193
|
+
this._currentDrag.offset || (this._currentDrag.offset = { x: 0, y: 0 });
|
|
194
|
+
const { clientX: h, clientY: u } = w(
|
|
195
|
+
e,
|
|
196
|
+
this._firefoxDragPosition
|
|
197
|
+
);
|
|
198
|
+
this._currentDrag.offset.x = h - l.left, this._currentDrag.offset.y = u - l.top, c.style.top = u + "px", c.style.left = h + "px", e instanceof DragEvent && e.dataTransfer && e.dataTransfer.setDragImage && e.dataTransfer.setDragImage(_, 0, 0);
|
|
199
|
+
const { x: f, y: d } = A(
|
|
200
|
+
n,
|
|
201
|
+
this._currentDrag.event || e,
|
|
202
|
+
this._firefoxDragPosition
|
|
203
|
+
), y = Math.max(1, f), R = Math.max(1, d);
|
|
204
|
+
E(this._instance) && this._instance.dragInObject(t, y, R);
|
|
205
|
+
}
|
|
206
|
+
dragUpdate(t) {
|
|
207
|
+
var _, c;
|
|
208
|
+
const e = this._iframe.parentNode, { x: n, y: r } = A(e, t, this._firefoxDragPosition);
|
|
209
|
+
if (n === 0 && r === 0)
|
|
210
|
+
return;
|
|
211
|
+
const o = Math.max(1, n), s = Math.max(1, r);
|
|
212
|
+
if (this._currentDrag.element) {
|
|
213
|
+
const { clientX: l, clientY: h } = w(
|
|
214
|
+
t,
|
|
215
|
+
this._firefoxDragPosition
|
|
216
|
+
), u = ((_ = this._currentDrag.offset) == null ? void 0 : _.x) || 0, f = ((c = this._currentDrag.offset) == null ? void 0 : c.y) || 0;
|
|
217
|
+
this._currentDrag.element.style.left = `${l - 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
|
+
o > d && s > y ? this._currentDrag.element.style.animation = `${Y} ${S} ${I}` : this._currentDrag.element.style.animation = `${T} ${S} ${I}`;
|
|
220
|
+
}
|
|
221
|
+
if (!(o === 1 && s === 1) && E(this._instance)) {
|
|
222
|
+
let l = o, h = s;
|
|
223
|
+
if (M(t)) {
|
|
224
|
+
const u = this.options.fingerSize || 0;
|
|
225
|
+
l = Math.max(2, o + u), h = Math.max(2, s - u);
|
|
226
|
+
}
|
|
227
|
+
this._instance.updateDrag(l, 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) {
|
|
240
|
+
var o, s;
|
|
241
|
+
e.preventDefault();
|
|
242
|
+
const n = (_, c) => {
|
|
243
|
+
this.dragStart(t, c);
|
|
244
|
+
}, r = {};
|
|
245
|
+
(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 G(
|
|
246
|
+
void 0,
|
|
247
|
+
{
|
|
248
|
+
onTouchDragStart: n
|
|
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
|
+
k as DragIn
|
|
265
|
+
};
|
package/index.d.ts
CHANGED
|
@@ -22,7 +22,12 @@ declare class DragIn {
|
|
|
22
22
|
options: {
|
|
23
23
|
dragInOverlapX?: number;
|
|
24
24
|
dragInOverlapY?: number;
|
|
25
|
+
fingerSize?: number;
|
|
26
|
+
touchDragDelay?: number;
|
|
27
|
+
touchDragEpsilon?: number;
|
|
25
28
|
};
|
|
29
|
+
private _injectStyles;
|
|
30
|
+
private _initializeDragGhost;
|
|
26
31
|
constructor(iframe: HTMLIFrameElement);
|
|
27
32
|
setInstance(instance: ExposedApi): void;
|
|
28
33
|
private _firefoxFallback;
|
|
@@ -35,17 +40,22 @@ declare class DragIn {
|
|
|
35
40
|
dispose(): void;
|
|
36
41
|
}
|
|
37
42
|
|
|
43
|
+
declare type PluginDefinitions = Array<keyof AvailablePlugins | {
|
|
44
|
+
name: keyof AvailablePlugins;
|
|
45
|
+
loader: () => Promise<any>;
|
|
46
|
+
}>;
|
|
47
|
+
|
|
38
48
|
declare type RoomleConfiguratorApi = RoomleEmbeddingApi<default_4, default_3>;
|
|
39
49
|
|
|
40
50
|
declare class RoomleEmbeddingApi<SdkType, SdkCallbacks> implements RoomleEmbeddingApiKeys {
|
|
41
|
-
static createPlanner(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?:
|
|
51
|
+
static createPlanner(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomlePlannerApi>;
|
|
42
52
|
/**
|
|
43
53
|
* Method to create a new instance of a Roomle Configurator
|
|
44
54
|
* @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
|
|
45
55
|
* @param container DOM container in which the configurator should be placed
|
|
46
56
|
* @param initData settings with which the configurator should be started
|
|
47
57
|
*/
|
|
48
|
-
static createConfigurator(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?:
|
|
58
|
+
static createConfigurator(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomleConfiguratorApi>;
|
|
49
59
|
/**
|
|
50
60
|
* Method to create a new instance of a Roomle Configurator
|
|
51
61
|
* @deprecated please use "createConfigurator"
|
|
@@ -53,14 +63,14 @@ declare class RoomleEmbeddingApi<SdkType, SdkCallbacks> implements RoomleEmbeddi
|
|
|
53
63
|
* @param container DOM container in which the configurator should be placed
|
|
54
64
|
* @param initData settings with which the configurator should be started
|
|
55
65
|
*/
|
|
56
|
-
static create(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins:
|
|
66
|
+
static create(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins: PluginDefinitions): Promise<RoomleConfiguratorApi>;
|
|
57
67
|
/**
|
|
58
68
|
* Method to create a new instance of a Roomle Viewer
|
|
59
69
|
* @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
|
|
60
70
|
* @param container DOM container in which the configurator should be placed
|
|
61
71
|
* @param initData settings with which the configurator should be started
|
|
62
72
|
*/
|
|
63
|
-
static createViewer(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?:
|
|
73
|
+
static createViewer(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomleViewerApi>;
|
|
64
74
|
private static _create;
|
|
65
75
|
ui: ExposedApi_2;
|
|
66
76
|
extended: SdkType;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roomle/embedding-lib",
|
|
3
|
-
"version": "5.1.0-debug.
|
|
3
|
+
"version": "5.1.0-debug.3",
|
|
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.4"
|
|
33
33
|
},
|
|
34
34
|
"repository": {
|
|
35
35
|
"type": "git",
|