修复svg新架构bug。

This commit is contained in:
liteng 2018-11-07 12:37:55 +08:00
parent 3773c4646c
commit f9eda0f2db
25 changed files with 117 additions and 82 deletions

View File

@ -398,6 +398,8 @@
return control;
};
const SVG = new Manager();
/**
* SVG文档
* @author tengge / https://github.com/tengge1
@ -414,7 +416,7 @@
this.renderDom(this.createElement('svg'));
};
window.SVG.addXType('dom', Dom);
SVG.addXType('dom', Dom);
/**
* SVG圆
@ -432,7 +434,7 @@
this.renderDom(this.createElement('circle'));
};
window.SVG.addXType('circle', Circle);
SVG.addXType('circle', Circle);
/**
* SVG椭圆
@ -450,7 +452,7 @@
this.renderDom(this.createElement('ellipse'));
};
window.SVG.addXType('ellipse', Ellipse);
SVG.addXType('ellipse', Ellipse);
/**
* SVG线
@ -468,7 +470,7 @@
this.renderDom(this.createElement('line'));
};
window.SVG.addXType('line', Line);
SVG.addXType('line', Line);
/**
* SVG面
@ -486,7 +488,7 @@
this.renderDom(this.createElement('polygon'));
};
window.SVG.addXType('polygon', Polygon);
SVG.addXType('polygon', Polygon);
/**
* SVG曲线
@ -504,7 +506,7 @@
this.renderDom(this.createElement('polyline'));
};
window.SVG.addXType('polyline', Polyline);
SVG.addXType('polyline', Polyline);
/**
* SVG矩形
@ -522,7 +524,7 @@
this.renderDom(this.createElement('rect'));
};
window.SVG.addXType('rect', Rect);
SVG.addXType('rect', Rect);
/**
* SVG线
@ -540,7 +542,7 @@
this.renderDom(this.createElement('path'));
};
window.SVG.addXType('path', Path);
SVG.addXType('path', Path);
/**
* SVG文本
@ -549,8 +551,6 @@
*/
function Text(options = {}) {
SvgControl.call(this, options);
this.text = options.text || null;
}
Text.prototype = Object.create(SvgControl.prototype);
@ -560,7 +560,7 @@
this.renderDom(this.createElement('text'));
};
window.SVG.addXType('text', Text);
SVG.addXType('text', Text);
/**
* SVG文本路径
@ -578,7 +578,7 @@
this.renderDom(this.createElement('textPath'));
};
window.SVG.addXType('textpath', TextPath);
SVG.addXType('textpath', TextPath);
/**
* SVG链接
@ -596,7 +596,7 @@
this.renderDom(this.createElement('a'));
};
window.SVG.addXType('a', Anchor);
SVG.addXType('a', Anchor);
/**
* SVG定义
@ -614,7 +614,7 @@
this.renderDom(this.createElement('defs'));
};
window.SVG.addXType('defs', Defs);
SVG.addXType('defs', Defs);
/**
* SVG Use
@ -632,7 +632,7 @@
this.renderDom(this.createElement('use'));
};
window.SVG.addXType('use', Use);
SVG.addXType('use', Use);
/**
* 线性渐变
@ -650,7 +650,7 @@
this.renderDom(this.createElement('linearGradient'));
};
window.SVG.addXType('lineargradient', linearGradient);
SVG.addXType('lineargradient', linearGradient);
/**
* SVG线
@ -668,7 +668,7 @@
this.renderDom(this.createElement('g'));
};
window.SVG.addXType('g', Group);
SVG.addXType('g', Group);
/**
* SVG滤镜
@ -686,7 +686,7 @@
this.renderDom(this.createElement('filter'));
};
window.SVG.addXType('filter', Filter);
SVG.addXType('filter', Filter);
/**
* SVG高斯滤镜
@ -704,7 +704,7 @@
this.renderDom(this.createElement('feGaussianBlur'));
};
window.SVG.addXType('fegaussianblur', feGaussianBlur);
SVG.addXType('fegaussianblur', feGaussianBlur);
/**
* SVG偏移滤镜
@ -722,7 +722,7 @@
this.renderDom(this.createElement('feOffset'));
};
window.SVG.addXType('feoffset', feOffset);
SVG.addXType('feoffset', feOffset);
/**
* SVG融合滤镜
@ -740,7 +740,7 @@
this.renderDom(this.createElement('feBlend'));
};
window.SVG.addXType('feblend', feBlend);
SVG.addXType('feblend', feBlend);
/**
* SVG融合滤镜
@ -758,11 +758,9 @@
this.renderDom(this.createElement('feColorMatrix'));
};
window.SVG.addXType('fecolormatrix', feColorMatrix);
SVG.addXType('fecolormatrix', feColorMatrix);
const SVG = new Manager();
window.SVG = SVG;
// dom
exports.SvgControl = SvgControl;
exports.SVG = SVG;

View File

@ -1,4 +1,4 @@
import { SvgControl } from './third_party';
import { SvgControl, SVG } from './third_party';
/**
* SVG链接
@ -16,6 +16,6 @@ Anchor.prototype.render = function () {
this.renderDom(this.createElement('a'));
};
window.SVG.addXType('a', Anchor);
SVG.addXType('a', Anchor);
export default Anchor;

View File

@ -1,4 +1,4 @@
import { SvgControl } from './third_party';
import { SvgControl, SVG } from './third_party';
/**
* SVG文档
@ -16,6 +16,6 @@ Dom.prototype.render = function () {
this.renderDom(this.createElement('svg'));
};
window.SVG.addXType('dom', Dom);
SVG.addXType('dom', Dom);
export default Dom;

View File

@ -1,4 +1,4 @@
import { SvgControl } from './third_party';
import { SvgControl, SVG } from './third_party';
/**
* SVG线
@ -16,6 +16,6 @@ Group.prototype.render = function () {
this.renderDom(this.createElement('g'));
};
window.SVG.addXType('g', Group);
SVG.addXType('g', Group);
export default Group;

View File

@ -1,4 +1,4 @@
import { SvgControl } from './third_party';
import { SvgControl, SVG } from './third_party';
/**
* SVG线
@ -16,6 +16,6 @@ Path.prototype.render = function () {
this.renderDom(this.createElement('path'));
};
window.SVG.addXType('path', Path);
SVG.addXType('path', Path);
export default Path;

View File

@ -1,4 +1,4 @@
import { SvgControl } from './third_party';
import { SvgControl, SVG } from './third_party';
/**
* SVG文本
@ -7,8 +7,6 @@ import { SvgControl } from './third_party';
*/
function Text(options = {}) {
SvgControl.call(this, options);
this.text = options.text || null;
}
Text.prototype = Object.create(SvgControl.prototype);
@ -18,6 +16,6 @@ Text.prototype.render = function () {
this.renderDom(this.createElement('text'));
};
window.SVG.addXType('text', Text);
SVG.addXType('text', Text);
export default Text;

