embedEditor.mount(shell)} />;
+ }
+}
diff --git a/packages/designer/src/builtins/simulator/auxilary/index.ts b/packages/designer/src/builtins/simulator/auxilary/index.ts
new file mode 100644
index 000000000..61552f4e3
--- /dev/null
+++ b/packages/designer/src/builtins/simulator/auxilary/index.ts
@@ -0,0 +1 @@
+export * from './auxiliary';
diff --git a/packages/designer/src/builtins/simulator/auxilary/insertion.less b/packages/designer/src/builtins/simulator/auxilary/insertion.less
new file mode 100644
index 000000000..871210b7b
--- /dev/null
+++ b/packages/designer/src/builtins/simulator/auxilary/insertion.less
@@ -0,0 +1,23 @@
+.my-insertion {
+ position: absolute;
+ top: -1.5px;
+ left: 0;
+ z-index: 12;
+ pointer-events: none !important;
+ background-color: var(--color-brand-light);
+ height: 3px;
+
+ &.cover {
+ top: 0;
+ height: auto;
+ width: auto;
+ opacity: 0.3;
+ }
+
+ &.vertical {
+ top: 0;
+ left: -1.5px;
+ width: 3px;
+ height: auto;
+ }
+}
diff --git a/packages/designer/src/builtins/simulator/auxilary/insertion.tsx b/packages/designer/src/builtins/simulator/auxilary/insertion.tsx
new file mode 100644
index 000000000..cc09d6ec4
--- /dev/null
+++ b/packages/designer/src/builtins/simulator/auxilary/insertion.tsx
@@ -0,0 +1,139 @@
+import { Component } from 'react';
+import { observer } from '@ali/recore';
+import { getCurrentDocument } from '../../globals';
+import './insertion.less';
+import Location, { isLocationChildrenDetail, isVertical, LocationChildrenDetail, Rect } from '../../document/location';
+import { isConditionFlow } from '../../document/node/condition-flow';
+import { getChildAt, INodeParent } from '../../document/node';
+import DocumentContext from '../../document/document-context';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function processPropDetail() {
+ // return { insertType: 'cover', coverEdge: ? };
+}
+
+interface InsertionData {
+ edge?: Rect;
+ insertType?: string;
+ vertical?: boolean;
+ nearRect?: Rect;
+ coverRect?: Rect;
+}
+
+/**
+ * 处理拖拽子节点(INode)情况
+ */
+function processChildrenDetail(
+ doc: DocumentContext,
+ target: INodeParent,
+ detail: LocationChildrenDetail,
+): InsertionData {
+ const edge = doc.computeRect(target);
+ if (!edge) {
+ return {};
+ }
+
+ const ret: any = {
+ edge,
+ insertType: 'before',
+ };
+
+ if (isConditionFlow(target)) {
+ ret.insertType = 'cover';
+ ret.coverRect = edge;
+ return ret;
+ }
+
+ if (detail.near) {
+ const { node, pos, rect, align } = detail.near;
+ ret.nearRect = rect || doc.computeRect(node);
+ ret.vertical = align ? align === 'V' : isVertical(ret.nearRect);
+ ret.insertType = pos;
+ return ret;
+ }
+
+ // from outline-tree: has index, but no near
+ // TODO: think of shadowNode & ConditionFlow
+ const { index } = detail;
+ let nearNode = getChildAt(target, index);
+ if (!nearNode) {
+ // index = 0, eg. nochild,
+ nearNode = getChildAt(target, index > 0 ? index - 1 : 0);
+ if (!nearNode) {
+ ret.insertType = 'cover';
+ ret.coverRect = edge;
+ return ret;
+ }
+ ret.insertType = 'after';
+ }
+ if (nearNode) {
+ ret.nearRect = doc.computeRect(nearNode);
+ ret.vertical = isVertical(ret.nearRect);
+ }
+ return ret;
+}
+
+/**
+ * 将 detail 信息转换为页面"坐标"信息
+ */
+function processDetail({ target, detail, document }: Location): InsertionData {
+ if (isLocationChildrenDetail(detail)) {
+ return processChildrenDetail(document, target, detail);
+ } else {
+ // TODO: others...
+ const edge = document.computeRect(target);
+ return edge ? { edge, insertType: 'cover', coverRect: edge } : {};
+ }
+}
+
+@observer
+export class InsertionView extends Component {
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ render() {
+ const doc = getCurrentDocument();
+ if (!doc || !doc.dropLocation) {
+ return null;
+ }
+
+ const { scale, scrollTarget } = doc.viewport;
+ const sx = scrollTarget!.left;
+ const sy = scrollTarget!.top;
+
+ const { edge, insertType, coverRect, nearRect, vertical } = processDetail(doc.dropLocation);
+ if (!edge) {
+ return null;
+ }
+
+ let className = 'my-insertion';
+ const style: any = {};
+ let x: number;
+ let y: number;
+ if (insertType === 'cover') {
+ className += ' cover';
+ x = (coverRect!.left + sx) * scale;
+ y = (coverRect!.top + sy) * scale;
+ style.width = coverRect!.width * scale;
+ style.height = coverRect!.height * scale;
+ } else {
+ if (!nearRect) {
+ return null;
+ }
+ if (vertical) {
+ className += ' vertical';
+ x = ((insertType === 'before' ? nearRect.left : nearRect.right) + sx) * scale;
+ y = (nearRect.top + sy) * scale;
+ style.height = nearRect!.height * scale;
+ } else {
+ x = (nearRect.left + sx) * scale;
+ y = ((insertType === 'before' ? nearRect.top : nearRect.bottom) + sy) * scale;
+ style.width = nearRect.width * scale;
+ }
+ }
+ style.transform = `translate3d(${x}px, ${y}px, 0)`;
+
+ return
;
+ }
+}
diff --git a/packages/designer/src/builtins/simulator/auxilary/offset-observer.ts b/packages/designer/src/builtins/simulator/auxilary/offset-observer.ts
new file mode 100644
index 000000000..960674b47
--- /dev/null
+++ b/packages/designer/src/builtins/simulator/auxilary/offset-observer.ts
@@ -0,0 +1,60 @@
+import { obx } from '@ali/recore';
+import { INode } from '../../document/node';
+
+export default class OffsetObserver {
+ @obx.ref offsetTop = 0;
+ @obx.ref offsetLeft = 0;
+ @obx.ref offsetRight = 0;
+ @obx.ref offsetBottom = 0;
+ @obx.ref height = 0;
+ @obx.ref width = 0;
+ @obx.ref hasOffset = false;
+ @obx.ref left = 0;
+ @obx.ref top = 0;
+ @obx.ref right = 0;
+ @obx.ref bottom = 0;
+
+ private pid: number | undefined;
+
+ constructor(node: INode) {
+ const document = node.document;
+ const scrollTarget = document.viewport.scrollTarget!;
+
+ let pid: number;
+ const compute = () => {
+ if (pid !== this.pid) {
+ return;
+ }
+
+ const rect = document.computeRect(node);
+ if (!rect) {
+ this.hasOffset = false;
+ return;
+ }
+ this.hasOffset = true;
+ this.offsetLeft = rect.left + scrollTarget.left;
+ this.offsetRight = rect.right + scrollTarget.left;
+ this.offsetTop = rect.top + scrollTarget.top;
+ this.offsetBottom = rect.bottom + scrollTarget.top;
+ this.height = rect.height;
+ this.width = rect.width;
+ this.left = rect.left;
+ this.top = rect.top;
+ this.right = rect.right;
+ this.bottom = rect.bottom;
+ this.pid = pid = (window as any).requestIdleCallback(compute);
+ };
+
+ // try first
+ compute();
+ // try second, ensure the dom mounted
+ this.pid = pid = (window as any).requestIdleCallback(compute);
+ }
+
+ destroy() {
+ if (this.pid) {
+ (window as any).cancelIdleCallback(this.pid);
+ }
+ this.pid = undefined;
+ }
+}
diff --git a/packages/designer/src/builtins/simulator/auxilary/selecting.less b/packages/designer/src/builtins/simulator/auxilary/selecting.less
new file mode 100644
index 000000000..924c52d8c
--- /dev/null
+++ b/packages/designer/src/builtins/simulator/auxilary/selecting.less
@@ -0,0 +1,39 @@
+.my-selecting {
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border: 1px solid var(--color-brand-light);
+ z-index: 2;
+ overflow: visible;
+ >.title {
+ position: absolute;
+ color: var(--color-brand-light);
+ top: -20px;
+ left: 0;
+ font-weight: lighter;
+ }
+ &.dragging {
+ background: rgba(182, 178, 178, 0.8);
+ border: none;
+ pointer-events: all;
+ }
+
+ &.x-shadow {
+ border-color: rgba(147, 112, 219, 1.0);
+ background: rgba(147, 112, 219, 0.04);
+ >.title {
+ color: rgba(147, 112, 219, 1.0);
+ }
+ &.highlight {
+ background: transparent;
+ }
+ }
+
+ &.x-flow {
+ border-color: rgb(255, 99, 8);
+ >.title {
+ color: rgb(255, 99, 8);
+ }
+ }
+}
diff --git a/packages/designer/src/builtins/simulator/auxilary/selecting.tsx b/packages/designer/src/builtins/simulator/auxilary/selecting.tsx
new file mode 100644
index 000000000..b89c35c99
--- /dev/null
+++ b/packages/designer/src/builtins/simulator/auxilary/selecting.tsx
@@ -0,0 +1,85 @@
+import { observer } from '@ali/recore';
+import { Component, Fragment } from 'react';
+import classNames from 'classnames';
+import { INode, isElementNode, isConfettiNode, hasConditionFlow } from '../../document/node';
+import OffsetObserver from './offset-observer';
+import './selecting.less';
+import { isShadowNode, isShadowsContainer } from '../../document/node/shadow-node';
+import { isConditionFlow } from '../../document/node/condition-flow';
+import { current, dragon } from '../../globals';
+
+@observer
+export class SingleSelectingView extends Component<{ node: INode; highlight?: boolean }> {
+ private offsetObserver: OffsetObserver;
+
+ constructor(props: { node: INode; highlight?: boolean }) {
+ super(props);
+ this.offsetObserver = new OffsetObserver(props.node);
+ }
+
+ render() {
+ if (!this.offsetObserver.hasOffset) {
+ return null;
+ }
+
+ const scale = this.props.node.document.viewport.scale;
+ const { width, height, offsetTop, offsetLeft } = this.offsetObserver;
+
+ const style = {
+ width: width * scale,
+ height: height * scale,
+ transform: `translate3d(${offsetLeft * scale}px, ${offsetTop * scale}px, 0)`,
+ } as any;
+
+ const { node, highlight } = this.props;
+
+ const className = classNames('my-selecting', {
+ 'x-shadow': isShadowNode(node),
+ 'x-flow': hasConditionFlow(node) || isConditionFlow(node),
+ highlight,
+ });
+
+ return
;
+ }
+}
+
+@observer
+export class SelectingView extends Component {
+ get selecting(): INode[] {
+ const sel = current.selection;
+ if (!sel) {
+ return [];
+ }
+ if (dragon.dragging) {
+ return sel.getTopNodes();
+ }
+
+ return sel.getNodes();
+ }
+ render() {
+ return this.selecting.map(node => {
+ // select all nodes when doing x-for
+ if (isShadowsContainer(node)) {
+ // FIXME: thinkof nesting for
+ const views = [];
+ for (const shadowNode of (node as any).getShadows()!.values()) {
+ views.push(
);
+ }
+ return
{views};
+ } else if (isShadowNode(node)) {
+ const shadows = node.origin.getShadows()!.values();
+ const views = [];
+ for (const shadowNode of shadows) {
+ views.push(
);
+ }
+ return
{views};
+ }
+ // select the visible node when doing x-if
+ else if (isConditionFlow(node)) {
+ return
;
+ }
+
+ return
;
+ });
+ }
+}
diff --git a/packages/designer/src/builtins/simulator/create-simulator.ts b/packages/designer/src/builtins/simulator/create-simulator.ts
new file mode 100644
index 000000000..9c673e59b
--- /dev/null
+++ b/packages/designer/src/builtins/simulator/create-simulator.ts
@@ -0,0 +1,80 @@
+import { getCurrentAdaptor } from '../globals';
+import Simulator from '../adaptors/simulator';
+import { isCSSUrl } from '../utils/is-css-url';
+
+export interface AssetMap {
+ jsUrl?: string;
+ cssUrl?: string;
+ jsText?: string;
+ cssText?: string;
+}
+export type AssetList = string[];
+export type Assets = AssetMap[] | AssetList;
+
+function isAssetMap(obj: any): obj is AssetMap {
+ return obj && typeof obj === 'object';
+}
+
+export function createSimulator
(iframe: HTMLIFrameElement, vendors: Assets = []): Promise> {
+ const currentAdaptor = getCurrentAdaptor();
+ const win: any = iframe.contentWindow;
+ const doc = iframe.contentDocument!;
+
+ const styles: string[] = [];
+ let scripts: string[] = [];
+ const afterScripts: string[] = [];
+
+ vendors.forEach((asset: any) => {
+ if (!isAssetMap(asset)) {
+ if (isCSSUrl(asset)) {
+ asset = { cssUrl: asset };
+ } else {
+ if (asset.startsWith('!')) {
+ afterScripts.push(``);
+ return;
+ }
+ asset = { jsUrl: asset };
+ }
+ }
+ if (asset.jsText) {
+ scripts.push(``);
+ }
+ if (asset.jsUrl) {
+ scripts.push(``);
+ }
+ if (asset.cssUrl) {
+ styles.push(``);
+ }
+ if (asset.cssText) {
+ styles.push(``);
+ }
+ });
+
+ currentAdaptor.simulatorUrls.forEach(url => {
+ if (isCSSUrl(url)) {
+ styles.push(``);
+ } else {
+ scripts.push(``);
+ }
+ });
+ scripts = scripts.concat(afterScripts);
+
+ doc.open();
+ doc.write(`
+${styles.join('\n')}
+
+${scripts.join('\n')}
+`);
+ doc.close();
+
+ return new Promise(resolve => {
+ if (win.VisionSimulator) {
+ return resolve(win.VisionSimulator);
+ }
+ const loaded = () => {
+ resolve(win.VisionSimulator);
+ win.removeEventListener('load', loaded);
+ };
+ win.addEventListener('load', loaded);
+ });
+}
diff --git a/packages/designer/src/builtins/simulator/index.tsx b/packages/designer/src/builtins/simulator/index.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/designer/src/builtins/simulator/screen b/packages/designer/src/builtins/simulator/screen
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/designer/src/designer/canvas.less b/packages/designer/src/designer/canvas.less
new file mode 100644
index 000000000..cfc57d730
--- /dev/null
+++ b/packages/designer/src/designer/canvas.less
@@ -0,0 +1,47 @@
+.my-canvas {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: 10px;
+ box-shadow: 0 2px 10px 0 rgba(31,56,88,.15);
+}
+
+html.my-show-topbar .my-canvas {
+ top: var(--topbar-height);
+}
+html.my-show-toolbar .my-canvas {
+ top: var(--toolbar-height);
+}
+html.my-show-topbar.my-show-toolbar .my-canvas {
+ top: calc(var(--topbar-height) + var(--topbar-height));
+}
+
+.my-screen {
+ top: 0;
+ bottom: 0;
+ width: 100%;
+ left: 0;
+ position: absolute;
+ overflow: hidden;
+}
+
+.my-doc-shell {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ overflow: hidden;
+ .my-doc-frame {
+ border: none;
+ transform-origin: 0 0;
+ height: 100%;
+ width: 100%;
+ }
+}
+
+.my-drag-pane-mode .my-doc-shell {
+ pointer-events: none;
+}
diff --git a/packages/designer/src/designer/canvas.tsx b/packages/designer/src/designer/canvas.tsx
new file mode 100644
index 000000000..3a6daadf3
--- /dev/null
+++ b/packages/designer/src/designer/canvas.tsx
@@ -0,0 +1,76 @@
+import { Component } from 'react';
+import { observer } from '@ali/recore';
+import { getCurrentDocument, screen, progressing } from '../../globals';
+import { AutoFit } from '../../document/viewport';
+import { AuxiliaryView } from '../auxiliary';
+import { PreLoaderView } from '../widgets/pre-loader';
+import DocumentContext from '../../document/document-context';
+import FocusingArea from '../widgets/focusing-area';
+import './canvas.less';
+
+const Canvas = () => (
+ {
+ const doc = getCurrentDocument();
+ if (doc) {
+ doc.selection.clear();
+ }
+ return false;
+ }}
+ >
+
+
+);
+
+export default Canvas;
+
+@observer
+class Screen extends Component {
+ render() {
+ const doc = getCurrentDocument();
+ // TODO: thinkof multi documents
+ return (
+ screen.mount(elmt)} className="my-screen">
+ {progressing.visible ?
: null}
+
+ {doc ?
: null}
+