methodofaction/method-draw

Method Draw, the SVG Editor for Method of Action

method-draw's Issues

Why two "root" folders for Method Draw?

I'd love to contribute back to the project at some point, but I'd first like to understand what the difference is between /editor and /method-draw. Looking back at old commits, it seems changes are mirrored between files in these folders...

Which one is more "real"? Why do it this way at all?

Text misplaced when exporting as PNG

I guess similar to #30 whenever I try to export an SVG to PNG, text elements are badly misplaced. I investigated a little and ended up on this page which shows the possible attribute values for text-anchor.

Problem:
text-anchor attribute seems to be set to left by default, like:

  <text stroke-width="3" xml:space="preserve" text-anchor="left" font-family="Arial" font-size="32" id="svg_81" fill="#699dd3">Hello</text>

The value left does not exist. To fix and correctly position text I overwrote the svg source and set anchors to start. This correctly positioned my text.

Let me know if I should do a PR for this.

Bug in path closing segment?

Draw a bezier path. On trying to close the path by clicking on the first-placed node the closing segment is drawn in a very strange shape for some reason.

I see connector extension in the code but i cant see it in the editor ??

Hi,
I see connector extension in the extensions folder , but i dont see it in the toolbar though ? Is it currently being worked ?

Thanks

Choosing any Custom size causes infinite loop on the axises.

On Mac in either Firefox or Chrome I select any size from the Custom menu on a blank canvas, the two axises expand and continues to so forever - so that I can not use the application.
Can you reproduce or provide workaround?
Default size is to small.

Zoom broken in Google Chrome 24.0.1312.36 beta

The zoom function has suddenly stopped working. It works fine in Firefox and Safari.
My operating system is OS X 10.7.5
When I try to zoom the workspace goes blank and under console I get infinite errors as the height and width of the document is increasing negatively.
Any ideas?

setBackground not working

Hi

I try to set a background image with
svgCanvas.setBackground('', url) on the iFrame content;
But the image never appears. The same operation works fine with the original svg-editor.

The problem seems to be the white background that is added to the content as a default.

How can I get rid of this? Is there a way to configure the background? If I have to change the javascript files, how can I create the compiled version again?

Thanks for any help. I really like the method-draw editor, as it is much more usable on the iPad.

Regards

Daniel

Text alignment issue on 'Export as PNG'

Hi,

When exporting artwork as a PNG any text on the canvas ends up miss-aligned (about 10% to the left of where it should be).

Any help appreciated. Thanks.

Any chance of installing it on cent os apache? (LAMP), without building it from scratch?

Could it run on a normal linux hosting @ LAMP server? Is there an installation manual? I couldn't find any. The projects awesome by the way! Keep up the good work and MIT license is the best, period! :)

Grid not working

Hi,

Unfortunately, I am not able to get the "show grid" feature to work.
The grid is just not showing up.
I already digged into the code and tried to figure out the problem, but without any solution.

Any suggestions?

Import .sgv create by Adobe Illustrator which text is created as paragraph can not edit

Hi the Author,

It's seem Method-Draw is not support text editor as paragraph so pls support it if you can.

Thank you!

Not working in Chrome 48 beta

Something strange happened today after my browser's update, official demo doesn't work too, I get these types of errors in console:

Uncaught TypeError: path.createSVGPathSegLinetoAbs is not a function(anonymous function) @ browser.js:56(anonymous function) @ browser.js:62(anonymous function) @ browser.js:181
svgutils.js:563 Uncaught TypeError: svgedit.browser.supportsSelectors is not a function(anonymous function) @ svgutils.js:563(anonymous function) @ svgutils.js:648
method-draw.js:47 Uncaught TypeError: svgedit.browser.isTouch is not a function(anonymous function) @ method-draw.js:47(anonymous function) @ method-draw.js:4135(anonymous function) @ method-draw.js:4141
contextmenu.js:59 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ contextmenu.js:59(anonymous function) @ contextmenu.js:68
ext-eyedropper.js:16 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ ext-eyedropper.js:16
ext-shapes.js:11 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ ext-shapes.js:11
ext-grid.js:15 Uncaught ReferenceError: methodDraw is not defined(anonymous function) @ ext-grid.js:15
76:57 Uncaught ReferenceError: svgCanvas is not defined

