Zazzle Blog

Well, now we do! And Cut, Paste, and Delete as well. You may have already noticed a little dropdown button we snuck into our design tool, under the Customize It tab on the right. Here’s what it looks like:

So what is this good for? Well, how many times have you wanted to select elements in your design and Copy them? Or Paste what’s on the front of your shirt to the back?

I know I appreciate being able to Select All and Delete, when my artistic inspiration leads me to Blandville, just off the coast of The Boring Sea. Nothing like wiping the slate clean every now and then (better known as destroying the evidence).

We know this small but very useful feature will help speed up monotonous design tasks, and ultimately lead to a more creative design session!

Duplicating or Moving a Design

Using multiple selection, you can duplicate or move an entire design containing multiple image and/or text design objects from one side of a shirt to the other side. This should come in handy when working on any multi-sided products, such as shirts, card, and calendars. To duplicate a design on another side of a product, follow these simple steps…

1. select the side that has the design you would like to duplicate
2. use the “Select all” option in the “Edit” menu to select all the objects in the design
3. use the “Copy” option in the “Edit” menu to copy the current selection to the clipboard
4. select the side on which you would like the design duplicated
5. use the “Paste” option in the “Edit” menu to paste the clipboard’s contents onto the selected side. After using the “Paste” option, the pasted objects will be selected, so you can conveniently move or resize the group of objects.

Now, if you would like to move a design rather than duplicating it, simply use the “Cut” option in step 3 above.

Positioning Integrity

One of the neat things about the way we implemented copy-and-paste is in maintaining the positioning integrity. What this means is that when you copy-and-paste a group of design objects from one side onto another, the pasted group not only maintains the correct positioning relationships between the various objects in the group, but the group as a whole is also positioned similarly on the new side as it was on its side of origin. So, in cards for example, this allows one to duplicate the exact layout of the “inside left” side to the “inside right” side with a simply copy-and-paste (or cut-and-paste, if you want to identically move stuff across).

Load-on-demand Functionality

The copy-and-paste functionality, like the rest of the design tool’s client side functionality, is implemented using JavaScript. It’s worth noting that when we implemented this new feature we made the conscious decision to not add any additional weight to the initial page load. So, the JavaScript library that implements this and a few other advanced features is only loaded on demand – when the user invokes one of the features. So, on the very first use of copy, cut, or paste, there is a one time asynchronous “Ajax” service request that fetches the library and then continues on with the operation.

Appropriate Enabled States

When implementing the “Edit” menu, thorough attention was payed to the disabled state behavior for the various options. So, for example, if you have a side of a product selected that is completely blank, the “Select all” option is disabled because there is nothing to select. Similarly, if you’re on a side that does have design objects but nothing is selected, then the “Select none” option is disabled, because that’s already the existing state. Conversely, if you have all the design objects selected, then the “Select all” option is disabled. Finally, if nothing is selected, then the “Cut”, “Copy”, and “Delete” options are disabled.

Create a product today and try it out for yourself!

This entry was posted on March 16, 2007 at 4:22 pm and is filed under Nerdy Stuff. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.