- fix the bug causing the width of xterm-screen to decrease when drag…

…ging the resize-box vertically

- fix #79. The width of resize-box is adjusted to match that of the flex parent element when the parent is smaller than resize-box now.
- bump up the version of xterm addons

LICENSE-THIRD-PARTY

@@ -164,8 +164,8 @@
 │  ├─ repository: https://github.com/babel/babel
 │  ├─ publisher: The Babel Team
 │  ├─ url: https://babel.dev/team
-│  ├─ path: D:\workspace\ng-terminal\node_modules\@babel\helper-create-class-features-plugin\node_modules\@babel\helper-annotate-as-pure
-│  └─ licenseFile: D:\workspace\ng-terminal\node_modules\@babel\helper-create-class-features-plugin\node_modules\@babel\helper-annotate-as-pure\LICENSE
+│  ├─ path: D:\workspace\ng-terminal\node_modules\@babel\helper-remap-async-to-generator\node_modules\@babel\helper-annotate-as-pure
+│  └─ licenseFile: D:\workspace\ng-terminal\node_modules\@babel\helper-remap-async-to-generator\node_modules\@babel\helper-annotate-as-pure\LICENSE
 ├─ @babel/[email protected]
 │  ├─ licenses: MIT
 │  ├─ repository: https://github.com/babel/babel
@@ -6144,14 +6144,14 @@
 │  ├─ email: [email protected]
 │  ├─ path: D:\workspace\ng-terminal\node_modules\xtend
 │  └─ licenseFile: D:\workspace\ng-terminal\node_modules\xtend\LICENSE
-├─ xterm-addon-fit@0.7.0
+├─ xterm-addon-fit@0.8.0
 │  ├─ licenses: MIT
 │  ├─ repository: https://github.com/xtermjs/xterm.js
 │  ├─ publisher: The xterm.js authors
 │  ├─ url: https://xtermjs.org/
 │  ├─ path: D:\workspace\ng-terminal\node_modules\xterm-addon-fit
 │  └─ licenseFile: D:\workspace\ng-terminal\node_modules\xterm-addon-fit\LICENSE
-├─ xterm-addon-web-links@0.7.0
+├─ xterm-addon-web-links@0.9.0
 │  ├─ licenses: MIT
 │  ├─ repository: https://github.com/xtermjs/xterm.js
 │  ├─ publisher: The xterm.js authors

package.json

@@ -38,8 +38,8 @@
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "xterm": "^5.1.0",
-    "xterm-addon-fit": "^0.7.0",
-    "xterm-addon-web-links": "^0.7.0",
+    "xterm-addon-fit": "^0.8.0",
+    "xterm-addon-web-links": "^0.9.0",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

projects/demo/src/app/example.component.css

@@ -1,6 +1,5 @@
 .outer-box{
-    height: 40vh;
-    overflow-y: auto;
+    height: 30vh;
     padding: 5px 0px 5px 0px;
     /* TODO: setting max-height doesn't work with ng-terminal's fit() */
     /* TODO: automatically resizing following an outer box */

projects/demo/src/app/example.component.html

@@ -1,27 +1,20 @@
-<!-- <div>
-  <tabset>
-    <tab heading="Basic title" id="tab1">Basic content</tab>
-    <tab heading="Basic Title 1">Basic content 1</tab>
-    <tab heading="Basic Title 2">
-      <ng-terminal></ng-terminal>
-    </tab>
-  </tabset>
-</div> -->
 <mat-tab-group #tabGroup>
   <mat-tab label="Terminal1">
-    <div class="outer-box">
-      <ng-terminal
-        #term
-        [dataSource]="writeSubject"
-        (data)="onKeyInput($event)"
-        [rows]="_rows"
-        [cols]="_cols"
-        [minWidth]="200"
-        [minHeight]="200"
-        [draggable]="_draggable"
-        class="ng-terminal"
-      >
-      </ng-terminal>
+    <div style="display: flex">
+      <div style="flex: 1">
+        <ng-terminal
+          #term
+          [dataSource]="writeSubject"
+          (data)="onKeyInput($event)"
+          [rows]="_rows"
+          [cols]="_cols"
+          [minWidth]="200"
+          [minHeight]="200"
+          [draggable]="_draggable"
+          class="ng-terminal"
+        >
+        </ng-terminal>
+      </div>
     </div>
     <div
       [class.mat-elevation-z1]="true"

projects/ng-terminal/src/lib/linear-render.service.ts

@@ -94,20 +94,20 @@ export class LinearRenderService implements OnDestroy {
 }
 
 export type PropertyChangeSet =
-  | { type: 'rowChanged'}
-  | { type: 'columnChanged'}
+  | { time: Date; type: 'rowChanged'}
+  | { time: Date; type: 'columnChanged'}
   | {
-      type: 'dragged';
+      time: Date; type: 'dragged';
       dragged: { draggedWidth: string; draggedHeight: string };
     }
-  | { type: 'hostResized'; hostResized: { width: string; height: string } }
+  | { time: Date; type: 'hostResized'; hostResized: { width: string; height: string } }
   | {
-      type: 'xtermViewportExceedingOuterDiv';
+      time: Date; type: 'xtermViewportExceedingOuterDiv';
       xtermViewportExceedingOuterDiv: {
         width: string;
         height: string;
         outerDivWidth: string;
         outerDivHeight: string;
       };
     }
-  | { type: 'none' };
+  | { time: Date; type: 'none' };

projects/ng-terminal/src/lib/ng-terminal.component.html

@@ -1,3 +1,4 @@
+<!-- Hierarchy: parent element(user) > host element(ng-terminal) > resize-box element > outer element -->
 <global-style></global-style>
 <div mwlResizable #resizeBox class="resize-box" [validateResize]="validatorFactory()" [enableGhostResize]="true"
     (resizeEnd)="onResizeEnd($event.rectangle.left, $event.rectangle.top, $event.rectangle.width??0, $event.rectangle.height??0)">