modern-text 1.5.0 → 1.6.0

package/dist/index.cjs

@@ -828,92 +828,6 @@ class Measurer {
   }
 }
 
-class EventEmitter {
-  eventListeners = /* @__PURE__ */ new Map();
-  addEventListener(event, listener, options) {
-    const object = { value: listener, options };
-    const listeners = this.eventListeners.get(event);
-    if (!listeners) {
-      this.eventListeners.set(event, object);
-    } else if (Array.isArray(listeners)) {
-      listeners.push(object);
-    } else {
-      this.eventListeners.set(event, [listeners, object]);
-    }
-    return this;
-  }
-  removeEventListener(event, listener, options) {
-    if (!listener) {
-      this.eventListeners.delete(event);
-      return this;
-    }
-    const listeners = this.eventListeners.get(event);
-    if (!listeners) {
-      return this;
-    }
-    if (Array.isArray(listeners)) {
-      const events = [];
-      for (let i = 0, length = listeners.length; i < length; i++) {
-        const object = listeners[i];
-        if (object.value !== listener || typeof options === "object" && options?.once && (typeof object.options === "boolean" || !object.options?.once)) {
-          events.push(object);
-        }
-      }
-      if (events.length) {
-        this.eventListeners.set(event, events.length === 1 ? events[0] : events);
-      } else {
-        this.eventListeners.delete(event);
-      }
-    } else {
-      if (listeners.value === listener && (typeof options === "boolean" || !options?.once || (typeof listeners.options === "boolean" || listeners.options?.once))) {
-        this.eventListeners.delete(event);
-      }
-    }
-    return this;
-  }
-  removeAllListeners() {
-    this.eventListeners.clear();
-    return this;
-  }
-  hasEventListener(event) {
-    return this.eventListeners.has(event);
-  }
-  dispatchEvent(event, arg) {
-    const listeners = this.eventListeners.get(event);
-    if (listeners) {
-      if (Array.isArray(listeners)) {
-        for (let len = listeners.length, i = 0; i < len; i++) {
-          const object = listeners[i];
-          if (typeof object.options === "object" && object.options?.once) {
-            this.off(event, object.value, object.options);
-          }
-          object.value.apply(this, [arg]);
-        }
-      } else {
-        if (typeof listeners.options === "object" && listeners.options?.once) {
-          this.off(event, listeners.value, listeners.options);
-        }
-        listeners.value.apply(this, [arg]);
-      }
-      return true;
-    } else {
-      return false;
-    }
-  }
-  on(event, listener, options) {
-    return this.addEventListener(event, listener, options);
-  }
-  once(event, listener) {
-    return this.addEventListener(event, listener, { once: true });
-  }
-  off(event, listener, options) {
-    return this.removeEventListener(event, listener, options);
-  }
-  emit(event, arg) {
-    this.dispatchEvent(event, arg);
-  }
-}
-
 function background() {
   const pathSet = new modernPath2d.Path2DSet();
   const loader = createSVGLoader();
@@ -1626,13 +1540,17 @@ function textDecoration() {
   });
 }
 
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
 const textDefaultStyle = modernIdoc.getDefaultStyle();
