anamican / jsvectoreditor Goto Github PK

What steps will reproduce the problem?
1. load page http://jsvectoreditor.googlecode.com/svn/trunk/index.html
2. click on image button
3. select some url with image
(http://farm4.static.flickr.com/3042/2326692233_204a01358d.jpg)
What is the expected output? What do you see instead?
i would like to see the image 
i dont seen anything

What version of the product are you using? On what operating system?
using firefox 3.5.5 on ubuntu 9.10

Please provide any additional information below.
also tried uploading a local file with file://

this could be a great application(tried to use it from google wave)
being able to upload images would make it even better

What steps will reproduce the problem?
1.draw small a polygon
2.resize it
3.again use select tool and try to resize it

What is the expected output? What do you see instead?

should be resize for latest size but it is resizing from its original size

I need to hide some page elements (fill/stroke settings) when no shapes are 
selected, and show them accordingly to the shape type when the shape is 
selected.

The second ask is solved well with the "selected" event.
But what touches the unselect/unselected events...

I can set the unselected event and it works well when I unselect some shape 
by clicking somewhere in the canvas. But when the shape is unselected by 
clicking (and selecting) another shape, this event is fired too, and looks 
that it's fired _after_ the select event, as my elements are not visible 
after it.

Current selection method (with graying out the selected value) is bad.
Most probably the easiest way is using some existing jQuery plugin.

Hi. there is problem by scale object after rotate.

in order to have 0 opacity saved to JSON you have to do 
{{{
            var tmp = shape.attr(attr[i]);
            if (tmp != undefined)
}}}
By the way, I suggest putting the setJSON and getJSON methods into the 
VectorEditor (I have already done that in my code):
{{{
VectorEditor.prototype.getJSON = function()
{
    var attr = "cx,cy,fill,fill-opacity,font,font-family,font-
size,font-
weight,gradient,height,opacity,path,r,rotation,rx,ry,src,stroke,stroke-
dasharray,stroke-opacity,stroke-width,width,x,y,text".split(",");
    function dumpShape (shape)
    {
        var info = {
            type: shape.type,
            id: shape.id,
            subtype: shape.subtype
        }
        for (var i = 0; i < attr.length; i++)
        {
            var tmp = shape.attr(attr[i]);
            if (tmp != undefined)
            {
                if (attr[i] == "path"){
                    tmp = tmp.toString();
                }
                info[attr[i]] = tmp;
            }
        }
        return info;
    }
    return encode(jQuery.map(this.shapes || [], dumpShape));
}

VectorEditor.prototype.setJSON = function(info)
{
    var instance = this;
    function loadShape(shape, noattachlistener)
    {
        if(!shape || !shape.type || !shape.id)
            return;     
        var newshape = null, draw = instance.draw;
        if(!(newshape=editor.getShapeById(shape.id)))
        {
            if (shape.type == "rect")
            {
                newshape = draw.rect(0, 0,0, 0)
            }
            else if (shape.type == "path")
            {
                newshape = draw.path("")
            }
            else if(shape.type == "image")
            {
                newshape = draw.image(shape.src, 0, 0, 0, 
0)
            }
            else if(shape.type == "ellipse")
            {
                newshape = draw.ellipse(0, 0, 0, 0)
            }
            else if(shape.type == "text")
            {
                newshape = draw.text(0, 0, shape.text)
            }
        }
        newshape.attr(shape);
        newshape.id = shape.id;
        newshape.subtype = shape.subtype;

        if (!noattachlistener) 
        {
            instance.addShape(newshape, true)
        }
    }

    try
    {
        var json = eval("("+ info +")");
        jQuery(json).each(function(index, item){
            loadShape(item);
        });
        return true;
    }
    catch (err)
    {
        // FIXME: log in other way
        alert(err.message);
        return false;
    }
}

}}}

When trying to draw a line in IE 8 I get the free path

What steps will reproduce the problem?
1. Create the shape, set the Fill to None
2. Click inside it - the shape is not selected
3. Click on the border - the shape is selected

What is the expected output? What do you see instead?
The behavior is logic from the programmatic point of view ("if the shape is 
empty inside, it shouldn't be selected"), but it is not convenient, 
especially with the thin-stroke shapes.
Also, for the line objects of 1-2 px width it might be good to select them 
when the click is made near it (i.e. if the distance from the mouse down 
point to the line border is not grater than 1 px). But this is definitely 
not trivial.

Please provide any additional information below.
May be using o% fill instead of None will automatically solve the problem?

What steps will reproduce the problem?
Draw the shape.


What is the expected output? What do you see instead?

addedshape should trigger after drawing ended

editor.on("addedshape", function(event, shape, no_select){

  editor.setMode("select");
  editor.select(shape); 

});

but it is firing just after click event.

is there any other event available after drawing is finished ?

The following improvements are desired (they are generally consistent with 
the Photoshop, Corel etc. behavior):

1. Make the text editable somehow (the must, you agree?)
2. Improve the text drawing:
* When the user clicks on the button, the tool is selected, but nothing 
happens
* When the user clicks on the canvas, the text box appears in the place of 
the click
* The user enters the text and clicks Enter (or Ctrl+Enter, or on the 
special button shown next to the field, or by just clicking outside of the 
box). Ideally the multi-line textarea should be shown to allow the line 
breaks. But this will require converting the text entered to the text 
element with nested tspans (as far as I understand).
* The text appears with the upper (or lower) left angle at the place of the 
click
* According to one of the previous issues, the text object is selected and 
the tool is changed to 'pointer'. At the moment when you continue clicking 
on the canvas zero-size text objects are added.
3. Make the text editable on double click. When the text object is double 
clicked, the text box containing the current text appears analogically to 
how it does when creating the text.

http://www.w3.org/TR/SVG/text.html#FontPropertiesUsedBySVG
4. Add the ability to set the font for the text. The set could contain the 
standard web fonts (Verdana, Tahoma, Courier New, etc.)
5. Make the text size property (set in pt or in abstract terms like Small, 
Medium, Big, Huge). 

First off, I'm not sure if this project is still active or not, but I thought I 
would post here before beginning work on this all by myself.

The Raphael 2.0 beta is out (you can get it here: 
https://github.com/DmitryBaranovskiy/raphael/tree/2.0 ), and it looks like a 
lot has changed, including some things that have completely broken parts of 
jsvectoreditor. One I've noticed right off the top of my head is that there is 
no longer a .attr("rotation"), so almost all of the rotation (and resizing) 
stuff is broken. I'm hoping to catch someone in the raphael IRC channel today 
to figure out why the heck they changed that and what the new way to get the 
current rotation value is. 

Anyways, is anyone out there planning on working on getting this to Raphael 2.0 
compatible? Just curious :-).

I often use a flowchart program. Google Wave opens up entirely new 
possibilities to work together.

The most important feature would be lines to move with other objects when 
they are moved.

The second feature would be to provide an export file (object id, object 
text, connected to object id) so that the work can be moved to a flowchart 
program for making it 'nicer'.

I see that I can use JSON to save and restore the editor state.
But I need the SVG itself.
I see that I can store both JSON and SVG and use JSON for data restoring 
while SVG for my purposes (and probably I will do it in this way at the 
moment). But if it's not difficult add the setMarkup method that will setup 
the editor based on the previously saved SVG.

What steps will reproduce the problem?
Draw the shape.

What is the expected output? What do you see instead?
It's much more convenient to have the shape auto-selected (and the tool 
changed to 'pointer') after drawing. What for?
To make the new shape configurable through properties (fill, stroke), to 
allow dragging it instantly after creation.

What steps will reproduce the problem?
1. Create several shapes
2. Click on deletion button, click on the shape
3. Click on the other shape

What is the expected output? What do you see instead?
Two shapes are deleted which is not consistent with the standard behavior for 
the deletion.
Commonly you select the shape and click Delete (or press the key) and the 
shape disappears. When you click on the other shape, it's selected, not 
deleted - this is the expected behavior.

What steps will reproduce the problem?

1. Create a Raphael object on the paper
2. On click of the paper, return the event.target
3. It should return the svg code for that element that was clicked

What is the expected output? What do you see instead?

I would like to be able to log out the event.target and see 'Raphael's object' 
not the svg code for the DOM object that doesn't have the Raphael functionality.

What version of the product are you using? On what operating system?

Raphael 2.1.0 on Mac OSX 10.8.4

Please provide any additional information below.

I am making a dynamic image editor similar to VectorEditor. This one however 
will be for the design of images for science problems (engineering, physics, 
math, chemistry). After creating a Raphael object on the canvas I would like to 
select it and move/rotate/stretch/label/dimension it but can't add that 
functionality until I get which Raphael object I am actually selecting. 
Hopefully this makes sense. Would love to hear back from you guys soon. CHEERS!

What steps will reproduce the problem?
1. In Google wave draw a line (straight or freehand)
2. Go to another wave
3. Come back to the wave

What is the expected output? What do you see instead?
Drawn lines are visible. All lines drawn are gone (other shapes and text 
reappear again)

What version of the product are you using? On what operating system?


Please provide any additional information below.

What steps will reproduce the problem?
1. Click Save (with wrong title "Delete") after drawing.

What is the expected output? What do you see instead?
Open dialog and export the drawing. But nothing happen.

What version of the product are you using? On what operating system?
r203. Chrome (33.0.1750.154 m) in WindowsXP.

Please provide any additional information below.
IE and Firefox works fine.

Hello,
and "bravo" for your work.

I would be very nice to have connector object. A connector is a line that
each 2 end points are attached to another shape, like when moving a
connected shape, the attached connector endpoint follow the shape.

Regards
cyrille