github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

separate svgcanvas from svgedit

Browse Source 
now you can use directlt svgcanvas. see readme.md

* configure workspaces
* move svgcanvas to packages folder
* move utils to common and paint to svgcanvas
* make svgcanvas a dependency of svgedit
* update deps
* workspaces requires npm 7 at least so the ci needs a new node version
* update github actions to V3
* update snapshots using custom svg exports
* remove unmaintained cypress snapshot plugin
* new github action to add coverage in PR
* Update onpushandpullrequest.yml
* svgcanvas v7.1.6
This commit is contained in:
JFH
2022-08-14 15:01:51 +02:00
committed by GitHub
parent 614a361558
commit 43bf93968a
204 changed files with 5206 additions and 20903 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/editor/components/jgraduate/Slider.js
View File

@@ -1,4 +1,4 @@
import { findPos } from './Util.js'
import { findPos } from '../../../common/util.js'
/**
* Whether a value is `null` or `undefined`.
* @param {any} val

198
src/editor/components/jgraduate/Util.js
View File

@@ -1,198 +0,0 @@
/**
* @param {any} obj
* @returns {any}
*/
export function findPos (obj) {
let curleft = 0
let curtop = 0
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft
curtop += obj.offsetTop
// eslint-disable-next-line no-cond-assign
} while (obj = obj.offsetParent)
return { left: curleft, top: curtop }
}
return { left: curleft, top: curtop }
}
export function isObject (item) {
return (item && typeof item === 'object' && !Array.isArray(item))
}
export function mergeDeep (target, source) {
const output = Object.assign({}, target)
if (isObject(target) && isObject(source)) {
Object.keys(source).forEach((key) => {
if (isObject(source[key])) {
if (!(key in target)) { Object.assign(output, { [key]: source[key] }) } else { output[key] = mergeDeep(target[key], source[key]) }
} else {
Object.assign(output, { [key]: source[key] })
}
})
}
return output
}
/**
* Get the closest matching element up the DOM tree.
* @param {Element} elem Starting element
* @param {String} selector Selector to match against (class, ID, data attribute, or tag)
* @return {Boolean|Element} Returns null if not match found
*/
export function getClosest (elem, selector) {
const firstChar = selector.charAt(0)
const supports = 'classList' in document.documentElement
let attribute; let value
// If selector is a data attribute, split attribute from value
if (firstChar === '[') {
selector = selector.substr(1, selector.length - 2)
attribute = selector.split('=')
if (attribute.length > 1) {
value = true
attribute[1] = attribute[1].replace(/"/g, '').replace(/'/g, '')
}
}
// Get closest match
for (; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode) {
// If selector is a class
if (firstChar === '.') {
if (supports) {
if (elem.classList.contains(selector.substr(1))) {
return elem
}
} else {
if (new RegExp('(^|\\s)' + selector.substr(1) + '(\\s|$)').test(elem.className)) {
return elem
}
}
}
// If selector is an ID
if (firstChar === '#') {
if (elem.id === selector.substr(1)) {
return elem
}
}
// If selector is a data attribute
if (firstChar === '[') {
if (elem.hasAttribute(attribute[0])) {
if (value) {
if (elem.getAttribute(attribute[0]) === attribute[1]) {
return elem
}
} else {
return elem
}
}
}
// If selector is a tag
if (elem.tagName.toLowerCase() === selector) {
return elem
}
}
return null
}
/**
* Get all DOM element up the tree that contain a class, ID, or data attribute
* @param {Node} elem The base element
* @param {String} selector The class, id, data attribute, or tag to look for
* @return {Array} Null if no match
*/
export function getParents (elem, selector) {
const parents = []
const firstChar = selector?.charAt(0)
// Get matches
for (; elem && elem !== document; elem = elem.parentNode) {
if (selector) {
// If selector is a class
if (firstChar === '.') {
if (elem.classList.contains(selector.substr(1))) {
parents.push(elem)
}
}
// If selector is an ID
if (firstChar === '#') {
if (elem.id === selector.substr(1)) {
parents.push(elem)
}
}
// If selector is a data attribute
if (firstChar === '[') {
if (elem.hasAttribute(selector.substr(1, selector.length - 1))) {
parents.push(elem)
}
}
// If selector is a tag
if (elem.tagName.toLowerCase() === selector) {
parents.push(elem)
}
} else {
parents.push(elem)
}
}
// Return parents if any exist
return parents.length ? parents : null
}
export function getParentsUntil (elem, parent, selector) {
const parents = []
const parentType = parent?.charAt(0)
const selectorType = selector?.selector.charAt(0)
// Get matches
for (; elem && elem !== document; elem = elem.parentNode) {
// Check if parent has been reached
if (parent) {
// If parent is a class
if (parentType === '.') {
if (elem.classList.contains(parent.substr(1))) {
break
}
}
// If parent is an ID
if (parentType === '#') {
if (elem.id === parent.substr(1)) {
break
}
}
// If parent is a data attribute
if (parentType === '[') {
if (elem.hasAttribute(parent.substr(1, parent.length - 1))) {
break
}
}
// If parent is a tag
if (elem.tagName.toLowerCase() === parent) {
break
}
}
if (selector) {
// If selector is a class
if (selectorType === '.') {
if (elem.classList.contains(selector.substr(1))) {
parents.push(elem)
}
}
// If selector is an ID
if (selectorType === '#') {
if (elem.id === selector.substr(1)) {
parents.push(elem)
}
}
// If selector is a data attribute
if (selectorType === '[') {
if (elem.hasAttribute(selector.substr(1, selector.length - 1))) {
parents.push(elem)
}
}
// If selector is a tag
if (elem.tagName.toLowerCase() === selector) {
parents.push(elem)
}
} else {
parents.push(elem)
}
}
// Return parents if any exist
return parents.length ? parents : null
}

6
src/editor/components/jgraduate/jQuery.jGraduate.js
View File

@@ -18,9 +18,9 @@
* @example $.jGraduate.Paint({radialGradient: o, a: 7}); // creates a radial gradient paint with opacity=0.07
* @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception?
*/
import Paint from './paint.js'
import SvgCanvas from '@svgedit/svgcanvas'
import { jPickerDefaults, jPickerMethod } from './jQuery.jPicker.js'
import { findPos } from './Util.js'
import { findPos } from '../../../common/util.js'
/**
* @todo JFH: This jQuery plugin was adapted to work within a Web Component.
@@ -68,7 +68,7 @@ export const jGraduate = /** @lends external:jQuery.jGraduate */ {
* @class external:jQuery.jGraduate.Paint
* @see module:jGraduate~Paint
*/
Paint
Paint: SvgCanvas.Paint
}
// JSDoc doesn't show this as belonging to our `module:jGraduate.Options` type,

2
src/editor/components/jgraduate/jQuery.jPicker.js
View File

@@ -18,7 +18,7 @@
/* eslint-disable max-len */
import ColorValuePicker from './ColorValuePicker.js'
import Slider from './Slider.js'
import { findPos, mergeDeep } from './Util.js'
import { findPos, mergeDeep } from '../../../common/util.js'
/**
* @external Math

88
src/editor/components/jgraduate/paint.js
View File

@@ -1,88 +0,0 @@
/**
*
*/
export default class Paint {
/**
* @param {module:jGraduate.jGraduatePaintOptions} [opt]
*/
constructor (opt) {
const options = opt || {}
this.alpha = isNaN(options.alpha) ? 100 : options.alpha
// copy paint object
if (options.copy) {
/**
* @name module:jGraduate~Paint#type
* @type {"none"|"solidColor"|"linearGradient"|"radialGradient"}
*/
this.type = options.copy.type
/**
* Represents opacity (0-100).
* @name module:jGraduate~Paint#alpha
* @type {Float}
*/
this.alpha = options.copy.alpha
/**
* Represents #RRGGBB hex of color.
* @name module:jGraduate~Paint#solidColor
* @type {string}
*/
this.solidColor = null
/**
* @name module:jGraduate~Paint#linearGradient
* @type {SVGLinearGradientElement}
*/
this.linearGradient = null
/**
* @name module:jGraduate~Paint#radialGradient
* @type {SVGRadialGradientElement}
*/
this.radialGradient = null
switch (this.type) {
case 'none':
break
case 'solidColor':
this.solidColor = options.copy.solidColor
break
case 'linearGradient':
this.linearGradient = options.copy.linearGradient.cloneNode(true)
break
case 'radialGradient':
this.radialGradient = options.copy.radialGradient.cloneNode(true)
break
}
// create linear gradient paint
} else if (options.linearGradient) {
this.type = 'linearGradient'
this.solidColor = null
this.radialGradient = null
if (options.linearGradient.hasAttribute('xlink:href')) {
const xhref = document.getElementById(options.linearGradient.getAttribute('xlink:href').substr(1))
this.linearGradient = xhref.cloneNode(true)
} else {
this.linearGradient = options.linearGradient.cloneNode(true)
}
// create linear gradient paint
} else if (options.radialGradient) {
this.type = 'radialGradient'
this.solidColor = null
this.linearGradient = null
if (options.radialGradient.hasAttribute('xlink:href')) {
const xhref = document.getElementById(options.radialGradient.getAttribute('xlink:href').substr(1))
this.radialGradient = xhref.cloneNode(true)
} else {
this.radialGradient = options.radialGradient.cloneNode(true)
}
// create solid color paint
} else if (options.solidColor) {
this.type = 'solidColor'
this.solidColor = options.solidColor
// create empty paint
} else {
this.type = 'none'
this.solidColor = null
this.linearGradient = null
this.radialGradient = null
}
}
}