import * as util from '../util'; import * as is from '../is'; const styfn = {}; (function(){ let number = util.regex.number; let rgba = util.regex.rgbaNoBackRefs; let hsla = util.regex.hslaNoBackRefs; let hex3 = util.regex.hex3; let hex6 = util.regex.hex6; let data = function( prefix ){ return '^' + prefix + '\\s*\\(\\s*([\\w\\.]+)\\s*\\)$'; }; let mapData = function( prefix ){ let mapArg = number + '|\\w+|' + rgba + '|' + hsla + '|' + hex3 + '|' + hex6; return '^' + prefix + '\\s*\\(([\\w\\.]+)\\s*\\,\\s*(' + number + ')\\s*\\,\\s*(' + number + ')\\s*,\\s*(' + mapArg + ')\\s*\\,\\s*(' + mapArg + ')\\)$'; }; let urlRegexes = [ '^url\\s*\\(\\s*[\'"]?(.+?)[\'"]?\\s*\\)$', '^(none)$', '^(.+)$' ]; // each visual style property has a type and needs to be validated according to it styfn.types = { time: { number: true, min: 0, units: 's|ms', implicitUnits: 'ms' }, percent: { number: true, min: 0, max: 100, units: '%', implicitUnits: '%' }, percentages: { number: true, min: 0, max: 100, units: '%', implicitUnits: '%', multiple: true }, zeroOneNumber: { number: true, min: 0, max: 1, unitless: true }, zeroOneNumbers: { number: true, min: 0, max: 1, unitless: true, multiple: true }, nOneOneNumber: { number: true, min: -1, max: 1, unitless: true }, nonNegativeInt: { number: true, min: 0, integer: true, unitless: true }, nonNegativeNumber: { number: true, min: 0, unitless: true }, position: { enums: [ 'parent', 'origin' ] }, nodeSize: { number: true, min: 0, enums: [ 'label' ] }, number: { number: true, unitless: true }, numbers: { number: true, unitless: true, multiple: true }, positiveNumber: { number: true, unitless: true, min: 0, strictMin: true }, size: { number: true, min: 0 }, bidirectionalSize: { number: true }, // allows negative bidirectionalSizeMaybePercent: { number: true, allowPercent: true }, // allows negative bidirectionalSizes: { number: true, multiple: true }, // allows negative sizeMaybePercent: { number: true, min: 0, allowPercent: true }, axisDirection: { enums: ['horizontal', 'leftward', 'rightward', 'vertical', 'upward', 'downward', 'auto'] }, paddingRelativeTo: { enums: [ 'width', 'height', 'average', 'min', 'max' ] }, bgWH: { number: true, min: 0, allowPercent: true, enums: [ 'auto' ], multiple: true }, bgPos: { number: true, allowPercent: true, multiple: true }, bgRelativeTo: { enums: [ 'inner', 'include-padding' ], multiple: true }, bgRepeat: { enums: [ 'repeat', 'repeat-x', 'repeat-y', 'no-repeat' ], multiple: true }, bgFit: { enums: [ 'none', 'contain', 'cover' ], multiple: true }, bgCrossOrigin: { enums: [ 'anonymous', 'use-credentials', 'null' ], multiple: true }, bgClip: { enums: [ 'none', 'node' ], multiple: true }, bgContainment: { enums: [ 'inside', 'over' ], multiple: true }, color: { color: true }, colors: { color: true, multiple: true }, fill: { enums: ['solid', 'linear-gradient', 'radial-gradient'] }, bool: { enums: [ 'yes', 'no' ] }, bools: { enums: [ 'yes', 'no' ], multiple: true }, lineStyle: { enums: [ 'solid', 'dotted', 'dashed' ] }, lineCap: { enums: [ 'butt', 'round', 'square' ] }, linePosition: { enums: [ 'center', 'inside', 'outside' ] }, lineJoin: { enums: [ 'round', 'bevel', 'miter' ] }, borderStyle: { enums: [ 'solid', 'dotted', 'dashed', 'double' ] }, curveStyle: { enums: [ 'bezier', 'unbundled-bezier', 'haystack', 'segments', 'straight', 'straight-triangle', 'taxi', 'round-segments', 'round-taxi' ] }, radiusType: { enums: [ 'arc-radius', 'influence-radius' ] , multiple: true }, fontFamily: { regex: '^([\\w- \\"]+(?:\\s*,\\s*[\\w- \\"]+)*)$' }, fontStyle: { enums: [ 'italic', 'normal', 'oblique' ] }, fontWeight: { enums: [ 'normal', 'bold', 'bolder', 'lighter', '100', '200', '300', '400', '500', '600', '800', '900', 100, 200, 300, 400, 500, 600, 700, 800, 900 ] }, textDecoration: { enums: [ 'none', 'underline', 'overline', 'line-through' ] }, textTransform: { enums: [ 'none', 'uppercase', 'lowercase' ] }, textWrap: { enums: [ 'none', 'wrap', 'ellipsis' ] }, textOverflowWrap: { enums: [ 'whitespace', 'anywhere' ] }, textBackgroundShape: { enums: [ 'rectangle', 'roundrectangle', 'round-rectangle' ]}, nodeShape: { enums: [ 'rectangle', 'roundrectangle', 'round-rectangle', 'cutrectangle', 'cut-rectangle', 'bottomroundrectangle', 'bottom-round-rectangle', 'barrel', 'ellipse', 'triangle', 'round-triangle', 'square', 'pentagon', 'round-pentagon', 'hexagon', 'round-hexagon', 'concavehexagon', 'concave-hexagon', 'heptagon', 'round-heptagon', 'octagon', 'round-octagon', 'tag', 'round-tag', 'star', 'diamond', 'round-diamond', 'vee', 'rhomboid', 'right-rhomboid', 'polygon', ] }, overlayShape: { enums: [ 'roundrectangle', 'round-rectangle', 'ellipse' ] }, cornerRadius: { number: true, min: 0, units: 'px|em', implicitUnits: 'px', enums: ['auto'] }, compoundIncludeLabels: { enums: [ 'include', 'exclude' ] }, arrowShape: { enums: [ 'tee', 'triangle', 'triangle-tee', 'circle-triangle', 'triangle-cross', 'triangle-backcurve', 'vee', 'square', 'circle', 'diamond', 'chevron', 'none' ] }, arrowFill: { enums: [ 'filled', 'hollow' ] }, arrowWidth: { number: true, units: '%|px|em', implicitUnits: 'px', enums: [ 'match-line' ] }, display: { enums: [ 'element', 'none' ] }, visibility: { enums: [ 'hidden', 'visible' ] }, zCompoundDepth: { enums: [ 'bottom', 'orphan', 'auto', 'top' ] }, zIndexCompare: { enums: [ 'auto', 'manual' ] }, valign: { enums: [ 'top', 'center', 'bottom' ] }, halign: { enums: [ 'left', 'center', 'right' ] }, justification: { enums: [ 'left', 'center', 'right', 'auto' ] }, text: { string: true }, data: { mapping: true, regex: data( 'data' ) }, layoutData: { mapping: true, regex: data( 'layoutData' ) }, scratch: { mapping: true, regex: data( 'scratch' ) }, mapData: { mapping: true, regex: mapData( 'mapData' ) }, mapLayoutData: { mapping: true, regex: mapData( 'mapLayoutData' ) }, mapScratch: { mapping: true, regex: mapData( 'mapScratch' ) }, fn: { mapping: true, fn: true }, url: { regexes: urlRegexes, singleRegexMatchValue: true }, urls: { regexes: urlRegexes, singleRegexMatchValue: true, multiple: true }, propList: { propList: true }, angle: { number: true, units: 'deg|rad', implicitUnits: 'rad' }, textRotation: { number: true, units: 'deg|rad', implicitUnits: 'rad', enums: [ 'none', 'autorotate' ] }, polygonPointList: { number: true, multiple: true, evenMultiple: true, min: -1, max: 1, unitless: true }, edgeDistances: { enums: ['intersection', 'node-position', 'endpoints'] }, edgeEndpoint: { number: true, multiple: true, units: '%|px|em|deg|rad', implicitUnits: 'px', enums: [ 'inside-to-node', 'outside-to-node', 'outside-to-node-or-label', 'outside-to-line', 'outside-to-line-or-label' ], singleEnum: true, validate: function( valArr, unitsArr ){ switch( valArr.length ){ case 2: // can be % or px only return unitsArr[0] !== 'deg' && unitsArr[0] !== 'rad' && unitsArr[1] !== 'deg' && unitsArr[1] !== 'rad'; case 1: // can be enum, deg, or rad only return is.string( valArr[0] ) || unitsArr[0] === 'deg' || unitsArr[0] === 'rad'; default: return false; } } }, easing: { regexes: [ '^(spring)\\s*\\(\\s*(' + number + ')\\s*,\\s*(' + number + ')\\s*\\)$', '^(cubic-bezier)\\s*\\(\\s*(' + number + ')\\s*,\\s*(' + number + ')\\s*,\\s*(' + number + ')\\s*,\\s*(' + number + ')\\s*\\)$' ], enums: [ 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'ease-in-sine', 'ease-out-sine', 'ease-in-out-sine', 'ease-in-quad', 'ease-out-quad', 'ease-in-out-quad', 'ease-in-cubic', 'ease-out-cubic', 'ease-in-out-cubic', 'ease-in-quart', 'ease-out-quart', 'ease-in-out-quart', 'ease-in-quint', 'ease-out-quint', 'ease-in-out-quint', 'ease-in-expo', 'ease-out-expo', 'ease-in-out-expo', 'ease-in-circ', 'ease-out-circ', 'ease-in-out-circ' ] }, gradientDirection: { enums: [ 'to-bottom', 'to-top', 'to-left', 'to-right', 'to-bottom-right', 'to-bottom-left', 'to-top-right', 'to-top-left', 'to-right-bottom', 'to-left-bottom', 'to-right-top', 'to-left-top', // different order ] }, boundsExpansion: { number:true, multiple:true, min: 0, validate: function( valArr ) { const length = valArr.length; return length === 1 || length === 2 || length === 4; } }, }; let diff = { zeroNonZero: function( val1, val2 ){ if( ( val1 == null || val2 == null ) && val1 !== val2 ){ return true; // null cases could represent any value } if( val1 == 0 && val2 != 0 ){ return true; } else if( val1 != 0 && val2 == 0 ){ return true; } else { return false; } }, any: function( val1, val2 ){ return val1 != val2; }, emptyNonEmpty: function( str1, str2 ){ const empty1 = is.emptyString(str1); const empty2 = is.emptyString(str2); return (empty1 && !empty2) || (!empty1 && empty2); } }; // define visual style properties // // - n.b. adding a new group of props may require updates to updateStyleHints() // - adding new props to an existing group gets handled automatically let t = styfn.types; let mainLabel = [ { name: 'label', type: t.text, triggersBounds: diff.any, triggersZOrder: diff.emptyNonEmpty }, { name: 'text-rotation', type: t.textRotation, triggersBounds: diff.any }, { name: 'text-margin-x', type: t.bidirectionalSize, triggersBounds: diff.any }, { name: 'text-margin-y', type: t.bidirectionalSize, triggersBounds: diff.any } ]; let sourceLabel = [ { name: 'source-label', type: t.text, triggersBounds: diff.any }, { name: 'source-text-rotation', type: t.textRotation, triggersBounds: diff.any }, { name: 'source-text-margin-x', type: t.bidirectionalSize, triggersBounds: diff.any }, { name: 'source-text-margin-y', type: t.bidirectionalSize, triggersBounds: diff.any }, { name: 'source-text-offset', type: t.size, triggersBounds: diff.any } ]; let targetLabel = [ { name: 'target-label', type: t.text, triggersBounds: diff.any }, { name: 'target-text-rotation', type: t.textRotation, triggersBounds: diff.any }, { name: 'target-text-margin-x', type: t.bidirectionalSize, triggersBounds: diff.any }, { name: 'target-text-margin-y', type: t.bidirectionalSize, triggersBounds: diff.any }, { name: 'target-text-offset', type: t.size, triggersBounds: diff.any } ]; let labelDimensions = [ { name: 'font-family', type: t.fontFamily, triggersBounds: diff.any }, { name: 'font-style', type: t.fontStyle, triggersBounds: diff.any }, { name: 'font-weight', type: t.fontWeight, triggersBounds: diff.any }, { name: 'font-size', type: t.size, triggersBounds: diff.any }, { name: 'text-transform', type: t.textTransform, triggersBounds: diff.any }, { name: 'text-wrap', type: t.textWrap, triggersBounds: diff.any }, { name: 'text-overflow-wrap', type: t.textOverflowWrap, triggersBounds: diff.any }, { name: 'text-max-width', type: t.size, triggersBounds: diff.any }, { name: 'text-outline-width', type: t.size, triggersBounds: diff.any }, { name: 'line-height', type: t.positiveNumber, triggersBounds: diff.any } ]; let commonLabel = [ { name: 'text-valign', type: t.valign, triggersBounds: diff.any }, { name: 'text-halign', type: t.halign, triggersBounds: diff.any }, { name: 'color', type: t.color }, { name: 'text-outline-color', type: t.color }, { name: 'text-outline-opacity', type: t.zeroOneNumber }, { name: 'text-background-color', type: t.color }, { name: 'text-background-opacity', type: t.zeroOneNumber }, { name: 'text-background-padding', type: t.size, triggersBounds: diff.any }, { name: 'text-border-opacity', type: t.zeroOneNumber }, { name: 'text-border-color', type: t.color }, { name: 'text-border-width', type: t.size, triggersBounds: diff.any }, { name: 'text-border-style', type: t.borderStyle, triggersBounds: diff.any }, { name: 'text-background-shape', type: t.textBackgroundShape, triggersBounds: diff.any }, { name: 'text-justification', type: t.justification } ]; let behavior = [ { name: 'events', type: t.bool, triggersZOrder: diff.any }, { name: 'text-events', type: t.bool, triggersZOrder: diff.any } ]; let visibility = [ { name: 'display', type: t.display, triggersZOrder: diff.any, triggersBounds: diff.any, triggersBoundsOfConnectedEdges: true }, { name: 'visibility', type: t.visibility, triggersZOrder: diff.any }, { name: 'opacity', type: t.zeroOneNumber, triggersZOrder: diff.zeroNonZero }, { name: 'text-opacity', type: t.zeroOneNumber }, { name: 'min-zoomed-font-size', type: t.size }, { name: 'z-compound-depth', type: t.zCompoundDepth, triggersZOrder: diff.any }, { name: 'z-index-compare', type: t.zIndexCompare, triggersZOrder: diff.any }, { name: 'z-index', type: t.number, triggersZOrder: diff.any } ]; let overlay = [ { name: 'overlay-padding', type: t.size, triggersBounds: diff.any }, { name: 'overlay-color', type: t.color }, { name: 'overlay-opacity', type: t.zeroOneNumber, triggersBounds: diff.zeroNonZero }, { name: 'overlay-shape', type: t.overlayShape, triggersBounds: diff.any }, { name: 'overlay-corner-radius', type: t.cornerRadius } ]; let underlay = [ { name: 'underlay-padding', type: t.size, triggersBounds: diff.any }, { name: 'underlay-color', type: t.color }, { name: 'underlay-opacity', type: t.zeroOneNumber, triggersBounds: diff.zeroNonZero }, { name: 'underlay-shape', type: t.overlayShape, triggersBounds: diff.any }, { name: 'underlay-corner-radius', type: t.cornerRadius } ]; let transition = [ { name: 'transition-property', type: t.propList }, { name: 'transition-duration', type: t.time }, { name: 'transition-delay', type: t.time }, { name: 'transition-timing-function', type: t.easing } ]; let nodeSizeHashOverride = (ele, parsedProp) => { if( parsedProp.value === 'label' ){ return -ele.poolIndex(); // no hash key hits is using label size (hitrate for perf probably low anyway) } else { return parsedProp.pfValue; } }; let nodeBody = [ { name: 'height', type: t.nodeSize, triggersBounds: diff.any, hashOverride: nodeSizeHashOverride }, { name: 'width', type: t.nodeSize, triggersBounds: diff.any, hashOverride: nodeSizeHashOverride }, { name: 'shape', type: t.nodeShape, triggersBounds: diff.any }, { name: 'shape-polygon-points', type: t.polygonPointList, triggersBounds: diff.any }, { name: 'corner-radius', type: t.cornerRadius}, { name: 'background-color', type: t.color }, { name: 'background-fill', type: t.fill }, { name: 'background-opacity', type: t.zeroOneNumber }, { name: 'background-blacken', type: t.nOneOneNumber }, { name: 'background-gradient-stop-colors', type: t.colors }, { name: 'background-gradient-stop-positions', type: t.percentages }, { name: 'background-gradient-direction', type: t.gradientDirection }, { name: 'padding', type: t.sizeMaybePercent, triggersBounds: diff.any }, { name: 'padding-relative-to', type: t.paddingRelativeTo, triggersBounds: diff.any }, { name: 'bounds-expansion', type: t.boundsExpansion, triggersBounds: diff.any } ]; let nodeBorder = [ { name: 'border-color', type: t.color }, { name: 'border-opacity', type: t.zeroOneNumber }, { name: 'border-width', type: t.size, triggersBounds: diff.any }, { name: 'border-style', type: t.borderStyle }, { name: 'border-cap', type: t.lineCap }, { name: 'border-join', type: t.lineJoin }, { name: 'border-dash-pattern', type: t.numbers }, { name: 'border-dash-offset', type: t.number }, { name: 'border-position', type: t.linePosition }, ]; let nodeOutline = [ { name: 'outline-color', type: t.color }, { name: 'outline-opacity', type: t.zeroOneNumber }, { name: 'outline-width', type: t.size, triggersBounds: diff.any }, { name: 'outline-style', type: t.borderStyle }, { name: 'outline-offset', type: t.size, triggersBounds: diff.any } ]; let backgroundImage = [ { name: 'background-image', type: t.urls }, { name: 'background-image-crossorigin', type: t.bgCrossOrigin }, { name: 'background-image-opacity', type: t.zeroOneNumbers }, { name: 'background-image-containment', type: t.bgContainment }, { name: 'background-image-smoothing', type: t.bools }, { name: 'background-position-x', type: t.bgPos }, { name: 'background-position-y', type: t.bgPos }, { name: 'background-width-relative-to', type: t.bgRelativeTo }, { name: 'background-height-relative-to', type: t.bgRelativeTo }, { name: 'background-repeat', type: t.bgRepeat }, { name: 'background-fit', type: t.bgFit }, { name: 'background-clip', type: t.bgClip }, { name: 'background-width', type: t.bgWH }, { name: 'background-height', type: t.bgWH }, { name: 'background-offset-x', type: t.bgPos }, { name: 'background-offset-y', type: t.bgPos } ]; let compound = [ { name: 'position', type: t.position, triggersBounds: diff.any }, { name: 'compound-sizing-wrt-labels', type: t.compoundIncludeLabels, triggersBounds: diff.any }, { name: 'min-width', type: t.size, triggersBounds: diff.any }, { name: 'min-width-bias-left', type: t.sizeMaybePercent, triggersBounds: diff.any }, { name: 'min-width-bias-right', type: t.sizeMaybePercent, triggersBounds: diff.any }, { name: 'min-height', type: t.size, triggersBounds: diff.any }, { name: 'min-height-bias-top', type: t.sizeMaybePercent, triggersBounds: diff.any }, { name: 'min-height-bias-bottom', type: t.sizeMaybePercent, triggersBounds: diff.any } ]; let edgeLine = [ { name: 'line-style', type: t.lineStyle }, { name: 'line-color', type: t.color }, { name: 'line-fill', type: t.fill }, { name: 'line-cap', type: t.lineCap }, { name: 'line-opacity', type: t.zeroOneNumber}, { name: 'line-dash-pattern', type: t.numbers }, { name: 'line-dash-offset', type: t.number }, { name: 'line-outline-width', type: t.size }, { name: 'line-outline-color', type: t.color }, { name: 'line-gradient-stop-colors', type: t.colors }, { name: 'line-gradient-stop-positions', type: t.percentages }, { name: 'curve-style', type: t.curveStyle, triggersBounds: diff.any, triggersBoundsOfParallelBeziers: true }, { name: 'haystack-radius', type: t.zeroOneNumber, triggersBounds: diff.any }, { name: 'source-endpoint', type: t.edgeEndpoint, triggersBounds: diff.any }, { name: 'target-endpoint', type: t.edgeEndpoint, triggersBounds: diff.any }, { name: 'control-point-step-size', type: t.size, triggersBounds: diff.any }, { name: 'control-point-distances', type: t.bidirectionalSizes, triggersBounds: diff.any }, { name: 'control-point-weights', type: t.numbers, triggersBounds: diff.any }, { name: 'segment-distances', type: t.bidirectionalSizes, triggersBounds: diff.any }, { name: 'segment-weights', type: t.numbers, triggersBounds: diff.any }, { name: 'segment-radii', type: t.numbers, triggersBounds: diff.any }, { name: 'radius-type', type: t.radiusType, triggersBounds: diff.any }, { name: 'taxi-turn', type: t.bidirectionalSizeMaybePercent, triggersBounds: diff.any }, { name: 'taxi-turn-min-distance', type: t.size, triggersBounds: diff.any }, { name: 'taxi-direction', type: t.axisDirection, triggersBounds: diff.any }, { name: 'taxi-radius', type: t.number, triggersBounds: diff.any }, { name: 'edge-distances', type: t.edgeDistances, triggersBounds: diff.any }, { name: 'arrow-scale', type: t.positiveNumber, triggersBounds: diff.any }, { name: 'loop-direction', type: t.angle, triggersBounds: diff.any }, { name: 'loop-sweep', type: t.angle, triggersBounds: diff.any }, { name: 'source-distance-from-node', type: t.size, triggersBounds: diff.any }, { name: 'target-distance-from-node', type: t.size, triggersBounds: diff.any } ]; let ghost = [ { name: 'ghost', type: t.bool, triggersBounds: diff.any }, { name: 'ghost-offset-x', type: t.bidirectionalSize, triggersBounds: diff.any }, { name: 'ghost-offset-y', type: t.bidirectionalSize, triggersBounds: diff.any }, { name: 'ghost-opacity', type: t.zeroOneNumber } ]; let core = [ { name: 'selection-box-color', type: t.color }, { name: 'selection-box-opacity', type: t.zeroOneNumber }, { name: 'selection-box-border-color', type: t.color }, { name: 'selection-box-border-width', type: t.size }, { name: 'active-bg-color', type: t.color }, { name: 'active-bg-opacity', type: t.zeroOneNumber }, { name: 'active-bg-size', type: t.size }, { name: 'outside-texture-bg-color', type: t.color }, { name: 'outside-texture-bg-opacity', type: t.zeroOneNumber } ]; // pie backgrounds for nodes let pie = []; styfn.pieBackgroundN = 16; // because the pie properties are numbered, give access to a constant N (for renderer use) pie.push( { name: 'pie-size', type: t.sizeMaybePercent } ); for( let i = 1; i <= styfn.pieBackgroundN; i++ ){ pie.push( { name: 'pie-' + i + '-background-color', type: t.color } ); pie.push( { name: 'pie-' + i + '-background-size', type: t.percent } ); pie.push( { name: 'pie-' + i + '-background-opacity', type: t.zeroOneNumber } ); } // edge arrows let edgeArrow = []; let arrowPrefixes = styfn.arrowPrefixes = [ 'source', 'mid-source', 'target', 'mid-target' ]; [ { name: 'arrow-shape', type: t.arrowShape, triggersBounds: diff.any }, { name: 'arrow-color', type: t.color }, { name: 'arrow-fill', type: t.arrowFill }, { name: 'arrow-width', type: t.arrowWidth } ].forEach( function( prop ){ arrowPrefixes.forEach( function( prefix ){ let name = prefix + '-' + prop.name; let { type, triggersBounds } = prop; edgeArrow.push( { name, type, triggersBounds } ); } ); }, {} ); let props = styfn.properties = [ // common to all eles ...behavior, ...transition, ...visibility, ...overlay, ...underlay, ...ghost, // labels ...commonLabel, ...labelDimensions, ...mainLabel, ...sourceLabel, ...targetLabel, // node props ...nodeBody, ...nodeBorder, ...nodeOutline, ...backgroundImage, ...pie, ...compound, // edge props ...edgeLine, ...edgeArrow, ...core ]; let propGroups = styfn.propertyGroups = { // common to all eles behavior, transition, visibility, overlay, underlay, ghost, // labels commonLabel, labelDimensions, mainLabel, sourceLabel, targetLabel, // node props nodeBody, nodeBorder, nodeOutline, backgroundImage, pie, compound, // edge props edgeLine, edgeArrow, core }; let propGroupNames = styfn.propertyGroupNames = {}; let propGroupKeys = styfn.propertyGroupKeys = Object.keys( propGroups ); propGroupKeys.forEach( key => { propGroupNames[ key ] = propGroups[ key ].map( prop => prop.name ); propGroups[ key ].forEach( prop => prop.groupKey = key ); } ); // define aliases let aliases = styfn.aliases = [ { name: 'content', pointsTo: 'label' }, { name: 'control-point-distance', pointsTo: 'control-point-distances' }, { name: 'control-point-weight', pointsTo: 'control-point-weights' }, { name: 'segment-distance', pointsTo: 'segment-distances' }, { name: 'segment-weight', pointsTo: 'segment-weights' }, { name: 'segment-radius', pointsTo: 'segment-radii' }, { name: 'edge-text-rotation', pointsTo: 'text-rotation' }, { name: 'padding-left', pointsTo: 'padding' }, { name: 'padding-right', pointsTo: 'padding' }, { name: 'padding-top', pointsTo: 'padding' }, { name: 'padding-bottom', pointsTo: 'padding' } ]; // list of property names styfn.propertyNames = props.map( function( p ){ return p.name; } ); // allow access of properties by name ( e.g. style.properties.height ) for( let i = 0; i < props.length; i++ ){ let prop = props[ i ]; props[ prop.name ] = prop; // allow lookup by name } // map aliases for( let i = 0; i < aliases.length; i++ ){ let alias = aliases[ i ]; let pointsToProp = props[ alias.pointsTo ]; let aliasProp = { name: alias.name, alias: true, pointsTo: pointsToProp }; // add alias prop for parsing props.push( aliasProp ); props[ alias.name ] = aliasProp; // allow lookup by name } })(); styfn.getDefaultProperty = function( name ){ return this.getDefaultProperties()[ name ]; }; styfn.getDefaultProperties = function(){ let _p = this._private; if( _p.defaultProperties != null ){ return _p.defaultProperties; } let rawProps = util.extend( { // core props 'selection-box-color': '#ddd', 'selection-box-opacity': 0.65, 'selection-box-border-color': '#aaa', 'selection-box-border-width': 1, 'active-bg-color': 'black', 'active-bg-opacity': 0.15, 'active-bg-size': 30, 'outside-texture-bg-color': '#000', 'outside-texture-bg-opacity': 0.125, // common node/edge props 'events': 'yes', 'text-events': 'no', 'text-valign': 'top', 'text-halign': 'center', 'text-justification': 'auto', 'line-height': 1, 'color': '#000', 'text-outline-color': '#000', 'text-outline-width': 0, 'text-outline-opacity': 1, 'text-opacity': 1, 'text-decoration': 'none', 'text-transform': 'none', 'text-wrap': 'none', 'text-overflow-wrap': 'whitespace', 'text-max-width': 9999, 'text-background-color': '#000', 'text-background-opacity': 0, 'text-background-shape': 'rectangle', 'text-background-padding': 0, 'text-border-opacity': 0, 'text-border-width': 0, 'text-border-style': 'solid', 'text-border-color': '#000', 'font-family': 'Helvetica Neue, Helvetica, sans-serif', 'font-style': 'normal', 'font-weight': 'normal', 'font-size': 16, 'min-zoomed-font-size': 0, 'text-rotation': 'none', 'source-text-rotation': 'none', 'target-text-rotation': 'none', 'visibility': 'visible', 'display': 'element', 'opacity': 1, 'z-compound-depth': 'auto', 'z-index-compare': 'auto', 'z-index': 0, 'label': '', 'text-margin-x': 0, 'text-margin-y': 0, 'source-label': '', 'source-text-offset': 0, 'source-text-margin-x': 0, 'source-text-margin-y': 0, 'target-label': '', 'target-text-offset': 0, 'target-text-margin-x': 0, 'target-text-margin-y': 0, 'overlay-opacity': 0, 'overlay-color': '#000', 'overlay-padding': 10, 'overlay-shape': 'round-rectangle', 'overlay-corner-radius': 'auto', 'underlay-opacity': 0, 'underlay-color': '#000', 'underlay-padding': 10, 'underlay-shape': 'round-rectangle', 'underlay-corner-radius': 'auto', 'transition-property': 'none', 'transition-duration': 0, 'transition-delay': 0, 'transition-timing-function': 'linear', // node props 'background-blacken': 0, 'background-color': '#999', 'background-fill': 'solid', 'background-opacity': 1, 'background-image': 'none', 'background-image-crossorigin': 'anonymous', 'background-image-opacity': 1, 'background-image-containment': 'inside', 'background-image-smoothing': 'yes', 'background-position-x': '50%', 'background-position-y': '50%', 'background-offset-x': 0, 'background-offset-y': 0, 'background-width-relative-to': 'include-padding', 'background-height-relative-to': 'include-padding', 'background-repeat': 'no-repeat', 'background-fit': 'none', 'background-clip': 'node', 'background-width': 'auto', 'background-height': 'auto', 'border-color': '#000', 'border-opacity': 1, 'border-width': 0, 'border-style': 'solid', 'border-dash-pattern': [ 4, 2 ], 'border-dash-offset': 0, 'border-cap': 'butt', 'border-join': 'miter', 'border-position': 'center', 'outline-color': '#999', 'outline-opacity': 1, 'outline-width': 0, 'outline-offset': 0, 'outline-style': 'solid', 'height': 30, 'width': 30, 'shape': 'ellipse', 'shape-polygon-points': '-1, -1, 1, -1, 1, 1, -1, 1', 'corner-radius': 'auto', 'bounds-expansion': 0, // node gradient 'background-gradient-direction': 'to-bottom', 'background-gradient-stop-colors': '#999', 'background-gradient-stop-positions': '0%', // ghost props 'ghost': 'no', 'ghost-offset-y': 0, 'ghost-offset-x': 0, 'ghost-opacity': 0, // compound props 'padding': 0, 'padding-relative-to': 'width', 'position': 'origin', 'compound-sizing-wrt-labels': 'include', 'min-width': 0, 'min-width-bias-left': 0, 'min-width-bias-right': 0, 'min-height': 0, 'min-height-bias-top': 0, 'min-height-bias-bottom': 0 }, { // node pie bg 'pie-size': '100%' }, [ { name: 'pie-{{i}}-background-color', value: 'black' }, { name: 'pie-{{i}}-background-size', value: '0%' }, { name: 'pie-{{i}}-background-opacity', value: 1 } ].reduce( function( css, prop ){ for( let i = 1; i <= styfn.pieBackgroundN; i++ ){ let name = prop.name.replace( '{{i}}', i ); let val = prop.value; css[ name ] = val; } return css; }, {} ), { // edge props 'line-style': 'solid', 'line-color': '#999', 'line-fill': 'solid', 'line-cap': 'butt', 'line-opacity' : 1, 'line-outline-width' : 0, 'line-outline-color' : '#000', 'line-gradient-stop-colors': '#999', 'line-gradient-stop-positions': '0%', 'control-point-step-size': 40, 'control-point-weights': 0.5, 'segment-weights': 0.5, 'segment-distances': 20, 'segment-radii': 15, 'radius-type': 'arc-radius', 'taxi-turn': '50%', 'taxi-radius': 15, 'taxi-turn-min-distance': 10, 'taxi-direction': 'auto', 'edge-distances': 'intersection', 'curve-style': 'haystack', 'haystack-radius': 0, 'arrow-scale': 1, 'loop-direction': '-45deg', 'loop-sweep': '-90deg', 'source-distance-from-node': 0, 'target-distance-from-node': 0, 'source-endpoint': 'outside-to-node', 'target-endpoint': 'outside-to-node', 'line-dash-pattern': [6, 3], 'line-dash-offset': 0, }, [ { name: 'arrow-shape', value: 'none' }, { name: 'arrow-color', value: '#999' }, { name: 'arrow-fill', value: 'filled' }, { name: 'arrow-width', value: 1 }, ].reduce( function( css, prop ){ styfn.arrowPrefixes.forEach( function( prefix ){ let name = prefix + '-' + prop.name; let val = prop.value; css[ name ] = val; } ); return css; }, {} ) ); let parsedProps = {}; for( let i = 0; i < this.properties.length; i++ ){ let prop = this.properties[i]; if( prop.pointsTo ){ continue; } let name = prop.name; let val = rawProps[ name ]; let parsedProp = this.parse( name, val ); parsedProps[ name ] = parsedProp; } _p.defaultProperties = parsedProps; return _p.defaultProperties; }; styfn.addDefaultStylesheet = function(){ this .selector( ':parent' ) .css( { 'shape': 'rectangle', 'padding': 10, 'background-color': '#eee', 'border-color': '#ccc', 'border-width': 1 } ) .selector( 'edge' ) .css( { 'width': 3 } ) .selector( ':loop' ) .css( { 'curve-style': 'bezier' } ) .selector( 'edge:compound' ) .css( { 'curve-style': 'bezier', 'source-endpoint': 'outside-to-line', 'target-endpoint': 'outside-to-line' } ) .selector( ':selected' ) .css( { 'background-color': '#0169D9', 'line-color': '#0169D9', 'source-arrow-color': '#0169D9', 'target-arrow-color': '#0169D9', 'mid-source-arrow-color': '#0169D9', 'mid-target-arrow-color': '#0169D9' } ) .selector( ':parent:selected' ) .css( { 'background-color': '#CCE1F9', 'border-color': '#aec8e5' } ) .selector( ':active' ) .css( { 'overlay-color': 'black', 'overlay-padding': 10, 'overlay-opacity': 0.25 } ) ; this.defaultLength = this.length; }; export default styfn;