From 097c6a596205e7e72743d578c381539d5e75112b Mon Sep 17 00:00:00 2001 From: Tom Hunkapiller Date: Mon, 24 May 2021 08:42:34 +0300 Subject: [PATCH] use hexColorValue in borders and underlines --- demo/2-declaritive-styles.ts | 2 +- demo/20-table-cell-borders.ts | 6 ++--- demo/32-merge-and-shade-table-cells.ts | 8 +++---- demo/45-highlighting-text.ts | 2 +- demo/46-shading-text.ts | 2 +- demo/49-table-borders.ts | 8 +++---- demo/60-track-revisions.ts | 2 +- docs/usage/change-tracking.md | 2 +- docs/usage/tables.md | 4 ++-- src/file/border/border.ts | 10 ++++++-- src/file/paragraph/formatting/border.spec.ts | 16 ++++++------- src/file/paragraph/run/symbol-run.spec.ts | 4 ++-- src/file/paragraph/run/underline.ts | 3 ++- .../table-cell/table-cell-properties.spec.ts | 4 ++-- src/file/table/table-cell/table-cell.spec.ts | 14 +++++------ .../table-properties/table-borders.spec.ts | 24 +++++++++---------- 16 files changed, 59 insertions(+), 52 deletions(-) diff --git a/demo/2-declaritive-styles.ts b/demo/2-declaritive-styles.ts index 5795ebf6e1..6af4120574 100644 --- a/demo/2-declaritive-styles.ts +++ b/demo/2-declaritive-styles.ts @@ -24,7 +24,7 @@ const doc = new Document({ size: 28, bold: true, italics: true, - color: "red", + color: "FF0000", }, paragraph: { spacing: { diff --git a/demo/20-table-cell-borders.ts b/demo/20-table-cell-borders.ts index 4dbc9192b9..9174fa28fa 100644 --- a/demo/20-table-cell-borders.ts +++ b/demo/20-table-cell-borders.ts @@ -36,17 +36,17 @@ const doc = new Document({ top: { style: BorderStyle.DASH_DOT_STROKED, size: 3, - color: "red", + color: "FF0000", }, bottom: { style: BorderStyle.DOUBLE, size: 3, - color: "blue", + color: "0000FF", }, left: { style: BorderStyle.DASH_DOT_STROKED, size: 3, - color: "green", + color: "00FF00", }, right: { style: BorderStyle.DASH_DOT_STROKED, diff --git a/demo/32-merge-and-shade-table-cells.ts b/demo/32-merge-and-shade-table-cells.ts index 9ca432dc2d..cc01753acc 100644 --- a/demo/32-merge-and-shade-table-cells.ts +++ b/demo/32-merge-and-shade-table-cells.ts @@ -224,22 +224,22 @@ const borders = { top: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "FF0000", }, bottom: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "FF0000", }, left: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "FF0000", }, right: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "FF0000", }, }; diff --git a/demo/45-highlighting-text.ts b/demo/45-highlighting-text.ts index 373e9b4b17..bc48ebb342 100644 --- a/demo/45-highlighting-text.ts +++ b/demo/45-highlighting-text.ts @@ -14,7 +14,7 @@ const doc = new Document({ children: [ new TextRun({ text: "Hello World", - color: "red", + color: "FF0000", bold: true, size: 24, font: { diff --git a/demo/46-shading-text.ts b/demo/46-shading-text.ts index 0843e7a7ce..b8d76b08f2 100644 --- a/demo/46-shading-text.ts +++ b/demo/46-shading-text.ts @@ -14,7 +14,7 @@ const doc = new Document({ children: [ new TextRun({ text: "Hello World", - color: "red", + color: "FF0000", bold: true, size: 24, font: { diff --git a/demo/49-table-borders.ts b/demo/49-table-borders.ts index aeccd73dd2..1a3943a947 100644 --- a/demo/49-table-borders.ts +++ b/demo/49-table-borders.ts @@ -24,22 +24,22 @@ const table = new Table({ top: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "ff0000", }, bottom: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "ff0000", }, left: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "ff0000", }, right: { style: BorderStyle.DASH_SMALL_GAP, size: 1, - color: "red", + color: "ff0000", }, }, children: [new Paragraph("Hello")], diff --git a/demo/60-track-revisions.ts b/demo/60-track-revisions.ts index f33e6e4f00..8b6f1883d5 100644 --- a/demo/60-track-revisions.ts +++ b/demo/60-track-revisions.ts @@ -85,7 +85,7 @@ const doc = new Document({ new DeletedTextRun({ break: 1, text: "in order", - color: "red", + color: "ff0000", bold: true, size: 24, font: { diff --git a/docs/usage/change-tracking.md b/docs/usage/change-tracking.md index f4c486eca2..96d10799ca 100644 --- a/docs/usage/change-tracking.md +++ b/docs/usage/change-tracking.md @@ -37,7 +37,7 @@ const paragraph = new Paragraph({ new TextRun("This is a simple demo"), new DeletedTextRun({ text: "with a deletion.", - color: "red", + color: "ff0000", bold: true, size: 24, id: 0, diff --git a/docs/usage/tables.md b/docs/usage/tables.md index 7b140bb55c..a13b7f5a02 100644 --- a/docs/usage/tables.md +++ b/docs/usage/tables.md @@ -183,7 +183,7 @@ const cell = new TableCell({ top: { style: BorderStyle.DASH_DOT_STROKED, size: 1, - color: "red", + color: "ff0000", }, bottom: { style: BorderStyle.THICK_THIN_MEDIUM_GAP, @@ -205,7 +205,7 @@ const cell = new TableCell({ left: { style: BorderStyle.DOT_DOT_DASH, size: 3, - color: "green", + color: "00FF00", }, right: { style: BorderStyle.DOT_DOT_DASH, diff --git a/src/file/border/border.ts b/src/file/border/border.ts index 2898a773af..583c513f30 100644 --- a/src/file/border/border.ts +++ b/src/file/border/border.ts @@ -20,6 +20,7 @@ // // import { XmlAttributeComponent, XmlComponent } from "file/xml-components"; +import { hexColorValue } from "../values"; export interface IBorderOptions { readonly style: BorderStyle; @@ -29,9 +30,14 @@ export interface IBorderOptions { } export class BorderElement extends XmlComponent { - constructor(elementName: string, options: IBorderOptions) { + constructor(elementName: string, { color, ...options }: IBorderOptions) { super(elementName); - this.root.push(new TableBordersAttributes(options)); + this.root.push( + new TableBordersAttributes({ + ...options, + color: color === undefined ? color : hexColorValue(color), + }), + ); } } diff --git a/src/file/paragraph/formatting/border.spec.ts b/src/file/paragraph/formatting/border.spec.ts index 55c6c7d41d..701698ced0 100644 --- a/src/file/paragraph/formatting/border.spec.ts +++ b/src/file/paragraph/formatting/border.spec.ts @@ -10,25 +10,25 @@ describe("Border", () => { it("should create", () => { const border = new Border({ top: { - color: "red", + color: "FF0000", space: 1, style: BorderStyle.WAVE, size: 2, }, bottom: { - color: "red", + color: "FF0000", space: 3, style: BorderStyle.WAVE, size: 4, }, left: { - color: "red", + color: "FF0000", space: 5, style: BorderStyle.WAVE, size: 6, }, right: { - color: "red", + color: "FF0000", space: 7, style: BorderStyle.WAVE, size: 8, @@ -42,7 +42,7 @@ describe("Border", () => { { "w:top": { _attr: { - "w:color": "red", + "w:color": "FF0000", "w:space": 1, "w:sz": 2, "w:val": "wave", @@ -52,7 +52,7 @@ describe("Border", () => { { "w:bottom": { _attr: { - "w:color": "red", + "w:color": "FF0000", "w:space": 3, "w:sz": 4, "w:val": "wave", @@ -62,7 +62,7 @@ describe("Border", () => { { "w:left": { _attr: { - "w:color": "red", + "w:color": "FF0000", "w:space": 5, "w:sz": 6, "w:val": "wave", @@ -72,7 +72,7 @@ describe("Border", () => { { "w:right": { _attr: { - "w:color": "red", + "w:color": "FF0000", "w:space": 7, "w:sz": 8, "w:val": "wave", diff --git a/src/file/paragraph/run/symbol-run.spec.ts b/src/file/paragraph/run/symbol-run.spec.ts index 8c6eb8e63c..c249c63082 100644 --- a/src/file/paragraph/run/symbol-run.spec.ts +++ b/src/file/paragraph/run/symbol-run.spec.ts @@ -43,7 +43,7 @@ describe("SymbolRun", () => { italics: true, bold: true, underline: { - color: "red", + color: "ff0000", type: UnderlineType.DOUBLE, }, emphasisMark: { @@ -63,7 +63,7 @@ describe("SymbolRun", () => { { "w:bCs": { _attr: { "w:val": true } } }, { "w:i": { _attr: { "w:val": true } } }, { "w:iCs": { _attr: { "w:val": true } } }, - { "w:u": { _attr: { "w:val": "double", "w:color": "red" } } }, + { "w:u": { _attr: { "w:val": "double", "w:color": "ff0000" } } }, { "w:em": { _attr: { "w:val": "dot" } } }, { "w:color": { _attr: { "w:val": "00FF00" } } }, { "w:sz": { _attr: { "w:val": 40 } } }, diff --git a/src/file/paragraph/run/underline.ts b/src/file/paragraph/run/underline.ts index 9433989d8f..af1db4611d 100644 --- a/src/file/paragraph/run/underline.ts +++ b/src/file/paragraph/run/underline.ts @@ -1,3 +1,4 @@ +import { hexColorValue } from "file/values"; import { Attributes, XmlComponent } from "file/xml-components"; export enum UnderlineType { @@ -26,7 +27,7 @@ export abstract class BaseUnderline extends XmlComponent { this.root.push( new Attributes({ val: underlineType, - color: color, + color: color === undefined ? color : hexColorValue(color), }), ); } diff --git a/src/file/table/table-cell/table-cell-properties.spec.ts b/src/file/table/table-cell/table-cell-properties.spec.ts index 6259ad28be..c2a17d05d4 100644 --- a/src/file/table/table-cell/table-cell-properties.spec.ts +++ b/src/file/table/table-cell/table-cell-properties.spec.ts @@ -73,7 +73,7 @@ describe("TableCellProperties", () => { borders: { top: { style: BorderStyle.DASH_DOT_STROKED, - color: "red", + color: "ff0000", size: 3, }, }, @@ -82,7 +82,7 @@ describe("TableCellProperties", () => { const tree = new Formatter().format(properties); expect(tree["w:tcPr"][0]).to.deep.equal({ - "w:tcBorders": [{ "w:top": { _attr: { "w:val": "dashDotStroked", "w:sz": 3, "w:color": "red" } } }], + "w:tcBorders": [{ "w:top": { _attr: { "w:val": "dashDotStroked", "w:sz": 3, "w:color": "ff0000" } } }], }); }); diff --git a/src/file/table/table-cell/table-cell.spec.ts b/src/file/table/table-cell/table-cell.spec.ts index f5ed48b97a..8f0c6ee766 100644 --- a/src/file/table/table-cell/table-cell.spec.ts +++ b/src/file/table/table-cell/table-cell.spec.ts @@ -570,17 +570,17 @@ describe("TableCell", () => { top: { style: BorderStyle.DASH_DOT_STROKED, size: 3, - color: "red", + color: "FF0000", }, bottom: { style: BorderStyle.DOUBLE, size: 3, - color: "blue", + color: "0000ff", }, left: { style: BorderStyle.DASH_DOT_STROKED, size: 3, - color: "green", + color: "00ff00", }, right: { style: BorderStyle.DASH_DOT_STROKED, @@ -601,7 +601,7 @@ describe("TableCell", () => { { "w:top": { _attr: { - "w:color": "red", + "w:color": "FF0000", "w:sz": 3, "w:val": "dashDotStroked", }, @@ -610,7 +610,7 @@ describe("TableCell", () => { { "w:left": { _attr: { - "w:color": "green", + "w:color": "00ff00", "w:sz": 3, "w:val": "dashDotStroked", }, @@ -619,7 +619,7 @@ describe("TableCell", () => { { "w:bottom": { _attr: { - "w:color": "blue", + "w:color": "0000ff", "w:sz": 3, "w:val": "double", }, @@ -628,7 +628,7 @@ describe("TableCell", () => { { "w:right": { _attr: { - "w:color": "#ff8000", + "w:color": "ff8000", "w:sz": 3, "w:val": "dashDotStroked", }, diff --git a/src/file/table/table-properties/table-borders.spec.ts b/src/file/table/table-properties/table-borders.spec.ts index 85decf8804..a13482f349 100644 --- a/src/file/table/table-properties/table-borders.spec.ts +++ b/src/file/table/table-properties/table-borders.spec.ts @@ -79,7 +79,7 @@ describe("TableBorders", () => { top: { style: BorderStyle.DOUBLE, size: 1, - color: "red", + color: "FF0000", }, }); @@ -89,7 +89,7 @@ describe("TableBorders", () => { { "w:top": { _attr: { - "w:color": "red", + "w:color": "FF0000", "w:sz": 1, "w:val": "double", }, @@ -151,7 +151,7 @@ describe("TableBorders", () => { left: { style: BorderStyle.DOUBLE, size: 1, - color: "red", + color: "ff0000", }, }); const tree = new Formatter().format(tableBorders); @@ -170,7 +170,7 @@ describe("TableBorders", () => { { "w:left": { _attr: { - "w:color": "red", + "w:color": "ff0000", "w:sz": 1, "w:val": "double", }, @@ -223,7 +223,7 @@ describe("TableBorders", () => { bottom: { style: BorderStyle.DOUBLE, size: 1, - color: "red", + color: "ff0000", }, }); const tree = new Formatter().format(tableBorders); @@ -251,7 +251,7 @@ describe("TableBorders", () => { { "w:bottom": { _attr: { - "w:color": "red", + "w:color": "ff0000", "w:sz": 1, "w:val": "double", }, @@ -295,7 +295,7 @@ describe("TableBorders", () => { right: { style: BorderStyle.DOUBLE, size: 1, - color: "red", + color: "ff0000", }, }); const tree = new Formatter().format(tableBorders); @@ -332,7 +332,7 @@ describe("TableBorders", () => { { "w:right": { _attr: { - "w:color": "red", + "w:color": "ff0000", "w:sz": 1, "w:val": "double", }, @@ -367,7 +367,7 @@ describe("TableBorders", () => { insideHorizontal: { style: BorderStyle.DOUBLE, size: 1, - color: "red", + color: "ff0000", }, }); const tree = new Formatter().format(tableBorders); @@ -413,7 +413,7 @@ describe("TableBorders", () => { { "w:insideH": { _attr: { - "w:color": "red", + "w:color": "ff0000", "w:sz": 1, "w:val": "double", }, @@ -439,7 +439,7 @@ describe("TableBorders", () => { insideVertical: { style: BorderStyle.DOUBLE, size: 1, - color: "red", + color: "ff0000", }, }); const tree = new Formatter().format(tableBorders); @@ -494,7 +494,7 @@ describe("TableBorders", () => { { "w:insideV": { _attr: { - "w:color": "red", + "w:color": "ff0000", "w:sz": 1, "w:val": "double", },