Adds back Davide's dimensions samples

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/README.md

@@ -0,0 +1,15 @@
+## About
+
+This project has been created with _@adobe/create-ccweb-add-on_. As an example, this Add-on demonstrates how to get started with Add-on development using JavaScript with Document Sandbox Runtime.
+
+## Tools
+
+-   HTML
+-   CSS
+-   JavaScript
+
+## Setup
+
+1. To install the dependencies, run `npm install`.
+2. To build the application, run `npm run build`.
+3. To start the application, run `npm run start`.

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "dom-tutorial",
+    "version": "1.0.0",
+    "description": "Adobe Creative Cloud Web Add-on.",
+    "scripts": {
+        "clean": "ccweb-add-on-scripts clean",
+        "build": "ccweb-add-on-scripts build --use webpack",
+        "start": "ccweb-add-on-scripts start --use webpack",
+        "package": "ccweb-add-on-scripts package"
+    },
+    "keywords": [
+        "Adobe",
+        "Creative Cloud Web",
+        "Add-on",
+        "panel"
+    ],
+    "devDependencies": {
+        "@adobe/ccweb-add-on-scripts": "^1.1.1",
+        "@adobe/ccweb-add-on-sdk-types": "^1.1.1",
+        "@babel/core": "^7.23.5",
+        "@babel/preset-env": "^7.23.5",
+        "babel-loader": "^9.1.3",
+        "copy-webpack-plugin": "^11.0.0",
+        "css-loader": "^6.8.1",
+        "html-webpack-plugin": "^5.5.4",
+        "style-loader": "^3.3.3",
+        "webpack": "^5.89.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "dependencies": {
+        "@spectrum-web-components/button": "^0.39.4",
+        "@spectrum-web-components/theme": "^0.39.4"
+    }
+}

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/src/documentSandbox/add-on-sandbox-sdk.d.ts

@@ -0,0 +1,11 @@
+// DO NOT modify this file.
+
+declare module "add-on-sdk-document-sandbox" {
+    import { AddOnDocumentSandboxSdkTypes } from "@adobe/ccweb-add-on-sdk-types";
+    export default AddOnDocumentSandboxSdkTypes.default;
+    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/add-on-sdk-document-sandbox";
+}
+
+declare module "express-document-sdk" {
+    export * from "@adobe/ccweb-add-on-sdk-types/sandbox/express-document-sdk";
+}

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/src/documentSandbox/code.js

@@ -0,0 +1,29 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import addOnSandboxSdk from "add-on-sdk-document-sandbox";
+const { runtime } = addOnSandboxSdk.instance;
+import { editor } from "express-document-sdk";
+import { drawDimensions, drawDimensionsRefactored } from "./dimensions.js";
+
+function start() {
+  runtime.exposeApi({
+    drawDimensions,
+    drawDimensionsRefactored,
+    logNode: () => {
+      const selectedNode = editor.context.selection[0];
+      console.log("Currently selected node", selectedNode);
+    },
+  });
+}
+
+start();

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/src/documentSandbox/dimensions.js

