@roomle/embedding-lib 5.5.0-debug.4 → 5.5.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.
- package/docs/md/web/embedding/CHANGELOG.md +16 -2
- package/drag-in-BKrnFtmJ.mjs +7 -0
- package/drag-in-DC-05b4s.mjs +265 -0
- package/index.d.ts +28 -74
- package/package.json +2 -2
- package/roomle-embedding-lib.es.js +278 -343
- package/roomle-embedding-lib.es.min.js +8 -8
- package/roomle-embedding-lib.umd.js +14 -14
- package/roomle-embedding-lib.umd.min.js +14 -14
- package/drag-in-CXPjCiN1.mjs +0 -338
- package/drag-in-DhWNfKDL.mjs +0 -7
|
@@ -1,6 +1,20 @@
|
|
|
1
|
-
## [5.5.0
|
|
1
|
+
## [5.5.0](https://github.com/roomle-dev/roomle-ui/compare/embedding-lib-v5.4.0...embedding-lib-v5.5.0) (2024-10-22)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* dial points ([e15f238](https://github.com/roomle-dev/roomle-ui/commit/e15f238c05c04581f6349c84f104a8fe6ba60cc4))
|
|
7
|
+
* **SDK:** upgrade to version 2.86.0 ([#1282](https://github.com/roomle-dev/roomle-ui/issues/1282)) ([fb599f0](https://github.com/roomle-dev/roomle-ui/commit/fb599f0680a45489a598c0e49f59ab04b1d2a23e))
|
|
8
|
+
* **SDK:** upgrade to version 2.87.0-alpha.1 ([#1285](https://github.com/roomle-dev/roomle-ui/issues/1285)) ([fa214a9](https://github.com/roomle-dev/roomle-ui/commit/fa214a98b18edae8629f819b30ac7025508c1e96))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* amount of ticks ([16d4f88](https://github.com/roomle-dev/roomle-ui/commit/16d4f8884e9bca0b9d2c103ad4d038dc983b4571))
|
|
14
|
+
* disable snapping when zero is supplied ([bb976d2](https://github.com/roomle-dev/roomle-ui/commit/bb976d2d9436d7212cbcf4936936892fd89a4bbc))
|
|
15
|
+
* fix typescript issue in test causing tests to fail ([65fb1a3](https://github.com/roomle-dev/roomle-ui/commit/65fb1a382da215611761a3fa9739ee2dee632df9))
|
|
16
|
+
* make sure global search for addons shows regardless of searchThreshold setting ([9cad5a0](https://github.com/roomle-dev/roomle-ui/commit/9cad5a0ba52977640f6731092a27fe2d08dc677a))
|
|
17
|
+
* remove redundant CSS ([7b985c5](https://github.com/roomle-dev/roomle-ui/commit/7b985c5eb85363e7c15fb41adaaf93f0bd9f104d))
|
|
18
|
+
* Room Designer - Multi selection after movement not selected ([4a6e60a](https://github.com/roomle-dev/roomle-ui/commit/4a6e60aae10719f2bd50b9753d0ae9780cef3db5))
|
|
19
|
+
* search input showing when elements are empty ([e59f0a8](https://github.com/roomle-dev/roomle-ui/commit/e59f0a876df49caeb8c0526e6c0c36553006b214))
|
|
20
|
+
* tests ([9eccce6](https://github.com/roomle-dev/roomle-ui/commit/9eccce6919bad8bf0748b6b3be4c66f0cea4d588))
|
|
@@ -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={};typeof((o=this.options)==null?void 0:o.touchDragDelay)=="number"&&(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};
|
|
@@ -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", b = "rml-drag-in-fade-out", x = {
|
|
131
|
+
DISPLAY_NONE: "rml-display-none"
|
|
132
|
+
}, Y = 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: ${Y};}}
|
|
157
|
+
@keyframes ${b} {from{opacity: ${Y};}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 = `${b} ${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
|
+
typeof ((o = this.options) == null ? void 0 : o.touchDragDelay) == "number" && (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
|
+
};
|
package/index.d.ts
CHANGED
|
@@ -1,112 +1,54 @@
|
|
|
1
|
-
import { default as default_2 } from '@roomle/web-sdk/lib/definitions/
|
|
2
|
-
import { default as default_3 } from '@roomle/web-sdk/lib/definitions/
|
|
3
|
-
import { default as default_4 } from '@roomle/web-sdk/lib/definitions/configurator-core/src/
|
|
1
|
+
import { default as default_2 } from '@roomle/web-sdk/lib/definitions/planner-core/src/roomle-planner';
|
|
2
|
+
import { default as default_3 } from '@roomle/web-sdk/lib/definitions/configurator-core/src/services/configurator-ui-callback';
|
|
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
|
-
import { EmbeddingCommand } from '../../common/src/utils/message-handler';
|
|
6
5
|
import { ExposedAnalyticsCallbacks } from '../../../src/configurator/embedding/exposed-analytics-callbacks';
|
|
7
6
|
import { ExposedApi } from '../../../../src/configurator/embedding/exposed-api';
|
|
8
7
|
import { ExposedApi as ExposedApi_2 } from '../../../src/configurator/embedding/exposed-api';
|
|
9
8
|
import { GlobalCallback } from '@roomle/web-sdk/lib/definitions/common-core/src/services/global-callback';
|
|
10
|
-
import { MessageHandler } from '../../common/src/utils/message-handler';
|
|
11
|
-
import { Nullable } from '../../../src/common/utils/types';
|
|
12
|
-
import { Nullable as Nullable_2 } from '../../../../src/common/utils/types';
|
|
13
|
-
import { PossibleCustomViews } from '../../../src/configurator/embedding/types';
|
|
14
|
-
import { PossibleCustomViewsAndMain } from '../../../src/configurator/embedding/types';
|
|
15
|
-
import { PossibleCustomViewsAndMain as PossibleCustomViewsAndMain_2 } from '../../../../src/configurator/embedding/types';
|
|
16
9
|
import { RapiId } from '@roomle/web-sdk/lib/definitions/typings/rapi-types';
|
|
17
10
|
import { UiInitData } from '../../../src/configurator/embedding/types';
|
|
18
11
|
|
|
19
|
-
declare
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
declare class Connector<SdkType, SdkCallbacks> implements RoomleEmbeddingApiKeys {
|
|
24
|
-
protected _messageHandler: Nullable<MessageHandler>;
|
|
25
|
-
isSetupDone: boolean;
|
|
26
|
-
viewName: PossibleCustomViewsAndMain;
|
|
27
|
-
plugins: AvailablePlugins;
|
|
28
|
-
pluginsLoaded: Array<Promise<void>>;
|
|
29
|
-
ui: ExposedApi_2;
|
|
30
|
-
extended: SdkType;
|
|
31
|
-
configurator: default_2;
|
|
32
|
-
analytics: {
|
|
33
|
-
callbacks: ExposedAnalyticsCallbacks;
|
|
34
|
-
};
|
|
35
|
-
global: {
|
|
36
|
-
callbacks: GlobalCallback;
|
|
37
|
-
};
|
|
38
|
-
setMessageHandler(messageHandler: MessageHandler): void;
|
|
39
|
-
handleSetup(methodsAndCallbacks: {
|
|
40
|
-
methods: string[];
|
|
41
|
-
callbacks: string[];
|
|
42
|
-
}): void;
|
|
43
|
-
executeMessage({ message, args }: EmbeddingCommand): Promise<{
|
|
44
|
-
result: any;
|
|
45
|
-
}>;
|
|
46
|
-
setupPlugins(plugins: PluginDefinitions, iframe: HTMLIFrameElement | HTMLBodyElement, mode?: EmbeddingPluginMode): void;
|
|
12
|
+
declare interface AvailablePlugins {
|
|
13
|
+
dragIn?: DragIn;
|
|
47
14
|
}
|
|
48
15
|
|
|
49
|
-
declare class DragIn
|
|
16
|
+
declare class DragIn {
|
|
17
|
+
private _iframe;
|
|
50
18
|
private _currentDrag;
|
|
51
19
|
private _currentTouch;
|
|
52
20
|
private _firefoxDragPosition;
|
|
53
|
-
private
|
|
54
|
-
private _paddingTop;
|
|
21
|
+
private _instance;
|
|
55
22
|
options: {
|
|
56
23
|
dragInOverlapX?: number;
|
|
57
24
|
dragInOverlapY?: number;
|
|
58
25
|
fingerSize?: number;
|
|
59
26
|
touchDragDelay?: number;
|
|
60
27
|
touchDragEpsilon?: number;
|
|
61
|
-
domContainer?: HTMLElement;
|
|
62
28
|
};
|
|
63
29
|
private _injectStyles;
|
|
64
30
|
private _initializeDragGhost;
|
|
65
|
-
|
|
66
|
-
constructor(iframe: HTMLIFrameElement | HTMLBodyElement, mode: EmbeddingPluginMode);
|
|
31
|
+
constructor(iframe: HTMLIFrameElement);
|
|
67
32
|
setInstance(instance: ExposedApi): void;
|
|
68
|
-
private _initDom;
|
|
69
33
|
private _firefoxFallback;
|
|
70
|
-
dragStart(id: RapiId, event: DragEvent | TouchEvent, type?: string):
|
|
71
|
-
/** MUST NOT BE ASYNC, OTHERWISE ACCESS TO event.clientX could be wrong */
|
|
34
|
+
dragStart(id: RapiId, event: DragEvent | TouchEvent, type?: string): void;
|
|
72
35
|
dragUpdate(event: DragEvent | TouchEvent): void;
|
|
73
|
-
dragEnd():
|
|
36
|
+
dragEnd(): void;
|
|
74
37
|
touchStart(id: RapiId, event: TouchEvent, type?: string): void;
|
|
75
38
|
touchMove(event: TouchEvent): void;
|
|
76
39
|
touchEnd(): void;
|
|
77
40
|
dispose(): void;
|
|
78
41
|
}
|
|
79
42
|
|
|
80
|
-
declare class EmbeddingPlugin {
|
|
81
|
-
protected _mainDomElement: HTMLIFrameElement | HTMLBodyElement;
|
|
82
|
-
protected _instance: Nullable_2<ExposedApi>;
|
|
83
|
-
protected _mode: EmbeddingPluginMode;
|
|
84
|
-
protected _viewName: PossibleCustomViewsAndMain_2;
|
|
85
|
-
constructor(iframe: HTMLIFrameElement | HTMLBodyElement, mode: EmbeddingPluginMode);
|
|
86
|
-
setInstance(instance: ExposedApi): void;
|
|
87
|
-
setViewName(viewName: PossibleCustomViewsAndMain_2): void;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
declare type EmbeddingPluginMode = 'website' | 'custom-view';
|
|
91
|
-
|
|
92
|
-
declare type PluginConstructors = {
|
|
93
|
-
[K in keyof PluginMap]: PluginMap[K];
|
|
94
|
-
};
|
|
95
|
-
|
|
96
43
|
declare type PluginDefinitions = Array<keyof AvailablePlugins | {
|
|
97
44
|
name: keyof AvailablePlugins;
|
|
98
|
-
loader: () => Promise<
|
|
45
|
+
loader: () => Promise<any>;
|
|
99
46
|
}>;
|
|
100
47
|
|
|
101
|
-
declare
|
|
102
|
-
dragIn: typeof DragIn;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
declare type RoomleConfiguratorApi = RoomleEmbeddingApi<default_2, default_4>;
|
|
48
|
+
declare type RoomleConfiguratorApi = RoomleEmbeddingApi<default_4, default_3>;
|
|
106
49
|
|
|
107
|
-
declare class RoomleEmbeddingApi<SdkType, SdkCallbacks>
|
|
50
|
+
declare class RoomleEmbeddingApi<SdkType, SdkCallbacks> implements RoomleEmbeddingApiKeys {
|
|
108
51
|
static createPlanner(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomlePlannerApi>;
|
|
109
|
-
static connect(customView: PossibleCustomViews, plugins?: PluginDefinitions): Promise<Connector<default_2, default_4>>;
|
|
110
52
|
/**
|
|
111
53
|
* Method to create a new instance of a Roomle Configurator
|
|
112
54
|
* @param configuratorId the id which identifies your configurator, you will get this ID from your Roomle Contact Person
|
|
@@ -130,11 +72,23 @@ declare class RoomleEmbeddingApi<SdkType, SdkCallbacks> extends Connector<SdkTyp
|
|
|
130
72
|
*/
|
|
131
73
|
static createViewer(configuratorId: string, container: HTMLElement, initData: UiInitData, plugins?: PluginDefinitions): Promise<RoomleViewerApi>;
|
|
132
74
|
private static _create;
|
|
75
|
+
ui: ExposedApi_2;
|
|
76
|
+
extended: SdkType;
|
|
77
|
+
configurator: default_4;
|
|
78
|
+
analytics: {
|
|
79
|
+
callbacks: ExposedAnalyticsCallbacks;
|
|
80
|
+
};
|
|
81
|
+
global: {
|
|
82
|
+
callbacks: GlobalCallback;
|
|
83
|
+
};
|
|
84
|
+
plugins: AvailablePlugins;
|
|
133
85
|
private _waitForIframe;
|
|
134
86
|
private _container;
|
|
87
|
+
private _messageHandler;
|
|
135
88
|
private _configuratorSettings;
|
|
136
89
|
private _initData;
|
|
137
90
|
private _iframe;
|
|
91
|
+
pluginsLoaded: Array<Promise<void>>;
|
|
138
92
|
private constructor();
|
|
139
93
|
teardown(): void;
|
|
140
94
|
private _createIframe;
|
|
@@ -153,8 +107,8 @@ declare interface RoomleEmbeddingApiKeys {
|
|
|
153
107
|
global: any;
|
|
154
108
|
}
|
|
155
109
|
|
|
156
|
-
declare type RoomlePlannerApi = RoomleEmbeddingApi<
|
|
110
|
+
declare type RoomlePlannerApi = RoomleEmbeddingApi<default_2, default_3>;
|
|
157
111
|
|
|
158
|
-
declare type RoomleViewerApi = RoomleEmbeddingApi<default_5,
|
|
112
|
+
declare type RoomleViewerApi = RoomleEmbeddingApi<default_5, default_3>;
|
|
159
113
|
|
|
160
114
|
export { }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@roomle/embedding-lib",
|
|
3
|
-
"version": "5.5.0
|
|
3
|
+
"version": "5.5.0",
|
|
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.87.0-alpha.
|
|
32
|
+
"@roomle/web-sdk": "2.87.0-alpha.3"
|
|
33
33
|
},
|
|
34
34
|
"repository": {
|
|
35
35
|
"type": "git",
|