@cesdk/cesdk-js 1.3.0 → 1.4.0-alpha.4

package/BlockAPI.d.ts

@@ -0,0 +1,232 @@
+type Vec2 = { x: number; y: number };
+type DesignElementId = number;
+type DesignElementType = string;
+type MimeType = 'image/png' | 'image/jpeg';
+type Size = number; // | 'auto';
+type Size2 = {
+  width: Size;
+  height: Size;
+};
+
+export default class BlockAPI {
+  /**
+   * Exports a design block element as a file of the given mime type.
+   * Performs an internal update to resolve the final layout for the blocks.
+   * @param handle The design block element to export.
+   * @param mimeType The mime type of the output file.
+   * @returns A promise that resolves with the exported image or is rejected with an error.
+   */
+  export(handle: DesignElementId, mimeType: MimeType): Promise<Blob>;
+
+  /**
+   * Create a new block, fails if type is unknown.
+   * @param type The type of the block that shall be created.
+   * @returns The created blocks handle.
+   */
+  create(type: DesignElementType): DesignElementId;
+
+  /**
+
+   * Get the type of the given block, fails if the block is invalid.
+   * @param id The block to query.
+   * @returns The blocks type.
+   */
+  getType(id: DesignElementId): DesignElementType;
+
+  /**
+   * Update the selection state of a block.
+   * Fails for invalid blocks.
+   * @param id The block to query.
+   * @param selected Whether or not the block should be selected.
+   */
+  setSelected(id: DesignElementId, selected: boolean): void;
+
+  /**
+   * Get the selected state of a block.
+   * @param id The block to query.
+   * @returns True if the block is selected, false otherwise.
+   */
+  isSelected(id: DesignElementId): boolean;
+
+  /**
+   * Get all currently selected blocks.
+   * @returns An array of block ids.
+   */
+  findAllSelected(): DesignElementId[];
+
+  /**
+   * Update a block's name.
+   * @param id The block to update.
+   * @param name The name to set.
+   */
+  setName(id: DesignElementId, name: string): void;
+
+  /**
+   * Get a block's name.
+   * @param id The block to update.
+   */
+  getName(id: DesignElementId): string;
+
+  /**
+   * Finds all blocks with the given name.
+   * @param name The name to search for.
+   * @returns A list of block ids.
+   */
+  findByName(name: string): DesignElementId[];
+
+  /**
+   * Finds all blocks with the given type.
+   * @param type The type to search for.
+   * @returns A list of block ids.
+   */
+  findByType(type: DesignElementType): DesignElementId[];
+
+  /**
+   * Return all blocks currently known to the engine.
+   * @returns A list of block ids.
+   */
+  findAll(): /* filterSpec?: unknown */ DesignElementId[];
+
+  // Element
+
+  /**
+   * Query a block's visibility.
+   * @param id The block to query.
+   * @returns True if visible, false otherwise.
+   */
+  isVisible(id: DesignElementId): boolean;
+
+  /**
+   * Update a block's visibility.
+   * @param id The block to update.
+   * @param visible Whether the block shall be visible.
+   */
+  setVisible(id: DesignElementId, visible: boolean): void;
+
+  /**
+   * Query a block's absolute position in design units.
+   * @param id The block to query.
+   * @returns
+   */
+  getPosition(id: DesignElementId): Vec2;
+
+  /**
+   * Update a block's absolute position.
+   * @param id The block to update.
+   * @param { x, y } pos The new position in design units.
+   */
+  setPosition(id: DesignElementId, { x, y }: Vec2): void;
+
+  /**
+   * Query a block's rotation in radians.
+   * @param id The block to query.
+   * @returns The block's rotation around its center in radians.
+   */
+  getRotation(id: DesignElementId): number;
+
+  /**
+   * Update a block's rotation.
+   * @param id The block to update.
+   * @param radians The new rotation in radians. Rotation is applied around the block's center.
+   */
+  setRotation(id: DesignElementId, radians: number): void;
+
+  /**
+   * Query a block's horizontal flip state.
+   * @param id The block to query.
+   * @returns A boolean indicating for whether the block is flipped in the queried direction
+   */
+  getFlipHorizontal(id: DesignElementId): boolean;
+
+  /**
+   * Query a block's vertical flip state.
+   * @param id The block to query.
+   * @returns A boolean indicating for whether the block is flipped in the queried direction
+   */
+  getFlipVertical(id: DesignElementId): boolean;
+
+  /**
+   * Update a block's horizontal flip.
+   * @param id The block to update.
+   * @param horizontal Whether the block should be flipped along its x-axis.
+   * @returns
+   */
+  setFlipHorizontal(id: DesignElementId, flip: boolean): void;
+
+  /**
+   * Update a block's vertical flip.
+   * @param id The block to update.
+   * @param vertical Whether the block should be flipped along its y-axis.
+   * @returns
+   */
+  setFlipVertical(id: DesignElementId, flip: boolean): void;
+
+  /**
+   * Query a block's absolute size in design units.
+   * @param id The block to query.
+   * @returns A `Size2` object.
+   */
+  getSize(id: DesignElementId): Size2;
+
+  /**
+   * Update a block's absolute size in design units.
+   * @param id The block to update.
+   * @param size A size object defining width and height.
+   */
+  setSize(id: DesignElementId, size: Size2): void;
+
+  /**
+   * Get a block's layouted size. Requires an `engine.render()` beforehand.
+   * @param id The block to query.
+   * @returns A `Size2` object holding the size.
+   */
+  getFrameSize(id: DesignElementId): Size2;
+
+  /**
+   * Duplicates a block including its children.
+   * @param id The block to duplicate.
+   * @returns The handle of the duplicate.
+   */
+  duplicate(id: DesignElementId): DesignElementId;
+
+  /**
+   * Destroys a block.
+   * @param id The block to destroy.
+   */
+  destroy(id: DesignElementId): void;
+
+  /**
+   * Query a block's parent.
+   * @param id The block to query.
+   * @returns The parent's handle.
+   */
+  getParent(id: DesignElementId): DesignElementId;
+
+  /**
+   * Get all children of the given block. Children
+   * are sorted in their rendering order: Last child is rendered
+   * in front of other children.
+   * @param id The block to query.
+   * @returns A list of block ids.
+   */
+  getChildren(id: DesignElementId): DesignElementId[];
+
+  /**
+   * Insert a new or existing child at a certain position in the parent's children.
+   * @param parent The block whose children should be updated.
+   * @param child The child to insert. Can be an existing child of `parent`.
+   * @param index The index to insert or move to.
+   */
+  insertChild(
+    parent: DesignElementId,
+    child: DesignElementId,
+    index: number
+  ): void;
+
+  /**
+   * Appends a new or existing child to a block's children.
+   * @param parent The block whose children should be updated.
+   * @param child The child to insert. Can be an existing child of `parent`.
+   */
+  appendChild(parent: DesignElementId, child: DesignElementId): void;
+}

