@tmagic/stage 1.3.4 → 1.3.6
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/dist/tmagic-stage.js +65 -30
- package/dist/tmagic-stage.js.map +1 -1
- package/dist/tmagic-stage.umd.cjs +65 -29
- package/dist/tmagic-stage.umd.cjs.map +1 -1
- package/package.json +7 -7
- package/src/ActionManager.ts +3 -3
- package/src/StageCore.ts +5 -4
- package/src/StageRender.ts +69 -28
- package/src/TargetShadow.ts +1 -1
- package/src/types.ts +8 -1
- package/types/StageRender.d.ts +7 -3
- package/types/types.d.ts +7 -1
package/dist/tmagic-stage.js
CHANGED
|
@@ -282,7 +282,7 @@ class TargetShadow {
|
|
|
282
282
|
el.id = `${this.idPrefix}${target.id}`;
|
|
283
283
|
el.style.cssText = getTargetElStyle(target, this.zIndex);
|
|
284
284
|
if (typeof this.updateDragEl === "function") {
|
|
285
|
-
this.updateDragEl(el, target);
|
|
285
|
+
this.updateDragEl(el, target, this.container);
|
|
286
286
|
}
|
|
287
287
|
const isFixed = isFixedParent(target);
|
|
288
288
|
const mode = this.container.dataset.mode || Mode.ABSOLUTE;
|
|
@@ -587,6 +587,11 @@ var ContainerHighlightType = /* @__PURE__ */ ((ContainerHighlightType2) => {
|
|
|
587
587
|
ContainerHighlightType2["ALT"] = "alt";
|
|
588
588
|
return ContainerHighlightType2;
|
|
589
589
|
})(ContainerHighlightType || {});
|
|
590
|
+
var RenderType = /* @__PURE__ */ ((RenderType2) => {
|
|
591
|
+
RenderType2["IFRAME"] = "iframe";
|
|
592
|
+
RenderType2["NATIVE"] = "native";
|
|
593
|
+
return RenderType2;
|
|
594
|
+
})(RenderType || {});
|
|
590
595
|
var SelectStatus = /* @__PURE__ */ ((SelectStatus2) => {
|
|
591
596
|
SelectStatus2["SELECT"] = "select";
|
|
592
597
|
SelectStatus2["MULTI_SELECT"] = "multiSelect";
|
|
@@ -1791,13 +1796,13 @@ class ActionManager extends EventEmitter {
|
|
|
1791
1796
|
/**
|
|
1792
1797
|
* 在up事件中负责对外通知选中事件，通知画布之外的编辑器更新
|
|
1793
1798
|
*/
|
|
1794
|
-
mouseUpHandler = () => {
|
|
1799
|
+
mouseUpHandler = (event) => {
|
|
1795
1800
|
getDocument().removeEventListener("mouseup", this.mouseUpHandler);
|
|
1796
1801
|
this.container.addEventListener("mousemove", this.mouseMoveHandler);
|
|
1797
1802
|
if (this.isMultiSelectStatus) {
|
|
1798
|
-
this.emit("multi-select", this.selectedElList);
|
|
1803
|
+
this.emit("multi-select", this.selectedElList, event);
|
|
1799
1804
|
} else {
|
|
1800
|
-
this.emit("select", this.selectedEl);
|
|
1805
|
+
this.emit("select", this.selectedEl, event);
|
|
1801
1806
|
}
|
|
1802
1807
|
};
|
|
1803
1808
|
mouseLeaveHandler = (event) => {
|
|
@@ -2206,22 +2211,22 @@ class StageRender extends EventEmitter$1 {
|
|
|
2206
2211
|
contentWindow = null;
|
|
2207
2212
|
runtime = null;
|
|
2208
2213
|
iframe;
|
|
2214
|
+
nativeContainer;
|
|
2209
2215
|
runtimeUrl;
|
|
2210
2216
|
zoom = DEFAULT_ZOOM;
|
|
2217
|
+
renderType;
|
|
2211
2218
|
customizedRender;
|
|
2212
|
-
constructor({ runtimeUrl, zoom, customizedRender }) {
|
|
2219
|
+
constructor({ runtimeUrl, zoom, customizedRender, renderType = RenderType.IFRAME }) {
|
|
2213
2220
|
super();
|
|
2221
|
+
this.renderType = renderType;
|
|
2214
2222
|
this.runtimeUrl = runtimeUrl || "";
|
|
2215
2223
|
this.customizedRender = customizedRender;
|
|
2216
2224
|
this.setZoom(zoom);
|
|
2217
|
-
this.
|
|
2218
|
-
|
|
2219
|
-
this.
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
height: 100%;
|
|
2223
|
-
`;
|
|
2224
|
-
this.iframe.addEventListener("load", this.loadHandler);
|
|
2225
|
+
if (this.renderType === RenderType.IFRAME) {
|
|
2226
|
+
this.createIframe();
|
|
2227
|
+
} else if (this.renderType === RenderType.NATIVE) {
|
|
2228
|
+
this.createNativeContainer();
|
|
2229
|
+
}
|
|
2225
2230
|
}
|
|
2226
2231
|
getMagicApi = () => ({
|
|
2227
2232
|
onPageElUpdate: (el) => this.emit("page-el-update", el),
|
|
@@ -2261,18 +2266,19 @@ class StageRender extends EventEmitter$1 {
|
|
|
2261
2266
|
* @param el 将页面挂载到该Dom节点上
|
|
2262
2267
|
*/
|
|
2263
2268
|
async mount(el) {
|
|
2264
|
-
if (
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
|
|
2270
|
-
html = html.replace("<head>", `<head>
|
|
2269
|
+
if (this.iframe) {
|
|
2270
|
+
if (!isSameDomain(this.runtimeUrl) && this.runtimeUrl) {
|
|
2271
|
+
let html = await fetch(this.runtimeUrl).then((res) => res.text());
|
|
2272
|
+
const base = `${location.protocol}//${getHost(this.runtimeUrl)}`;
|
|
2273
|
+
html = html.replace("<head>", `<head>
|
|
2271
2274
|
<base href="${base}">`);
|
|
2272
|
-
|
|
2275
|
+
this.iframe.srcdoc = html;
|
|
2276
|
+
}
|
|
2277
|
+
el.appendChild(this.iframe);
|
|
2278
|
+
this.postTmagicRuntimeReady();
|
|
2279
|
+
} else if (this.nativeContainer) {
|
|
2280
|
+
el.appendChild(this.nativeContainer);
|
|
2273
2281
|
}
|
|
2274
|
-
el.appendChild(this.iframe);
|
|
2275
|
-
this.postTmagicRuntimeReady();
|
|
2276
2282
|
}
|
|
2277
2283
|
getRuntime = () => {
|
|
2278
2284
|
if (this.runtime)
|
|
@@ -2302,6 +2308,12 @@ class StageRender extends EventEmitter$1 {
|
|
|
2302
2308
|
x = x - rect.left;
|
|
2303
2309
|
y = y - rect.top;
|
|
2304
2310
|
}
|
|
2311
|
+
} else if (this.nativeContainer) {
|
|
2312
|
+
const rect = this.nativeContainer.getClientRects()[0];
|
|
2313
|
+
if (rect) {
|
|
2314
|
+
x = x - rect.left;
|
|
2315
|
+
y = y - rect.top;
|
|
2316
|
+
}
|
|
2305
2317
|
}
|
|
2306
2318
|
return this.getDocument()?.elementsFromPoint(x / this.zoom, y / this.zoom);
|
|
2307
2319
|
}
|
|
@@ -2318,12 +2330,34 @@ class StageRender extends EventEmitter$1 {
|
|
|
2318
2330
|
* 销毁实例
|
|
2319
2331
|
*/
|
|
2320
2332
|
destroy() {
|
|
2321
|
-
this.iframe?.removeEventListener("load", this.
|
|
2333
|
+
this.iframe?.removeEventListener("load", this.iframeLoadHandler);
|
|
2322
2334
|
this.contentWindow = null;
|
|
2323
2335
|
this.iframe?.remove();
|
|
2324
2336
|
this.iframe = void 0;
|
|
2325
2337
|
this.removeAllListeners();
|
|
2326
2338
|
}
|
|
2339
|
+
createIframe() {
|
|
2340
|
+
this.iframe = globalThis.document.createElement("iframe");
|
|
2341
|
+
this.iframe.src = this.runtimeUrl && isSameDomain(this.runtimeUrl) ? this.runtimeUrl : "";
|
|
2342
|
+
this.iframe.style.cssText = `
|
|
2343
|
+
border: 0;
|
|
2344
|
+
width: 100%;
|
|
2345
|
+
height: 100%;
|
|
2346
|
+
`;
|
|
2347
|
+
this.iframe.addEventListener("load", this.iframeLoadHandler);
|
|
2348
|
+
return this.iframe;
|
|
2349
|
+
}
|
|
2350
|
+
async createNativeContainer() {
|
|
2351
|
+
this.contentWindow = globalThis;
|
|
2352
|
+
this.nativeContainer = globalThis.document.createElement("div");
|
|
2353
|
+
this.contentWindow.magic = this.getMagicApi();
|
|
2354
|
+
if (this.customizedRender) {
|
|
2355
|
+
const el = await this.customizedRender();
|
|
2356
|
+
if (el) {
|
|
2357
|
+
this.nativeContainer.appendChild(el);
|
|
2358
|
+
}
|
|
2359
|
+
}
|
|
2360
|
+
}
|
|
2327
2361
|
/**
|
|
2328
2362
|
* 在runtime中对被选中的元素进行标记，部分组件有对选中态进行特殊显示的需求
|
|
2329
2363
|
* @param el 被选中的元素
|
|
@@ -2335,7 +2369,7 @@ class StageRender extends EventEmitter$1 {
|
|
|
2335
2369
|
addSelectedClassName(el, doc);
|
|
2336
2370
|
}
|
|
2337
2371
|
}
|
|
2338
|
-
|
|
2372
|
+
iframeLoadHandler = async () => {
|
|
2339
2373
|
if (!this.contentWindow?.magic) {
|
|
2340
2374
|
this.postTmagicRuntimeReady();
|
|
2341
2375
|
}
|
|
@@ -2377,6 +2411,7 @@ class StageCore extends EventEmitter$1 {
|
|
|
2377
2411
|
this.renderer = new StageRender({
|
|
2378
2412
|
runtimeUrl: config.runtimeUrl,
|
|
2379
2413
|
zoom: config.zoom,
|
|
2414
|
+
renderType: config.renderType,
|
|
2380
2415
|
customizedRender: async () => {
|
|
2381
2416
|
if (this?.customizedRender) {
|
|
2382
2417
|
return await this.customizedRender(this);
|
|
@@ -2578,12 +2613,12 @@ class StageCore extends EventEmitter$1 {
|
|
|
2578
2613
|
initActionManagerEvent() {
|
|
2579
2614
|
this.actionManager.on("before-select", (idOrEl, event) => {
|
|
2580
2615
|
this.select(idOrEl, event);
|
|
2581
|
-
}).on("select", (selectedEl) => {
|
|
2582
|
-
this.emit("select", selectedEl);
|
|
2616
|
+
}).on("select", (selectedEl, event) => {
|
|
2617
|
+
this.emit("select", selectedEl, event);
|
|
2583
2618
|
}).on("before-multi-select", (idOrElList) => {
|
|
2584
2619
|
this.multiSelect(idOrElList);
|
|
2585
|
-
}).on("multi-select", (selectedElList) => {
|
|
2586
|
-
this.emit("multi-select", selectedElList);
|
|
2620
|
+
}).on("multi-select", (selectedElList, event) => {
|
|
2621
|
+
this.emit("multi-select", selectedElList, event);
|
|
2587
2622
|
});
|
|
2588
2623
|
}
|
|
2589
2624
|
/**
|
|
@@ -2633,5 +2668,5 @@ class StageCore extends EventEmitter$1 {
|
|
|
2633
2668
|
}
|
|
2634
2669
|
}
|
|
2635
2670
|
|
|
2636
|
-
export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
|
|
2671
|
+
export { AbleActionEventType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType, DEFAULT_ZOOM, DRAG_EL_ID_PREFIX, GHOST_EL_ID_PREFIX, GuidesType, HIGHLIGHT_EL_ID_PREFIX, Mode, MouseButton, PAGE_CLASS, RenderType, SELECTED_CLASS, SelectStatus, StageDragResize, StageDragStatus, StageMask, StageRender, ZIndex, addSelectedClassName, calcValueByFontsize, StageCore as default, down, getAbsolutePosition, getMarginValue, getMode, getOffset, getScrollParent, getTargetElStyle, isAbsolute, isFixed, isFixedParent, isMoveableButton, isRelative, isStatic, removeSelectedClassName, up };
|
|
2637
2672
|
//# sourceMappingURL=tmagic-stage.js.map
|