diff --git a/src/item/Group.js b/src/item/Group.js index 6aa122cd..b2cebcf7 100644 --- a/src/item/Group.js +++ b/src/item/Group.js @@ -19,36 +19,47 @@ var Group = this.Group = Item.extend({ beans: true, + // DOCS: document new Group(item, item...); /** * Creates a new Group item and places it at the top of the active layer. * * @param {Array} [children] An optional array of children that will be * added to the newly created group. * - * @example - * // Create an empty group and append a path to the top of its children - * // array: + * @example {@paperscript split=true height=200} + * // Create a group containing two paths: + * var path = new Path(new Point(100, 100), new Point(100, 200)); + * var path2 = new Path(new Point(50, 150), new Point(150, 150)); * - * // Create an empty group: - * var group = new Group(); - * - * var path = new Path([new Point(10, 10), new Point(50, 50)]); - * path.strokeColor = 'black'; - * - * // Append the path to the group: - * group.appendTop(path); + * // Create a group from the two paths: + * var group = new Group([path, path2]); * * // Set the stroke color of all items in the group: - * circleGroup.strokeColor = 'black'; + * group.strokeColor = 'black'; * - * @example - * // Create a group containing two paths: - * var circle = new Path.Circle(new Point(30, 50), 10); - * var circle2 = new Path.Circle(new Point(50, 50), 10); + * // Move the group to the center of the view: + * group.position = view.center; * - * var circleGroup = new Group([circle, circle2]); - * // Set the fill color of all items in the group: - * circleGroup.fillColor = 'black'; + * @example {@paperscript split=true} + * // Click in the view to add a path to the group, which in turn is rotated + * // every frame: + * var group = new Group(); + * + * function onMouseDown(event) { + * // Create a new circle shaped path at the position + * // of the mouse: + * var path = new Path.Circle(event.point, 5); + * path.fillColor = 'black'; + * + * // Move the path to the top of the group's children list: + * group.appendTop(path); + * } + * + * function onFrame(event) { + * // Rotate the group by 1 degree from + * // the centerpoint of the view: + * group.rotate(1, view.center); + * } * * @class A Group is a collection of items. When you transform a Group, its * children are treated as a single unit without changing their relative