ipad virtual keyboard

hello!
first, very good work!
i installed Method-data on my own server, and i test embedapi.html.
just: line 9, src="src/embedapi.js".
after that it work but i can't write any text using ipad virtual keyboard.
(strange because it's work with index.html)
an idea???

Problems with getScreenCTM or getCTM (position of the cursor) in Firefox

In Firefox, if I try to draw a line in the top left corner of the screen, the line is drawn starting from the center of the page. I have already tried with other browsers, and the problem does not exist, however, I have already tried to contact Firefox developers and they answer:
<<
The editor is buggy. It's using getScreenCTM or getCTM incorrectly. Contact the author and ask him or her to fix it.

(As you can see here: https://bugzilla.mozilla.org/show_bug.cgi?id=1029805 )

Discussion: Possible Alternate Method Draw backend

I've been using a slightly modified version of Method-Draw in my application "RoboPaint" for nearly 3 years now as a way to create/edit/import/clean SVGs for painting with robots. Though It's vastly better than the likely now defunkt SVG-Edit project, it's far from perfect, and the project owners can likely not keep up with the issues.

It's been the best of times, it's been the worst of times. ;)

There have always things that work well and look great (the interface), and then things that are mostly unreliable or act very strangely (simple path shape bounds, unsimplified pencil path creation, random path position resets), and it's no wonder: The SVG standard is huge and complicated, and this work is based off of a giant legacy codebase with thousands of lines of code written while web standards they applied to kept changing.

My proposal:

A fork, of sorts. I've done a little research into Paper.js, an incredible "Swiss Army Knife of Vector Graphics Scripting.". On the outset, it seems like a perfect fit to systematically replace the flawed inner workings from SVG-Edit.

So says the readme:

The purpose of Method Draw is to improve the usability and user experience of SVG Edit.

And I think the project has done that in spades. It's clean, efficient, and nice to use, if only things actually worked as they were expected to every time. I've personally found that creating tools and user interface for use with Paper.js is a breeze, and in theory, it's perfectly possible to recreate the exact look of Method-Draw, simply powered by a well tested, well supported back-end with some pretty impressive capabilities beyond SVG-edit.

I can't do this alone, or without some kind of support. At this point I'm simply looking for feedback, or interest from the communities that could be involved. Thanks for reading.

Not working in Firefox 20.0.1 and IE 10

In Firefox 20.0.1 the drawing is placed totally wrong and in IE 10 it is not possible to set document size.

Keypad for editing a text is not reopening in mobile browser chrome and other

I am writing a text with help of text tool after some time i want to edit same text but i am unable to open keypad.

Stroke color picker not working

Looking at the tool tip for the color picker I should be able to shift click to change the stroke color. It always changes the fill color instead.

View/Snap to grid do nothing

Turning on View Grid and Snap to grid only tick the options in the menu they appear to do nothing else.

Packaging for Sandstorm

I'd like to try packaging Method-Draw for Sandstorm (https://sandstorm.io).
One issue that would need to be solved first is how to save the SVG files in a persistent way (not only in the localstorage).
Is there a method for writing back to the server that could be relatively easily implemented in the current framework?

Stroke-width not possible on lines with gradients

Currently, when you set a linear-gradient as the color, it doesn't allow the user to select stroke-width, instead appearing as "NaN." It can be set manually still.

Here's a screenshot. I'm running current Chrome on Windows 8.

Object rotate after new Document

Hi ,
the Editor has Problems to rotate ( i.e. circle) elements after
create New Document .

To reproduce:

http://editor.method.ac/
--> Draw Circle
--> Menu --> File --> New Document
--> Draw Circle
--> Try to rotate
I would be happy if this bug will be fixed .

kind regards

Michael

Eyedropper

Hi,

I am unable to pick the color from the image using method draw.
Could you please suggest.

Thanks & Regards,
Rajesh.

Missing text when rendering PNG or open with Inkscape on file created with Method-Draw

I have create file with Method Draw:

This is when I export it to PNG:

There is some problems with text rendering. Any Ideas where the problem come from?

This is XML: http://printed-bags.net/uploads/test_622.svg

Cannot drag the path control nodes when the path segment is direct line.

OS: Windows 10
Browser: Chrome 49

example svg:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
  <path id="svg_2" d="m262.5,178l0,-58l45.5,-20l94.5,-18l39,72l-181,24l2,0z"
      stroke-width="1.5" stroke="#A0D58A" fill="#FFAAB8"/>
</svg>

firefox problem with all tools of editor!!!

When drawing a rectangle for example, it does not work properly, because i think the editor take the (0,0) coordinate of page instead of canvas

No Toolbars after Chrome update

Was working great until the latest Chrome update and now no menus or toolbars. Works fine in Firefox.

Uncaught TypeError: oa.createSVGPathSegLinetoAbs is not a function(anonymous function) @ method-draw.compiled.js:64

(anonymous function) @ method-draw.compiled.js:64(anonymous function) @ method-draw.compiled.js:70

lstr.js:26 Uncaught TypeError: Cannot read property 'appendChild' of undefined(anonymous function) @ lstr.js:26

Text element position is not correct when exporting as png

When your design contains a text, and want to export it as png, the text element position is not correct:
the svg design:

png result:

Image Save - SVG

When using image save... a popup windows displays the SVG... I have to use save SVG only to save file to my device. Is it possible to make adjustments in code to save to device storage the same as open SVG popup?

Adding arrows on lines

Hello, is there no possibility to add arrows on lines ?

The shape library chooses icon only once

When you choose icon from shape library, it only chooses it once. After that you cannot change it to another shape, as it doesn't open anymore.

ShapeLib Previews not appearing under categories

Hello,
I'm trying to make custom SVGs for the shape library specific to my business. The issue I'm having pertains to the small thumbnail previews in shapelib, in that they won't appear. Is this an issue that anyone has come across?
Thank you

Line gone when edit vertex in Chrome

1). Draw a line with pen, (or any other shape).
2). double click the shape.
3). drag to move the vertex.

