[Branched] [JS] Duplicate, move a selected object by twice its width, colour the object and its "bg"

[BryanPagenkopf]

I have a Swatch that is a gradient named "BRONZE" that I would like to color the dup.selected object.

I've tried to add a line after dub.selected = true; but none of what I have tried has worked.

var doc = app.activeDocument;
var sel = doc.selection;
if (sel.length > 0) {
  var pIt = sel[0];
  var wdt = pIt.width;
  var hdt = pIt.hieght;
  var dub = pIt.duplicate();
  doc.selection = null;
  dub.translate(wdt*2, 0);
  dub.selected = true;

  generateBackground();

} else {
  alert("No items are selected.");
}

function generateBackground() {
    var sel = doc.selection;
    var item = sel[0];
    var bounds = item.geometricBounds;
    var width = bounds[2] - bounds[0];
    var height = bounds[1] - bounds[3];
    var fillColor = new CMYKColor();
        fillColor.cyan = 100;
        fillColor.magenta = 100;
        fillColor.yellow = 100;
        fillColor.black = 100;
    var background = doc.pathItems.rectangle(bounds[1], bounds[0], width, height)
        background.fillColor = fillColor;
        background.filled = true;
        background.stroked = false;
        background.zOrder(ZOrderMethod.SENDTOBACK);
  }