package/SceneAPI.d.ts

@@ -0,0 +1,52 @@
+type DesignBlockId = number;
+
+export default class SceneAPI {
+  /**
+   * Load the contents of a scene file.
+   * @param sceneContent The scene file contents, a base64 string.
+   * @returns A handle to the loaded scene.
+   */
+  loadFromString(sceneContent: string): DesignBlockId;
+
+  /**
+   * Load a scene from the URL to the scene file.
+   * The scene file will be fetched asynchronously by the engine. This requires continous `render`
+   * calls on this engines instance.
+   * @param url The URL of the scene file.
+   * @returns scene A promise that resolves once the scene was loaded or rejects with an error otherwise.
+   */
+  loadFromURL(url: string): Promise<DesignBlockId>;
+
+  /**
+   * Serializes the current scene into a string. Selection is discarded.
+   * @returns A promise that resolves with a string on success or an error on failure.
+   */
+  saveToString(): Promise<string>;
+
+  /**
+   * Create a new scene, along with its own camera.
+   * @returns The scenes handle.
+   */
+  create(): DesignBlockId;
+
+  /**
+   * Loads the given image and creates a scene with a single page showing the image.
+   * Fetching the image may take an arbitrary amount of time, so the scene isn't immediately
+   * available.
+   * @param url The image URL.
+   * @param dpi The scenes DPI.
+   * @param pixelScaleFactor The displays pixel scale factor.
+   * @returns A promise that resolves with the scene ID on success or rejected with an error otherwise.
+   */
+  createFromImage(
+    url: string,
+    dpi?: number,
+    pixelScaleFactor?: number
+  ): Promise<DesignBlockId>;
+
+  /**
+   * Return the currently active scene.
+   * @returns The scene or null, if none was created yet.
+   */
+  get(): DesignBlockId | null;
+}

package/VariableAPI.d.ts

