diff --git a/.changeset/wise-geese-bathe.md b/.changeset/wise-geese-bathe.md new file mode 100644 index 000000000..7c8ddaeae --- /dev/null +++ b/.changeset/wise-geese-bathe.md @@ -0,0 +1,5 @@ +--- +'@plait/draw': minor +--- + +support set border style for table border diff --git a/package-lock.json b/package-lock.json index bd1f6f8ea..9e6eefa69 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,8 +21,8 @@ "points-on-curve": "^1.0.0", "roughjs": "^4.5.2", "rxjs": "~7.8.0", - "slate": "^0.101.5", - "slate-angular": "^17.2.2", + "slate": "^0.103.0", + "slate-angular": "^17.3.0", "slate-history": "^0.100.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" @@ -5178,8 +5178,12 @@ "node": ">=14" } }, - "node_modules/@plait/angular": { - "resolved": "packages/angular", + "node_modules/@plait/angular-board": { + "resolved": "packages/angular-board", + "link": true + }, + "node_modules/@plait/angular-text": { + "resolved": "packages/angular-text", "link": true }, "node_modules/@plait/common": { @@ -5206,10 +5210,6 @@ "resolved": "packages/mind", "link": true }, - "node_modules/@plait/text": { - "resolved": "packages/text", - "link": true - }, "node_modules/@plait/text-plugins": { "resolved": "packages/text-plugins", "link": true @@ -9481,6 +9481,7 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, "dependencies": { "ms": "2.1.2" }, @@ -15373,7 +15374,8 @@ "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "node_modules/multicast-dns": { "version": "7.2.5", @@ -19234,9 +19236,9 @@ } }, "node_modules/slate": { - "version": "0.101.5", - "resolved": "https://registry.npmjs.org/slate/-/slate-0.101.5.tgz", - "integrity": "sha512-ZZt1ia8ayRqxtpILRMi2a4MfdvwdTu64CorxTVq9vNSd0GQ/t3YDkze6wKjdeUtENmBlq5wNIDInZbx38Hfu5Q==", + "version": "0.103.0", + "resolved": "https://registry.npmjs.org/slate/-/slate-0.103.0.tgz", + "integrity": "sha512-eCUOVqUpADYMZ59O37QQvUdnFG+8rin0OGQAXNHvHbQeVJ67Bu0spQbcy621vtf8GQUXTEQBlk6OP9atwwob4w==", "dependencies": { "immer": "^10.0.3", "is-plain-object": "^5.0.0", @@ -19244,14 +19246,14 @@ } }, "node_modules/slate-angular": { - "version": "17.2.2", - "resolved": "https://registry.npmjs.org/slate-angular/-/slate-angular-17.2.2.tgz", - "integrity": "sha512-Ude0NL+BuidP1poln8rZYNUf7m64AUNlZxnT5c4m0jSGsaDtAEoAWbQqhSV5aQ7NG4eoMw/QuWbFWq/klv+1Eg==", + "version": "17.3.0", + "resolved": "https://registry.npmjs.org/slate-angular/-/slate-angular-17.3.0.tgz", + "integrity": "sha512-bASizuNQ0pGFZdejG65JIlP3/ppSi4OabgWImY5KY0RkeqblsorEJ7SzMkcjEUwJ3ENrkZvuZU3MNyCchcdelQ==", "dependencies": { "direction": "^2.0.1", "is-hotkey": "^0.2.0", "scroll-into-view-if-needed": "^3.1.0", - "slate": "^0.101.5", + "slate": ">=0.101.0 <=0.104.0", "slate-history": "^0.100.0", "tslib": "^2.6.2" }, @@ -19260,7 +19262,7 @@ "direction": "^2.0.1", "is-hotkey": "^0.2.0", "scroll-into-view-if-needed": "^2.2.20", - "slate": ">= 0.101.5", + "slate": ">=0.101.0 <=0.104.0", "slate-history": "^0.100.0" } }, @@ -22708,6 +22710,29 @@ "packages/angular": { "name": "@plait/angular", "version": "0.57.0", + "extraneous": true, + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^17.2.4", + "@angular/core": "^17.2.4", + "is-hotkey": "^0.2.0" + } + }, + "packages/angular-board": { + "version": "0.62.0-next.0", + "dependencies": { + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": "^17.2.4", + "@angular/core": "^17.2.4", + "is-hotkey": "^0.2.0" + } + }, + "packages/angular-text": { + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" }, @@ -22731,14 +22756,17 @@ }, "packages/common": { "name": "@plait/common", - "version": "0.60.0", + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" + }, + "peerDependencies": { + "is-hotkey": "^0.2.0" } }, "packages/core": { "name": "@plait/core", - "version": "0.60.0", + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" }, @@ -22752,41 +22780,31 @@ }, "packages/draw": { "name": "@plait/draw", - "version": "0.60.0", + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { - "@angular/common": "^17.2.4", - "@angular/core": "^17.2.4", "is-hotkey": "^0.2.0" } }, "packages/flow": { "name": "@plait/flow", - "version": "0.60.0", + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/common": "^17.2.4", - "@angular/core": "^17.2.4" } }, "packages/layouts": { "name": "@plait/layouts", - "version": "0.60.0", + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" - }, - "peerDependencies": { - "@angular/common": "^17.2.4", - "@angular/core": "^17.2.4" } }, "packages/mind": { "name": "@plait/mind", - "version": "0.60.0", + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" }, @@ -22834,6 +22852,7 @@ "packages/text": { "name": "@plait/text", "version": "0.60.0", + "extraneous": true, "dependencies": { "tslib": "^2.3.0" }, @@ -22844,7 +22863,8 @@ } }, "packages/text-plugins": { - "version": "0.57.0", + "name": "@plait/text-plugins", + "version": "0.62.0-next.0", "dependencies": { "tslib": "^2.3.0" } @@ -23756,8 +23776,7 @@ "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", - "dev": true, - "requires": {} + "dev": true }, "@babel/plugin-syntax-async-generators": { "version": "7.8.4", @@ -26094,8 +26113,7 @@ "version": "17.2.3", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-17.2.3.tgz", "integrity": "sha512-+d5Q7/ctDHePYZXcg0GFwL/AbyEkPMHoCiT7pmLI0B0n87D/mYKK/qmVN1VANBrFLTuIe8RtcL0aJ9pw8HAxWA==", - "dev": true, - "requires": {} + "dev": true }, "@nodelib/fs.scandir": { "version": "2.1.5", @@ -26456,8 +26474,14 @@ "dev": true, "optional": true }, - "@plait/angular": { - "version": "file:packages/angular", + "@plait/angular-board": { + "version": "file:packages/angular-board", + "requires": { + "tslib": "^2.3.0" + } + }, + "@plait/angular-text": { + "version": "file:packages/angular-text", "requires": { "tslib": "^2.3.0" } @@ -26498,12 +26522,6 @@ "tslib": "^2.3.0" } }, - "@plait/text": { - "version": "file:packages/text", - "requires": { - "tslib": "^2.3.0" - } - }, "@plait/text-plugins": { "version": "file:packages/text-plugins", "requires": { @@ -27429,8 +27447,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz", "integrity": "sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==", - "dev": true, - "requires": {} + "dev": true }, "@webassemblyjs/ast": { "version": "1.11.6", @@ -27649,15 +27666,13 @@ "version": "1.9.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz", "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==", - "dev": true, - "requires": {} + "dev": true }, "acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", - "dev": true, - "requires": {} + "dev": true }, "adjust-sourcemap-loader": { "version": "4.0.0", @@ -29769,6 +29784,7 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, "requires": { "ms": "2.1.2" } @@ -30690,8 +30706,7 @@ "version": "8.5.0", "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", - "dev": true, - "requires": {} + "dev": true }, "eslint-plugin-prettier": { "version": "4.2.1", @@ -32335,8 +32350,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true, - "requires": {} + "dev": true }, "ieee754": { "version": "1.2.1", @@ -33494,8 +33508,7 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz", "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==", - "dev": true, - "requires": {} + "dev": true }, "karma-source-map-support": { "version": "1.4.0", @@ -34253,7 +34266,8 @@ "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true }, "multicast-dns": { "version": "7.2.5", @@ -35744,8 +35758,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true, - "requires": {} + "dev": true }, "postcss-modules-local-by-default": { "version": "4.0.4", @@ -37181,9 +37194,9 @@ "dev": true }, "slate": { - "version": "0.101.5", - "resolved": "https://registry.npmjs.org/slate/-/slate-0.101.5.tgz", - "integrity": "sha512-ZZt1ia8ayRqxtpILRMi2a4MfdvwdTu64CorxTVq9vNSd0GQ/t3YDkze6wKjdeUtENmBlq5wNIDInZbx38Hfu5Q==", + "version": "0.103.0", + "resolved": "https://registry.npmjs.org/slate/-/slate-0.103.0.tgz", + "integrity": "sha512-eCUOVqUpADYMZ59O37QQvUdnFG+8rin0OGQAXNHvHbQeVJ67Bu0spQbcy621vtf8GQUXTEQBlk6OP9atwwob4w==", "requires": { "immer": "^10.0.3", "is-plain-object": "^5.0.0", @@ -37191,14 +37204,14 @@ } }, "slate-angular": { - "version": "17.2.2", - "resolved": "https://registry.npmjs.org/slate-angular/-/slate-angular-17.2.2.tgz", - "integrity": "sha512-Ude0NL+BuidP1poln8rZYNUf7m64AUNlZxnT5c4m0jSGsaDtAEoAWbQqhSV5aQ7NG4eoMw/QuWbFWq/klv+1Eg==", + "version": "17.3.0", + "resolved": "https://registry.npmjs.org/slate-angular/-/slate-angular-17.3.0.tgz", + "integrity": "sha512-bASizuNQ0pGFZdejG65JIlP3/ppSi4OabgWImY5KY0RkeqblsorEJ7SzMkcjEUwJ3ENrkZvuZU3MNyCchcdelQ==", "requires": { "direction": "^2.0.1", "is-hotkey": "^0.2.0", "scroll-into-view-if-needed": "^3.1.0", - "slate": "^0.101.5", + "slate": ">=0.101.0 <=0.104.0", "slate-history": "^0.100.0", "tslib": "^2.6.2" } @@ -38217,8 +38230,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -38506,8 +38518,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==", - "dev": true, - "requires": {} + "dev": true }, "ts-morph": { "version": "7.3.0", @@ -39351,8 +39362,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true, - "requires": {} + "dev": true }, "json-schema-traverse": { "version": "0.4.1", @@ -39441,8 +39451,7 @@ "version": "8.16.0", "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz", "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==", - "dev": true, - "requires": {} + "dev": true } } }, @@ -39633,8 +39642,7 @@ "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true, - "requires": {} + "dev": true }, "xtend": { "version": "4.0.2", diff --git a/package.json b/package.json index 511fc0ce1..ab3549404 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,8 @@ "points-on-curve": "^1.0.0", "roughjs": "^4.5.2", "rxjs": "~7.8.0", - "slate": "^0.101.5", - "slate-angular": "^17.2.2", + "slate": "^0.103.0", + "slate-angular": "^17.3.0", "slate-history": "^0.100.0", "tslib": "^2.3.0", "zone.js": "~0.14.4" diff --git a/packages/draw/src/generators/table.generator.ts b/packages/draw/src/generators/table.generator.ts index aa6541539..27edcd9d8 100644 --- a/packages/draw/src/generators/table.generator.ts +++ b/packages/draw/src/generators/table.generator.ts @@ -3,7 +3,7 @@ import { Generator } from '@plait/common'; import { PlaitElement, RectangleClient } from '@plait/core'; import { PlaitBaseTable } from '../interfaces/table'; import { getEngine } from '../engines'; -import { getDrawDefaultStrokeColor } from '../utils'; +import { getDrawDefaultStrokeColor, getFillByElement, getLineDashByElement, getStrokeColorByElement, getStrokeWidthByElement } from '../utils'; export interface TableData {} @@ -14,12 +14,16 @@ export class TableGenerator extends Gen draw(element: T, data: TableData) { const rectangle = RectangleClient.getRectangleByPoints(element.points!); + const strokeLineDash = getLineDashByElement(element); + const strokeWidth = getStrokeWidthByElement(element); + const strokeColor = getStrokeColorByElement(this.board, element); return getEngine(TableSymbols.table).draw( this.board, rectangle, { - strokeWidth: 2, - stroke: getDrawDefaultStrokeColor(this.board.theme.themeColorMode), + strokeWidth, + stroke: strokeColor, + strokeLineDash, }, { element: element diff --git a/packages/draw/src/utils/style/stroke.ts b/packages/draw/src/utils/style/stroke.ts index 4a4ccfd8f..32492d8b1 100644 --- a/packages/draw/src/utils/style/stroke.ts +++ b/packages/draw/src/utils/style/stroke.ts @@ -1,24 +1,22 @@ -import { PlaitDrawElement, PlaitGeometry, PlaitLine, StrokeStyle } from '../../interfaces'; +import { PlaitBaseTable, PlaitDrawElement, StrokeStyle } from '../../interfaces'; import { DefaultDrawStyle } from '../../constants'; import { PlaitBoard, PlaitElement } from '@plait/core'; import { getDrawDefaultStrokeColor, getFlowchartDefaultFill } from '../geometry'; import { getStrokeWidthByElement } from '../common'; -export const getStrokeColorByElement = (board: PlaitBoard, element: PlaitGeometry | PlaitLine) => { +export const getStrokeColorByElement = (board: PlaitBoard, element: PlaitElement) => { const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode); const strokeColor = element.strokeColor || defaultColor; return strokeColor; }; -export const getFillByElement = (board: PlaitBoard, element: PlaitGeometry | PlaitLine) => { - const defaultFill = PlaitDrawElement.isFlowchart(element) - ? getFlowchartDefaultFill(board.theme.themeColorMode) - : DefaultDrawStyle.fill; +export const getFillByElement = (board: PlaitBoard, element: PlaitElement) => { + const defaultFill = PlaitDrawElement.isFlowchart(element) ? getFlowchartDefaultFill(board.theme.themeColorMode) : DefaultDrawStyle.fill; const fill = element.fill || defaultFill; return fill; }; -export const getLineDashByElement = (element: PlaitGeometry | PlaitLine) => { +export const getLineDashByElement = (element: PlaitElement) => { switch (element.strokeStyle) { case StrokeStyle.dashed: return [8, 8 + getStrokeWidthByElement(element)]; diff --git a/packages/draw/src/utils/swimlane.ts b/packages/draw/src/utils/swimlane.ts index 77fdaa970..fd4856dba 100644 --- a/packages/draw/src/utils/swimlane.ts +++ b/packages/draw/src/utils/swimlane.ts @@ -101,7 +101,7 @@ export const createDefaultCells = ( if (index < 3) { const rowId = shape === SwimlaneSymbols.swimlaneVertical ? rows[startIndex].id : rows[index].id; const columnId = shape === SwimlaneSymbols.swimlaneVertical ? columns[index].id : columns[startIndex].id; - return createCell(rowId, columnId, 'Lane'); + return createCell(rowId, columnId, header? 'Lane': 'New Swimlane'); } const rowId = shape === SwimlaneSymbols.swimlaneVertical ? rows[startIndex + 1].id : rows[index - 3].id; const columnId = shape === SwimlaneSymbols.swimlaneVertical ? columns[index - 3].id : columns[startIndex + 1].id;