[ branched from Moving a Selected Item twice it's width to Illustrator forum by moderator ]

[ title added by moderator ]

[femkeblanco]

"I have a Swatch that is a gradient named "BRONZE" that I would like to color the dup.selected object.

I've tried to add a line after dub.selected = true; but none of what I have tried has worked."

Add this line

dub.fillColor = doc.swatches["BRONZE"].color;

[pixxxelschubser]

I don't understand what you are trying to do with this additional function.

It creates a rectangle under your duplicate in the size of the duplicate with the colour "jet black". And you are using reserved words as variable names again.

A selection is not necessary to assign the fillColor to the duplicate. For this you have the variable name "dup".

var doc = app.activeDocument;
var sel = doc.selection;
if (sel.length > 0) {
  var pIt = sel[0];
  var wdt = pIt.width;
  var hdt = pIt.hieght;
  var dub = pIt.duplicate();
  doc.selection = null;
  dub.translate(wdt*2, 0);
  //dub.selected = true;
  dub.fillColor = doc.swatches["BRONZE"].color; // or
  //dub.fillColor = doc.swatches.getByName("BRONZE").color;
} else {
  alert("No items are selected.");
}

Does that work for you?

[BryanPagenkopf]

 @pixxxelschubser Sorry I'm attempting to make a copy of my art layout and then colorize it.  I'm able to do it now with a combination of Action Steps and Scripts, but I was hoping to set up a single Script to do it all.
Please see the attached PDF for the steps I'm trying to accomplish.

I hope that gives you a better understanding
Take Care!

[BryanPagenkopf]

@femkeblanco @pixxxelschubser   I just wanted to say Thank you so much for your assistance with this post and my many others!  They have been so helpful to me and hopefully many others on these forums.  I was able to create what I needed using Graphic Styles and both of your advice.  Here is the Script so that others can learn from it!

var doc = app.activeDocument;
var sel = doc.selection;

if (sel.length > 0) {
var pIt = sel[0];
var wdt = pIt.width;
var hdt = pIt.height;
var dub = pIt.duplicate();
doc.selection = null;
dub.translate(wdt*2, 0);
dub.selected = true;

var win = new Window("dialog", "Choose a Graphic Style");
win.orientation = "column";

var group1 = win.add("group");
group1.orientation = "row";
var bronze = group1.add("radiobutton", undefined, "Bronze");
var custom1 = group1.add("radiobutton", undefined, "Custom Raised");
bronze.value = true;

var group2 = win.add("group");
group2.orientation = "row";
var black = group2.add("radiobutton", undefined, "Black");
var custom2 = group2.add("radiobutton", undefined, "Custom Recessed");
black.value = true;

var okBtn = win.add("button", undefined, "OK");
okBtn.onClick = function() {
if (bronze.value) {
var gStyle = doc.graphicStyles.getByName("Bronze");
gStyle.applyTo(doc.selection[0]);
} else if (custom1.value) {
var gStyle = doc.graphicStyles.getByName("Custom Raised");
gStyle.applyTo(doc.selection[0]);
}

generateBackground();

if (black.value) {
var gStyle = doc.graphicStyles.getByName("Black");
gStyle.applyTo(doc.pathItems[doc.pathItems.length-1]);
}  else if (custom2.value) {
var gStyle = doc.graphicStyles.getByName("Custom Recessed");
gStyle.applyTo(doc.pathItems[doc.pathItems.length-1]);
}
    win.close();
  }
  
  win.show();
  
  //generateBackground();
  
  function generateBackground() {
    var sel = doc.selection;
    var item = sel[0];
    var bounds = item.geometricBounds;
    var width = bounds[2] - bounds[0];
    var height = bounds[1] - bounds[3];
    var background = doc.pathItems.rectangle(bounds[1], bounds[0], width, height);
    background.zOrder(ZOrderMethod.SENDTOBACK);
  }
  
  doc.selection = null;
  
  var activeLayer = doc.activeLayer;
  var pathItems = activeLayer.pathItems;
  if(pathItems.length > 0) {
    var lastPath = pathItems[pathItems.length-1];
    lastPath.selected = true;
  } else {
    alert("No path items found in the active layer.");
  }
} else {
  alert("No items are selected.");
}

[James279204389sy5]

Hopefully you see this 

[pixxxelschubser]

Hi @BryanPagenkopf 
a good try.

But - no one else can try out your code because a sample file with the right colours and styles is missing. An expert can fix this - unfortunately, any beginner will fail.

Why do you work with styles at all? Why don't you assign colours directly? And the most important question: Why do you use reserved words as variable names again?

If I have time tonight, I'll show you a code snippet that should do what I think you want.

😉

[BryanPagenkopf]

I attached a file that has the needed graphic styles and such.   Also, in answer to your questions, I am just trying to McGyver code together.
I worked with Graphic Style because I have existing code that works to apply Graphic Styles.
I tried using the Swatch colors but couldn't get them to apply, maybe because of a typo in my code, perhaps because they are Custom Swatches that are also Gradients, I don't know.

I use reserved words because I don't honestly know any better, I am using code snippets from old code, code that I find on these forums, code I find on other websites, and youtube video tutorials.

[pixxxelschubser · Accepted solution]

Please try the following code snippet with the upper left object in your own first example file: Example Step by Step.pdf

(Please do not combine only parts of this code snippet with others - I have slightly changed some variable names).

//selection_create_duplicate_of_sel_and_bg-rectangle_and_fill_both.jsx
//create a duplicate of selection and add a "background" rectangle and fill both with predefined color

// Illustrator thread: [Branched] [JS] Duplicate, move a selected object by twice its width, colour the object and its "bg" 
// https://community.adobe.com/t5/illustrator-discussions/branched-js-duplicate-move-a-selected-object-by-twice-its-width-colour-the-object-and-its-quot-bg/m-p/13481589

// example file: Example Step by Step
// First select the upper left object - then execute the script

// regards pixxxelschubser 

var doc = app.activeDocument;
var sel = doc.selection;
if (sel.length > 0) {
    var pIt = sel[0];
    var wdt = pIt.width;
    var hgt = pIt.height;
    var dup = pIt.duplicate();

    doc.selection = null;
    dup.translate(wdt*2, 0);

    var gBds = dup.geometricBounds;
    dup.pathItems[0].fillColor = doc.swatches["Bronze"].color;

    var bgDup = doc.pathItems.rectangle(gBds[1], gBds[0], wdt, hgt);
    bgDup.move(dup, ElementPlacement.PLACEAFTER);
    bgDup.stroked = false;
    bgDup.fillColor = doc.swatches["2418 BROWN"].color;
    } else {
    alert("No item is selected.");
}

If that works for you
have fun
😉

[pixxxelschubser]

Also two explanatory screenshots:
1.) The upper left object in your example file (Example Step by Step.pdf) is selected.

2.) The script creates a duplicate, moves it by twice its width and colours it with your gradient swatch "Bronze".
3.) Then it creates a rectangle the size of your first selected object, moves it in the layer hierarchy directly below the duplicate and colours it with the color swatch "2418 BROWN".

 

[pixxxelschubser]

Hi @BryanPagenkopf 

Have you already tried the last code? Does it work for you?