I've been trying to learn fabric.js and am having a hard time figuring out how to target/select the shape i've just added on mouse:down, so that i can fade it out on mouse:up.
What i have so far: jsfiddle
var fingerCanvas = new fabric.Canvas('c');
var fingerMark = new fabric.Ellipse({
left: -100,
top: -100,
fill: '#ff0000',
originX: 'center',
originY: 'center',
rx: 35,
ry: 50
});
//fingerCanvas.add(fingerMark);
fingerCanvas.on('mouse:move', function(obj) {
fingerMark.top = obj.e.y;
fingerMark.left = obj.e.x;
//fingerCanvas.renderAll();
});
fingerCanvas.on('mouse:down', function(obj) {
fingerCanvas.add(fingerMark.clone());
//fingerCanvas.renderAll();
});
fingerCanvas.on('mouse:up', function(obj) {
//fade out the ellipse added by mouse:down event
});
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.9/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>
Anyone familiar with fabricjs and is able to point me in the right direction? Thanks
In animate method, give opacity property to animate and value to 0.
Added abort method to stop animation, if user clicking again in between 1 second.
DEMO
var fingerCanvas = new fabric.Canvas('c', {
selection: false
});
var fingerMark = new fabric.Ellipse({
left: 0,
top: 0,
fill: '#ff0000',
originX: 'center',
originY: 'center',
rx: 35,
ry: 50,
evented: false,
opacity: 0
});
var isMouseDown = false;
fingerCanvas.add(fingerMark);
fingerCanvas.on('mouse:move', function(options) {
if (isMouseDown) {
var pointer = fingerCanvas.getPointer(options.e);
fingerMark.set({
left: pointer.x,
top: pointer.y
})
fingerCanvas.requestRenderAll();
}
});
fingerCanvas.on('mouse:down', function(options) {
isMouseDown = true;
var pointer = fingerCanvas.getPointer(options.e);
fingerMark.set({
opacity: 1,
left: pointer.x,
top: pointer.y
});
});
fingerCanvas.on('mouse:up', function(obj) {
isMouseDown = false;
fingerMark.animate('opacity', 0, {
duration: 1000,
abort: function() {
return isMouseDown;
},
onChange: fingerCanvas.requestRenderAll.bind(fingerCanvas),
onComplete: function() {
fingerMark.set({
opacity: isMouseDown ? 1 : 0
});
fingerCanvas.requestRenderAll();
}
})
});
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
Related
I'm new to Fabric JS. I have draw multiple shapes and I have played around with the selection.
Fabric has the feature of selecting the objects in mouse drag, but if the selection rect touches the part of the shapes the shapes/objects will get highlighted.
But I have a concern to select only the objects which are present inside the selection rect. Kindly, help me out with the issue.
Thanks in advance and here's the fiddle https://jsfiddle.net/sabarisivakumar/rqmnacez/1/
var canvas = new fabric.Canvas('canvas1');
canvas.selectionFullyContained = false;
function drawcircle() {
var circle, isDown, origX, origY, lines;
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 2,
stroke: 'black',
// fill: 'White',
fill: 'rgba(0,0,0,0)',
selectable: true,
originX: 'center',
originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({
radius: Math.abs(origX - pointer.x)
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
circle.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawrec() {
var rect, isDown, origX, origY;
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'rgba(0,0,0,0)',
stroke: 'black',
transparentCorners: false
});
canvas.add(rect);
});
canvas.on('mouse:move', function (o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
rect.set({
top: Math.abs(pointer.y)
});
}
rect.set({
width: Math.abs(origX - pointer.x)
});
rect.set({
height: Math.abs(origY - pointer.y)
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
rect.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawLine() {
// canvas.on('mouse:down');
canvas.on('mouse:down', function (o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 3,
fill: '#07ff11a3',
stroke: 'black',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function (o) {
// isDown = true;
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
canvas.renderAll();
});
canvas.on('mouse:up', function (o) {
isDown = false;
line.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function select() {
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
// canvas.selection = true;
canvas.selection = true;
canvas.selectionFullyContained = true;
}
The feature you're looking for is Canvas.selectionFullyContained and indeed you do have it enabled in your fiddle.
The problem is that it was introduced in fabric.js v2.0.0, while your fiddle is using v1.6.3. Here's your original snippet with fabric.js upgraded to v3.6.2:
var canvas = new fabric.Canvas('canvas1');
canvas.selectionFullyContained = false;
function drawcircle() {
var circle, isDown, origX, origY, lines;
canvas.on('mouse:down', function(o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
circle = new fabric.Circle({
left: pointer.x,
top: pointer.y,
radius: 1,
strokeWidth: 2,
stroke: 'black',
// fill: 'White',
fill: 'rgba(0,0,0,0)',
selectable: true,
originX: 'center',
originY: 'center'
});
canvas.add(circle);
});
canvas.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
circle.set({
radius: Math.abs(origX - pointer.x)
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
circle.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawrec() {
var rect, isDown, origX, origY;
canvas.on('mouse:down', function(o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
origX = pointer.x;
origY = pointer.y;
var pointer = canvas.getPointer(o.e);
rect = new fabric.Rect({
left: origX,
top: origY,
originX: 'left',
originY: 'top',
width: pointer.x - origX,
height: pointer.y - origY,
angle: 0,
fill: 'rgba(0,0,0,0)',
stroke: 'black',
transparentCorners: false
});
canvas.add(rect);
});
canvas.on('mouse:move', function(o) {
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
if (origX > pointer.x) {
rect.set({
left: Math.abs(pointer.x)
});
}
if (origY > pointer.y) {
rect.set({
top: Math.abs(pointer.y)
});
}
rect.set({
width: Math.abs(origX - pointer.x)
});
rect.set({
height: Math.abs(origY - pointer.y)
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
rect.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function drawLine() {
// canvas.on('mouse:down');
canvas.on('mouse:down', function(o) {
isDown = true;
canvas.selection = false;
var pointer = canvas.getPointer(o.e);
var points = [pointer.x, pointer.y, pointer.x, pointer.y];
line = new fabric.Line(points, {
strokeWidth: 3,
fill: '#07ff11a3',
stroke: 'black',
originX: 'center',
originY: 'center'
});
canvas.add(line);
});
canvas.on('mouse:move', function(o) {
// isDown = true;
if (!isDown) return;
var pointer = canvas.getPointer(o.e);
line.set({
x2: pointer.x,
y2: pointer.y
});
canvas.renderAll();
});
canvas.on('mouse:up', function(o) {
isDown = false;
line.setCoords();
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
});
}
function select() {
canvas.off('mouse:down');
canvas.off('mouse:up');
canvas.off('mouse:move');
// canvas.selection = true;
canvas.selection = true;
canvas.selectionFullyContained = true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<button onclick="drawcircle()"> Circle</button>
<button onclick="drawrec()"> Rectangle</button>
<button onclick="drawLine()">Line</button>
<button onclick="select()">select</button>
<canvas id="canvas1" width="720" height="560" style="border:1px solid #ccc"></canvas>
Fabric.js 2.3.6
I'm trying to clip an object to a path drawn with the free drawing bush. The code fails to show the image inside the path and I'm not sure what I'm doing wrong.
Multiple objects could be clipped, so I can't apply the path to the canvas itself.
let image = new Image();
let object;
let canvas;
// canvas
canvas = new fabric.Canvas("canvas", {
backgroundColor: "lightgray",
width: 1280,
height: 720,
preserveObjectStacking: true,
selection: false
});
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;
canvas.on("path:created", function(options) {
clip(options.path);
});
// clip
function clip(path) {
object.set({
clipTo: function(ctx) {
path.render(ctx);
}
});
canvas.requestRenderAll();
}
// image
image.onload = function() {
object = new fabric.Image(image, {
width: 500,
height: 500,
top: 50,
left: 50
});
canvas.add(object);
};
image.src = "http://i.imgur.com/8rmMZI3.jpg";
https://jsfiddle.net/o91rv38q/7/
In order to clip on the same spot when is path has been drawn, you need to reset pathOffset for a SVG path, and setTransform to the ctx. Your clip function will look like:
function clip(path) {
path.set({pathOffset: {x: 0, y: 0}});
object.set({
clipTo: function(ctx) {
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.beginPath();
path._renderPathCommands(ctx);
ctx.restore();
}
});
canvas.requestRenderAll();
}
_renderPathCommands - renders a path.
Updated fiddle
To clip multiple objects you'll need to have some sort of an array of objects and then combine then into single path:
function combinePaths (paths) {
if (!paths.length) {
return null;
}
let singlePath = paths[0].path;
for (let i = 1; i < paths.length; i++){
singlePath = [...singlePath, ...paths[i].path];
}
return new fabric.Path(singlePath, {
top: 0,
left: 0,
pathOffset: {
x: 0,
y: 0
}
});
}
Here is an example with multiple paths to clip:
// canvas
let canvas = new fabric.Canvas("canvas", {
backgroundColor: "lightgray",
width: 1280,
height: 720,
preserveObjectStacking: true,
selection: false
});
let paths = [];
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.color = "black";
canvas.freeDrawingBrush.width = 2;
canvas.on("path:created", function (options) {
paths.push(options.path);
clip(combinePaths(paths));
});
function combinePaths(paths) {
if (!paths.length) {
return null;
}
let singlePath = paths[0].path;
for (let i = 1; i < paths.length; i++) {
singlePath = [...singlePath, ...paths[i].path];
}
return new fabric.Path(singlePath, {
top: 0,
left: 0,
pathOffset: {
x: 0,
y: 0
}
});
}
function clip(path) {
if (!path) {
return;
}
object.set({
clipTo: function (ctx) {
var retina = this.canvas.getRetinaScaling();
ctx.save();
ctx.setTransform(retina, 0, 0, retina, 0, 0);
ctx.beginPath();
path._renderPathCommands(ctx);
ctx.restore();
}
});
canvas.requestRenderAll();
}
// image
let image = new Image();
let object;
image.onload = function () {
object = new fabric.Image(image, {
width: 500,
height: 500,
top: 50,
left: 50
});
object.globalCompositeOperation = 'source-atop';
canvas.add(object);
};
image.src = "http://i.imgur.com/8rmMZI3.jpg";
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.js"></script>
<canvas id="canvas" width="1280" height="720"></canvas>
I have a canvas and have 2 images on it one is not evented and other we can change. Now I'm trying to change/replace image using file input, everything is fine just while changing the image it replaces the one I want but also adds one on top. I want to change the Image with id='changeimg'
//Add Image to Canvas
var imgObj = new Image();
//imgObj.id='changeimg';
imgObj.src = "blank.png";
var imgmain = imgObj.onload = function() {
var image = new fabric.Image(imgObj);
image.set({
id: 'changeimg',
angle: 0,
height: 350,
width: canvas.getWidth(),
align: 'mid', //added
originX: 'center', //added
originY: 'center', //added
});
canvas.centerObject(image);
canvas.add(image);
}
var imgObj1 = new Image();
//imgObj1.id='backgroundimg';
imgObj1.src = "template1.png";
var imgmain = imgObj1.onload = function() {
var image1 = new fabric.Image(imgObj1);
image1.set({
id: 'backgroundimg',
angle: 0,
height: canvas.getHeight(),
width: canvas.getWidth(),
evented: false,
});
//canvas.centerObject(image1);
canvas.add(image1);
}
//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(file) {
addImage(file.target.result);
}
reader.readAsDataURL(file);
}
function addImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
img.set({
'left': 50
});
img.set({
'top': 150
});
img.scaleToWidth(250);
img.scaleToHeight(250);
var cnt = 0;
var objs = canvas.getObjects();
//var objs = canvas.getActiveObject();
if (objs.length > 0) {
objs.forEach(function(e) {
if (e && e.type === 'image' && e.id === "changeimg") {
e._element.src = imgLink;;
canvas.renderAll();
cnt = 1;
}
});
}
});
}
Use imageEl.setSrc to change source of image element.
DEMO
var canvas = new fabric.Canvas('c');
fabric.Image.fromURL("https://picsum.photos/200/300/?random", function(img) {
img.set({
id: 'changeimg',
align: 'mid', //added
originX: 'center', //added
originY: 'center', //added,
scaleX: 200 / img.width,
scaleY: 200 / img.height,
});
canvas.centerObject(img);
canvas.add(img);
image = img;
})
fabric.Image.fromURL("https://picsum.photos/200/250/?random", function(img) {
img.set({
id: 'backgroundimg',
angle: 0,
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height,
});
//canvas.centerObject(image1);
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
})
//On Image Browse and Set on Canvas
document.getElementById('uploadedImg').onchange = function handleImage(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(file) {
addImage(file.target.result);
}
reader.readAsDataURL(file);
}
function addImage(imgLink) {
fabric.Image.fromURL(imgLink, function(img) {
var objects = canvas.getObjects();
for (var i = 0, l = objects.length; i < l; i++) {
if (objects[i].id == 'changeimg') {
imageEl = objects[i];
break
}
}
if (imageEl) {
imageEl.setSrc(img.getSrc(), function() {
canvas.renderAll()
imageEl.setCoords();
},{
left: 50,
top: 150,
scaleX: 150 / img.width,
scaleY: 200 / img.height,
})
}
});
}
canvas{
border:2px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>
<canvas id="c" width=500 height=500></canvas><br>
<input type='file' id='uploadedImg'>
After loading canvas data from JSON, an element with the custom type attribute isn't renders.
Here is jsFiddle.
Steps to reproduce are:
1) Click on SAVE button
2) Mover RED element somewhere
3) Click on RESTORE button
Nothing happens, but if the type attribute is commented out, then everything works just perfect.
Not sure if it's a bug or I forgot to add something...
Tnx
fabric.ContainerRect = fabric.util.createClass(fabric.Rect, {
type: 'container-rect',
initialize: function(options) {
this.callSuper('initialize', options);
this.on('moving', function() {
// console.log('Red is moving...');
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
fabric.ContainerRect.fromObject = function(options) {
return new fabric.ContainerRect(options);
}
//==========================================================================================
let store;
const canvas = new fabric.Canvas('paper');
const canvasOriginalSize = {
width: 600,
height: 600
};
const redBox = new fabric.ContainerRect({
left: 0,
top: 0,
width: 50,
height: 50,
fill: 'red'
});
canvas.add(redBox);
canvas.renderAll();
$("#save").on('click', function() {
store = canvas.toJSON();
console.log(store);
});
$("#restore").on('click', function() {
canvas.loadFromJSON(store, function() {
//console.log('restored:', canvas.getObjects());
//canvas.renderAll();
});
});
#paper {
border: solid 1px red;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>
fabric.ContainerRect.fromObject = function(object, callback) {
return fabric.Object._fromObject('ContainerRect', object, callback);
};
You need to use callback in fromObject.
If you remove type then it takes rect type for its object and while loadingfrom json it takes fabric.Rect.fromObject method not your fabric.ContainerRect.fromObject, thats why working.
DEMO
fabric.ContainerRect = fabric.util.createClass(fabric.Rect, {
type: 'container-rect',
initialize: function(options) {
this.callSuper('initialize', options);
this.on('moving', function() {
// console.log('Red is moving...');
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
}
});
fabric.ContainerRect.fromObject = function(object, callback) {
return fabric.Object._fromObject('ContainerRect', object, callback);
};
//==========================================================================================
let store;
const canvas = new fabric.Canvas('paper');
const canvasOriginalSize = {
width: 600,
height: 600
};
const redBox = new fabric.ContainerRect({
left: 0,
top: 0,
width: 50,
height: 50,
fill: 'red'
});
canvas.add(redBox);
canvas.renderAll();
$("#save").on('click', function() {
store = canvas.toJSON();
console.log(store);
});
$("#restore").on('click', function() {
canvas.loadFromJSON(store, function() {
console.log('restored:');
});
});
#paper {
border: solid 1px red;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
<button id="save">Save to JSON</button>
<button id="restore">Restore form JSON</button>
How to change attribute name which is dropped on another paper?
This is my markup and code:
<!DOCTYPE html>
<html>
<head>`enter code here`
<link href="css/joint.min.css" rel="stylesheet" type="text/css"/>
<link href="css/joint.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/lodash.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
<script src="js/joint.js" type="text/javascript"></script>
<script src="js/joint.min.js" type="text/javascript"></script>
<script src="js/circle-constraint.js" type="text/javascript"></script>
<link href="css/cascadeTest.css" rel="stylesheet" type="text/css"/>
<script src="js/inspector.js" type="text/javascript"></script>
</head>
<body>
<div id="stencil"></div>
<div id="paper"></div>
<div class="inspector-container"></div>
<script>
// Canvas where sape are dropped
var graph = new joint.dia.Graph;
paper = new joint.dia.Paper({
el: $('#paper'),
model: graph
});
// Canvas from which you take shapes
var stencilGraph = new joint.dia.Graph;
stencilPaper = new joint.dia.Paper({
el: $('#stencil'),
height: 60,
model: stencilGraph,
interactive: false
});
var r1 = new joint.shapes.basic.Rect({
position: {
x: 10,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect1'
}
}
});
var r2 = new joint.shapes.basic.Rect({
position: {
x: 120,
y: 10
},
size: {
width: 100,
height: 40
},
attrs: {
text: {
text: 'Rect2'
}
}
});
var erd = joint.shapes.erd;
erd.ISA.prototype.getHighlighterPath = function (w, h) {
return ['M', -8, 1, w + 8, 1, w / 2, h + 2, 'z'].join(' ');
};
var isa = new erd.ISA({
position: {x: 400, y: 10},
attrs: {
text: {
text: 'ISA',
fill: '#ffffff',
'letter-spacing': 0,
style: {'text-shadow': '1px 0 1px #333333'}
},
polygon: {
fill: '#fdb664',
stroke: 'none',
filter: {name: 'dropShadow', args: {dx: 0, dy: 2, blur: 1, color: '#333333'}}
}
}
});
var earth = new joint.shapes.basic.Circle({
position: {x: 250, y: 10},
size: {width: 100, height: 40},
attrs: {text: {text: 'circle'}, circle: {fill: '#2ECC71'}},
name: 'earth'
});
var image = new joint.shapes.basic.Image({
position: {
x: 500,
y: 10
},
size: {
width: 80,
height: 40
},
attrs: {
image: {
"xlink:href": "download.jpg",
width: 80,
height: 40
}
}
});
stencilGraph.addCells([r1, r2, earth, isa, image]);
stencilPaper.on('cell:pointerdown', function(cellView, e, x, y) {
$('body').append('<div id="flyPaper" style="position:fixed;z-index:100;opacity:.7;pointer-event:none;"></div>');
var flyGraph = new joint.dia.Graph,
flyPaper = new joint.dia.Paper({
el: $('#flyPaper'),
model: flyGraph,
interactive: false
}),
flyShape = cellView.model.clone(),
pos = cellView.model.position(),
offset = {
x: x - pos.x,
y: y - pos.y
};
flyShape.position(0, 0);
flyGraph.addCell(flyShape);
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
$('body').on('mousemove.fly', function(e) {
$("#flyPaper").offset({
left: e.pageX - offset.x,
top: e.pageY - offset.y
});
});
$('body').on('mouseup.fly', function(e) {
var x = e.pageX,
y = e.pageY,
target = paper.$el.offset();
// Dropped over paper ?
if (x > target.left && x < target.left + paper.$el.width() && y > target.top && y < target.top + paper.$el.height()) {
var s = flyShape.clone();
s.position(x - target.left - offset.x, y - target.top - offset.y);
graph.addCell(s);
}
$('body').off('mousemove.fly').off('mouseup.fly');
flyShape.remove();
$('#flyPaper').remove();
});
});
</script>
</body>
</html>
once the element is dropped you are having it in
graph.addCell(s);
s.attr('attributeName/text',newValue)
assuming the new attribute has property text.