CloneTool.prototype.copy = function (callback) {
var activeObject = this.canvas.getActiveGroup() || this.canvas.getActiveObject();
if (!activeObject) {
return;
}
// We don't want to copy control point, but the source object instead.
// See: line-custom-control-points.js
if (activeObject._dt_sourceObj) {
activeObject = activeObject._dt_sourceObj;
}
var klass = fabric.util.getKlass(activeObject.type);
var propsToInclude = this.master.ADDITIONAL_PROPS_TO_SERIALIZE;
if (klass.async) {
activeObject.clone(function (clonedObject) {
this._updateClipboard(clonedObject);
if (typeof callback === 'function') {
callback();
}
}.bind(this), propsToInclude);
} else {
this._updateClipboard(activeObject.clone(null, propsToInclude));
if (typeof callback === 'function') {
callback();
}
}
};
import fabric from 'fabric';
import Control from './control';
// Abstract control element that can have child elements
export default fabric.util.createClass(Control, {
type: 'content.control',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('children', options.children || []);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
children: this.get('children')
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
import fabric from 'fabric';
import Panel from '../layout/panel';
// Abstract control element that can have child elements
export default fabric.util.createClass(Panel, {
type: 'fuse.switch',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('value', options.value || 0);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
define(function(require) {
var fabric = require('fabric'),
getRandomInt = fabric.util.getRandomInt;
var hLine = fabric.util.createClass(fabric.PatternBrush, {
getPatternSrc: function() {
// create a canvas for the pattern
var patternCanvas = fabric.document.createElement('canvas');
patternCanvas.width = patternCanvas.height = 10;
var ctx = patternCanvas.getContext('2d');
// create the pattern
ctx.strokeStyle = this.color;
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(0, 5);
ctx.lineTo(10, 5);
ctx.closePath();
ctx.stroke();
// return this canvas pattern
return patternCanvas;
}
});
function HorizontalLineBrush(canvas, cfg) {
this.canvas = canvas;
cfg = cfg || {};
cfg.fillColor = cfg.fillColor || '#000000';
cfg.strokeColor = cfg.strokeColor || '#000000';
cfg.width = cfg.width || 10;
cfg.offset = cfg.offset || 0;
this.cfg = cfg;
this.initBrush();
}
HorizontalLineBrush.prototype.initBrush = function() {
this.brush = new hLine(this.canvas);
};
HorizontalLineBrush.prototype.getBrush = function() {
return this.brush;
};
HorizontalLineBrush.prototype.set = function(key, value) {
this.cfg[key] = value;
};
HorizontalLineBrush.prototype.get = function(key) {
return this.cfg[key];
};
HorizontalLineBrush.prototype.drawAt = function(point, renderAfter) {
// nothing
};
HorizontalLineBrush.prototype.drawAtPoints = function(points) {
this.brush._points.length = 0;
this.brush.width = this.cfg.width;
this.brush.color = this.cfg.fillColor;
points.forEach(function(p) {
this.brush._points.push(new fabric.Point(p.x, p.y));
}, this);
this.brush._finalizeAndAddPath();
};
return HorizontalLineBrush;
});
define(function(require) {
var fabric = require('fabric'),
RectBrushClass = require('extBrushes/fabric.RectBrush'),
getRandomInt = fabric.util.getRandomInt;
var HollowSquareBrushClass = fabric.util.createClass(RectBrushClass, {
/**
* Override fabric.CircleBrush addPoint method. We need to
* define our own circle properties. In this case, we dont
* need a fill property, because this circle is hollow. What
* we need is stroke style.
*
* @param {Object} pointer pointer location
* @return {fabric.Point} Point
*/
addPoint: function(pointer) {
var pointerPoint = new fabric.Point(pointer.x, pointer.y);
// generate random circle's radius
var width = getRandomInt(0, this.width);
// generate random stroke style. This includes the
// alpha property
var strokeColor = new fabric.Color(this.color)
.setAlpha(getRandomInt(0, 100) / 100)
.toRgba();
pointerPoint.width = pointerPoint.height = width;
pointerPoint.strokeColor = strokeColor;
this.points.push(pointerPoint);
return pointerPoint;
},
drawRect: function (pointer) {
var point = this.addPoint(pointer);
var ctx = this.canvas.contextTop;
ctx.lineWidth = 1;
ctx.strokeStyle = point.strokeColor;
ctx.beginPath();
ctx.strokeRect(point.x - point.width/2, point.y - point.height/2, point.width, point.height);
ctx.stroke();
},
onMouseUp: function() {
var originalRenderOnAddition = this.canvas.renderOnAddition;
this.canvas.renderOnAddition = false;
var rects = [];
for (var i = 0, len = this.points.length; i < len; i++) {
var point = this.points[i];
rects.push(new fabric.Rect({
width: point.width,
height: point.height,
left: point.x,
top: point.y,
originX: 'center',
originY: 'center',
fill: null,
stroke: point.strokeColor,
strokeWidth: 1
}));
}
var group = new fabric.Group(rects, {
originX: 'center',
originY: 'center'
});
this.canvas.add(group);
this.canvas.fire('path:created', { path: group });
this.canvas.clearContext(this.canvas.contextTop);
this.canvas.renderOnAddition = originalRenderOnAddition;
this.canvas.renderAll();
}
});
return HollowSquareBrushClass;
});
import fabric from 'fabric';
import TxtInputControl from './txt_input_ctrl';
// Abstract control element that can have child elements
export default fabric.util.createClass(TxtInputControl, {
type: 'fuse.textView',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
import fabric from 'fabric';
import Panel from '../layout/panel';
// Abstract control element that can have child elements
export default fabric.util.createClass(Panel, {
type: 'webView',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('file', options.file || null);
this.set('baseUrl', options.baseUrl || null);
this.set('url', options.url || null);
this.set('htmlSource', options.htmlSource || null);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
function loadImage() {
// Note we cannot use fabric.Image.fromURL, as then we would always get
// fabric.Image instance and we couldn't guess whether load failed or not.
// util.loadImage provides null to callback when loading fails.
fabric.util.loadImage(imageSrc, callback, null, options.crossOrigin);
}
import fabric from 'fabric';
// Abstract control element that can have child elements
export default fabric.util.createClass(fabric.Rect, {
type: 'fuse.control',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('background', options.background || []);
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
background: this.get('background')
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
import fabric from 'fabric';
import LabeledRect from './labeled_rect';
export default fabric.util.createClass(LabeledRect, {
type: 'button',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('label', options.label || '');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
export default fabric.util.createClass(Panel, {
type: 'fuse.image',
initialize: function(options) {
options || (options = { });
this.callSuper('initialize', options);
this.set('text', options.text || '');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
label: this.get('text')
});
},
_render: function(context) {
this.callSuper('_render', context);
var cornerRadius = 20;
// Reference rectangle without rounding, for size comparison
context.fillRect(200, 50, rectWidth, rectHeight);
// Set faux rounded corners
context.lineJoin = 'round';
context.lineWidth = cornerRadius;
// Change origin and dimensions to match true size (a stroke makes the shape a bit larger)
context.strokeRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
context.fillRect(rectX+(cornerRadius/2), rectY+(cornerRadius/2), rectWidth-cornerRadius, rectHeight-cornerRadius);
}
});