The line will gone after several drag move.

The problem only found on chrome (I use Version 35.0.1916.153). It works very well on Safari.

https://www.dropbox.com/s/xiwp0zfdjvydu7w/Screen%20Shot%202014-07-29%20at%2010.40.41%20AM.png

https://www.dropbox.com/s/alxo0fe48a54lyb/line.mp4

Export as PNG not work

I click Export as PNG then open a new window,
but no PNG file.
Why? is it my mistake?

My system environment:
XP Pro SP3
Google Chrome V.29.0.1547.66 m

how to use Drag and drop event

I am trying to use drag and drop with jquery dropable event but it is not working and getting error $.widget.extend is not a function since method-draw.compiled.js is using some Jquery UI functions how drag and drop will work ?

SVG Init with some JSON on it

I know this is not an issue, but is there a way to init the whole svg with some elements on svgcontent?
I've looked at the code, but I can't find out where the svgcontent instantiates so I can add some JSON on it.
In svgutils.js is the init function which inits the editorContext, where the whole svg appears, but I need one step back, where the svgcontent is added so I could add myself some JSON.

Could you help me please with some informations of where should I add the JSON?
Thank you in advance.

Selecting fonts from an open SVG file...

I used File / Open SVG... and when I try to select text object I can not edit text until I change the font from Null to a font listed... Then I can not see a cursor... Just a green translucent block over the text letters. Then I am able to change text. When Selecting a text object you can not edit by clicking the text or double clicking the block... it is treated like a text block object ... when hitting the Text Tool... it creates another text box instead... of editing the text box selected. Can I alter this in some way?

shape library

After selecting a shape from "shape library", I can't get back to the shape selection menu.
Also, the "about this editor" link doesn't work

Chosen Font doesn't show up when image is saved

I've added fonts to the font library but when I use them and then try to save the image, what's shown on the save screen is a generic font - not the one I chose and that shows up on the canvas when I'm using it.

Here you can see that I've chosen the font - "Cookie" - and it shows up like it should on the canvas -

But when I click "File > Save Image" this what shows up on in the new "save" browser window -

Any help or suggestions would be MUCH appreciated!! Thank you!!

Chrome line position problem

In Mac 10.6.8. Chrome Version 26.0.1410.65 and Windows7 Chrome Version 26.0.1410.64 m when drawing with pencil tool the line appears about 30 px above and 10px to the lef of the cursor. In Firefox works ok.

install/configure problem