@@ -0,0 +1,27 @@
+export default class VariableAPI {
+  /**
+   * Get all text variables currently stored in the engine.
+   * @returns Return a list of variable names
+   */
+  findAll(): string[];
+
+  /**
+   * Set a text variable to a string value.
+   * @param key The variable's key.
+   * @param value The text to replace the variable with.
+   */
+  setString(key: string, value: string): void;
+
+  /**
+   * Set a text variable to a string value.
+   * @param key The variable's key.
+   * @returns  The text value of the variable.
+   */
+  getString(key: string): string;
+
+  /**
+   * Remove a text variable.
+   * @param key The variable's key.
+   */
+  remove(key: string): void;
+}

package/api.d.ts

@@ -0,0 +1,11 @@
+import BlockAPI from './BlockAPI';
+import SceneAPI from './SceneAPI';
+import VariableAPI from './VariableAPI';
+
+export default class API {
+  block: BlockAPI;
+
+  scene: SceneAPI;
+
+  variable: VariableAPI;
+}

package/assets/i18n/de.json

@@ -52,6 +52,11 @@
       "title": "Seite {{number}}"
     },
     "inputs": {
+      "SliderInput": {
+        "toggleNumberInput": {
+          "description": "Direkte Werteingabe einblenden."
+        }
+      },
       "TypefaceSelect": {
         "label": "Ausgewählte Schriftfamilie: {{fontFamily}}"
       },
@@ -150,7 +155,10 @@
     "noItems": { "label": "Keine Elemente vorhanden" },
     "noMoreItems": { "label": "Keine weiteren Elemente" },
     "search": {
-      "placeholder": "Suchen …"
+      "placeholder": "Suchen …",
+      "clear": {
+        "label": "Suchen leeren"
+      }
     },
     "breadcrumb": {
       "root": {
@@ -397,7 +405,7 @@
             "label": "Aktionen für intelligente Funktionen"
           }
         },
-        "mask": { "label": "Maskieren" },
+        "imageMatting": { "label": "Hintergrund entfernen" },
         "smartCrop": { "label": "Smartes Zuschneiden" },
         "superResolution": { "label": "Hochskalieren" },
         "inpainting": { "label": "Auffüllen" },
@@ -499,7 +507,7 @@
             "label": "Texthintergrundfarbe"
           }
         },
