refactor!: remove helpers function processing string style (#173)

Helper functions involving "style in the string form" have been removed
from `styleUtils`. Styles are defined using the `CellStateStyle` and it
is no longer necessary to process strings.

Removed functions
  - addStylename
  - getStylename
  - getStylenames
  - indexOfStylename
  - removeStylename
  - removeAllStylenames
  - setStyle

**BREAKING CHANGES**: some `styleUtils` functions have been removed.

CHANGELOG.md

@@ -2,7 +2,9 @@
 
 ## UNRELEASED
 
-N/A
+**Breaking Changes**:
+- helper functions involving _style in the string form_ have been removed from `styleUtils`. Styles are defined using the `CellStateStyle` and it is no longer necessary to process strings
+
 
 ## 0.1.0
 

packages/core/src/util/styleUtils.ts

@@ -315,118 +315,6 @@ export const convertPoint = (container: HTMLElement, x: number, y: number) => {
   return new Point(x - offset.x, y - offset.y);
 };
 
-/**
- * Returns the stylename in a style of the form [(stylename|key=value);] or
- * an empty string if the given style does not contain a stylename.
- *
- * @param style String of the form [(stylename|key=value);].
- */
-export const getStylename = (style: string) => {
-  const pairs = style.split(';');
-  const stylename = pairs[0];
-
-  if (stylename.indexOf('=') < 0) {
-    return stylename;
-  }
-
-  return '';
-};
-
-/**
- * Returns the stylenames in a style of the form [(stylename|key=value);]
- * or an empty array if the given style does not contain any stylenames.
- *
- * @param style String of the form [(stylename|key=value);].
- */
-export const getStylenames = (style: string) => {
-  const result = [];
-
-  const pairs = style.split(';');
-
-  for (let i = 0; i < pairs.length; i += 1) {
-    if (pairs[i].indexOf('=') < 0) {
-      result.push(pairs[i]);
-    }
-  }
-
-  return result;
-};
-
-/**
- * Returns the index of the given stylename in the given style. This
- * returns -1 if the given stylename does not occur (as a stylename) in the
- * given style, otherwise it returns the index of the first character.
- */
-export const indexOfStylename = (style: string, stylename: string) => {
-  const tokens = style.split(';');
-  let pos = 0;
-
-  for (let i = 0; i < tokens.length; i += 1) {
-    if (tokens[i] == stylename) {
-      return pos;
-    }
-
-    pos += tokens[i].length + 1;
-  }
-
-  return -1;
-};
-
-/**
- * Adds the specified stylename to the given style if it does not already
- * contain the stylename.
- */
-export const addStylename = (style: string, stylename: string) => {
-  if (indexOfStylename(style, stylename) < 0) {
-    if (style == null) {
-      style = '';
-    } else if (style.length > 0 && style.charAt(style.length - 1) != ';') {
-      style += ';';
-    }
-
-    style += stylename;
-  }
-
-  return style;
-};
-
-/**
- * Removes all occurrences of the specified stylename in the given style
- * and returns the updated style. Trailing semicolons are not preserved.
- */
-export const removeStylename = (style: string, stylename: string) => {
-  const result = [];
-
-  const tokens = style.split(';');
-
-  for (let i = 0; i < tokens.length; i += 1) {
-    if (tokens[i] != stylename) {
-      result.push(tokens[i]);
-    }
-  }
-
-  return result.join(';');
-};
-
-/**
- * Removes all stylenames from the given style and returns the updated
- * style.
- */
-export const removeAllStylenames = (style: string) => {
-  const result = [];
-
-  const tokens = style.split(';');
-
-  for (let i = 0; i < tokens.length; i += 1) {
-    // Keeps the key, value assignments
-    if (tokens[i].indexOf('=') >= 0) {
-      result.push(tokens[i]);
-    }
-  }
-
-  return result.join(';');
-};
-
 /**
  * Assigns the value for the given key in the styles of the given cells, or
  * removes the key from the styles if the value is null.
@@ -461,55 +349,6 @@ export const setCellStyles = (
   }
 };
 
-/**
- * Adds or removes the given key, value pair to the style and returns the
- * new style. If value is null or zero length then the key is removed from
- * the style. This is for cell styles, not for CSS styles.
- *
- * @param style String of the form [(stylename|key=value);].
- * @param key Key of the style to be changed.
- * @param value New value for the given key.
- */
-export const setStyle = (style: string | null, key: string, value: any) => {
-  const isValue =
-    value != null && (typeof value.length === 'undefined' || value.length > 0);
-
-  if (style == null || style.length == 0) {
-    if (isValue) {
-      style = `${key}=${value};`;
-    }
-  } else if (style.substring(0, key.length + 1) == `${key}=`) {
-    const next = style.indexOf(';');
-
-    if (isValue) {
-      style = `${key}=${value}${next < 0 ? ';' : style.substring(next)}`;
-    } else {
-      style = next < 0 || next == style.length - 1 ? '' : style.substring(next + 1);
-    }
-  } else {
-    const index = style.indexOf(`;${key}=`);
-
-    if (index < 0) {
-      if (isValue) {
-        const sep = style.charAt(style.length - 1) == ';' ? '' : ';';
-        style = `${style + sep + key}=${value};`;
-      }
-    } else {
-      const next = style.indexOf(';', index + 1);
-
-      if (isValue) {
-        style = `${style.substring(0, index + 1) + key}=${value}${
-          next < 0 ? ';' : style.substring(next)
-        }`;
-      } else {
-        style = style.substring(0, index) + (next < 0 ? ';' : style.substring(next));
-      }
-    }
-  }
-
-  return style;
-};
-
 /**
  * Sets or toggles the flag bit for the given key in the cell's styles.
  * If value is null then the flag is toggled.

packages/core/src/view/style/Stylesheet.ts

@@ -31,53 +31,28 @@ import Codec from '../../serialization/Codec';
 import type { CellStateStyle, CellStyle } from '../../types';
 
 /**
- * @class Stylesheet
+ * Defines the appearance of the cells in a graph. See {@link putCellStyle} for an example
+ * of creating a new cell style.
  *
- * Defines the appearance of the cells in a graph. See {@link putCellStyle} for an
+ * Existing styles can be cloned using {@link clone} and turned into a string for debugging
- * example of creating a new cell style. It is recommended to use objects, not
+ * using {@link toString}.
- * arrays for holding cell styles. Existing styles can be cloned using
- * {@link clone} and turned into a string for debugging using
- * {@link toString}.
  *
  * ### Default Styles
  *
- * The stylesheet contains two built-in styles, which are used if no style is
+ * The stylesheet contains two built-in styles, which are used if no style is defined for
- * defined for a cell:
+ * a cell:
  *
- * - defaultVertex Default style for vertices
+ * - `defaultVertex`: default style for vertices
- * - defaultEdge Default style for edges
+ * - `defaultEdge`: default style for edges
  *
  * ### Example
  *
  * ```javascript
- * var vertexStyle = stylesheet.getDefaultVertexStyle();
+ * const defaultVertexStyle = stylesheet.getDefaultVertexStyle();
- * vertexStyle.rounded = true;
+ * defaultVertexStyle.rounded = true;
- * var edgeStyle = stylesheet.getDefaultEdgeStyle();
+ * const defaultEdgeStyle = stylesheet.getDefaultEdgeStyle();
- * edgeStyle.edge = mxEdgeStyle.EntityRelation;
+ * defaultEdgeStyle.edgeStyle = EdgeStyle.EntityRelation;
  * ```
- *
- * Modifies the built-in default styles.
- *
- * To avoid the default style for a cell, add a leading semicolon
- * to the style definition, eg.
- *
- * ```javascript
- * ;shadow=1
- * ```
- *
- * ### Removing keys
- *
- * For removing a key in a cell style of the form [stylename;|key=value;] the
- * special value none can be used, eg. highlight;fillColor=none
- *
- * See also the helper methods in mxUtils to modify strings of this format,
- * namely {@link setStyle}, {@link indexOfStylename},
- * {@link addStylename}, {@link removeStylename},
- * {@link removeAllStylenames} and {@link setStyleFlag}.
- *
- * Constructor: mxStylesheet
- *
- * Constructs a new stylesheet and assigns default styles.
  */
 export class Stylesheet {
   constructor() {