@@ -0,0 +1,200 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import addOnSandboxSdk from "add-on-sdk-document-sandbox";
+const { runtime } = addOnSandboxSdk.instance;
+const panelUIProxy = await runtime.apiProxy("panel");
+
+import { editor, constants } from "express-document-sdk";
+
+const createDimensionLine = ({
+  width,
+  height,
+  translation,
+  orientation,
+  margin,
+}) => {
+  const isVertical = orientation === "vertical";
+
+  // Adjust line start and end points based on orientation and margin
+  const lineStart = isVertical
+    ? { x: translation.x - margin, y: translation.y }
+    : { x: translation.x, y: translation.y - margin };
+  const lineEnd = isVertical
+    ? { x: translation.x - margin, y: translation.y + height }
+    : { x: translation.x + width, y: translation.y - margin };
+
+  const textValue = isVertical ? height : width;
+  const textPos = isVertical
+    ? { x: translation.x - margin - 10, y: translation.y + height / 2 }
+    : { x: translation.x + width / 2, y: translation.y - margin - 10 };
+
+  const line = editor.createLine();
+  line.setEndPoints(lineStart.x, lineStart.y, lineEnd.x, lineEnd.y);
+  line.startArrowHeadType = line.endArrowHeadType =
+    constants.ArrowHeadType.openTriangular;
+  editor.context.insertionParent.children.append(line);
+
+  const text = editor.createText();
+  text.text = `${Math.trunc(textValue).toString()}px`;
+  editor.context.insertionParent.children.append(text);
+  text.translation = textPos;
+
+  if (isVertical) {
+    text.setRotationInParent(-90, { x: 0, y: 0 });
+  }
+
+  const group = editor.createGroup();
+  editor.context.insertionParent.children.append(group);
+  group.children.append(line, text);
+
+  // Create and append extra lines at the extremities
+  for (let i = 0; i < 2; i++) {
+    const extraLine = editor.createLine();
+    const extraLineStart = isVertical
+      ? {
+          x: translation.x,
+          y: i === 0 ? translation.y : translation.y + height,
+        }
+      : {
+          x: i === 0 ? translation.x : translation.x + width,
+          y: translation.y,
+        };
+    const extraLineEnd = isVertical
+      ? {
+          x: translation.x - margin - 10,
+          y: i === 0 ? translation.y : translation.y + height,
+        }
+      : {
+          x: i === 0 ? translation.x : translation.x + width,
+          y: translation.y - margin - 10,
+        };
+
+    extraLine.setEndPoints(
+      extraLineStart.x,
+      extraLineStart.y,
+      extraLineEnd.x,
+      extraLineEnd.y
+    );
+    extraLine.stroke = editor.makeStroke({
+      color: { red: 1, green: 0, blue: 0, alpha: 1 },
+      dashPattern: [4, 2],
+      width: 0.5,
+    });
+    group.children.append(extraLine);
+    // editor.context.insertionParent.children.append(extraLine);
+  }
+
+  return group;
+};
+
+const drawDimensions = () => {
+  if (
+    editor.context.hasSelection &&
+    editor.context.selection[0].type === constants.SceneNodeType.mediaContainer
+  ) {
+    const selectedNode = editor.context.selection[0];
+    console.log(selectedNode);
+    const { translation: nodeTranslation } = selectedNode;
+    const { width: nodeWidth, height: nodeHeight } =
+      selectedNode.mediaRectangle;
+
+    const hLine = editor.createLine();
+    hLine.setEndPoints(
+      nodeTranslation.x,
+      nodeTranslation.y - 20,
+      nodeTranslation.x + nodeWidth,
+      nodeTranslation.y - 20
+    );
+
+    // translation is relative to the parent!!
+    editor.context.insertionParent.children.append(hLine);
+    hLine.startArrowHeadType = hLine.endArrowHeadType =
+      constants.ArrowHeadType.openTriangular;
+
+    const hText = editor.createText();
+    hText.text = `${Math.trunc(nodeWidth).toString()}px`;
+    editor.context.insertionParent.children.append(hText);
+
+    hText.translation = {
+      x: nodeTranslation.x + nodeWidth / 2,
+      y: nodeTranslation.y - 30,
+    };
+
+    const hGroup = editor.createGroup();
+    editor.context.insertionParent.children.append(hGroup);
+    hGroup.children.append(hLine, hText);
+
+    // Same for the vertical line
+    const vLine = editor.createLine();
+    vLine.setEndPoints(
+      nodeTranslation.x - 20,
+      nodeTranslation.y,
+      nodeTranslation.x - 20,
+      nodeTranslation.y + nodeHeight
+    );
+    vLine.startArrowHeadType = vLine.endArrowHeadType =
+      constants.ArrowHeadType.openTriangular;
+
+    editor.context.insertionParent.children.append(vLine);
+
+    const vText = editor.createText();
+    vText.text = `${Math.trunc(nodeHeight).toString()}px`;
+    editor.context.insertionParent.children.append(vText);
+
+    vText.translation = {
+      x: nodeTranslation.x - 30,
+      y: nodeTranslation.y + nodeHeight / 2,
+    };
+    vText.setRotationInParent(-90, { x: 0, y: 0 });
+
+    const vGroup = editor.createGroup();
+    editor.context.insertionParent.children.append(vGroup);
+    vGroup.children.append(vLine, vText);
+  } else {
+    panelUIProxy.flashWrongElement("drawDimensions");
+  }
+};
+
+const drawDimensionsRefactored = () => {
+  if (
+    editor.context.hasSelection &&
+    editor.context.selection[0].type === constants.SceneNodeType.mediaContainer
+  ) {
+    const selectedNode = editor.context.selection[0];
+    const { translation: nodeTranslation } = selectedNode;
+    const { width: nodeWidth, height: nodeHeight } =
+      selectedNode.mediaRectangle;
+
+    // Create horizontal dimension line
+    createDimensionLine({
+      width: nodeWidth,
+      height: nodeHeight,
+      translation: nodeTranslation,
+      orientation: "horizontal",
+      margin: 60,
+    });
+
+    // Create vertical dimension line
+    createDimensionLine({
+      width: nodeWidth,
+      height: nodeHeight,
+      translation: nodeTranslation,
+      orientation: "vertical",
+      margin: 20,
+    });
+  } else {
+    panelUIProxy.flashWrongElement("drawDimensionsRefactored");
+  }
+};
+
+export { drawDimensions, drawDimensionsRefactored };

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/src/documentSandbox/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "lib": ["ES2020"],
+        "module": "ES2020",
+        "target": "ES2020",
+        "typeRoots": ["@adobe/ccweb-add-on-sdk-types/add-on-sandbox-sdk"]
+    },
+    "include": ["./**/*"]
+}

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/src/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!--
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+-->
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="description"
+        content="Adobe Express Add-on template using JavaScript, the Authoring Sandbox, and Webpack" />
+    <meta name="keywords" content="Adobe, Express, Add-On, JavaScript, Authoring Sandbox, Adobe Express Document API" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document API template</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <sp-theme scale="medium" color="light" theme="express">
+        <sp-button id="logNode">Log selected node</sp-button>
+        <sp-button id="drawDimensions">Draw Dimensions</sp-button>
+        <sp-button id="drawDimensionsRefactored">Draw Dimensions (refactored)</sp-button>
+    </sp-theme>
+</body>
+
+</html>

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/src/manifest.json

@@ -0,0 +1,22 @@
+{
+    "testId": "3f33fbae-d15e-4604-9de5-ffa32ae3495e",
+    "name": "DOM Tutorial",
+    "version": "1.0.0",
+    "manifestVersion": 2,
+    "requirements": {
+        "apps": [
+            {
+                "name": "Express",
+                "apiVersion": 1
+            }
+        ]
+    },
+    "entryPoints": [
+        {
+            "type": "panel",
+            "id": "panel1",
+            "main": "index.html",
+            "documentSandbox": "code.js"
+        }
+    ]
+}

document-sandbox-samples/express-dimensions-addon/express-dimensions-end/src/styles.css

@@ -0,0 +1,26 @@
+/*
+Copyright 2024 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}
+
+sp-theme {
+  margin: 0 24px;
+}
+
+sp-button {
+  width: 100%;
+  margin-bottom: 20px;
+}