-        "adjustableImage": {
+        "image": {
           "crop": {
             "label": "Bildausschnitt"
           },
@@ -558,12 +566,12 @@
       "AdopterViewSelect": {
         "label": "Adopter Ansicht",
         "options": {
-          "classic": {
-            "label": "Classic",
+          "advanced": {
+            "label": "Advanced",
             "description": "Den Inspektor immer anzeigen."
           },
-          "minimal": {
-            "label": "Minimal",
+          "default": {
+            "label": "Default",
             "description": "Den Inspektor möglichst verbergen."
           }
         }
@@ -722,7 +730,7 @@
           }
         }
       },
-      "adjustableImage": {
+      "image": {
         "label": "Bild",
         "select": { "label": "$t(common.select)" },
         "scope": {
@@ -749,7 +757,7 @@
               "description": " Höhe vom Zuschneidebereich in {{unit}}"
             }
           },
-          "adjustableImage": {
+          "image": {
             "heading": "Bild",
             "x": {
               "label": "X Versatz",
@@ -800,7 +808,7 @@
         "polygon": { "label": "Mehreck" },
         "oval": { "label": "Ellipse" },
         "ellipse": { "label": "Ellipse" },
-        "vectorPath": { "label": "Vektorpfad" }
+        "vectorPath": { "label": "Pfad" }
       },
       "exclusion_zone": { "label": "Ausschlusszonen" },
       "multiSelection": {
@@ -918,6 +926,7 @@
     "letterSpacing": { "label": "Laufweite" },
 
     "opacity": { "label": "Transparenz" },
+    "hue": { "label": "Farbwert" },
 
     "uniformBlur/intensity": { "label": "Unschärfe" },
 
@@ -1001,8 +1010,8 @@
       "Sharpie": { "label": "Sharpie" }
     },
     "effectProp": {
-      "Pixelize/horizontalPixelSize": { "label": "Horizontale Größe" },
-      "Pixelize/verticalPixelSize": { "label": "Vertikale Größe" },
+      "Pixelize/horizontalPixelSize": { "label": "Anzahl Horizontal" },
+      "Pixelize/verticalPixelSize": { "label": "Anzahl Vertikal" },
       "RadialPixel/radius": { "label": "Radius pro Reihe" },
       "RadialPixel/segments": { "label": "Größe pro Reihe" },
       "CrossCut/slices": { "label": "Horizontale Schnitte" },
@@ -1033,7 +1042,7 @@
       "Posterize/levels": { "label": "Anzahl Farben" },
       "TvGlitch/distortion": { "label": "Grobe Verzerrung" },
       "TvGlitch/distortion2": { "label": "Feine Verzerrung" },
-      "TvGlitch/speed": { "label": "Sensitivität" },
+      "TvGlitch/speed": { "label": "Varianz" },
       "TvGlitch/rollSpeed": { "label": "Vertikaler Versatz" },
       "TvGlitch/time": { "label": "Varianz" },
       "HalfTone/angle": { "label": "Winkel des Musters" },
@@ -1042,14 +1051,14 @@
       "Psychedelic/amount": { "label": "Intensität" },
       "Psychedelic/offset": { "label": "Diagonaler Versatz" },
       "Psychedelic/time": { "label": "Varianz" },
-      "Shifter/amount": { "label": "Intensität" },
-      "Shifter/angle": { "label": "Richtung Versatz" },
-      "Mirror/side": { "label": "Spiegelachse" },
-      "Glow/size": { "label": "Intensität" },
-      "Glow/amount": { "label": "Helligkeit" },
+      "Shifter/amount": { "label": "Abstand" },
+      "Shifter/angle": { "label": "Richtung" },
+      "Mirror/side": { "label": "Gespiegelte Seite" },
+      "Glow/size": { "label": "Schimmer" },
+      "Glow/amount": { "label": "Intensität" },
       "Glow/darkness": { "label": "Dunkelkeit" },
-      "Vignette/offset": { "label": "Radialer Versatz" },
-      "Vignette/darkness": { "label": "Helligketi" },
+      "Vignette/offset": { "label": "Größe" },
+      "Vignette/darkness": { "label": "Farbe" },
       "TiltShift/amount": { "label": "Intensität" },
       "TiltShift/position": { "label": "Position" },
       "Separate/amount": { "label": "Versatz" },
@@ -1114,7 +1123,7 @@
           "fixedFrame": { "description": "Feste Größe aktivieren" }
         },
 
-        "adjustableImage": {
+        "image": {
           "crop": { "description": "Bild beschneiden" },
           "filter": { "description": "Filter anwenden" }
         },
@@ -1158,6 +1167,18 @@
               "description": "Seiten untereinander anordnen"
             }
           }
+        },
+
+        "placeholder": {
+          "create": {
+            "description": "Platzhalter einrichten"
+          },
+          "remove": {
+            "description": "Platzhalter entfernen"
+          },
+          "change": {
+            "description": "Platzhalter anpassen"
+          }
         }
       }
     }

package/assets/i18n/en.json

@@ -52,6 +52,11 @@
       "title": "Page {{number}}"
     },
     "inputs": {
+      "SliderInput": {
+        "toggleNumberInput": {
+          "description": "Display direct value input."
+        }
+      },
       "TypefaceSelect": {
         "label": "Selected font typeface: {{fontFamily}}"
       },
@@ -150,7 +155,10 @@
     "noItems": { "label": "No elements" },
     "noMoreItems": { "label": "No more elements" },
     "search": {
-      "placeholder": "Search …"
+      "placeholder": "Search …",
+      "clear": {
+        "label": "Clear search"
+      }
     },
     "breadcrumb": {
       "root": {
@@ -258,7 +266,7 @@
       "share": { "label": "Share as Template" },
       "load": { "label": "Import Design File" },
       "download": { "label": "Export Design File" },
-      "export": { "label": "Export Image" },
+      "export": { "label": "Export Images" },
       "close": { "label": "$t(common.close)" },
       "back": { "label": "$t(common.back)" },
       "image": { "label": "Image" },
@@ -397,7 +405,7 @@
             "label": "Smart Features Actions"
           }
         },
-        "mask": { "label": "Mask" },
+        "imageMatting": { "label": "Remove Background" },
         "smartCrop": { "label": "Smart-crop" },
         "superResolution": { "label": "Super-resolution" },
         "inpainting": { "label": "Inpaint" },
@@ -499,7 +507,7 @@
             "label": "Text Background Color"
           }
         },
