Merge branch 'develop' into xws/#WIK-16851

worktile · Nov 27, 2024 · 432ec16 · 432ec16
2 parents bf27d24 + 967c422
commit 432ec16
Show file tree

Hide file tree

Showing 18 changed files with 83 additions and 58 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [0.0.17](https://github.com/worktile/ai-table/compare/0.0.16...0.0.17) (2024-11-27)
+
+
+### Bug Fixes
+
+* **field-head:** correct field more icon style and action #WIK-16740 ([08b0901](https://github.com/worktile/ai-table/commit/08b09016ff42b65c40afc06031376214821d3b43)), closes [#WIK-16740](https://github.com/worktile/ai-table/issues/WIK-16740)
+* **field:** correct editFieldPosition #WIK-16748 ([5f46b69](https://github.com/worktile/ai-table/commit/5f46b6911f5ba6e6b90fc3825a5829e50e8b32c1)), closes [#WIK-16748](https://github.com/worktile/ai-table/issues/WIK-16748)
+* **renderer:** support full width add blank #WIK-16745 ([90cc20b](https://github.com/worktile/ai-table/commit/90cc20bf08f9a9a109ced0c3956bb5a2dca59d6a)), closes [#WIK-16745](https://github.com/worktile/ai-table/issues/WIK-16745)
+* **state:** #WIK-16805 new row coordination error ([2e21b9b](https://github.com/worktile/ai-table/commit/2e21b9b22c6aa8c7d9c42b41ca8e89f5b39e15b6)), closes [#WIK-16805](https://github.com/worktile/ai-table/issues/WIK-16805)
+
+
+### Features
+
+* **field:** support hover style for add field blank #WIK-16857 ([68a4248](https://github.com/worktile/ai-table/commit/68a424895a3b331008efc070f6997edd462f7e3a)), closes [#WIK-16857](https://github.com/worktile/ai-table/issues/WIK-16857)
+
+
+
 ## [0.0.16](https://github.com/worktile/ai-table/compare/0.0.15...0.0.16) (2024-11-25)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ai-table",
-    "version": "0.0.16",
+    "version": "0.0.17",
     "workspaces": [
         "packages/*"
     ],

diff --git a/packages/grid/package.json b/packages/grid/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ai-table/grid",
-    "version": "0.0.16",
+    "version": "0.0.17",
     "peerDependencies": {
         "@angular/common": "^18.1.4",
         "@angular/core": "^18.1.4",

diff --git a/packages/grid/src/grid.component.html b/packages/grid/src/grid.component.html
@@ -8,7 +8,7 @@
             (koDblclick)="stageDblclick($event)"
         >
             <div #horizontalBar class="ai-table-horizontal-scroll-bar-wrapper" [style.width.px]="containerRect().width">
-                <div class="ai-table-scroll-bar-inner" [style.width.px]="coordinate().totalWidth + ADD_BUTTON_WIDTH"></div>
+                <div class="ai-table-scroll-bar-inner" [style.width.px]="scrollbarWidth()"></div>
             </div>
             <div
                 #verticalBar

diff --git a/packages/grid/src/grid.component.ts b/packages/grid/src/grid.component.ts
@@ -16,6 +16,7 @@ import { filter, fromEvent } from 'rxjs';
 import { KoEventObject } from './angular-konva';
 import {
     AI_TABLE_CELL,
+    AI_TABLE_CELL_PADDING,
     AI_TABLE_FIELD_ADD_BUTTON,
     AI_TABLE_FIELD_ADD_BUTTON_WIDTH,
     AI_TABLE_FIELD_HEAD,
@@ -59,8 +60,6 @@ export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy {
 
     fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
 
-    ADD_BUTTON_WIDTH = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-
     containerRect = signal({ width: 0, height: 0 });
 
     hasContainerRect = computed(() => {
@@ -122,6 +121,10 @@ export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy {
         return Math.max(this.coordinate().totalHeight, this.containerRect().height - this.fieldHeadHeight);
     });
 
+    scrollbarWidth = computed(() => {
+        return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
+    });
+
     constructor() {
         super();
         afterNextRender(() => {
@@ -258,8 +261,8 @@ export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy {
                         x: containerRect.x + moreRect.x,
                         y: containerRect.y + moreRect.y + moreRect.height
                     };
-                    const editOriginPosition = {
-                        x: AI_TABLE_POPOVER_LEFT_OFFSET + fieldGroupRect.x,
+                    const editFieldPosition = {
+                        x: containerRect.x + fieldGroupRect.x - AI_TABLE_CELL_PADDING,
                         y: containerRect.y + fieldGroupRect.y + fieldGroupRect.height
                     };
 
@@ -270,7 +273,7 @@ export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy {
                         origin: this.containerElement(),
                         position,
                         editOrigin: editOrigin,
-                        editOriginPosition
+                        editFieldPosition
                     });
                 }
                 return;
@@ -394,7 +397,7 @@ export class AITableGrid extends AITableGridBase implements OnInit, OnDestroy {
     private containerResizeListener() {
         this.resizeObserver = new ResizeObserver(() => {
             const containerWidth = this.containerElement().offsetWidth;
-            const totalWidth = this.coordinate().totalWidth + this.ADD_BUTTON_WIDTH;
+            const totalWidth = this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
             this.setContainerRect();
             if (containerWidth >= totalWidth) {
                 this.aiTable.context!.setScrollState({ scrollLeft: 0 });

diff --git a/packages/grid/src/renderer/components/add-field-column.component.ts b/packages/grid/src/renderer/components/add-field-column.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { StageConfig } from 'konva/lib/Stage';
-import { KoContainer, KoShape, KoStage } from '../../angular-konva';
+import { KoContainer, KoShape } from '../../angular-konva';
 import {
     AddOutlinedPath,
     AI_TABLE_CELL_PADDING,
@@ -10,58 +10,62 @@ import {
     AI_TABLE_OFFSET,
     Colors
 } from '../../constants';
-import { AITableField, Coordinate } from '../../core';
-import { AITableIconConfig } from '../../types';
+import { AITableAddFieldConfig, AITableIconConfig } from '../../types';
 import { generateTargetName } from '../../utils';
 import { AITableIcon } from './icon.component';
 
 @Component({
     selector: 'ai-table-add-field',
     template: `
         <ko-group [config]="{ x: x() }">
-            <ko-rect [config]="rectConfig()"></ko-rect>
-            <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+            <ko-group>
+                <ko-rect [config]="rectConfig()"></ko-rect>
+            </ko-group>
+            <ko-group>
+                <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+            </ko-group>
         </ko-group>
     `,
     standalone: true,
-    imports: [KoContainer, KoStage, KoShape, AITableIcon],
+    imports: [KoContainer, KoShape, AITableIcon],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AITableAddField {
-    coordinate = input.required<Coordinate>();
-
-    fields = input.required<AITableField[]>();
-
-    columnStopIndex = input.required<number>();
+    config = input.required<AITableAddFieldConfig>();
 
     btnWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
 
     x = computed(() => {
-        const lastColumnWidth = this.coordinate().getColumnWidth(this.columnStopIndex());
-        const lastColumnOffset = this.coordinate().getColumnOffset(this.columnStopIndex());
+        const lastColumnWidth = this.config().coordinate.getColumnWidth(this.config().columnStopIndex);
+        const lastColumnOffset = this.config().coordinate.getColumnOffset(this.config().columnStopIndex);
         return lastColumnWidth + lastColumnOffset;
     });
 
     rectConfig = computed<Partial<StageConfig>>(() => {
+        const { targetName } = this.config().pointPosition;
+        const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
         return {
             name: generateTargetName({
                 targetName: AI_TABLE_FIELD_ADD_BUTTON,
-                fieldId: this.fields()[this.columnStopIndex()]._id,
+                fieldId: this.config().fields[this.config().columnStopIndex]._id,
                 mouseStyle: 'pointer'
             }),
             x: AI_TABLE_OFFSET,
             y: AI_TABLE_OFFSET,
             width:
-                this.coordinate().containerWidth - this.x() < this.btnWidth ? this.btnWidth : this.coordinate().containerWidth - this.x(),
-            height: this.coordinate().rowInitSize,
+                this.config().coordinate.containerWidth - this.x() < this.btnWidth
+                    ? this.btnWidth
+                    : this.config().coordinate.containerWidth - this.x(),
+            height: this.config().coordinate.rowInitSize,
             stroke: Colors.gray200,
             strokeWidth: 1,
-            listening: true
+            listening: true,
+            fill
         };
     });
 
     addIconConfig = computed<AITableIconConfig>(() => {
-        const offsetY = (this.coordinate().rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
+        const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
         return {
             x: AI_TABLE_CELL_PADDING,
             y: offsetY,

diff --git a/packages/grid/src/renderer/components/field-head.component.ts b/packages/grid/src/renderer/components/field-head.component.ts
@@ -35,7 +35,7 @@ import { AITableText } from './text.component';
         </ko-group>
     `,
     standalone: true,
-    imports: [KoContainer, KoStage, KoShape, AITableFieldIcon, AITableText, AITableIcon],
+    imports: [KoContainer, KoShape, AITableFieldIcon, AITableText, AITableIcon],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AITableFieldHead {
@@ -123,11 +123,11 @@ export class AITableFieldHead {
                 targetName: AI_TABLE_FIELD_HEAD_MORE,
                 fieldId: field._id
             }),
-            x: width - AI_TABLE_CELL_PADDING - AI_TABLE_ACTION_COMMON_SIZE,
+            x: width - AI_TABLE_ACTION_COMMON_SIZE,
             y: commonIconOffsetY,
             data: MoreStandOutlinedPath,
             fill: isHoverIcon ? Colors.primary : Colors.gray600,
-            background: isSelected || isHoverIcon ? Colors.itemActiveBgColor : Colors.gray80,
+            background: Colors.transparent,
             backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
             backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
             cornerRadius: 4

diff --git a/packages/grid/src/renderer/components/frozen-heads.component.ts b/packages/grid/src/renderer/components/frozen-heads.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { StageConfig } from 'konva/lib/Stage';
-import { KoShape, KoStage, KoContainer } from '../../angular-konva';
+import { KoShape, KoContainer } from '../../angular-konva';
 import {
     AI_TABLE_CELL_PADDING,
     AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX,
@@ -9,7 +9,7 @@ import {
     AI_TABLE_ROW_HEAD_WIDTH,
     Colors
 } from '../../constants';
-import { AITableCheckType, AITableCreateHeadsConfig } from '../../types';
+import { AITableCheckType, AITableColumnHeadsConfig } from '../../types';
 import { createColumnHeads } from '../creations/create-heads';
 import { AITableFieldHead } from './field-head.component';
 import { AITableIcon } from './icon.component';
@@ -29,11 +29,11 @@ import { AITableIcon } from './icon.component';
         <ko-rect [config]="headBgConfig()"></ko-rect>
     `,
     standalone: true,
-    imports: [KoStage, KoShape, AITableFieldHead, AITableIcon, KoContainer],
+    imports: [KoShape, AITableFieldHead, AITableIcon, KoContainer],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AITableFrozenColumnHeads {
-    config = input.required<AITableCreateHeadsConfig>();
+    config = input.required<AITableColumnHeadsConfig>();
 
     coordinate = computed(() => {
         return this.config().coordinate;

diff --git a/packages/grid/src/renderer/components/heads.component.ts b/packages/grid/src/renderer/components/heads.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
-import { AITableCreateHeadsConfig } from '../../types';
+import { AITableColumnHeadsConfig } from '../../types';
 import { createColumnHeads } from '../creations/create-heads';
 import { AITableFieldHead } from './field-head.component';
 
@@ -15,7 +15,7 @@ import { AITableFieldHead } from './field-head.component';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AITableColumnHeads {
-    config = input.required<AITableCreateHeadsConfig>();
+    config = input.required<AITableColumnHeadsConfig>();
 
     headConfigs = computed(() => {
         const { coordinate, columnStartIndex } = this.config();

diff --git a/packages/grid/src/renderer/creations/create-heads.ts b/packages/grid/src/renderer/creations/create-heads.ts
@@ -1,7 +1,7 @@
 import { AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_MORE, Colors } from '../../constants';
-import { AITableCreateHeadsConfig, AITableFieldHeadConfig } from '../../types';
+import { AITableColumnHeadsConfig, AITableFieldHeadConfig } from '../../types';
 
-export const createColumnHeads = (config: AITableCreateHeadsConfig) => {
+export const createColumnHeads = (config: AITableColumnHeadsConfig) => {
     const { coordinate, columnStartIndex, columnStopIndex, pointPosition, aiTable } = config;
     const colors = Colors;
     const { columnCount, rowInitSize: fieldHeadHeight } = coordinate;

diff --git a/packages/grid/src/renderer/renderer.component.html b/packages/grid/src/renderer/renderer.component.html
@@ -15,7 +15,7 @@
             </ko-group>
 
             <ko-group>
-                <ai-table-frozen-column-heads [config]="columnHeadConfig()"></ai-table-frozen-column-heads>
+                <ai-table-frozen-column-heads [config]="columnHeadOrAddFieldConfig()"></ai-table-frozen-column-heads>
             </ko-group>
 
             <ko-group [config]="commonGroupConfig()">
@@ -24,13 +24,9 @@
                 </ko-group>
 
                 <ko-group [config]="offsetXConfig()">
-                    <ai-table-column-heads [config]="columnHeadConfig()"></ai-table-column-heads>
+                    <ai-table-column-heads [config]="columnHeadOrAddFieldConfig()"></ai-table-column-heads>
                     @if (!readonly()) {
-                        <ai-table-add-field
-                            [coordinate]="coordinate()"
-                            [fields]="fields()"
-                            [columnStopIndex]="visibleRangeInfo().columnStopIndex"
-                        ></ai-table-add-field>
+                        <ai-table-add-field [config]="columnHeadOrAddFieldConfig()"></ai-table-add-field>
                     }
                 </ko-group>
             </ko-group>

diff --git a/packages/grid/src/renderer/renderer.component.ts b/packages/grid/src/renderer/renderer.component.ts
@@ -167,7 +167,7 @@ export class AITableRenderer {
         };
     });
 
-    columnHeadConfig = computed(() => {
+    columnHeadOrAddFieldConfig = computed(() => {
         const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
         const { aiTable, coordinate } = this.config();
         const { pointPosition } = aiTable.context!;

diff --git a/packages/grid/src/services/field.service.ts b/packages/grid/src/services/field.service.ts
@@ -23,8 +23,8 @@ export class AITableGridFieldService {
         return this.thyPopover.open(component, {
             origin,
             originPosition: position,
-            manualClosure: true,
             placement: 'bottomLeft',
+            originActiveClass: undefined,
             initialState: {
                 aiTable,
                 aiEditField: field,
@@ -39,13 +39,10 @@ export class AITableGridFieldService {
             origin,
             originPosition: position,
             placement: 'bottomLeft',
-            originActiveClass: origin ? 'active' : undefined,
-            hasBackdrop: false,
-            insideClosable: true,
-            outsideClosable: true,
+            originActiveClass: undefined,
             initialState: {
                 origin: editOrigin,
-                position: options.editOriginPosition,
+                position: options.editFieldPosition,
                 aiTable,
                 fieldId,
                 fieldMenus

diff --git a/packages/grid/src/types/component-config.ts b/packages/grid/src/types/component-config.ts
@@ -27,14 +27,22 @@ export interface AITableFieldHeadConfig {
     isHoverIcon?: boolean;
 }
 
-export interface AITableCreateHeadsConfig {
+export interface AITableColumnHeadsConfig {
     aiTable: AITable;
     coordinate: Coordinate;
     columnStartIndex: number;
     columnStopIndex: number;
     pointPosition: AITablePointPosition;
 }
 
+export interface AITableAddFieldConfig {
+    aiTable: AITable;
+    coordinate: Coordinate;
+    fields: AITableField[];
+    columnStopIndex: number;
+    pointPosition: AITablePointPosition;
+}
+
 export interface AITableTargetNameOptions {
     targetName: string;
     fieldId?: string;

diff --git a/packages/grid/src/types/field.ts b/packages/grid/src/types/field.ts
@@ -32,5 +32,5 @@ export interface AITableFieldMenuOptions {
     editOrigin?: any;
     origin?: any;
     position?: { x: number; y: number };
-    editOriginPosition?: { x: number; y: number };
+    editFieldPosition?: { x: number; y: number };
 }
diff --git a/packages/state/package.json b/packages/state/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ai-table/state",
-    "version": "0.0.16",
+    "version": "0.0.17",
     "peerDependencies": {
         "@ai-table/grid": "^0.0.7"
     },

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,6 +1,6 @@
 .table-container {
     display: block;
-    margin: 0 0 0 20px;
+    margin: 30px;
     margin-bottom: 0;
     overflow-x: auto;
     height: 100vh;