Jump to content


Photo

Inserting Auto Shapes through API


  • Please log in to reply
10 replies to this topic

#1 mitya777

mitya777

    FireStarter

  • Members
  • PipPip
  • 28 posts

Posted 18 February 2011 - 07:41 AM

Hi guys, I have a few questions related to dealing with Autoshapes.

I am writing an Extension in which I'd like to call an autoshape that I wrote as well. However I am having trouble with the dom.insertSmartShapeAt() command.

When I try to run the command with Firework's existing shapes nothing happens. I do something like:

dom.insertSmartShapeAt("Arrow",{x:0,y:0},false);

What am I doing wrong?

Also, the previous call calls an "arrow" shape from the AutoShape tool bar, and I assume I should be able to call other shapes from the Auto Shapes panel. If I wanted to have the Auto Shape I wrote available to call in the same way, would I have to first install it in the Fireworks Configuration/AutoShapes folder so it would first be available in the panel? Or is there another way?

If people wanted to use my extension would they have to install it in 2 pieces? The Auto Shape and then the extension which calls it? Or is there a way to simplify this so that the Auto Shape is maybe part of the extension code?? Some other way?

#2 bomberstudios

bomberstudios

    FireworksFreak

  • Members
  • PipPip
  • 18 posts
  • Location:Spain

Posted 18 February 2011 - 08:03 AM

I have done a quick test with:

fw.getDocumentDOM().insertSmartShapeAt("Wave",{x:100,y:100},false);

and it works as expected.

Are you using the correct Auto Shape name?

As for the installation, I believe you can install both a command and an Auto Shape in the same MXP file (but I've never tried, so I could be wrong).

#3 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 18 February 2011 - 10:50 AM

As for the installation, I believe you can install both a command and an Auto Shape in the same MXP file (but I've never tried, so I could be wrong).

Yes, you can include multiple kinds of extension files in one .mxp. The Greeked Text extension includes commands for inserting and modifying the auto shapes that it also includes: http://johndunning.c...out/GreekedText

#4 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 18 February 2011 - 11:41 AM

Also, the previous call calls an "arrow" shape from the AutoShape tool bar, and I assume I should be able to call other shapes from the Auto Shapes panel. If I wanted to have the Auto Shape I wrote available to call in the same way, would I have to first install it in the Fireworks Configuration/AutoShapes folder so it would first be available in the panel? Or is there another way?

I seem to be able insert shapes from either the "Auto Shapes" folder (note the space) or "Auto Shape Tools" using insertSmartShapeAt.

Do you have a InsertSmartShapeAt handler in your code? That's called by insertSmartShapeAt and when the user drags a shape in from the panel. It's *not* called when you select a shape from the Tool panel and drag out its bounds, which calls BeginDragInsert (though, usually, you'd have almost identical code in both handlers). Maybe that's why insert isn't working for your shape.

Or is there a way to simplify this so that the Auto Shape is maybe part of the extension code??

The smart shape .jsf can call runScript(), so it can actually load other code, or call into pre-existing global functions. When developing a shape, I'll sometimes just put a single runScript call into the .jsf that loads a separate .js file. That way, whenever the .js is changed, all existing shapes will immediately run that new code when you interact with them. It's also nice that each shape isn't duplicating the same 20 - 30K of code in your document.

The drawback to deploying shapes this way is that if you give someone a file with the shape and they don't have the .js file installed, interacting with the shape will throw an error. It's probably also slightly slower, but you could work around that by having the .js set up a global API once it's run, and the .jsf file could then check for the API and call it if it's available (thereby avoiding the file load) or call runScript if not.

One thing you'll want to do is wrap the shape code in an anonymous function to avoid leaving behind a whole bunch of global variables and functions after your shape is inserted. You could also set up the code in a more object-oriented way, as I've done in extensions like the Lorem Ipsum shape: http://johndunning.c...bout/LoremIpsum

(function()
{
	// various "global" functions needed by the shape

	var Shape = {
		execute: function(
			inSmartShape)
		{
			var handler = "on" + inSmartShape.operation;

			if (this[handler]) {
				this.smartShape = inSmartShape;
				this.dom = fw.getDocumentDOM();

				this[handler](inSmartShape);

					// clear references to these globals now that we're done
					// handling the auto shape event
				this.smartShape = null;
				this.dom = null;
			}
		},

		onInsertSmartShapeAt: function()
		{
			...
		},

		onBeginDragControlPoint: function()
		{
			...
		},

		// other handlers and methods that the handlers may call
	}; 

	Shape.execute(smartShape);
})();

This sets up a singleton with a bunch of methods and then calls its execute() method, which dispatches the current smart shape "event" (insert, drag, etc.) to the appropriate handler. The handlers operate on this.smartShape, which is set to the smartShape global. This normally doesn't have any advantage over using the global, but it does mean you could pass in a shape other than the one the user is currently interacting with to execute() in order to call the methods on those shapes. I do this when multiple shapes are selected and the user makes one bigger by dragging a control point. The other shapes will also grow by the same amount. It's sort of a hack, and there are weird limitations in what you can actually change and what dom calls you can make during a smart shape "event", but it's kinda useful.

#5 mitya777

mitya777

    FireStarter

  • Members
  • PipPip
  • 28 posts

Posted 18 February 2011 - 11:50 AM

Wow guys, thank you for all the help. Lots of good stuff here. John, I was actually using your fireworks console (which has been amazingly helpful throughout the development process) to try and place the auto shape. For some reason it wasn't working for me but when I loaded it into Fireworks as a command it worked then. Not sure why that is and I thought I had gotten it to work from the console a few weeks ago. I could just be missing something but at least I can move forward.

Thanks again.

#6 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 18 February 2011 - 01:05 PM

John, I was actually using your fireworks console (which has been amazingly helpful throughout the development process) to try and place the auto shape. For some reason it wasn't working for me but when I loaded it into Fireworks as a command it worked then.

Strange. I just tried running dom.insertSmartShapeAt("Star", {x:150, y:100}, false); and that worked fine.

Note that sometimes the connection between the SWF panel and FW seems to get lost. If you type in 2 + 2 and nothing is printed, then that means the console is busted. Usually closing it and reopening it will fix it, but sometimes you'll need to restart FW.

Don't forget that you can call console.log("foo") from your code to print strings and values to the console (after a few second delay).

#7 WilliamErickson1

WilliamErickson1

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 26 August 2011 - 01:05 AM

hay thanks for guys for all the help i got from this thread, it really very usefull me, thanks for sharing

#8 RiddickMarc

RiddickMarc

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 07 October 2011 - 03:24 AM

I am go with bomberstudios . he give valuable advise among other.

#9 JacqulineShin

JacqulineShin

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 10 October 2011 - 04:31 AM

use some update software which is useful to you work.

#10 carlmowen

carlmowen

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 11 October 2011 - 06:09 AM

hey thanks guys for posting useful posts here

#11 johnfeder

johnfeder

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 11 October 2011 - 07:41 AM

nice posting to share here