Text Attributes&

SketchSystems.spec

Text Attributes&
  Bold
    Bold Off
      bold -> Bold On
    Bold On
      bold -> Bold Off

  Italic
    Italic Off
      italic -> Italic On
    Italic On
      italic -> Italic Off
    
  Underline
    Underline Off
      underline -> Underline On
    Underline On
      underline -> Underline Off

SketchSystems_prototype.js

function isMergeableObject(val) {
    var nonNullObject = val && typeof val === 'object'

    return nonNullObject
        && Object.prototype.toString.call(val) !== '[object RegExp]'
        && Object.prototype.toString.call(val) !== '[object Date]'
}

function emptyTarget(val) {
    return Array.isArray(val) ? [] : {}
}

function cloneIfNecessary(value, optionsArgument) {
    var clone = optionsArgument && optionsArgument.clone === true
    return (clone && isMergeableObject(value)) ? deepmerge(emptyTarget(value), value, optionsArgument) : value
}

function defaultArrayMerge(target, source, optionsArgument) {
    var destination = target.slice()
    source.forEach(function(e, i) {
        if (typeof destination[i] === 'undefined') {
            destination[i] = cloneIfNecessary(e, optionsArgument)
        } else if (isMergeableObject(e)) {
            destination[i] = deepmerge(target[i], e, optionsArgument)
        } else if (target.indexOf(e) === -1) {
            destination.push(cloneIfNecessary(e, optionsArgument))
        }
    })
    return destination
}

function mergeObject(target, source, optionsArgument) {
    var destination = {}
    if (isMergeableObject(target)) {
        Object.keys(target).forEach(function (key) {
            destination[key] = cloneIfNecessary(target[key], optionsArgument)
        })
    }
    Object.keys(source).forEach(function (key) {
        if (!isMergeableObject(source[key]) || !target[key]) {
            destination[key] = cloneIfNecessary(source[key], optionsArgument)
        } else {
            destination[key] = deepmerge(target[key], source[key], optionsArgument)
        }
    })
    return destination
}

function deepmerge(target, source, optionsArgument) {
    var array = Array.isArray(source);
    var options = optionsArgument || { arrayMerge: defaultArrayMerge }
    var arrayMerge = options.arrayMerge || defaultArrayMerge

    if (array) {
        return Array.isArray(target) ? arrayMerge(target, source, optionsArgument) : cloneIfNecessary(source, optionsArgument)
    } else {
        return mergeObject(target, source, optionsArgument)
    }
}

deepmerge.all = function deepmergeAll(array, optionsArgument) {
    if (!Array.isArray(array) || array.length < 2) {
        throw new Error('first argument should be an array with at least two elements')
    }

    // we are sure there are at least 2 values, so it is safe to have no initial value
    return array.reduce(function(prev, next) {
        return deepmerge(prev, next, optionsArgument)
    })
}

function render(model){
  let tableStyle = { "border-collapse": "collapse", width: "100%", "text-align": "center" };
  
  let attrs = (name) => {
    let activeStateName = name[0].toUpperCase() + name.substr(1) + " On";
    let commonStyle = { padding: "10px", border: "1px solid gray" };
    var style = {};
    if (model.states[activeStateName].is_active) {
      style = Object.assign(commonStyle, { background: "black", color: "white" });
    } else {
      style = Object.assign(commonStyle, { background: "white", color: "black" });
    }
    return { style, onClick: () => model.emit(name) };
  };
  
  let textAttrs = {
    style: {
      "font-weight": model.states["Bold On"].is_active ? "bold" : "normal",
      "font-style": model.states["Italic On"].is_active ? "italic" : "normal",
      "text-decoration": model.states["Underline On"].is_active ? "underline" : "none"
    }
  };
  
  return $("div", { style: { margin: "100 auto", width: "400px", background: "lightgray", padding: "100px" } },
           $("table", {style: tableStyle},
             $("tr",
               $("td", deepmerge(attrs("bold"), { style: { "font-weight": "bold" } }), "B"),
               $("td", deepmerge(attrs("italic"), { style: { "font-style": "italic" } }), "I"),
               $("td", deepmerge(attrs("underline"), { style: { "text-decoration": "underline" } }), "U"))),
           $("div", { style: { "margin-top": "20px", "font-size": "20pt", background: "white", padding: "100px" } },
             $("span", textAttrs, "Hello world!")));
}