Iframe designer

packages/web-component-designer/src/elements/helper/ElementHelper.ts

@@ -26,23 +26,27 @@ export enum ElementDisplayType {
 }
 
 export function isInline(element: HTMLElement): boolean {
-  if (element instanceof SVGElement)
+  if (element == null)
     return false;
-  return element != null && window.getComputedStyle(element).display.startsWith('inline');
+  if (element instanceof element.ownerDocument.defaultView.SVGElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement || element instanceof element.ownerDocument.defaultView.HTMLHeadElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement)
+    return false;
+  return element.ownerDocument.defaultView.getComputedStyle(element).display.startsWith('inline');
 }
 
 export function isInlineAfter(element: HTMLElement): boolean {
-  if (element instanceof SVGElement)
+  if (element == null)
+    return false;
+  if (element instanceof element.ownerDocument.defaultView.SVGElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement || element instanceof element.ownerDocument.defaultView.HTMLHeadElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement)
     return false;
-  return element != null && window.getComputedStyle(element).display.startsWith('inline');
+  return element.ownerDocument.defaultView.getComputedStyle(element).display.startsWith('inline');
 }
 
 export function getElementDisplaytype(element: HTMLElement): ElementDisplayType {
-  if (element instanceof SVGElement)
+  if (element instanceof element.ownerDocument.defaultView.SVGElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement || element instanceof element.ownerDocument.defaultView.HTMLHeadElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement)
     return ElementDisplayType.block;
-  if (element instanceof MathMLElement)
+  if (element instanceof element.ownerDocument.defaultView.MathMLElement)
     return ElementDisplayType.block;
-  const display = window.getComputedStyle(element).display;
+  const display = element.ownerDocument.defaultView.getComputedStyle(element).display;
   return display == 'none' ? ElementDisplayType.none : display.startsWith('inline') ? ElementDisplayType.inline : ElementDisplayType.block;
 }
 
@@ -98,17 +102,17 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
 
     let nextParent = element.offsetParent ? element.offsetParent : (<ShadowRoot>element.getRootNode()).host;
 
-    if (element instanceof SVGSVGElement || element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+    if (element instanceof element.ownerDocument.defaultView.SVGSVGElement || element instanceof element.ownerDocument.defaultView.HTMLBodyElement || element instanceof element.ownerDocument.defaultView.HTMLHtmlElement) {
       nextParent = element.parentElement ? element.parentElement : (<ShadowRoot>element.getRootNode()).host;
-    } else if (element instanceof SVGGraphicsElement) {
+    } else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
       nextParent = element.ownerSVGElement;
-    } else if (element instanceof MathMLElement) {
+    } else if (element instanceof element.ownerDocument.defaultView.MathMLElement) {
       nextParent = element.parentElement ?? nextParent;
     }
 
     let scrollLeft = 0;
     let scrollTop = 0;