-class Text extends EventEmitter {
-  debug;
-  content;
-  style;
-  effects;
-  measureDOM;
+class Text extends modernIdoc.EventEmitter {
   needsUpdate = true;
   computedStyle = { ...textDefaultStyle };
   paragraphs = [];
@@ -1643,7 +1561,6 @@ class Text extends EventEmitter {
   boundingBox = new modernPath2d.BoundingBox();
   measurer = new Measurer();
   plugins = /* @__PURE__ */ new Map();
-  fonts;
   get fontSize() {
     return this.computedStyle.fontSize;
   }
@@ -1660,9 +1577,9 @@ class Text extends EventEmitter {
   set(options = {}) {
     this.debug = options.debug ?? false;
     this.content = modernIdoc.normalizeTextContent(options.content ?? "");
+    this.effects = options.effects;
     this.style = options.style ?? {};
     this.measureDOM = options.measureDOM;
-    this.effects = options.effects;
     this.fonts = options.fonts;
     this.use(background()).use(outline()).use(listStyle()).use(textDecoration()).use(highlight()).use(render());
     (options.plugins ?? []).forEach((plugin) => {
@@ -1670,6 +1587,9 @@ class Text extends EventEmitter {
     });
     this.updateParagraphs();
   }
+  onUpdateProperty(key, newValue, oldValue, declaration) {
+    this.emit("updateProperty", key, newValue, oldValue, declaration);
+  }
   use(plugin) {
     this.plugins.set(plugin.name, plugin);
     return this;
@@ -1820,6 +1740,24 @@ class Text extends EventEmitter {
     return this.content.flatMap((p) => p.fragments.map((f) => f.content)).join("");
   }
 }
+__decorateClass$1([
+  modernIdoc.property()
+], Text.prototype, "debug");
+__decorateClass$1([
+  modernIdoc.property()
+], Text.prototype, "content");
+__decorateClass$1([
+  modernIdoc.property()
+], Text.prototype, "effects");
+__decorateClass$1([
+  modernIdoc.property()
+], Text.prototype, "style");
+__decorateClass$1([
+  modernIdoc.property()
+], Text.prototype, "measureDOM");
+__decorateClass$1([
+  modernIdoc.property()
+], Text.prototype, "fonts");
 
 function measureText(options, load) {
   const text = new Text(options);
@@ -1841,6 +1779,15 @@ function renderText(options, load) {
   return text.render(options);
 }
 
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
 function normalizeStyle(style) {
   const newStyle = {};
   for (const key in style) {
@@ -1850,13 +1797,14 @@ function normalizeStyle(style) {
   }
   return newStyle;
 }
-function contentsToCharStyles(contents) {
-  return contents.flatMap((p) => {
-    const res = p.fragments.flatMap((f) => {
-      const { content, ...style } = f;
-      return Array.from(modernIdoc.normalizeCRLF(content)).map(() => ({ ...style }));
+function textContentToCharStyles(textContent) {
+  return textContent.flatMap((p) => {
+    const { fragments } = p;
+    const res = fragments.flatMap((f) => {
+      const { content, ...fStyle } = f;
+      return Array.from(modernIdoc.normalizeCRLF(content)).map(() => ({ ...fStyle }));
     });
-    if (modernIdoc.isCRLF(modernIdoc.normalizeCRLF(p.fragments[p.fragments.length - 1]?.content ?? ""))) {
+    if (modernIdoc.isCRLF(modernIdoc.normalizeCRLF(fragments[fragments.length - 1]?.content ?? ""))) {
       return res;
     }
     return [...res, {}];
@@ -1876,21 +1824,26 @@ function parseHTML(html) {
 }
 class TextEditor extends HTMLElement {
   static observedAttributes = [
-    "left",
-    "top",
     "width",
-    "height",
-    "is-vertical"
+    "height"
   ];
   static register() {
     customElements.define("text-editor", this);
   }
-  left = 0;
-  top = 0;
-  width = 0;
-  height = 0;
+  _text = new Text();
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    if (value instanceof Text) {
+      this._text = value;
+    } else {
+      this._text.set(value);
+    }
+    this.setTextInput(this.getTextValue());
+    this.render();
+  }
   pixelRatio = 2;
-  text = new Text();
   composition = false;
   selection = [0, 0];
   prevSelection = [0, 0];
@@ -1898,7 +1851,6 @@ class TextEditor extends HTMLElement {
   $preview;
   $textInput;
   $cursor;
-  $cursorInput;
   get selectionMinMax() {
     return {
       min: Math.min(...this.selection),
@@ -1927,10 +1879,10 @@ class TextEditor extends HTMLElement {
     const toSelectableCharacter = (c) => {
       return {
         color: c.computedStyle.color,
-        left: c.inlineBox.left - this.text.boundingBox.left,
-        top: c.inlineBox.top - this.text.boundingBox.top,
-        width: c.inlineBox.width,
-        height: c.inlineBox.height,
+        left: c.lineBox.left - this.text.boundingBox.left,
+        top: c.lineBox.top - this.text.boundingBox.top,
+        width: c.lineBox.width,
+        height: c.lineBox.height,
         content: c.content
       };
     };
@@ -2001,21 +1953,17 @@ class TextEditor extends HTMLElement {
     position: absolute;
     width: 0;
     height: 0;
-    --color: 0, 0, 0;
   }
 
   .preview {
     position: absolute;
     left: 0;
     top: 0;
-    width: 100%;
-    height: 100%;
     --selection-color: rgba(var(--color, 0, 0, 0), 0.4);
   }
 
   .text-input {
     position: absolute;
-    z-index: -9999;
     opacity: 0;
     caret-color: transparent;
     left: 0;
@@ -2041,48 +1989,24 @@ class TextEditor extends HTMLElement {
       display: none;
     }
   }
-
-  .cursor-input {
-    position: absolute;
-    cursor: text;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    outline: 0;
-  }
   </style>
 
   <canvas class="preview"></canvas>
 
-  <textarea class="text-input"></textarea>
+  <textarea class="text-input" autofocus></textarea>
 
   <div class="cursor blink"></div>
-
-  <div
-    class="cursor-input"
-    autofocus
-    contenteditable="true"
-  ></div>
 `)
     );
     this.$preview = shadowRoot.querySelector(".preview");
     this.$textInput = shadowRoot.querySelector(".text-input");
     this.$cursor = shadowRoot.querySelector(".cursor");
-    this.$cursorInput = shadowRoot.querySelector(".cursor-input");
     this.$textInput.addEventListener("compositionstart", () => this.composition = true);
     this.$textInput.addEventListener("compositionend", () => this.composition = false);
     this.$textInput.addEventListener("keydown", this.onKeydown.bind(this));
     this.$textInput.addEventListener("input", this.onInput.bind(this));
     this.$textInput.addEventListener("blur", this.onBlur.bind(this));
-    this.$cursorInput.addEventListener("keydown", (e) => e.preventDefault());
-    this.$cursorInput.addEventListener("focus", this.onFocus.bind(this));
-    this.$cursorInput.addEventListener("mousedown", this.onMousedown.bind(this));
-  }
-  update(options) {
-    this.text.set(options);
-    this.setTextInput(this.getTextValue());
-    this.render();
+    this.$textInput.addEventListener("mousedown", this.onMousedown.bind(this));
   }
   getTextValue() {
     return modernIdoc.textContentToString(
@@ -2100,7 +2024,7 @@ class TextEditor extends HTMLElement {
       return emoji;
     });
     oldString = modernIdoc.normalizeCRLF(oldString);
-    const oldStyles = contentsToCharStyles(content);
+    const oldStyles = textContentToCharStyles(content);
     const styles = [];
     let styleIndex = 0;
     let oldStyleIndex = 0;
@@ -2125,14 +2049,15 @@ class TextEditor extends HTMLElement {
     });
     let charIndex = 0;
     const newContents = [];
-    modernIdoc.normalizeTextContent(newString).forEach((p) => {
-      let newParagraph = { fragments: [] };
+    modernIdoc.normalizeTextContent(newString).forEach((p, pI) => {
+      const { fragments: _, ...pStyle } = content[pI] ?? {};
+      let newParagraph = { ...pStyle, fragments: [] };
       let newFragment;
       p.fragments.forEach((f) => {
         Array.from(f.content).forEach((char) => {
           const style = styles[charIndex] ?? {};
           if (newFragment) {
-            const { content: _, ..._style } = newFragment;
+            const { content: _2, ..._style } = newFragment;
             if (isEqualStyle(style, _style)) {
               newFragment.content += char;
             } else {
@@ -2145,7 +2070,7 @@ class TextEditor extends HTMLElement {
           charIndex++;
         });
       });
-      if (!modernIdoc.isCRLF(p.fragments[p.fragments.length - 1].content)) {
+      if (!modernIdoc.isCRLF(p.fragments[p.fragments.length - 1]?.content ?? "")) {
         charIndex++;
       }
       if (newFragment) {
@@ -2153,7 +2078,7 @@ class TextEditor extends HTMLElement {
       }
       if (newParagraph.fragments.length) {
         newContents.push(newParagraph);
-        newParagraph = { fragments: [] };
+        newParagraph = { ...pStyle, fragments: [] };
       }
     });
     return newContents;
@@ -2175,8 +2100,11 @@ class TextEditor extends HTMLElement {
   }
   _timer;
   onKeydown(e) {
+    e.stopPropagation();
     switch (e.key) {
-          }
+      case "Escape":
+        return this.$textInput.blur();
+    }
     this.updateSelection();
     this.render();
     setTimeout(() => {
@@ -2188,12 +2116,8 @@ class TextEditor extends HTMLElement {
       this.render();
     }, 100);
   }
-  onFocus(e) {
-    e.preventDefault();
-    this.$cursorInput.blur();
-    this.$textInput?.focus();
-  }
   onBlur() {
+    this.emit("done", this.text);
   }
   findNearest(options) {
     const { x, y, xWeight = 1, yWeight = 1 } = options;
@@ -2257,6 +2181,9 @@ class TextEditor extends HTMLElement {
     this.$textInput.selectionEnd = end;
   }
   onMousedown(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.$textInput.focus();
     const index = this.findNearest({ x: e.offsetX, y: e.offsetY });
     this.selection = [index, index];
     this.updateDOMSelection();
@@ -2274,14 +2201,17 @@ class TextEditor extends HTMLElement {
     document.addEventListener("mouseup", onMouseup);
   }
   render() {
-    this.text.update();
-    this.width = this.text.boundingBox.width;
-    this.height = this.text.boundingBox.height;
     const isVertical = this.text.isVertical;
-    this.style.left = `${this.left}px`;
-    this.style.top = `${this.top}px`;
-    this.style.width = `${this.width}px`;
-    this.style.height = `${this.height}px`;
+    this.text.style = {
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      color: "#FFFFFFFF",
+      ...this.text.style
+    };
+    this.text.style.width = this.width;
+    this.text.style.height = this.height;
+    this.text.requestUpdate();
     let ctx;
     this.text.render({
       pixelRatio: this.pixelRatio,
@@ -2340,19 +2270,31 @@ class TextEditor extends HTMLElement {
       clearTimeout(this._timer);
     }
     this._timer = setTimeout(() => this.$cursor.classList.add("blink"), 500);
+    this.emit("rendered", this.text);
   }
-  attributeChangedCallback(name, oldValue, newValue) {
-    switch (name) {
-      case "left":
-      case "top":
-      case "width":
-      case "height":
-        this[name] = newValue;
-        this.render();
-        break;
-    }
+  requestUpdate() {
+    this.render();
+  }
+  attributeChangedCallback(name, _oldValue, newValue) {
+    this[name] = newValue;
+  }
+  emit(type, detail) {
+    return this.dispatchEvent(
+      new CustomEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail
+      })
+    );
   }
 }
+__decorateClass([
+  modernIdoc.property()
+], TextEditor.prototype, "width");
+__decorateClass([
+  modernIdoc.property()
+], TextEditor.prototype, "height");
 
 exports.Character = Character;
 exports.Fragment = Fragment;

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { NormalizedStyle, TextContent, NormalizedTextContent, NormalizedHighlight } from 'modern-idoc';
+import { NormalizedStyle, TextContent, EventEmitter, PropertyDeclaration, ReactiveObject, NormalizedTextContent, NormalizedHighlight } from 'modern-idoc';
 import { BoundingBox, Path2DDrawStyle, Path2D, Vector2, VectorLike, Path2DSet, Matrix3 } from 'modern-path2d';
 import { Fonts, SFNT } from 'modern-font';
 
@@ -114,25 +114,6 @@ interface TextOptions {
     plugins?: TextPlugin[];
 }
 
-type EventListenerValue<T = any> = (ev: T) => void;
-type EventListenerOptions = boolean | AddEventListenerOptions;
-interface EventListener<T = any> {
-    value: EventListenerValue<T>;
-    options?: EventListenerOptions;
-}
-declare class EventEmitter<T extends Record<string, any> = Record<string, any>> {
-    eventListeners: Map<keyof T, EventListener<any> | EventListener<any>[]>;
-    addEventListener<K extends keyof T>(event: K, listener: EventListenerValue<T[K]>, options?: EventListenerOptions): this;
-    removeEventListener<K extends keyof T>(event: K, listener: EventListenerValue<T[K]>, options?: EventListenerOptions): this;
-    removeAllListeners(): this;
-    hasEventListener(event: string): boolean;
-    dispatchEvent<K extends keyof T>(event: K, arg: T[K]): boolean;
-    on<K extends keyof T>(event: K, listener: EventListenerValue<T[K]>, options?: EventListenerOptions): this;
-    once<K extends keyof T>(event: K, listener: EventListenerValue<T[K]>): this;
-    off<K extends keyof T>(event: K, listener: EventListenerValue<T[K]>, options?: EventListenerOptions): this;
-    emit<K extends keyof T>(event: K, arg: T[K]): void;
-}
-
 interface MeasuredParagraph {
     paragraphIndex: number;
     left: number;
@@ -211,25 +192,32 @@ interface MeasureResult {
 }
 declare const textDefaultStyle: NormalizedStyle;
 interface TextEventMap {
-    update: {
+    updateProperty: [
+        key: string,
+        newValue: unknown,
+        oldValue: unknown,
+        declaration: PropertyDeclaration
+    ];
+    update: [{
         text: Text$1;
-    };
-    measure: {
+    }];
+    measure: [{
         text: Text$1;
         result: MeasureResult;
-    };
-    render: {
+    }];
+    render: [{
         text: Text$1;
         view: HTMLCanvasElement;
         pixelRatio: number;
-    };
+    }];
 }
-declare class Text$1 extends EventEmitter<TextEventMap> {
+declare class Text$1 extends EventEmitter<TextEventMap> implements ReactiveObject {
     debug: boolean;
     content: NormalizedTextContent;
-    style: Partial<NormalizedStyle>;
     effects?: Partial<NormalizedStyle>[];
+    style: Partial<NormalizedStyle>;
     measureDOM?: HTMLElement;
+    fonts?: Fonts;
     needsUpdate: boolean;
     computedStyle: NormalizedStyle;
     paragraphs: Paragraph[];
@@ -240,12 +228,12 @@ declare class Text$1 extends EventEmitter<TextEventMap> {
     boundingBox: BoundingBox;
     measurer: Measurer;
     plugins: Map<string, TextPlugin>;
-    fonts?: Fonts;
     get fontSize(): number;
     get isVertical(): boolean;
     get characters(): Character[];
     constructor(options?: TextOptions);
     set(options?: TextOptions): void;
+    onUpdateProperty(key: string, newValue: unknown, oldValue: unknown, declaration: PropertyDeclaration): void;
     use(plugin: TextPlugin): this;
     forEachCharacter(handle: (character: Character, ctx: {
         paragraphIndex: number;
@@ -332,15 +320,15 @@ interface SelectableCharacter {
     isLastSelected?: boolean;
     isCrlf?: boolean;
 }
-declare class TextEditor extends HTMLElement {
+declare class TextEditor extends HTMLElement implements ReactiveObject {
     static observedAttributes: string[];
-    static register(): void;
-    left: number;
-    top: number;
     width: number;
     height: number;
+    static register(): void;
+    protected _text: Text$1;
+    get text(): Text$1;
+    set text(value: Text$1 | TextOptions);
     pixelRatio: number;
-    text: Text$1;
     composition: boolean;
     selection: number[];
     prevSelection: number[];
@@ -348,7 +336,6 @@ declare class TextEditor extends HTMLElement {
     $preview: HTMLCanvasElement;
     $textInput: HTMLTextAreaElement;
     $cursor: HTMLElement;
-    $cursorInput: HTMLElement;
     get selectionMinMax(): {
         min: number;
         max: number;
@@ -363,14 +350,12 @@ declare class TextEditor extends HTMLElement {
         color: string;
     };
     constructor();
-    update(options: TextOptions): void;
     getTextValue(): string;
     getContentValue(content: NormalizedTextContent, newString?: string, oldString?: string): NormalizedTextContent;
     setTextInput(newText: string): void;
     onInput(): void;
     protected _timer?: any;
     onKeydown(e: KeyboardEvent): void;
-    onFocus(e: Event): void;
     onBlur(): void;
     findNearest(options: {
         x: number;
@@ -382,7 +367,9 @@ declare class TextEditor extends HTMLElement {
     updateDOMSelection(): void;
     onMousedown(e: MouseEvent): void;
     render(): void;
-    attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
+    requestUpdate(): void;
+    attributeChangedCallback(name: string, _oldValue: any, newValue: any): void;
+    emit(type: string, detail?: any): boolean;
 }
 
 export { Character, Fragment, Measurer, Paragraph, Text$1 as Text, TextEditor, background, createSVGLoader, createSVGParser, definePlugin, drawPath, filterEmpty, getHighlightStyle, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, listStyle, measureText, outline, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, textDefaultStyle, uploadColor, uploadColors };