Edit Shapes - Svelte | IMG.LY Docs

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/index.js';

const config = {
  // license: import.meta.env.VITE_CESDK_LICENSE,
  userId: 'guides-user'
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/assets'
};

CreativeEngine.init(config).then(async (engine) => {
  document.getElementById('cesdk_container').append(engine.element);

  const scene = engine.scene.create();
  engine.editor.setSetting('page/dimOutOfPageAreas', false);

  const graphic = engine.block.create('graphic');
  const imageFill = engine.block.createFill('image');
  engine.block.setString(
    imageFill,
    'fill/image/imageFileURI',
    'https://img.ly/static/ubq_samples/sample_1.jpg'
  );
  engine.block.setFill(graphic, imageFill);
  engine.block.setWidth(graphic, 100);
  engine.block.setHeight(graphic, 100);
  engine.block.appendChild(scene, graphic);

  engine.scene.zoomToBlock(graphic, 40, 40, 40, 40);


  engine.block.supportsShape(graphic); // Returns true
  const text = engine.block.create('text');
  engine.block.supportsShape(text); // Returns false

  const rectShape = engine.block.createShape('rect');
  engine.block.setShape(graphic, rectShape);
  const shape = engine.block.getShape(graphic);
  const shapeType = engine.block.getType(shape);

  const starShape = engine.block.createShape('star');
  engine.block.destroy(engine.block.getShape(graphic));
  engine.block.setShape(graphic, starShape);
  /* The following line would also destroy the currently attached starShape */
  // engine.block.destroy(graphic);

  const allShapeProperties = engine.block.findAllProperties(starShape);
  engine.block.setInt(starShape, 'shape/star/points', 6);
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
      html {
        overscroll-behavior-x: contain;
      }
    </style>
  </head>

  <body>
    <div id="cesdk_container" style="width: 100%; height: 100vh"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

The graphic design block in CE.SDK allows you to modify and replace its shape. CreativeEditor SDK supports many different types of shapes, such as rectangles, lines, ellipses, polygons and custom vector paths.

Similarly to blocks, each shape object has a numeric id which can be used to query and modify its properties .

Accessing Shapes#

In order to query whether a block supports shapes, you should call the supportsShape(id: number): boolean API. Currently, only the graphic design block supports shape objects.

engine.block.supportsShape(graphic); // Returns true
const text = engine.block.create('text');
engine.block.supportsShape(text); // Returns false

To query the shape id of a design block, call the getShape(id: number): number API. You can now pass this id into other APIs in order to query more information about the shape, e.g. its type via the getType(id: number): string API.

const shape = engine.block.getShape(graphic);
const shapeType = engine.block.getType(shape);

When replacing the shape of a design block, remember to destroy the previous shape object if you don’t intend to use it any further. Shape objects that are not attached to a design block will never be automatically destroyed.

Destroying a design block will also destroy its attached shape block.

const starShape = engine.block.createShape('star');
engine.block.destroy(engine.block.getShape(graphic));
engine.block.setShape(graphic, starShape);
/* The following line would also destroy the currently attached starShape */
// engine.block.destroy(graphic);

Shape Properties#

Just like design blocks, shapes with different types have different properties that you can query and modify via the API. Use findAllProperties(id: number): string[] in order to get a list of all properties of a given shape.

For the star shape in this example, the call would return ['name', 'shape/star/innerDiameter', 'shape/star/points', 'type', 'uuid'].

Please refer to the API docs for a complete list of all available properties for each type of shape.

const allShapeProperties = engine.block.findAllProperties(starShape);

Once we know the property keys of a shape, we can use the same APIs as for design blocks in order to modify those properties. For example, we can use setInt(id: number, property: string, value: number): void in order to change the number of points of the star to six.

engine.block.setInt(starShape, 'shape/star/points', 6);

Ellipse Type#

A shape block representing an ellipse.

This section describes the properties available for the Ellipse Type (//ly.img.ubq/shape/ellipse) block type.

Property	Type	Default Value	Description
(no specific properties)

Line Type#

A shape block representing a line.

This section describes the properties available for the Line Type (//ly.img.ubq/shape/line) block type.

Property	Type	Default Value	Description
(no specific properties)

Polygon Type#

A shape block representing a polygon.

This section describes the properties available for the Polygon Type (//ly.img.ubq/shape/polygon) block type.

Property	Type	Default Value	Description
`shape/polygon/cornerRadius`	`Float`	`0`	The radius for rounding the corners of the shape.
`shape/polygon/sides`	`Int`	`5`	The number of sides the polygon is supposed to have.

Rect Type#

A shape block representing a rectangle.

This section describes the properties available for the Rect Type (//ly.img.ubq/shape/rect) block type.

Property	Type	Default Value	Description
`shape/rect/cornerRadiusBL`	`Float`	`0`	The bottom-left radius for rounding the corners of the shape.
`shape/rect/cornerRadiusBR`	`Float`	`0`	The bottom-right radius for rounding the corners of the shape.
`shape/rect/cornerRadiusTL`	`Float`	`0`	The top-left radius for rounding the corners of the shape.
`shape/rect/cornerRadiusTR`	`Float`	`0`	The top-right radius for rounding the corners of the shape.

Star Type#

A shape block representing a star.

This section describes the properties available for the Star Type (//ly.img.ubq/shape/star) block type.

Property	Type	Default Value	Description
`shape/star/innerDiameter`	`Float`	`0.5`	The inner diameter of the star.
`shape/star/points`	`Int`	`5`	The number of tips the star is supposed to have.

Vector Path Type#

A shape block representing a custom vector path.

This section describes the properties available for the Vector Path Type (//ly.img.ubq/shape/vector_path) block type.

Property	Type	Default Value	Description
`shape/vector_path/height`	`Float`	`100`	The coordinate bounds in y direction.
`shape/vector_path/path`	`String`	`""`	The path string, accepts a subset of svg path strings.
`shape/vector_path/width`	`Float`	`100`	The coordinate bounds in x direction.

Full Code#

Here’s the full code:

import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/index.js';

const config = {
  // license: 'YOUR_CESDK_LICENSE_KEY',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.64.0/assets'
};

CreativeEngine.init(config).then(async (engine) => {
  document.getElementById('cesdk_container').append(engine.element);

  const scene = engine.scene.create();
  engine.editor.setSetting('page/dimOutOfPageAreas', false);

  const graphic = engine.block.create('graphic');
  const imageFill = engine.block.createFill('image');
  engine.block.setString(
    imageFill,
    'fill/image/imageFileURI',
    'https://img.ly/static/ubq_samples/sample_1.jpg'
  );
  engine.block.setFill(graphic, imageFill);
  engine.block.setWidth(graphic, 100);
  engine.block.setHeight(graphic, 100);
  engine.block.appendChild(scene, graphic);

  engine.scene.zoomToBlock(graphic, 40, 40, 40, 40);

  engine.block.supportsShape(graphic); // Returns true
  const text = engine.block.create('text');
  engine.block.supportsShape(text); // Returns false

  const rectShape = engine.block.createShape('rect');
  engine.block.setShape(graphic, rectShape);
  const shape = engine.block.getShape(graphic);
  const shapeType = engine.block.getType(shape);

  const starShape = engine.block.createShape('star');
  engine.block.destroy(engine.block.getShape(graphic));
  engine.block.setShape(graphic, starShape);
  /* The following line would also destroy the currently attached starShape */
  // engine.block.destroy(graphic);

  const allShapeProperties = engine.block.findAllProperties(starShape);
  engine.block.setInt(starShape, 'shape/star/points', 6);
});