-    if (element instanceof HTMLElement) {
+    if (element instanceof element.ownerDocument.defaultView.HTMLElement) {
       let parent = element.parentElement;
       while (parent !== null && parent !== nextParent) {
         scrollLeft += parent.scrollLeft;
@@ -124,7 +128,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
 
     let currLeft = 0;
     let currTop = 0;
-    if (element instanceof SVGSVGElement || element instanceof MathMLElement) {
+    if (element instanceof element.ownerDocument.defaultView.SVGSVGElement || element instanceof element.ownerDocument.defaultView.MathMLElement) {
       //TODO: !huge Perf impact! - fix without transformation
       let t = element.style.transform;
       element.style.transform = '';
@@ -133,7 +137,7 @@ export function getElementsWindowOffsetWithoutSelfAndParentTransformations(eleme
       element.style.transform = t;
       currLeft = (bcEl.left - bcPar.left) / zoom;
       currTop = (bcEl.top - bcPar.top) / zoom;
-    } else if (element instanceof SVGGraphicsElement) {
+    } else if (element instanceof element.ownerDocument.defaultView.SVGGraphicsElement) {
       let bbox = element.getBBox();
       currLeft = bbox.x
       currTop = bbox.y;

packages/web-component-designer/src/elements/helper/LayoutHelper.ts

@@ -42,10 +42,10 @@ export function placeDesignItem(container: IDesignItem, designItem: IDesignItem,
 
   if (mode === 'position') {
     let positionedContainerElement = container.element;
-    let computedStylePositionedContainer = getComputedStyle(container.element);
-    if (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute') {
-      positionedContainerElement = (<HTMLElement> positionedContainerElement).offsetParent;
-      computedStylePositionedContainer = getComputedStyle(positionedContainerElement);
+    let computedStylePositionedContainer = container.getComputedStyle();
+    if (computedStylePositionedContainer.position !== 'relative' && computedStylePositionedContainer.position !== 'absolute' && (<HTMLElement>positionedContainerElement).offsetParent) {
+      positionedContainerElement = (<HTMLElement>positionedContainerElement).offsetParent;
+      computedStylePositionedContainer = container.window.getComputedStyle(positionedContainerElement);
     }
 
     let oldLeft = null;

packages/web-component-designer/src/elements/helper/StylesheetHelper.ts

@@ -0,0 +1,6 @@
+export function stylesheetFromString(window: Window, text: string) {
+    //@ts-ignore
+    const newStylesheet = new window.CSSStyleSheet();
+    newStylesheet.replaceSync(text);
+    return newStylesheet;
+}

packages/web-component-designer/src/elements/helper/TransformHelper.ts

@@ -318,12 +318,12 @@ export function getDesignerCanvasNormalizedTransformedCornerDOMPoints(element: H
   let top2Transformed = top2.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
   let top3Transformed = top3.matrixTransform(originalElementAndAllParentsMultipliedMatrix);
 
-  let transformedCornerPoints: [DOMPoint, DOMPoint, DOMPoint, DOMPoint] = <any>[];
-  transformedCornerPoints[0] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top0Transformed.x, designerCanvasNormalizedTransformOrigin.y + top0Transformed.y);
-  transformedCornerPoints[1] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top1Transformed.x, designerCanvasNormalizedTransformOrigin.y + top1Transformed.y);
-  transformedCornerPoints[2] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top2Transformed.x, designerCanvasNormalizedTransformOrigin.y + top2Transformed.y);
-  transformedCornerPoints[3] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top3Transformed.x, designerCanvasNormalizedTransformOrigin.y + top3Transformed.y);
-
+  const transformedCornerPoints: [DOMPoint, DOMPoint, DOMPoint, DOMPoint] = <any>[];
+  const offset = designerCanvas.containerOffset;
+  transformedCornerPoints[0] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top0Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top0Transformed.y + offset.y);
+  transformedCornerPoints[1] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top1Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top1Transformed.y + offset.y);
+  transformedCornerPoints[2] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top2Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top2Transformed.y + offset.y);
+  transformedCornerPoints[3] = new DOMPoint(designerCanvasNormalizedTransformOrigin.x + top3Transformed.x + offset.x, designerCanvasNormalizedTransformOrigin.y + top3Transformed.y + offset.y);
 
   return transformedCornerPoints;
 }

packages/web-component-designer/src/elements/item/DesignItem.ts

@@ -34,6 +34,22 @@ export class DesignItem implements IDesignItem {
   instanceServiceContainer: InstanceServiceContainer;
   nodeReplaced = new TypedEvent<void>;
 
+  get window() {
+    return this.node.ownerDocument.defaultView;
+  }
+
+  get document() {
+    return this.node.ownerDocument;
+  }
+
+  get usableContainer() {
+    if (this.isRootItem && this.element instanceof HTMLIFrameElement)
+      return this.element.contentWindow.document;
+    else if (this.isRootItem)
+      return (<HTMLElement>this.node).shadowRoot;
+    return this.element;
+  }
+
   async clone() {
     try {
       const html = DomConverter.ConvertToString([this], false);
@@ -398,6 +414,12 @@ export class DesignItem implements IDesignItem {
     }
   }
 
+  updateChildrenFromNodesChildren() {
+    this._childArray = this._internalUpdateChildrenFromNodesChildren();
+    for (let c of this._childArray) {
+      (<DesignItem>c)._parent = this;
+    }
+  }
 
   _internalUpdateChildrenFromNodesChildren() {
     const newChilds = [];
@@ -407,6 +429,11 @@ export class DesignItem implements IDesignItem {
           const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
           newChilds.push(di);
         }
+      } else if (this.element instanceof HTMLIFrameElement) {
+        for (const c of this.element.contentWindow.document.childNodes) {
+          const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
+          newChilds.push(di);
+        }
       } else {
         for (const c of this.element.childNodes) {
           const di = DesignItem.createDesignItemFromInstance(c, this.serviceContainer, this.instanceServiceContainer);
@@ -612,7 +639,7 @@ export class DesignItem implements IDesignItem {
 
   getComputedStyle() {
     if (this.nodeType == NodeType.Element)
-      return window.getComputedStyle(this.element);
+      return this.window.getComputedStyle(this.element);
     return null;
   }
 

packages/web-component-designer/src/elements/item/IDesignItem.ts

@@ -11,6 +11,11 @@ export interface IDesignItem {
 
   lastContainerSize: ISize;
 
+  readonly window: Window & typeof globalThis;
+  readonly document: Document;
+  readonly usableContainer: ShadowRoot | Element | Document;
+  updateChildrenFromNodesChildren();
+
   setView(node: Element);
 
   replaceNode(newNode: Node);
@@ -76,7 +81,7 @@ export interface IDesignItem {
   setStyleAsync(name: string, value?: string | null, important?: boolean): Promise<void>;
   removeStyle(name: string);
   updateStyleInSheetOrLocal(name: string, value?: string | null, important?: boolean, forceSet?: boolean);
-  updateStyleInSheetOrLocalAsync(name: string, value?: string | null, important?: boolean, forceSet?: boolean) : Promise<void>;
+  updateStyleInSheetOrLocalAsync(name: string, value?: string | null, important?: boolean, forceSet?: boolean): Promise<void>;
   getStyleFromSheetOrLocal(name: string, fallback?: string);
   getStyleFromSheetOrLocalOrComputed(name: string, fallback?: string)
   getAllStyles(): IStyleRule[];

packages/web-component-designer/src/elements/services/htmlWriterService/HtmlWriterService.ts

@@ -12,26 +12,26 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
   }
 
   private _conditionalyWriteIndent(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem) {
-    if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
-      (designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+    if ((designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element)) ||
+      (designItem.element.previousElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
       (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
-      (designItem.element instanceof SVGElement)
+      (designItem.element instanceof designItem.window.SVGElement)
     )
       indentedTextWriter.writeIndent();
   }
 
   private _conditionalyWriteIndentBefore(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem) {
-    if ((designItem.element.previousElementSibling instanceof HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
+    if ((designItem.element.previousElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.previousElementSibling)) ||
       (designItem.element.previousElementSibling == null && !isInline(designItem.element.parentElement) && (designItem.element.previousSibling == null || isEmptyTextNode(designItem.element.previousSibling))) ||
-      (designItem.element instanceof SVGElement)
+      (designItem.element instanceof designItem.window.SVGElement)
     )
       indentedTextWriter.writeIndent();
   }
 
   private _conditionalyWriteNewline(indentedTextWriter: IndentedTextWriter, designItem: IDesignItem) {
-    if ((designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element)) ||
-      (designItem.element.nextElementSibling instanceof HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
-      (designItem.element instanceof SVGElement)
+    if ((designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element)) ||
+      (designItem.element.nextElementSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.nextElementSibling)) ||
+      (designItem.element instanceof designItem.window.SVGElement)
     )
       indentedTextWriter.writeNewline();
   }
@@ -49,8 +49,8 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
 
     if (designItem.nodeType == NodeType.TextNode) {
       if (isEmptyTextNode(designItem.element) &&
-        ((designItem.element.previousSibling instanceof HTMLElement && !isInlineAfter(designItem.element.previousSibling)) ||
-          (designItem.element.nextSibling instanceof HTMLElement && !isInline(designItem.element.nextSibling)))) {
+        ((designItem.element.previousSibling instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element.previousSibling)) ||
+          (designItem.element.nextSibling instanceof designItem.window.HTMLElement && !isInline(designItem.element.nextSibling)))) {
       } else
         this.writeTextNode(indentedTextWriter, designItem, true);
       end = indentedTextWriter.position;
@@ -78,7 +78,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
           const notrim = designItem.name == 'script' || designItem.name == 'style' || designItem.name == 'pre';
           this.writeTextNode(indentedTextWriter, designItem, false, !notrim);
         } else {
-          if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
+          if (designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof designItem.window.SVGElement)) {
             indentedTextWriter.writeNewline();
             indentedTextWriter.levelRaise();
           }
@@ -89,7 +89,7 @@ export class HtmlWriterService extends AbstractHtmlWriterService {
               if (!indentedTextWriter.isLastCharNewline())
                 this._conditionalyWriteNewline(indentedTextWriter, c);
           }
-          if (designItem.element instanceof HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof SVGElement)) {
+          if (designItem.element instanceof designItem.window.HTMLElement && !isInlineAfter(designItem.element) || (designItem.element instanceof designItem.window.SVGElement)) {
             indentedTextWriter.levelShrink();
             if (!indentedTextWriter.isLastCharNewline())
               indentedTextWriter.writeNewline();

packages/web-component-designer/src/elements/services/placementService/SnaplinesProviderService.ts

@@ -20,7 +20,7 @@ export class SnaplinesProviderService implements ISnaplinesProviderService {
       const positionsV: [number, IRect][] = [];
       const positionsMiddleV: [number, IRect][] = [];
 
-      const tw = document.createTreeWalker(containerItem.isRootItem ? containerItem.element.shadowRoot : containerItem.element, NodeFilter.SHOW_ELEMENT);
+      const tw = containerItem.document.createTreeWalker(containerItem.usableContainer, NodeFilter.SHOW_ELEMENT);
       let n: Element = <Element>tw.nextNode();
       while (n != null) {
         if (ignMap.has(<Element>n)) {

packages/web-component-designer/src/elements/services/undoService/ChangeGroup.ts

@@ -3,6 +3,8 @@ import { IDesignItem } from '../../item/IDesignItem.js';
 
 export class ChangeGroup implements ITransactionItem {
 
+  redoBranches?: ITransactionItem[][];
+
   title: string;
   get affectedItems(): IDesignItem[] {
     let s = new Set<IDesignItem>();

packages/web-component-designer/src/elements/services/undoService/ITransactionItem.ts

@@ -6,4 +6,5 @@ export interface ITransactionItem {
   do: () => void
   undo: () => void
   mergeWith(other: ITransactionItem): boolean;
+  redoBranches?: ITransactionItem[][];
 };

packages/web-component-designer/src/elements/services/undoService/IUndoService.ts

@@ -3,14 +3,16 @@ import { ChangeGroup } from './ChangeGroup.js';
 import { ITransactionItem } from './ITransactionItem.js';
 
 export interface IUndoService extends IService {
-  openGroup(title: string): ChangeGroup
-  execute(item: ITransactionItem): void
+  openGroup(title: string): ChangeGroup;
+  execute(item: ITransactionItem): void;
   canUndo(): boolean;
   canRedo(): boolean;
   clear();
   clearTransactionstackIfNotEmpty();
   undo();
   redo();
-  getUndoEntries(count?: number): Generator<string, void, unknown>
-  getRedoEntries(count?: number): Generator<string, void, unknown>
+  getUndoEntries(count?: number): Generator<string, void, unknown>;
+  getRedoEntries(count?: number): Generator<string, void, unknown>;
+  readonly undoCount: number;
+  readonly redoCount: number;
 }

packages/web-component-designer/src/elements/services/undoService/UndoService.ts

@@ -11,9 +11,11 @@ export class UndoService implements IUndoService {
   private _redoStack: ITransactionItem[] = [];
   private _transactionStack: ChangeGroup[] = [];
   private _designerCanvas: IDesignerCanvas;
+  private _storeRedoBranches: boolean;
 
-  constructor(designerCanvas: IDesignerCanvas) {
+  constructor(designerCanvas: IDesignerCanvas, storeRedoBranches: boolean = false) {
     this._designerCanvas = designerCanvas;
+    this._storeRedoBranches = storeRedoBranches;
   }
 
   openGroup(title: string): ChangeGroup {
@@ -32,8 +34,13 @@ export class UndoService implements IUndoService {
       if (this._transactionStack.length > 0) {
         this._transactionStack[this._transactionStack.length - 1].addCommitedSubchangeGroup(itm);
       } else {
-        this._undoStack.push(itm);
+        if (this._storeRedoBranches && this._redoStack.length) {
+          if (itm.redoBranches == null)
+            itm.redoBranches = [];
+          itm.redoBranches.push(this._redoStack);
+        }
         this._redoStack = [];
+        this._undoStack.push(itm);
       }
     }
     if (this._transactionStack.length == 0) {
@@ -56,8 +63,13 @@ export class UndoService implements IUndoService {
   execute(item: ITransactionItem) {
     if (this._transactionStack.length == 0) {
       item.do();
-      this._undoStack.push(item);
+      if (this._storeRedoBranches && this._redoStack.length) {
+        if (item.redoBranches == null)
+          item.redoBranches = [];
+        item.redoBranches.push(this._redoStack);
+      }
       this._redoStack = [];
+      this._undoStack.push(item);
     } else {
       this._transactionStack[this._transactionStack.length - 1].execute(item);
     }
@@ -124,6 +136,14 @@ export class UndoService implements IUndoService {
     return this._redoStack.length > 0;
   }
 
+  get undoCount(): number {
+    return this._undoStack.length;
+  }
+
+  get redoCount(): number {
+    return this._redoStack.length;
+  }
+
   *getUndoEntries(count: number = 999): Generator<string, void, unknown> {
     for (let i = Math.min(this._undoStack.length, count) - 1; i >= 0; i--)
       yield this._undoStack[i].title;