smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use hexColorValue in borders and underlines

Browse Source
This commit is contained in:
Tom Hunkapiller
2021-05-24 08:42:34 +03:00
parent ee105cdb83
commit 097c6a5962
16 changed files with 59 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/2-declaritive-styles.ts
View File

@ -24,7 +24,7 @@ const doc = new Document({
size: 28, size: 28,
bold: true, bold: true,
italics: true, italics: true,
color: "red", color: "FF0000",
}, },
paragraph: { paragraph: {
spacing: { spacing: {

6
demo/20-table-cell-borders.ts
View File

@ -36,17 +36,17 @@ const doc = new Document({
top: { top: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,
size: 3, size: 3,
color: "red", color: "FF0000",
}, },
bottom: { bottom: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 3, size: 3,
color: "blue", color: "0000FF",
}, },
left: { left: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,
size: 3, size: 3,
color: "green", color: "00FF00",
}, },
right: { right: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,

8
demo/32-merge-and-shade-table-cells.ts
View File

@ -224,22 +224,22 @@ const borders = {
top: { top: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "FF0000",
}, },
bottom: { bottom: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "FF0000",
}, },
left: { left: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "FF0000",
}, },
right: { right: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "FF0000",
}, },
}; };

2
demo/45-highlighting-text.ts
View File