-        "adjustableImage": {
+        "image": {
           "crop": {
             "label": "Image Crop"
           },
@@ -558,12 +566,12 @@
       "AdopterViewSelect": {
         "label": "Adopter View",
         "options": {
-          "classic": {
-            "label": "Classic",
+          "advanced": {
+            "label": "Advanced",
             "description": "Always show the inspector."
           },
-          "minimal": {
-            "label": "Minimal",
+          "default": {
+            "label": "Default",
             "description": "Hide the inspector if possible."
           }
         }
@@ -722,7 +730,7 @@
           }
         }
       },
-      "adjustableImage": {
+      "image": {
         "label": "Image",
         "select": { "label": "$t(common.select)" },
         "scope": {
@@ -749,7 +757,7 @@
               "description": "Height of the crop frame in {{unit}}"
             }
           },
-          "adjustableImage": {
+          "image": {
             "heading": "Image",
             "x": {
               "label": "X Offset",
@@ -800,7 +808,7 @@
         "polygon": { "label": "Polygon" },
         "oval": { "label": "Oval" },
         "ellipse": { "label": "Ellipse" },
-        "vectorPath": { "label": "Vector Path" }
+        "vectorPath": { "label": "Path" }
       },
       "exclusion_zone": { "label": "Exclusion Zone" },
       "multiSelection": {
@@ -921,6 +929,7 @@
     "letterSpacing": { "label": "Letter Spacing" },
 
     "opacity": { "label": "Opacity" },
+    "hue": { "label": "Hue" },
 
     "uniformBlur/intensity": { "label": "Blur" },
 
@@ -1074,13 +1083,13 @@
       "Sharpie": { "label": "Sharpie" }
     },
     "effectProp": {
-      "Pixelize/horizontalPixelSize": { "label": "Horizontal Size" },
-      "Pixelize/verticalPixelSize": { "label": "Vertical Size" },
+      "Pixelize/horizontalPixelSize": { "label": "Horizontal Count" },
+      "Pixelize/verticalPixelSize": { "label": "Vertical Count" },
       "RadialPixel/radius": { "label": "Radius per Row" },
       "RadialPixel/segments": { "label": "Size per Row" },
       "CrossCut/slices": { "label": "Horizontal Cuts" },
-      "CrossCut/offset": { "label": "Horizontal Offset per Cut" },
-      "CrossCut/speedV": { "label": "Vertical Offset per Cut" },
+      "CrossCut/offset": { "label": "Horizontal Offset" },
+      "CrossCut/speedV": { "label": "Vertical Offset" },
       "CrossCut/time": { "label": "Variation" },
       "ColorCut/amount": { "label": "Intensity" },
       "ColorCut/speed": { "label": "Sensitivity" },
@@ -1106,7 +1115,7 @@
       "Posterize/levels": { "label": "Number of Levels" },
       "TvGlitch/distortion": { "label": "Rough Distortion" },
       "TvGlitch/distortion2": { "label": "Fine Distortion" },
-      "TvGlitch/speed": { "label": "Sensitivity" },
+      "TvGlitch/speed": { "label": "Variance" },
       "TvGlitch/rollSpeed": { "label": "Vertical Offset" },
       "TvGlitch/time": { "label": "Variation" },
       "HalfTone/angle": { "label": "Angle of Pattern" },
@@ -1115,14 +1124,14 @@
       "Psychedelic/amount": { "label": "Intensity" },
       "Psychedelic/offset": { "label": "Diagonal Offset" },
       "Psychedelic/time": { "label": "Variation" },
-      "Shifter/amount": { "label": "Intensity" },
+      "Shifter/amount": { "label": "Distance" },
       "Shifter/angle": { "label": "Shift Direction" },
-      "Mirror/side": { "label": "Axis to Mirror" },
-      "Glow/size": { "label": "Intensity" },
-      "Glow/amount": { "label": "Brightness" },
+      "Mirror/side": { "label": "Mirrored Side" },
+      "Glow/size": { "label": "Bloom" },
+      "Glow/amount": { "label": "Intensity" },
       "Glow/darkness": { "label": "Darkening" },
-      "Vignette/offset": { "label": "Radial Offset" },
-      "Vignette/darkness": { "label": "Brightness" },
+      "Vignette/offset": { "label": "Size" },
+      "Vignette/darkness": { "label": "Color" },
       "TiltShift/amount": { "label": "Intensity" },
       "TiltShift/position": { "label": "Position" },
       "Separate/amount": { "label": "Offset" },
@@ -1187,7 +1196,7 @@
           "fixedFrame": { "description": "Enable fixed frame" }
         },
 
-        "adjustableImage": {
+        "image": {
           "crop": { "description": "Crop image" },
           "filter": { "description": "Apply filter" }
         },
@@ -1229,6 +1238,18 @@
               "description": "Arrange pages vertically"
             }
           }
+        },
+
+        "placeholder": {
+          "create": {
+            "description": "Create Placeholder"
+          },
+          "remove": {
+            "description": "Remove Placeholder"
+          },
+          "change": {
+            "description": "Change Placeholder constraints"
+          }
         }
       }
     }