Hi Mark,
I had a look at http://editor.method.ac and I am really impressed by Method-Draw. It works wonderful both on a desktop and on iPad. I git cloned the source to /var/www/ on my server, but unfortunately it does not work properly. When I open http://localhost/Method-Draw/method-draw/ in my browser, I see the drawing canvas, menus and buttons, but nothing works. No rulers, nu menu options. Nothing. Did I forgot to do something? I have been looking for install and configuration documentation, but could not find any.

$.pref is not defined

In method-draw.js the method $.pref is called multiple times, yet it is not defined anywhere

if you try to save the SVG, an Uncaught TypeError is thrown

it was somehow omitted when porting from svg-edit project, where in svg-editor.js we can find:

 // Store and retrieve preferences
        $.pref = function(key, val) {
            if(val) curPrefs[key] = val;
            key = 'svg-edit-'+key;
            var host = location.hostname,
                onweb = host && host.indexOf('.') >= 0,
                store = (val != undefined),
                storage = false;
            // Some FF versions throw security errors here
            try {
                if(window.localStorage) { // && onweb removed so Webkit works locally
                    storage = localStorage;
                }
            } catch(e) {}
            try {
                if(window.globalStorage && onweb) {
                    storage = globalStorage[host];
                }
            } catch(e) {}

            if(storage) {
                if(store) storage.setItem(key, val);
                    else if (storage.getItem(key)) return storage.getItem(key) + ''; // Convert to string for FF (.value fails in Webkit)
            } else if(window.widget) {
                if(store) widget.setPreferenceForKey(val, key);
                    else return widget.preferenceForKey(key);
            } else {
                if(store) {
                    var d = new Date();
                    d.setTime(d.getTime() + 31536000000);
                    val = encodeURIComponent(val);
                    document.cookie = key+'='+val+'; expires='+d.toUTCString();
                } else {
                    var result = document.cookie.match(new RegExp(key + "=([^;]+)"));
                    return result?decodeURIComponent(result[1]):'';
                }
            }
        }

Bitmap import

Hi,

When will be able import png o jpg files?

Thanks!

I cannot select other elements when in rect drawing mode in IE 10.

Im assuming the same for IE 9.

When i create a rectangular element I cannot click on another element of any type to select it. I can do this with other element types though (i.e. ellipse/line/pencil).

Unable to add elements after exiting a layer

Step to reproduces:

1. Create 2 rectangles
2. Select and group them
3. Double clic on one of the rectangle (the breadcrumb become "Layer1>svgX")
4. Clic on Layer1 (breadcrumb) or the escape key
5. You can't add another rectangle or any other element to the svg

Linear gradients begin/end points not correctly set

Linear gradients are not displayed when exporting to PNG because begin/end point coordinates are not set when creating the gradient. So instead of something like this:

<linearGradient id="svg_87" x1="0" y1="0" x2="1" y2="0">
   ...
</linearGradient>

the SVG source will only include this:

<linearGradient id="svg_87">
   ...
</linearGradient>

which when rendered as png does not display the gradient at all. The editor color fill menu, linear tab, does include the begin/end point parameters that need to be defined, but they don't make it into the svg source. See below:

If I set the coordinates by hand in the source code and then export the SVG to PNG, the gradient displays correctly.

Possibly, makefile error

Line rm editor/method-draw.compiled.js removes compiled js file, so it is not put into method-draw directory.

$(COMPILED_JS):
    java -jar $(CLOSURE) \
        --compilation_level SIMPLE_OPTIMIZATIONS \
        $(CLOSURE_JS_ARGS) \
        --js_output_file $(COMPILED_JS)
    rm editor/method-draw.compiled.js

Erasor

Do we have any erasor tool?
Any help will be appreciated

Shape library in not working

Shape library is not working.Once i have select the one shape, second time I am not able to select the other shape.

Issues scaling shapes from shape library

Mark, great job with Method Draw. It's so easy to use! I just created a really awesome icon for my site with Method Draw. I used some of the included shapes from the shapes library. I see they're custom paths. Unfortunately when I tried to embed this icon in my page, the svg did not scale correctly. I embedded in my html using and set the width and height to 100px each, but the image was cropped instead of scaled. I also tried setting the values of the width and height attributes of the svg tag to '100%' but to no avail. I also tried removing the entire background group. What am I doing wrong?