UNPKG

fabric

Version:

Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.

1 lines 13.7 kB
{"version":3,"file":"StyledText.mjs","names":[],"sources":["../../../../src/shapes/Text/StyledText.ts"],"sourcesContent":["import type { ObjectEvents } from '../../EventTypeDefs';\nimport type { FabricObjectProps, SerializedObjectProps } from '../Object/types';\nimport type { TOptions } from '../../typedefs';\nimport { FabricObject } from '../Object/FabricObject';\nimport { styleProperties } from './constants';\nimport type { StylePropertiesType } from './constants';\nimport type { FabricText } from './Text';\nimport { pick } from '../../util';\nimport { pickBy } from '../../util/misc/pick';\n\nexport type CompleteTextStyleDeclaration = Pick<\n FabricText,\n StylePropertiesType\n>;\n\nexport type TextStyleDeclaration = Partial<CompleteTextStyleDeclaration>;\n\nexport type TextStyle = {\n [line: number | string]: { [char: number | string]: TextStyleDeclaration };\n};\n\nexport abstract class StyledText<\n Props extends TOptions<FabricObjectProps> = Partial<FabricObjectProps>,\n SProps extends SerializedObjectProps = SerializedObjectProps,\n EventSpec extends ObjectEvents = ObjectEvents,\n> extends FabricObject<Props, SProps, EventSpec> {\n declare abstract styles: TextStyle;\n declare protected abstract _textLines: string[][];\n declare protected _forceClearCache: boolean;\n static _styleProperties: Readonly<StylePropertiesType[]> = styleProperties;\n abstract get2DCursorLocation(\n selectionStart: number,\n skipWrapping?: boolean,\n ): { charIndex: number; lineIndex: number };\n\n /**\n * Returns true if object has no styling or no styling in a line\n * @param {Number} lineIndex , lineIndex is on wrapped lines.\n * @return {Boolean}\n */\n isEmptyStyles(lineIndex?: number): boolean {\n if (!this.styles) {\n return true;\n }\n if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) {\n return true;\n }\n const obj =\n typeof lineIndex === 'undefined'\n ? this.styles\n : { line: this.styles[lineIndex] };\n for (const p1 in obj) {\n for (const p2 in obj[p1]) {\n for (const p3 in obj[p1][p2]) {\n return false;\n }\n }\n }\n return true;\n }\n\n /**\n * Returns true if object has a style property or has it ina specified line\n * This function is used to detect if a text will use a particular property or not.\n * @param {String} property to check for\n * @param {Number} lineIndex to check the style on\n * @return {Boolean}\n */\n styleHas(property: keyof TextStyleDeclaration, lineIndex?: number): boolean {\n if (!this.styles) {\n return false;\n }\n if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) {\n return false;\n }\n const obj =\n typeof lineIndex === 'undefined'\n ? this.styles\n : { 0: this.styles[lineIndex] };\n for (const p1 in obj) {\n for (const p2 in obj[p1]) {\n if (typeof obj[p1][p2][property] !== 'undefined') {\n return true;\n }\n }\n }\n return false;\n }\n\n /**\n * Check if characters in a text have a value for a property\n * whose value matches the textbox's value for that property. If so,\n * the character-level property is deleted. If the character\n * has no other properties, then it is also deleted. Finally,\n * if the line containing that character has no other characters\n * then it also is deleted.\n */\n cleanStyle(property: keyof TextStyleDeclaration) {\n if (!this.styles) {\n return false;\n }\n const obj = this.styles;\n let stylesCount = 0,\n letterCount,\n stylePropertyValue,\n allStyleObjectPropertiesMatch = true,\n graphemeCount = 0;\n for (const p1 in obj) {\n letterCount = 0;\n for (const p2 in obj[p1]) {\n const styleObject = obj[p1][p2] || {},\n stylePropertyHasBeenSet = styleObject[property] !== undefined;\n\n stylesCount++;\n\n if (stylePropertyHasBeenSet) {\n if (!stylePropertyValue) {\n stylePropertyValue = styleObject[property];\n } else if (styleObject[property] !== stylePropertyValue) {\n allStyleObjectPropertiesMatch = false;\n }\n\n if (styleObject[property] === this[property as keyof this]) {\n delete styleObject[property];\n }\n } else {\n allStyleObjectPropertiesMatch = false;\n }\n\n if (Object.keys(styleObject).length !== 0) {\n letterCount++;\n } else {\n delete obj[p1][p2];\n }\n }\n\n if (letterCount === 0) {\n delete obj[p1];\n }\n }\n // if every grapheme has the same style set then\n // delete those styles and set it on the parent\n for (let i = 0; i < this._textLines.length; i++) {\n graphemeCount += this._textLines[i].length;\n }\n if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) {\n this[property as keyof this] = stylePropertyValue as any;\n this.removeStyle(property);\n }\n }\n\n /**\n * Remove a style property or properties from all individual character styles\n * in a text object. Deletes the character style object if it contains no other style\n * props. Deletes a line style object if it contains no other character styles.\n *\n * @param {String} props The property to remove from character styles.\n */\n removeStyle(property: keyof TextStyleDeclaration) {\n if (!this.styles) {\n return;\n }\n const obj = this.styles;\n let line, lineNum, charNum;\n for (lineNum in obj) {\n line = obj[lineNum];\n for (charNum in line) {\n delete line[charNum][property];\n if (Object.keys(line[charNum]).length === 0) {\n delete line[charNum];\n }\n }\n if (Object.keys(line).length === 0) {\n delete obj[lineNum];\n }\n }\n }\n\n private _extendStyles(index: number, style: TextStyleDeclaration): void {\n const { lineIndex, charIndex } = this.get2DCursorLocation(index);\n\n if (!this._getLineStyle(lineIndex)) {\n this._setLineStyle(lineIndex);\n }\n\n const newStyle = pickBy(\n {\n // first create a new object that is a merge of existing and new\n ...this._getStyleDeclaration(lineIndex, charIndex),\n ...style,\n // use the predicate to discard undefined values\n },\n (value) => value !== undefined,\n );\n\n // finally assign to the old position the new style\n this._setStyleDeclaration(lineIndex, charIndex, newStyle);\n }\n\n /**\n * Gets style of a current selection/cursor (at the start position)\n * @param {Number} startIndex Start index to get styles at\n * @param {Number} endIndex End index to get styles at, if not specified startIndex + 1\n * @param {Boolean} [complete] get full style or not\n * @return {Array} styles an array with one, zero or more Style objects\n */\n getSelectionStyles(\n startIndex: number,\n endIndex?: number,\n complete?: boolean,\n ): TextStyleDeclaration[] {\n const styles: TextStyleDeclaration[] = [];\n for (let i = startIndex; i < (endIndex || startIndex); i++) {\n styles.push(this.getStyleAtPosition(i, complete));\n }\n return styles;\n }\n\n /**\n * Gets style of a current selection/cursor position\n * @param {Number} position to get styles at\n * @param {Boolean} [complete] full style if true\n * @return {Object} style Style object at a specified index\n * @private\n */\n getStyleAtPosition(position: number, complete?: boolean) {\n const { lineIndex, charIndex } = this.get2DCursorLocation(position);\n return complete\n ? this.getCompleteStyleDeclaration(lineIndex, charIndex)\n : this._getStyleDeclaration(lineIndex, charIndex);\n }\n\n /**\n * Sets style of a current selection, if no selection exist, do not set anything.\n * @param {Object} styles Styles object\n * @param {Number} startIndex Start index to get styles at\n * @param {Number} [endIndex] End index to get styles at, if not specified startIndex + 1\n */\n setSelectionStyles(styles: object, startIndex: number, endIndex?: number) {\n for (let i = startIndex; i < (endIndex || startIndex); i++) {\n this._extendStyles(i, styles);\n }\n /* not included in _extendStyles to avoid clearing cache more than once */\n this._forceClearCache = true;\n }\n\n /**\n * Get a reference, not a clone, to the style object for a given character,\n * if no style is set for a line or char, return a new empty object.\n * This is tricky and confusing because when you get an empty object you can't\n * determine if it is a reference or a new one.\n * @TODO this should always return a reference or always a clone or undefined when necessary.\n * @protected\n * @param {Number} lineIndex\n * @param {Number} charIndex\n * @return {TextStyleDeclaration} a style object reference to the existing one or a new empty object when undefined\n */\n _getStyleDeclaration(\n lineIndex: number,\n charIndex: number,\n ): TextStyleDeclaration {\n const lineStyle = this.styles && this.styles[lineIndex];\n return lineStyle ? (lineStyle[charIndex] ?? {}) : {};\n }\n\n /**\n * return a new object that contains all the style property for a character\n * the object returned is newly created\n * @param {Number} lineIndex of the line where the character is\n * @param {Number} charIndex position of the character on the line\n * @return {Object} style object\n */\n getCompleteStyleDeclaration(\n lineIndex: number,\n charIndex: number,\n ): CompleteTextStyleDeclaration {\n return {\n ...pick(\n this,\n (this.constructor as typeof StyledText)\n ._styleProperties as (keyof this)[],\n ),\n ...this._getStyleDeclaration(lineIndex, charIndex),\n } as CompleteTextStyleDeclaration;\n }\n\n /**\n * @param {Number} lineIndex\n * @param {Number} charIndex\n * @param {Object} style\n * @private\n */\n protected _setStyleDeclaration(\n lineIndex: number,\n charIndex: number,\n style: object,\n ) {\n this.styles[lineIndex][charIndex] = style;\n }\n\n /**\n *\n * @param {Number} lineIndex\n * @param {Number} charIndex\n * @private\n */\n protected _deleteStyleDeclaration(lineIndex: number, charIndex: number) {\n delete this.styles[lineIndex][charIndex];\n }\n\n /**\n * @param {Number} lineIndex\n * @return {Boolean} if the line exists or not\n * @private\n */\n protected _getLineStyle(lineIndex: number): boolean {\n return !!this.styles[lineIndex];\n }\n\n /**\n * Set the line style to an empty object so that is initialized\n * @param {Number} lineIndex\n * @private\n */\n protected _setLineStyle(lineIndex: number) {\n this.styles[lineIndex] = {};\n }\n\n protected _deleteLineStyle(lineIndex: number) {\n delete this.styles[lineIndex];\n }\n}\n"],"mappings":"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"}