@graphery/svg
Version:
Graphery SVG library
1,232 lines (1,225 loc) • 36.5 kB
JavaScript
/*
* DONE:
* - debugLevel => DONE
* - info level => DONE
* - error level => DONE
* - check ...<method>() => only methods available => DONE
* - support style methods => DONE
* - support classList methods => DONE
* - check <parent>.add( '<child>' ) => only valid nested element => DONE
* - Add new methods (by plugin) => DONE
* PENDING:
* - check <element>.<method>() => only methods available into the element => PENDING
* - check <element>.<method>(<...args>) => only valid arguments type => PENDING
* - warning level (for parameter check) => PENDING
* - Replace Object.assign with Object.defineProperties => PENDING
*/
const NAME = 'gySVG debug -';
const ELEMENTS = {
a : [
'animate', 'animateMotion', 'animateTransform',
'circle', 'clipPath', 'defs',
'desc', 'discard', 'ellipse',
'filter', 'foreignObject', 'g',
'image', 'line', 'linearGradient',
'marker', 'mask', 'metadata',
'mpath', 'path', 'pattern',
'polygon', 'polyline', 'radialGradient',
'rect', 'set', 'stop',
'style', 'svg', 'switch',
'symbol', 'text', 'title',
'use', 'view'
],
animate : ['desc', 'metadata', 'title'],
animateMotion : ['desc', 'metadata', 'mpath', 'title'],
animateTransform : ['desc', 'metadata', 'title'],
circle : [
'animate', 'animateMotion', 'animateTransform', 'desc', 'discard',
'metadata', 'mpath', 'set', 'title'
],
clipPath : [
'animate', 'animateMotion',
'animateTransform', 'circle',
'desc', 'discard',
'ellipse', 'line',
'metadata', 'mpath',
'path', 'polygon',
'polyline', 'rect',
'set', 'text',
'title', 'use'
],
defs : [
'a', 'animate', 'animateMotion',
'animateTransform', 'circle', 'clipPath',
'defs', 'desc', 'discard',
'ellipse', 'filter', 'foreignObject',
'g', 'image', 'line',
'linearGradient', 'marker', 'mask',
'metadata', 'mpath', 'path',
'pattern', 'polygon', 'polyline',
'radialGradient', 'rect', 'set',
'stop', 'style', 'svg',
'switch', 'symbol', 'text',
'title', 'use', 'view'
],
desc : [],
discard : ['desc', 'metadata', 'title'],
ellipse : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
feBlend : ['animate', 'set'],
feColorMatrix : ['animate', 'set'],
feComponentTransfer : ['feFuncA', 'feFuncB', 'feFuncG', 'feFuncR'],
feComposite : ['animate', 'set'],
feConvolveMatrix : ['animate', 'set'],
feDiffuseLighting : ['desc', 'metadata', 'title'],
feDisplacementMap : ['animate', 'set'],
feDistantLight : ['animate', 'set'],
feDropShadow : ['animate', 'set'],
feFlood : ['animate', 'set'],
feFuncA : ['animate', 'set'],
feFuncB : ['animate', 'set'],
feFuncG : ['animate', 'set'],
feFuncR : ['animate', 'set'],
feGaussianBlur : ['animate', 'set'],
feImage : ['animate', 'animateTransform', 'set'],
feMerge : ['feMergeNode'],
feMergeNode : ['animate', 'set'],
feMorphology : ['animate', 'set'],
feOffset : ['animate', 'set'],
fePointLight : ['animate', 'set'],
feSpecularLighting : ['desc', 'metadata', 'title'],
feSpotLight : ['animate', 'set'],
feTile : ['animate', 'set'],
feTurbulence : ['animate', 'set'],
filter : [
'animate', 'desc',
'feBlend', 'feColorMatrix',
'feComponentTransfer', 'feComposite',
'feConvolveMatrix', 'feDiffuseLighting',
'feDisplacementMap', 'feDropShadow',
'feFlood', 'feFuncA',
'feFuncB', 'feFuncG',
'feFuncR', 'feGaussianBlur',
'feImage', 'feMerge',
'feMergeNode', 'feMorphology',
'feOffset', 'feSpecularLighting',
'feTile', 'feTurbulence',
'metadata', 'set',
'title'
],
foreignObject : [],
g : [
'a', 'animate', 'animateMotion',
'animateTransform', 'circle', 'clipPath',
'defs', 'desc', 'discard',
'ellipse', 'filter', 'foreignObject',
'g', 'image', 'line',
'linearGradient', 'marker', 'mask',
'metadata', 'mpath', 'path',
'pattern', 'polygon', 'polyline',
'radialGradient', 'rect', 'set',
'stop', 'style', 'svg',
'switch', 'symbol', 'text',
'title', 'use', 'view'
],
image : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
line : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
linearGradient : [
'animate',
'animateTransform',
'desc',
'metadata',
'set',
'stop',
'title'
],
marker : [
'a', 'animate', 'animateMotion',
'animateTransform', 'circle', 'clipPath',
'defs', 'desc', 'discard',
'ellipse', 'filter', 'foreignObject',
'g', 'image', 'line',
'linearGradient', 'marker', 'mask',
'metadata', 'mpath', 'path',
'pattern', 'polygon', 'polyline',
'radialGradient', 'rect', 'set',
'stop', 'style', 'svg',
'switch', 'symbol', 'text',
'title', 'use', 'view'
],
mask : [
'a', 'animate', 'animateMotion',
'animateTransform', 'circle', 'clipPath',
'defs', 'desc', 'discard',
'ellipse', 'filter', 'foreignObject',
'g', 'image', 'line',
'linearGradient', 'marker', 'mask',
'metadata', 'mpath', 'path',
'pattern', 'polygon', 'polyline',
'radialGradient', 'rect', 'set',
'stop', 'style', 'svg',
'switch', 'symbol', 'text',
'title', 'use', 'view'
],
metadata : [],
mpath : ['desc', 'metadata', 'title'],
path : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
pattern : [
'a', 'animate', 'animateMotion',
'animateTransform', 'circle', 'clipPath',
'defs', 'desc', 'discard',
'ellipse', 'filter', 'foreignObject',
'g', 'image', 'line',
'linearGradient', 'marker', 'mask',
'metadata', 'mpath', 'path',
'pattern', 'polygon', 'polyline',
'radialGradient', 'rect', 'set',
'stop', 'style', 'svg',
'switch', 'symbol', 'text',
'title', 'use', 'view'
],
polygon : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
polyline : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
radialGradient : [
'animate',
'animateTransform',
'desc',
'metadata',
'set',
'stop',
'title'
],
rect : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
set : ['desc', 'metadata', 'title'],
stop : ['animate', 'set'],
style : [],
svg : [
'a', 'animate', 'animateMotion',
'animateTransform', 'circle', 'clipPath',
'defs', 'desc', 'discard',
'ellipse', 'filter', 'foreignObject',
'g', 'image', 'line',
'linearGradient', 'marker', 'mask',
'metadata', 'mpath', 'path',
'pattern', 'polygon', 'polyline',
'radialGradient', 'rect', 'set',
'stop', 'style', 'svg',
'switch', 'symbol', 'text',
'title', 'use', 'view'
],
switch : [
'a', 'animate',
'animateMotion', 'animateTransform',
'circle', 'desc',
'discard', 'ellipse',
'foreignObject', 'g',
'image', 'line',
'metadata', 'mpath',
'path', 'polygon',
'polyline', 'rect',
'set', 'svg',
'switch', 'text',
'title', 'use'
],
symbol : [
'a', 'animate', 'animateMotion',
'animateTransform', 'circle', 'clipPath',
'defs', 'desc', 'discard',
'ellipse', 'filter', 'foreignObject',
'g', 'image', 'line',
'linearGradient', 'marker', 'mask',
'metadata', 'mpath', 'path',
'pattern', 'polygon', 'polyline',
'radialGradient', 'rect', 'set',
'stop', 'style', 'svg',
'switch', 'symbol', 'text',
'title', 'use', 'view'
],
text : [
'a', 'animate',
'animateMotion', 'animateTransform',
'desc', 'discard',
'metadata', 'mpath',
'set', 'text',
'textPath', 'title',
'tspan'
],
textPath : [
'a', 'animate',
'desc', 'metadata',
'set', 'title',
'tspan'
],
title : [],
tspan : [
'a', 'animate',
'desc', 'metadata',
'set', 'title',
'tspan'
],
use : [
'animate',
'animateMotion',
'animateTransform',
'desc',
'discard',
'metadata',
'mpath',
'set',
'title'
],
view : ['desc', 'metadata', 'title']
};
const METHODS = {
'url' : [],
'accumulate' : [],
'add' : [],
'addEventListener' : [],
'additive' : [],
'after' : [],
'alignment_baseline' : [],
'amplitude' : [],
'animate' : [],
'animateTo' : [],
'animatedInstanceRoot' : [],
'animationsPaused' : [],
'append' : [],
'attachShadow' : [],
'attachTo' : [],
'attributeName' : [],
'attributes' : [],
'azimuth' : [],
'baseFrequency' : [],
'baseFrequencyX' : [],
'baseFrequencyY' : [],
'baseURI' : [],
'baseURIObject' : [],
'baseline_shift' : [],
'before' : [],
'begin' : [],
'beginElement' : [],
'beginElementAt' : [],
'bias' : [],
'by' : [],
'calcMode' : [],
'checkEnclosure' : [],
'checkIntersection' : [],
'childElementCount' : [],
'childNodes' : [],
'children' : [],
'class' : [],
'classList' : [],
'className' : [],
'clientHeight' : [],
'clientLeft' : [],
'clientTop' : [],
'clientWidth' : [],
'clipPathUnits' : [],
'clip_path' : [],
'clip_rule' : [],
'cloneNode' : [],
'closest' : [],
'color' : [],
'color_interpolation' : [],
'color_interpolation_filters' : [],
'color_rendering' : [],
'compareDocumentPosition' : [],
'computedName' : [],
'computedRole' : [],
'contains' : [],
'contentScriptType' : [],
'contentStyleType' : [],
'createSVGAngle' : [],
'createSVGLength' : [],
'createSVGMatrix' : [],
'createSVGNumber' : [],
'createSVGPoint' : [],
'createSVGRect' : [],
'createSVGTransform' : [],
'createSVGTransformFromMatrix' : [],
'crossOrigin' : [],
'currentScale' : [],
'currentTranslate' : [],
'currentView' : [],
'cursor' : [],
'cx' : [],
'cy' : [],
'd' : [],
'dataset' : [],
'decoding' : [],
'deselectAll' : [],
'diffuseConstant' : [],
'direction' : [],
'dispatchEvent' : [],
'display' : [],
'divisor' : [],
'dominant_baseline' : [],
'download' : [],
'dur' : [],
'dx' : [],
'dy' : [],
'edgeMode' : [],
'elevation' : [],
'end' : [],
'endElement' : [],
'endElementAt' : [],
'exponent' : [],
'fill' : [],
'fill_opacity' : [],
'fill_rule' : [],
'filter' : [],
'filterUnits' : [],
'firstChild' : [],
'firstElementChild' : [],
'flood_color' : [],
'flood_opacity' : [],
'font_family' : [],
'font_size' : [],
'font_size_adjust' : [],
'font_stretch' : [],
'font_style' : [],
'font_variant' : [],
'font_weight' : [],
'fr' : [],
'from' : [],
'fx' : [],
'fy' : [],
'getAnimations' : [],
'getAttribute' : [],
'getAttributeNS' : [],
'getAttributeNames' : [],
'getAttributeNode' : [],
'getAttributeNodeNS' : [],
'getBBox' : [],
'getBoundingClientRect' : [],
'getCTM' : [],
'getCharNumAtPosition' : [],
'getClientRects' : [],
'getComputedTextLength' : [],
'getCurrentTime' : [],
'getElementById' : [],
'getElementsByClassName' : [],
'getElementsByTagName' : [],
'getElementsByTagNameNS' : [],
'getEnclosureList' : [],
'getEndPositionOfChar' : [],
'getExtentOfChar' : [],
'getIntersectionList' : [],
'getNumberOfChars' : [],
'getPointAtLength' : [],
'getRootNode' : [],
'getRotationOfChar' : [],
'getScreenCTM' : [],
'getSimpleDuration' : [],
'getStartPositionOfChar' : [],
'getStartTime' : [],
'getSubStringLength' : [],
'getTotalLength' : [],
'gradientTransform' : [],
'gradientUnits' : [],
'hasAttribute' : [],
'hasAttributeNS' : [],
'hasAttributes' : [],
'hasChildNodes' : [],
'hasOwnProperty' : [],
'hasPointerCapture' : [],
'height' : [],
'href' : [],
'hreflang' : [],
'id' : [],
'image_rendering' : [],
'in' : [],
'in1' : [],
'in2' : [],
'innerHTML' : [],
'insertAdjacentElement' : [],
'insertAdjacentHTML' : [],
'insertAdjacentText' : [],
'insertBefore' : [],
'instanceRoot' : [],
'intercept' : [],
'isConnected' : [],
'isDefaultNamespace' : [],
'isEqualNode' : [],
'isPointInFill' : [],
'isPointInStroke' : [],
'isPrototypeOf' : [],
'isSameNode' : [],
'k1' : [],
'k2' : [],
'k3' : [],
'k4' : [],
'kernelMatrix' : [],
'kernelUnitLengthX' : [],
'kernelUnitLengthY' : [],
'keyPoints' : [],
'keySplines' : [],
'keyTimes' : [],
'lang' : [],
'lastChild' : [],
'lastElementChild' : [],
'lengthAdjust' : [],
'letter_spacing' : [],
'lighting_color' : [],
'limitingConeAngle' : [],
'localName' : [],
'lookupNamespaceURI' : [],
'lookupPrefix' : [],
'markerHeight' : [],
'markerUnits' : [],
'markerWidth' : [],
'marker_end' : [],
'marker_mid' : [],
'marker_start' : [],
'mask' : [],
'maskContentUnits' : [],
'maskUnits' : [],
'matches' : [],
'max' : [],
'media' : [],
'method' : [],
'min' : [],
'mode' : [],
'namespaceURI' : [],
'nextElementSibling' : [],
'nextSibling' : [],
'nodeName' : [],
'nodeType' : [],
'nodeValue' : [],
'normalize' : [],
'numOctaves' : [],
'offset' : [],
'opacity' : [],
'openOrClosedShadowRoot' : [],
'operator' : [],
'order' : [],
'orderX' : [],
'orderY' : [],
'orient' : [],
'origin' : [],
'outerHTML' : [],
'overflow' : [],
'overline_position' : [],
'overline_thickness' : [],
'ownerDocument' : [],
'ownerSVGElement' : [],
'paint_order' : [],
'parentElement' : [],
'parentNode' : [],
'part' : [],
'path' : [],
'pathLength' : [],
'patternContentUnits' : [],
'patternTransform' : [],
'patternUnits' : [],
'pauseAnimations' : [],
'ping' : [],
'pointAtX' : [],
'pointAtY' : [],
'pointAtZ' : [],
'pointer_events' : [],
'points' : [],
'pointsAtX' : [],
'pointsAtY' : [],
'pointsAtZ' : [],
'prefix' : [],
'prepend' : [],
'preserveAlpha' : [],
'preserveAspectRatio' : [],
'previousElementSibling' : [],
'previousSibling' : [],
'primitiveUnits' : [],
'propertyIsEnumerable' : [],
'querySelector' : [],
'querySelectorAll' : [],
'r' : [],
'radius' : [],
'radiusX' : [],
'radiusY' : [],
'ref' : [],
'refX' : [],
'refY' : [],
'referrerPolicy' : [],
'rel' : [],
'relList' : [],
'releasePointerCapture' : [],
'remove' : [],
'removeAttribute' : [],
'removeAttributeNS' : [],
'removeAttributeNode' : [],
'removeChild' : [],
'removeEventListener' : [],
'repeatCount' : [],
'repeatDur' : [],
'replaceChild' : [],
'replaceChildren' : [],
'replaceWith' : [],
'requestFullscreen' : [],
'restart' : [],
'result' : [],
'rotate' : [],
'rx' : [],
'ry' : [],
'scale' : [],
'scroll' : [],
'scrollBy' : [],
'scrollHeight' : [],
'scrollIntoView' : [],
'scrollLeft' : [],
'scrollLeftMax' : [],
'scrollTo' : [],
'scrollTop' : [],
'scrollTopMax' : [],
'scrollWidth' : [],
'seed' : [],
'setAttribute' : [],
'setAttributeNS' : [],
'setAttributeNode' : [],
'setAttributeNodeNS' : [],
'setCurrentTime' : [],
'setPointerCapture' : [],
'setStdDeviation' : [],
'shadowRoot' : [],
'shape_rendering' : [],
'slope' : [],
'spacing' : [],
'specularConstant' : [],
'specularExponent' : [],
'spreadMethod' : [],
'startOffset' : [],
'stdDeviation' : [],
'stdDeviationX' : [],
'stdDeviationY' : [],
'stitchTiles' : [],
'stop_color' : [],
'stop_opacity' : [],
'strikethrough_position' : [],
'strikethrough_thickness' : [],
'stroke' : [],
'stroke_dasharray' : [],
'stroke_dashoffset' : [],
'stroke_linecap' : [],
'stroke_linejoin' : [],
'stroke_miterlimit' : [],
'stroke_opacity' : [],
'stroke_width' : [],
'style' : [],
'surfaceScale' : [],
'systemLanguage' : [],
'tabStop' : [],
'tabindex' : [],
'tableValues' : [],
'tagName' : [],
'target' : [],
'targetElement' : [],
'targetX' : [],
'targetY' : [],
'text' : [],
'textContent' : [],
'textLength' : [],
'text_anchor' : [],
'text_decoration' : [],
'text_rendering' : [],
'title' : [],
'to' : [],
'toJSON' : [],
'toLocaleString' : [],
'toString' : [],
'toggleAttribute' : [],
'transform' : [],
'type' : [],
'underline_position' : [],
'underline_thickness' : [],
'unicode_bidi' : [],
'unpauseAnimations' : [],
'useCurrentView' : [],
'valueOf' : [],
'values' : [],
'vector_effect' : [],
'viewBox' : [],
'viewTarget' : [],
'viewport' : [],
'viewportElement' : [],
'visibility' : [],
'width' : [],
'word_spacing' : [],
'writing_mode' : [],
'x' : [],
'x1' : [],
'x2' : [],
'xChannelSelector' : [],
'y' : [],
'y1' : [],
'y2' : [],
'yChannelSelector' : [],
'z' : []
};
const CLASSLIST = [
'length',
'value',
'item',
'contains',
'add',
'remove',
'replace',
'supports',
'toggle',
'entries',
'forEach',
'keys',
'values'
];
const STYLE = [
'alignContent',
'alignItems',
'alignSelf',
'alignmentBaseline',
'all',
'animation',
'animationDelay',
'animationDirection',
'animationDuration',
'animationFillMode',
'animationIterationCount',
'animationName',
'animationPlayState',
'animationTimingFunction',
'appearance',
'backdropFilter',
'backfaceVisibility',
'background',
'backgroundAttachment',
'backgroundBlendMode',
'backgroundClip',
'backgroundColor',
'backgroundImage',
'backgroundOrigin',
'backgroundPosition',
'backgroundPositionX',
'backgroundPositionY',
'backgroundRepeat',
'backgroundRepeatX',
'backgroundRepeatY',
'backgroundSize',
'baselineShift',
'blockSize',
'border',
'borderBlockEnd',
'borderBlockEndColor',
'borderBlockEndStyle',
'borderBlockEndWidth',
'borderBlockStart',
'borderBlockStartColor',
'borderBlockStartStyle',
'borderBlockStartWidth',
'borderBottom',
'borderBottomColor',
'borderBottomLeftRadius',
'borderBottomRightRadius',
'borderBottomStyle',
'borderBottomWidth',
'borderCollapse',
'borderColor',
'borderImage',
'borderImageOutset',
'borderImageRepeat',
'borderImageSlice',
'borderImageSource',
'borderImageWidth',
'borderInlineEnd',
'borderInlineEndColor',
'borderInlineEndStyle',
'borderInlineEndWidth',
'borderInlineStart',
'borderInlineStartColor',
'borderInlineStartStyle',
'borderInlineStartWidth',
'borderLeft',
'borderLeftColor',
'borderLeftStyle',
'borderLeftWidth',
'borderRadius',
'borderRight',
'borderRightColor',
'borderRightStyle',
'borderRightWidth',
'borderSpacing',
'borderStyle',
'borderTop',
'borderTopColor',
'borderTopLeftRadius',
'borderTopRightRadius',
'borderTopStyle',
'borderTopWidth',
'borderWidth',
'bottom',
'boxShadow',
'boxSizing',
'breakAfter',
'breakBefore',
'breakInside',
'bufferedRendering',
'captionSide',
'caretColor',
'clear',
'clip',
'clipPath',
'clipRule',
'color',
'colorInterpolation',
'colorInterpolationFilters',
'colorRendering',
'colorScheme',
'columnCount',
'columnFill',
'columnGap',
'columnRule',
'columnRuleColor',
'columnRuleStyle',
'columnRuleWidth',
'columnSpan',
'columnWidth',
'columns',
'contain',
'containIntrinsicSize',
'content',
'contentVisibility',
'counterIncrement',
'counterReset',
'counterSet',
'cursor',
'cx',
'cy',
'd',
'direction',
'display',
'dominantBaseline',
'emptyCells',
'fill',
'fillOpacity',
'fillRule',
'filter',
'flex',
'flexBasis',
'flexDirection',
'flexFlow',
'flexGrow',
'flexShrink',
'flexWrap',
'float',
'floodColor',
'floodOpacity',
'font',
'fontDisplay',
'fontFamily',
'fontFeatureSettings',
'fontKerning',
'fontOpticalSizing',
'fontSize',
'fontStretch',
'fontStyle',
'fontVariant',
'fontVariantCaps',
'fontVariantEastAsian',
'fontVariantLigatures',
'fontVariantNumeric',
'fontVariationSettings',
'fontWeight',
'forcedColorAdjust',
'gap',
'grid',
'gridArea',
'gridAutoColumns',
'gridAutoFlow',
'gridAutoRows',
'gridColumn',
'gridColumnEnd',
'gridColumnGap',
'gridColumnStart',
'gridGap',
'gridRow',
'gridRowEnd',
'gridRowGap',
'gridRowStart',
'gridTemplate',
'gridTemplateAreas',
'gridTemplateColumns',
'gridTemplateRows',
'height',
'hyphens',
'imageOrientation',
'imageRendering',
'inherits',
'initialValue',
'inlineSize',
'isolation',
'justifyContent',
'justifyItems',
'justifySelf',
'left',
'letterSpacing',
'lightingColor',
'lineBreak',
'lineHeight',
'listStyle',
'listStyleImage',
'listStylePosition',
'listStyleType',
'margin',
'marginBlockEnd',
'marginBlockStart',
'marginBottom',
'marginInlineEnd',
'marginInlineStart',
'marginLeft',
'marginRight',
'marginTop',
'marker',
'markerEnd',
'markerMid',
'markerStart',
'mask',
'maskType',
'maxBlockSize',
'maxHeight',
'maxInlineSize',
'maxWidth',
'maxZoom',
'minBlockSize',
'minHeight',
'minInlineSize',
'minWidth',
'minZoom',
'mixBlendMode',
'objectFit',
'objectPosition',
'offset',
'offsetDistance',
'offsetPath',
'offsetRotate',
'opacity',
'order',
'orientation',
'orphans',
'outline',
'outlineColor',
'outlineOffset',
'outlineStyle',
'outlineWidth',
'overflow',
'overflowAnchor',
'overflowWrap',
'overflowX',
'overflowY',
'overscrollBehavior',
'overscrollBehaviorBlock',
'overscrollBehaviorInline',
'overscrollBehaviorX',
'overscrollBehaviorY',
'padding',
'paddingBlockEnd',
'paddingBlockStart',
'paddingBottom',
'paddingInlineEnd',
'paddingInlineStart',
'paddingLeft',
'paddingRight',
'paddingTop',
'page',
'pageBreakAfter',
'pageBreakBefore',
'pageBreakInside',
'pageOrientation',
'paintOrder',
'perspective',
'perspectiveOrigin',
'placeContent',
'placeItems',
'placeSelf',
'pointerEvents',
'position',
'quotes',
'r',
'resize',
'right',
'rowGap',
'rubyPosition',
'rx',
'ry',
'scrollBehavior',
'scrollMargin',
'scrollMarginBlock',
'scrollMarginBlockEnd',
'scrollMarginBlockStart',
'scrollMarginBottom',
'scrollMarginInline',
'scrollMarginInlineEnd',
'scrollMarginInlineStart',
'scrollMarginLeft',
'scrollMarginRight',
'scrollMarginTop',
'scrollPadding',
'scrollPaddingBlock',
'scrollPaddingBlockEnd',
'scrollPaddingBlockStart',
'scrollPaddingBottom',
'scrollPaddingInline',
'scrollPaddingInlineEnd',
'scrollPaddingInlineStart',
'scrollPaddingLeft',
'scrollPaddingRight',
'scrollPaddingTop',
'scrollSnapAlign',
'scrollSnapStop',
'scrollSnapType',
'shapeImageThreshold',
'shapeMargin',
'shapeOutside',
'shapeRendering',
'size',
'speak',
'src',
'stopColor',
'stopOpacity',
'stroke',
'strokeDasharray',
'strokeDashoffset',
'strokeLinecap',
'strokeLinejoin',
'strokeMiterlimit',
'strokeOpacity',
'strokeWidth',
'syntax',
'tabSize',
'tableLayout',
'textAlign',
'textAlignLast',
'textAnchor',
'textCombineUpright',
'textDecoration',
'textDecorationColor',
'textDecorationLine',
'textDecorationSkipInk',
'textDecorationStyle',
'textIndent',
'textOrientation',
'textOverflow',
'textRendering',
'textShadow',
'textSizeAdjust',
'textTransform',
'textUnderlinePosition',
'top',
'touchAction',
'transform',
'transformBox',
'transformOrigin',
'transformStyle',
'transition',
'transitionDelay',
'transitionDuration',
'transitionProperty',
'transitionTimingFunction',
'unicodeBidi',
'unicodeRange',
'userSelect',
'userZoom',
'vectorEffect',
'verticalAlign',
'visibility',
'whiteSpace',
'widows',
'width',
'willChange',
'wordBreak',
'wordSpacing',
'wordWrap',
'writingMode',
'x',
'y',
'zIndex',
'zoom'
];
const D = [
'M','m',
'A','a',
'C','c','S','s',
'L', 'l', 'H', 'h', 'V', 'v',
'Q','q','T','t',
'Z','z'
]
const isValidElement = (parent, child) => ELEMENTS[ parent ] && ELEMENTS[ parent ].includes (child);
const isValidMethod = (gySVGObject, tag, f) => {
return (
f.indexOf ('style.') === 0 ?
isValidStyleMethod (tag, f.substring (6)) :
f.indexOf ('classList.') === 0 ?
isValidClassListMethod (tag, f.substring (10)) :
gySVGObject.prototype[f] || !!METHODS[ f ]
);
};
const isValidMethodParameters = (tag, f) => true;
const isValidStyleMethod = (tag, f) => !!STYLE.includes (f);
const isValidClassListMethod = (tag, f) => !!CLASSLIST.includes (f);
const isValidPathD = (tag, f) => !!D.includes(f);
export default function debugPlugin (gySVG, gySVGObject) {
// Update gySVG
Object.assign (
gySVG,
{
_debug: 0,
debugLevel (level) {
gySVG._debug = level;
},
get DEBUG_NONE () {
return 0;
},
get DEBUG_ERROR () {
return 1;
},
get DEBUG_WARNING () {
return 2;
},
get DEBUG_ALL () {
return 3;
},
_call (wrapped, prop, args) {
if (gySVG._debug >= gySVG.DEBUG_ALL) {
console.info (`${ NAME } call gySVG( ${ toString (args) } )`);
}
},
}
);
// Update gySVGObject
Object.assign (
gySVGObject.prototype,
{
_call (wrapped, prop, args) {
if (gySVG._debug === gySVG.DEBUG_NONE) {
return;
}
const tag = wrapped.el.tagName;
if (!isValidMethod (gySVGObject, tag, prop)) {
return console.error (`${ NAME } unknown method ${ tag }.${ prop }() ${ origin () }`);
}
if (prop === 'add' && !isValidElement (tag, args[ 0 ])) {
return console.error (`${ NAME } invalid element ${ tag }.${ prop }( '${ args[ 0 ] }' ) ${ origin () }`);
}
if (gySVG._debug >= gySVG.DEBUG_WARNING && !isValidMethodParameters (tag, prop)) {
console.warn (`${ NAME } call ${ tag }.${ prop }( ${ toString (args) } )`);
}
if (gySVG._debug >= gySVG.DEBUG_ALL) {
console.info (`${ NAME } call ${ tag }.${ prop }( ${ toString (args) } )`);
}
},
_d (wrapped, prop, args) {
if (gySVG._debug === gySVG.DEBUG_NONE) {
return;
}
const tag = wrapped.el.tagName;
if (!isValidPathD (tag, prop)) {
return console.error (`${ NAME } unknown method ${ tag }.d.${ prop }() ${ origin () }`);
}
if (gySVG._debug >= gySVG.DEBUG_WARNING) {
console.info (`${ NAME } call ${ tag }.d.${ prop }( ${ toString (args) } )`);
}
}
}
);
}
function origin () {
try {
throw new Error ('myError');
} catch (e) {
const stack = e.stack.split ('\n');
stack.shift ();
stack.shift ();
stack.shift ();
stack.shift ();
stack.shift ();
return stack.join ('\n').trim ();
}
}
function toString (args) {
return args.map (value => JSON.stringify (value, converter)).join (', ');
}
function toTypes (args) {
return args.map (value => JSON.stringify (value, converter)).join (', ');
}
function converter (key, val) {
if (typeof val === 'function') {
return `[function ${ val.name }]`;
} else if (typeof val === 'object' && Object.getPrototypeOf (val) !== Object.prototype) {
return val.toString ();
}
return val;
}