@talrace/ngx-noder 0.0.40 → 0.0.41

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Directive, Injectable, inject, ChangeDetectorRef, HostBinding, Input, InjectionToken, createComponent, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, signal, NgModule, Inject } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, startWith, takeUntil, catchError, debounceTime, distinctUntilChanged } from 'rxjs';
+import { Subject, BehaviorSubject, fromEvent, throttleTime, take, filter, startWith, takeUntil, distinctUntilChanged, tap, map, catchError, debounceTime } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import * as i3 from '@angular/common';
-import { CommonModule, AsyncPipe } from '@angular/common';
+import { AsyncPipe, CommonModule } from '@angular/common';
 import { ComponentPortal } from '@angular/cdk/portal';
 import * as i1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
@@ -431,6 +431,14 @@ class OperationsHistoryInfoModel {
     }
 }
 
+class PageFormatModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class EditorService {
     constructor() {
         this._styles$ = new BehaviorSubject({});
@@ -487,6 +495,10 @@ class EditorService {
         this._applyDocumentPageFormat$ = new Subject();
         this._insertPageFormat$ = new Subject();
         this._applyPageFormat$ = new Subject();
+        this._pageFormat$ = new BehaviorSubject(new PageFormatModel());
+        this._leftMarginPageFormat$ = new Subject();
+        this._rightMarginPageFormat$ = new Subject();
+        this._tabParagraph$ = new Subject();
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -679,22 +691,43 @@ class EditorService {
         return this._applyPageFormat$.asObservable();
     }
     get pageFormat() {
-        return this._pageFormat;
+        return this._pageFormat$.value;
+    }
+    get pageFormat$() {
+        return this._pageFormat$.asObservable();
+    }
+    get leftMarginPageFormat$() {
+        return this._leftMarginPageFormat$.asObservable();
+    }
+    get rightMarginPageFormat$() {
+        return this._rightMarginPageFormat$.asObservable();
+    }
+    get tabParagraph$() {
+        return this._tabParagraph$.asObservable();
+    }
+    applyTabParagraph(value) {
+        this._tabParagraph$.next(value);
+    }
+    applyRightMarginPageFormat(value) {
+        this._rightMarginPageFormat$.next(value);
+    }
+    applyLeftMarginPageFormat(value) {
+        this._leftMarginPageFormat$.next(value);
     }
     applyDocumentPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._applyDocumentPageFormat$.next(value);
     }
     applyPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._applyPageFormat$.next(value);
     }
     insertPageFormat(value) {
-        this._pageFormat = value;
+        this.setPageFormat(value);
         this._insertPageFormat$.next(value);
     }
     setPageFormat(value) {
-        this._pageFormat = value;
+        this._pageFormat$.next(value);
     }
     setLastPageNumber(value) {
         if (this.lastPageNumber === value) {
@@ -1037,14 +1070,6 @@ class AddNumberingModel {
     }
 }
 
-class PageFormatModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ApplyDocumentPageFormatModel {
     constructor(fields) {
         if (fields) {
@@ -7307,7 +7332,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.search = new Search();
         this.search.set({ wrap: true });
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8362,6 +8387,9 @@ class Editor {
             this.renderer.updateCursor();
         }
         this.editorService.setHasSelection(!this.selection.isEmpty);
+        const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
+        const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
+        this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
     }
     enableSelection() {
@@ -8485,6 +8513,24 @@ class Editor {
         }
         return null;
     }
+    applyLeftMarginPageFormat(value) {
+        const position = this.selection.cursor;
+        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
+        const oldPageFormat = this.mainSession.displayData.getPageFormatAtPosition(startIndex).pageFormatModel;
+        const newPageFormat = new PageFormatModel({ ...oldPageFormat, marginLeft: value });
+        this.saveApplyPageFormatToHistory(oldPageFormat, newPageFormat);
+        OperationsHelper.updatePageFormat(this.model, newPageFormat);
+        this.recreateMainSession();
+    }
+    applyRightMarginPageFormat(value) {
+        const position = this.selection.cursor;
+        const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
+        const oldPageFormat = this.mainSession.displayData.getPageFormatAtPosition(startIndex).pageFormatModel;
+        const newPageFormat = new PageFormatModel({ ...oldPageFormat, marginRight: value });
+        this.saveApplyPageFormatToHistory(oldPageFormat, newPageFormat);
+        OperationsHelper.updatePageFormat(this.model, newPageFormat);
+        this.recreateMainSession();
+    }
     applyPageFormat(model) {
         const position = this.selection.cursor;
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, position.row, position.column);
@@ -8525,6 +8571,12 @@ class Editor {
             this.selection?.clearSelection();
         });
     }
+    applyLeftMarginPageFormatSubscription() {
+        return this.editorService.leftMarginPageFormat$.subscribe(value => this.applyLeftMarginPageFormat(value));
+    }
+    applyRightMarginPageFormatSubscription() {
+        return this.editorService.rightMarginPageFormat$.subscribe(value => this.applyRightMarginPageFormat(value));
+    }
     applyPageFormatSubscription() {
         return this.editorService.applyPageFormat$.subscribe(pageFormat => this.applyPageFormat(pageFormat));
     }
@@ -14203,14 +14255,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 
 class EditorRulerComponent {
     constructor() {
+        this.editorService = inject(EditorService);
         this.pxPerCm = 37.8; // 96dpi / 2.54
         this.snapCm = 0.25;
-        this.defaultPadding = 2.5;
-        this.offsetPosition = 5;
+        this.defaultPaddingCm = 2.5;
+        this.pageWidth$ = this.editorService.pageFormat$.pipe(distinctUntilChanged(), tap(x => {
+            this.recalcGeometry(x.pageWidth);
+            this.buildTicks();
+            this.rightPx.set(x.pageWidth - x.marginRight);
+            this.leftPx.set(x.marginLeft);
+        }), map(x => x.pageWidth));
         this.containerWidthPx = 0;
         this.ticks = [];
-        this.leftPx = signal(this.defaultPadding * this.pxPerCm);
-        this.firstLinePx = signal(this.defaultPadding * this.pxPerCm);
+        this.leftPx = signal(this.defaultPaddingCm * this.pxPerCm);
+        this.firstLinePx = signal(this.defaultPaddingCm * this.pxPerCm);
         this.rightPx = signal(0);
         this.guideX = signal(0);
         this.showGuide = signal(false);
@@ -14224,7 +14282,7 @@ class EditorRulerComponent {
             const pointX = this.getClientX(ev);
             const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
             let x = pointX - rect.left - this.dragOffsetX;
-            if (x < -1 || x > this.maxRulePosition) {
+            if (x < -1 || x > this.containerWidthPx) {
                 return;
             }
             x = this.snapPx(x);
@@ -14240,6 +14298,15 @@ class EditorRulerComponent {
             this.guideX.set(x);
         };
         this.onUp = () => {
+            if (this.dragging === 'left') {
+                this.editorService.applyLeftMarginPageFormat(Math.round(this.leftPx()));
+            }
+            else if (this.dragging === 'first') {
+                this.editorService.applyTabParagraph(Math.round(this.firstLinePx()));
+            }
+            else {
+                this.editorService.applyRightMarginPageFormat(Math.round(this.containerWidthPx - this.rightPx()));
+            }
             this.dragging = null;
             this.showGuide.set(false);
             window.removeEventListener('mousemove', this.onMove);
@@ -14248,7 +14315,7 @@ class EditorRulerComponent {
             window.removeEventListener('touchend', this.onUp);
         };
     }
-    ngAfterViewInit() {
+    afterViewInit() {
         this.recalcGeometry();
         this.buildTicks();
         this.rightPx.set(this.containerWidthPx - this.cmToPx(2.5));
@@ -14257,9 +14324,8 @@ class EditorRulerComponent {
         this.recalcGeometry();
         this.buildTicks();
     }
-    recalcGeometry() {
-        const rect = this.rulerContainer.nativeElement.getBoundingClientRect();
-        this.containerWidthPx = rect.width - 10; // because padding 5px
+    recalcGeometry(width = null) {
+        this.containerWidthPx = width ?? this.rulerContainer.nativeElement.getBoundingClientRect().width;
     }
     cmToPx(cm) {
         return cm * this.pxPerCm;
@@ -14274,35 +14340,37 @@ class EditorRulerComponent {
     }
     buildTicks() {
         const totalCm = Math.ceil(this.pxToCm(this.containerWidthPx));
-        this.maxRulePosition = (totalCm - 1) * this.pxPerCm;
         const ticks = [
             {
-                position: this.cmToPx(0) + this.offsetPosition,
+                position: this.cmToPx(0),
                 major: false,
                 half: true,
                 label: null,
                 originalPaddings: -2.5
             },
             {
-                position: this.cmToPx(0.25) + this.offsetPosition,
+                position: this.cmToPx(0.25),
                 major: false,
                 half: false,
                 label: null,
                 originalPaddings: -2.25
             }
         ];
-        for (let cm = 1; cm < totalCm; cm++) {
-            const position = this.cmToPx(cm) + this.offsetPosition - this.pxPerCm / 2;
+        for (let cm = 1; cm <= totalCm; cm++) {
+            const position = this.cmToPx(cm) - this.pxPerCm / 2;
             ticks.push({ position, major: true, half: false, label: Math.abs(cm - 3), originalPaddings: cm - 3 }); // -3 because we start the line with 2.5
-            if (cm < totalCm) {
+            if (cm <= totalCm) {
                 for (let i = 1; i < 4; i++) {
-                    ticks.push({
-                        position: this.cmToPx(cm + i * 0.25) + this.offsetPosition - this.pxPerCm / 2,
-                        major: false,
-                        half: i === 2,
-                        label: null,
-                        originalPaddings: cm - 3 + i * 0.25
-                    });
+                    const tickPosition = position + this.cmToPx(i * 0.25);
+                    if (tickPosition < this.containerWidthPx) {
+                        ticks.push({
+                            position: tickPosition,
+                            major: false,
+                            half: i === 2,
+                            label: null,
+                            originalPaddings: cm - 3 + i * 0.25
+                        });
+                    }
                 }
             }
         }
@@ -14346,11 +14414,11 @@ class EditorRulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX() + offsetPosition\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;width:804px;padding:0 5px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-25%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule], template: "<div\n    class=\"ruler-container\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPadding * pxPerCm + offsetPosition\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX() + offsetPosition\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;width:804px;padding:0 5px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-25%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"defaultPaddingCm * pxPerCm\"></div>\n    <div class=\"ruler-track\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftPx()\"\n        (mousedown)=\"startDrag($event, 'left')\"\n        (touchstart)=\"startDrag($event, 'left')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightPx()\"\n        (mousedown)=\"startDrag($event, 'right')\"\n        (touchstart)=\"startDrag($event, 'right')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;width:100%;height:22px;justify-content:center;align-items:center}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:ew-resize;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px}.page-marker{bottom:-6px}.left-area,.right-area{position:absolute;height:18px}.left-area{left:0}.right-area{right:0}\n"] }]
         }], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]