@ -14,7 +14,7 @@ const doc = new Document({
children: [ children: [
new TextRun({ new TextRun({
text: "Hello World", text: "Hello World",
color: "red", color: "FF0000",
bold: true, bold: true,
size: 24, size: 24,
font: { font: {

2
demo/46-shading-text.ts
View File

@ -14,7 +14,7 @@ const doc = new Document({
children: [ children: [
new TextRun({ new TextRun({
text: "Hello World", text: "Hello World",
color: "red", color: "FF0000",
bold: true, bold: true,
size: 24, size: 24,
font: { font: {

8
demo/49-table-borders.ts
View File

@ -24,22 +24,22 @@ const table = new Table({
top: { top: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
bottom: { bottom: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
left: { left: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
right: { right: {
style: BorderStyle.DASH_SMALL_GAP, style: BorderStyle.DASH_SMALL_GAP,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
}, },
children: [new Paragraph("Hello")], children: [new Paragraph("Hello")],

2
demo/60-track-revisions.ts
View File

@ -85,7 +85,7 @@ const doc = new Document({
new DeletedTextRun({ new DeletedTextRun({
break: 1, break: 1,
text: "in order", text: "in order",
color: "red", color: "ff0000",
bold: true, bold: true,
size: 24, size: 24,
font: { font: {

2
docs/usage/change-tracking.md
View File

@ -37,7 +37,7 @@ const paragraph = new Paragraph({
new TextRun("This is a simple demo"), new TextRun("This is a simple demo"),
new DeletedTextRun({ new DeletedTextRun({
text: "with a deletion.", text: "with a deletion.",
color: "red", color: "ff0000",
bold: true, bold: true,
size: 24, size: 24,
id: 0, id: 0,

4
docs/usage/tables.md
View File

@ -183,7 +183,7 @@ const cell = new TableCell({
top: { top: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
bottom: { bottom: {
style: BorderStyle.THICK_THIN_MEDIUM_GAP, style: BorderStyle.THICK_THIN_MEDIUM_GAP,
@ -205,7 +205,7 @@ const cell = new TableCell({
left: { left: {
style: BorderStyle.DOT_DOT_DASH, style: BorderStyle.DOT_DOT_DASH,
size: 3, size: 3,
color: "green", color: "00FF00",
}, },
right: { right: {
style: BorderStyle.DOT_DOT_DASH, style: BorderStyle.DOT_DOT_DASH,

10
src/file/border/border.ts
View File

@ -20,6 +20,7 @@
// <xsd:attribute name="frame" type="s:ST_OnOff" use="optional"/> // <xsd:attribute name="frame" type="s:ST_OnOff" use="optional"/>
// </xsd:complexType> // </xsd:complexType>
import { XmlAttributeComponent, XmlComponent } from "file/xml-components"; import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { hexColorValue } from "../values";
export interface IBorderOptions { export interface IBorderOptions {
readonly style: BorderStyle; readonly style: BorderStyle;
@ -29,9 +30,14 @@ export interface IBorderOptions {
} }
export class BorderElement extends XmlComponent { export class BorderElement extends XmlComponent {
constructor(elementName: string, options: IBorderOptions) { constructor(elementName: string, { color, ...options }: IBorderOptions) {
super(elementName); super(elementName);
this.root.push(new TableBordersAttributes(options)); this.root.push(
new TableBordersAttributes({
...options,
color: color === undefined ? color : hexColorValue(color),
}),
);
} }
} }

16
src/file/paragraph/formatting/border.spec.ts
View File

@ -10,25 +10,25 @@ describe("Border", () => {
it("should create", () => { it("should create", () => {
const border = new Border({ const border = new Border({
top: { top: {
color: "red", color: "FF0000",
space: 1, space: 1,
style: BorderStyle.WAVE, style: BorderStyle.WAVE,
size: 2, size: 2,
}, },
bottom: { bottom: {
color: "red", color: "FF0000",
space: 3, space: 3,
style: BorderStyle.WAVE, style: BorderStyle.WAVE,
size: 4, size: 4,
}, },
left: { left: {
color: "red", color: "FF0000",
space: 5, space: 5,
style: BorderStyle.WAVE, style: BorderStyle.WAVE,
size: 6, size: 6,
}, },
right: { right: {
color: "red", color: "FF0000",
space: 7, space: 7,
style: BorderStyle.WAVE, style: BorderStyle.WAVE,
size: 8, size: 8,
@ -42,7 +42,7 @@ describe("Border", () => {
{ {
"w:top": { "w:top": {
_attr: { _attr: {
"w:color": "red", "w:color": "FF0000",
"w:space": 1, "w:space": 1,
"w:sz": 2, "w:sz": 2,
"w:val": "wave", "w:val": "wave",
@ -52,7 +52,7 @@ describe("Border", () => {
{ {
"w:bottom": { "w:bottom": {
_attr: { _attr: {
"w:color": "red", "w:color": "FF0000",
"w:space": 3, "w:space": 3,
"w:sz": 4, "w:sz": 4,
"w:val": "wave", "w:val": "wave",
@ -62,7 +62,7 @@ describe("Border", () => {
{ {
"w:left": { "w:left": {
_attr: { _attr: {
"w:color": "red", "w:color": "FF0000",
"w:space": 5, "w:space": 5,
"w:sz": 6, "w:sz": 6,
"w:val": "wave", "w:val": "wave",
@ -72,7 +72,7 @@ describe("Border", () => {
{ {
"w:right": { "w:right": {
_attr: { _attr: {
"w:color": "red", "w:color": "FF0000",
"w:space": 7, "w:space": 7,
"w:sz": 8, "w:sz": 8,
"w:val": "wave", "w:val": "wave",

4
src/file/paragraph/run/symbol-run.spec.ts
View File

@ -43,7 +43,7 @@ describe("SymbolRun", () => {
italics: true, italics: true,
bold: true, bold: true,
underline: { underline: {
color: "red", color: "ff0000",
type: UnderlineType.DOUBLE, type: UnderlineType.DOUBLE,
}, },
emphasisMark: { emphasisMark: {
@ -63,7 +63,7 @@ describe("SymbolRun", () => {
{ "w:bCs": { _attr: { "w:val": true } } }, { "w:bCs": { _attr: { "w:val": true } } },
{ "w:i": { _attr: { "w:val": true } } }, { "w:i": { _attr: { "w:val": true } } },
{ "w:iCs": { _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:em": { _attr: { "w:val": "dot" } } },
{ "w:color": { _attr: { "w:val": "00FF00" } } }, { "w:color": { _attr: { "w:val": "00FF00" } } },
{ "w:sz": { _attr: { "w:val": 40 } } }, { "w:sz": { _attr: { "w:val": 40 } } },

3
src/file/paragraph/run/underline.ts
View File

@ -1,3 +1,4 @@
import { hexColorValue } from "file/values";
import { Attributes, XmlComponent } from "file/xml-components"; import { Attributes, XmlComponent } from "file/xml-components";
export enum UnderlineType { export enum UnderlineType {
@ -26,7 +27,7 @@ export abstract class BaseUnderline extends XmlComponent {
this.root.push( this.root.push(
new Attributes({ new Attributes({
val: underlineType, val: underlineType,
color: color, color: color === undefined ? color : hexColorValue(color),
}), }),
); );
} }

4
src/file/table/table-cell/table-cell-properties.spec.ts
View File

@ -73,7 +73,7 @@ describe("TableCellProperties", () => {
borders: { borders: {
top: { top: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,
color: "red", color: "ff0000",
size: 3, size: 3,
}, },
}, },
@ -82,7 +82,7 @@ describe("TableCellProperties", () => {
const tree = new Formatter().format(properties); const tree = new Formatter().format(properties);
expect(tree["w:tcPr"][0]).to.deep.equal({ 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" } } }],
}); });
}); });

14
src/file/table/table-cell/table-cell.spec.ts
View File

@ -570,17 +570,17 @@ describe("TableCell", () => {
top: { top: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,
size: 3, size: 3,
color: "red", color: "FF0000",
}, },
bottom: { bottom: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 3, size: 3,
color: "blue", color: "0000ff",
}, },
left: { left: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,
size: 3, size: 3,
color: "green", color: "00ff00",
}, },
right: { right: {
style: BorderStyle.DASH_DOT_STROKED, style: BorderStyle.DASH_DOT_STROKED,
@ -601,7 +601,7 @@ describe("TableCell", () => {
{ {
"w:top": { "w:top": {
_attr: { _attr: {
"w:color": "red", "w:color": "FF0000",
"w:sz": 3, "w:sz": 3,
"w:val": "dashDotStroked", "w:val": "dashDotStroked",
}, },
@ -610,7 +610,7 @@ describe("TableCell", () => {
{ {
"w:left": { "w:left": {
_attr: { _attr: {
"w:color": "green", "w:color": "00ff00",
"w:sz": 3, "w:sz": 3,
"w:val": "dashDotStroked", "w:val": "dashDotStroked",
}, },
@ -619,7 +619,7 @@ describe("TableCell", () => {
{ {
"w:bottom": { "w:bottom": {
_attr: { _attr: {
"w:color": "blue", "w:color": "0000ff",
"w:sz": 3, "w:sz": 3,
"w:val": "double", "w:val": "double",
}, },
@ -628,7 +628,7 @@ describe("TableCell", () => {
{ {
"w:right": { "w:right": {
_attr: { _attr: {
"w:color": "#ff8000", "w:color": "ff8000",
"w:sz": 3, "w:sz": 3,
"w:val": "dashDotStroked", "w:val": "dashDotStroked",
}, },

24
src/file/table/table-properties/table-borders.spec.ts
View File

@ -79,7 +79,7 @@ describe("TableBorders", () => {
top: { top: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 1, size: 1,
color: "red", color: "FF0000",
}, },
}); });
@ -89,7 +89,7 @@ describe("TableBorders", () => {
{ {
"w:top": { "w:top": {
_attr: { _attr: {
"w:color": "red", "w:color": "FF0000",
"w:sz": 1, "w:sz": 1,
"w:val": "double", "w:val": "double",
}, },
@ -151,7 +151,7 @@ describe("TableBorders", () => {
left: { left: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
}); });
const tree = new Formatter().format(tableBorders); const tree = new Formatter().format(tableBorders);
@ -170,7 +170,7 @@ describe("TableBorders", () => {
{ {
"w:left": { "w:left": {
_attr: { _attr: {
"w:color": "red", "w:color": "ff0000",
"w:sz": 1, "w:sz": 1,
"w:val": "double", "w:val": "double",
}, },
@ -223,7 +223,7 @@ describe("TableBorders", () => {
bottom: { bottom: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
}); });
const tree = new Formatter().format(tableBorders); const tree = new Formatter().format(tableBorders);
@ -251,7 +251,7 @@ describe("TableBorders", () => {
{ {
"w:bottom": { "w:bottom": {
_attr: { _attr: {
"w:color": "red", "w:color": "ff0000",
"w:sz": 1, "w:sz": 1,
"w:val": "double", "w:val": "double",
}, },
@ -295,7 +295,7 @@ describe("TableBorders", () => {
right: { right: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
}); });
const tree = new Formatter().format(tableBorders); const tree = new Formatter().format(tableBorders);
@ -332,7 +332,7 @@ describe("TableBorders", () => {
{ {
"w:right": { "w:right": {
_attr: { _attr: {
"w:color": "red", "w:color": "ff0000",
"w:sz": 1, "w:sz": 1,
"w:val": "double", "w:val": "double",
}, },
@ -367,7 +367,7 @@ describe("TableBorders", () => {
insideHorizontal: { insideHorizontal: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
}); });
const tree = new Formatter().format(tableBorders); const tree = new Formatter().format(tableBorders);
@ -413,7 +413,7 @@ describe("TableBorders", () => {
{ {
"w:insideH": { "w:insideH": {
_attr: { _attr: {
"w:color": "red", "w:color": "ff0000",
"w:sz": 1, "w:sz": 1,
"w:val": "double", "w:val": "double",
}, },
@ -439,7 +439,7 @@ describe("TableBorders", () => {
insideVertical: { insideVertical: {
style: BorderStyle.DOUBLE, style: BorderStyle.DOUBLE,
size: 1, size: 1,
color: "red", color: "ff0000",
}, },
}); });
const tree = new Formatter().format(tableBorders); const tree = new Formatter().format(tableBorders);
@ -494,7 +494,7 @@ describe("TableBorders", () => {
{ {
"w:insideV": { "w:insideV": {
_attr: { _attr: {
"w:color": "red", "w:color": "ff0000",
"w:sz": 1, "w:sz": 1,
"w:val": "double", "w:val": "double",
}, },