View File

@ -1,4 +1,4 @@
import { SvgControl } from './third_party';
import { SvgControl, SVG } from './third_party';
/**
* SVG文本路径
@ -16,6 +16,6 @@ TextPath.prototype.render = function () {
this.renderDom(this.createElement('textPath'));
};
window.SVG.addXType('textpath', TextPath);
SVG.addXType('textpath', TextPath);
export default TextPath;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG定义
@ -16,6 +16,6 @@ Defs.prototype.render = function () {
this.renderDom(this.createElement('defs'));
};
window.SVG.addXType('defs', Defs);
SVG.addXType('defs', Defs);
export default Defs;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG Use
@ -16,6 +16,6 @@ Use.prototype.render = function () {
this.renderDom(this.createElement('use'));
};
window.SVG.addXType('use', Use);
SVG.addXType('use', Use);
export default Use;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* 线性渐变
@ -16,6 +16,6 @@ linearGradient.prototype.render = function () {
this.renderDom(this.createElement('linearGradient'));
};
window.SVG.addXType('lineargradient', linearGradient);
SVG.addXType('lineargradient', linearGradient);
export default linearGradient;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG滤镜
@ -16,6 +16,6 @@ Filter.prototype.render = function () {
this.renderDom(this.createElement('filter'));
};
window.SVG.addXType('filter', Filter);
SVG.addXType('filter', Filter);
export default Filter;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG融合滤镜
@ -16,6 +16,6 @@ feBlend.prototype.render = function () {
this.renderDom(this.createElement('feBlend'));
};
window.SVG.addXType('feblend', feBlend);
SVG.addXType('feblend', feBlend);
export default feBlend;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG融合滤镜
@ -16,6 +16,6 @@ feColorMatrix.prototype.render = function () {
this.renderDom(this.createElement('feColorMatrix'));
};
window.SVG.addXType('fecolormatrix', feColorMatrix);
SVG.addXType('fecolormatrix', feColorMatrix);
export default feColorMatrix;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG高斯滤镜
@ -16,6 +16,6 @@ feGaussianBlur.prototype.render = function () {
this.renderDom(this.createElement('feGaussianBlur'));
};
window.SVG.addXType('fegaussianblur', feGaussianBlur);
SVG.addXType('fegaussianblur', feGaussianBlur);
export default feGaussianBlur;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG偏移滤镜
@ -16,6 +16,6 @@ feOffset.prototype.render = function () {
this.renderDom(this.createElement('feOffset'));
};
window.SVG.addXType('feoffset', feOffset);
SVG.addXType('feoffset', feOffset);
export default feOffset;

View File

@ -1,9 +1,3 @@
import { SvgControl, Manager } from './third_party';
const SVG = new Manager();
window.SVG = SVG;
// dom
import './Dom';
@ -31,4 +25,4 @@ import './filter/feOffset';
import './filter/feBlend';
import './filter/feColorMatrix';
export { SvgControl, SVG };
export { SvgControl, SVG } from './third_party';;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG圆
@ -16,6 +16,6 @@ Circle.prototype.render = function () {
this.renderDom(this.createElement('circle'));
};
window.SVG.addXType('circle', Circle);
SVG.addXType('circle', Circle);
export default Circle;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG椭圆
@ -16,6 +16,6 @@ Ellipse.prototype.render = function () {
this.renderDom(this.createElement('ellipse'));
};
window.SVG.addXType('ellipse', Ellipse);
SVG.addXType('ellipse', Ellipse);
export default Ellipse;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG线
@ -16,6 +16,6 @@ Line.prototype.render = function () {
this.renderDom(this.createElement('line'));
};
window.SVG.addXType('line', Line);
SVG.addXType('line', Line);
export default Line;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG面
@ -16,6 +16,6 @@ Polygon.prototype.render = function () {
this.renderDom(this.createElement('polygon'));
};
window.SVG.addXType('polygon', Polygon);
SVG.addXType('polygon', Polygon);
export default Polygon;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG曲线
@ -16,6 +16,6 @@ Polyline.prototype.render = function () {
this.renderDom(this.createElement('polyline'));
};
window.SVG.addXType('polyline', Polyline);
SVG.addXType('polyline', Polyline);
export default Polyline;

View File

@ -1,4 +1,4 @@
import { SvgControl } from '../third_party';
import { SvgControl, SVG } from '../third_party';
/**
* SVG矩形
@ -16,6 +16,6 @@ Rect.prototype.render = function () {
this.renderDom(this.createElement('rect'));
};
window.SVG.addXType('rect', Rect);
SVG.addXType('rect', Rect);
export default Rect;

View File

@ -1 +1,5 @@
export { SvgControl, Manager } from '@tengge1/xtype.js';
import { SvgControl, Manager } from '@tengge1/xtype.js';
const SVG = new Manager();
export { SvgControl, SVG };

View File

@ -12,20 +12,18 @@
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
function CustomControl(options = {}) {
Shadow.Control.call(this, options);
Shadow.SvgControl.call(this, options);
}
CustomControl.prototype = Object.create(Shadow.Control.prototype);
CustomControl.prototype = Object.create(Shadow.SvgControl.prototype);
CustomControl.prototype.constructor = CustomControl;
CustomControl.prototype.render = function () {
var dom = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
this.renderDom(dom);
this.renderDom(this.createElement('circle'));
};
var dom = UI.create({
xtype: 'svgdom',
id: 'dom1',
var dom = Shadow.SVG.create({
xtype: 'dom',
parent: document.body,
attr: {
width: 800,

View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>02 SvgCircleTest</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="../dist/ShadowEditor.SVG.js"></script>
<script>
var dom = Shadow.SVG.create({
xtype: 'dom',
parent: document.body,
attr: {
width: 800,
height: 600,
},
children: [{
xtype: 'circle',
attr: {
cx: 80,
cy: 80,
r: 50,
stroke: '#555',
'stroke-width': 2,
fill: '#f00'
},
listeners: {
click: () => {
alert('You clicked!');
}
}
}]
});
dom.render();
</script>
</body>
</html>