Deploy preview for PR 65 🛫

pr-preview/pr-65/js/draw/app.js

@@ -1,6 +1,6 @@
 import { Application, Container } from "../pixi.min.mjs";
 
-const SPEED = 0.3;
+const SPEED = 0.5;
 const MARGIN = 100;
 
 const pixi = {

pr-preview/pr-65/js/draw/box.js

@@ -1,7 +1,57 @@
-import { Graphics, BitmapText, Assets } from "../pixi.min.mjs";
+import { Graphics, Assets, Sprite, Text, TextStyle } from "../pixi.min.mjs";
 import { getContainer, getElements } from "./app.js";
 
-const TOP_MARGIN = 20;
+const MARGIN = 20;
+const PADDING = 5;
+
+function createText(text, { fontFamily, fontSize, fontWeight, align, fill }) {
+  return new Text({
+    text,
+    style: new TextStyle({
+      fontFamily,
+      fontSize,
+      fontWeight,
+      align,
+      fill,
+    }),
+    resolution: 2,
+  });
+}
+
+function createObjectModal(lines) {
+  const text = createText(lines.join("\n"), {
+    fontFamily: "sans-serif",
+    fontSize: 14,
+    fontWeight: "normal",
+    align: "center",
+    fill: "black",
+  });
+
+  const width = text.width + PADDING;
+  const height = text.height + 2 * MARGIN;
+
+  const box = new Graphics();
+  box.roundRect(0, 0, width + PADDING, height + PADDING, 5);
+  box.fill("#f1f1f1");
+  box.stroke({ width: 1, color: "#000000" });
+  box.addChild(text);
+  text.position.set((box.width - text.width) / 2, MARGIN);
+
+  return box;
+}
+
+function renderObjectModal(objectModal, x, y) {
+  const container = getContainer();
+  objectModal.position.set(x, y);
+  container.addChild(objectModal);
+}
+
+function removeObjectModal(objectModal) {
+  const container = getContainer();
+  if (objectModal !== null) {
+    container.removeChild(objectModal);
+  }
+}
 
 export function addBox(box) {
   const elements = getElements();
@@ -12,64 +62,72 @@ export function addBox(box) {
 
 export function buildBox(object) {
   const box = new Graphics();
-  box.roundRect(object.x, object.y, object.width, object.height, object.radius);
+  box.roundRect(0, 0, object.width, object.height, object.radius);
   box.fill(object.color);
   box.stroke({ width: 2, color: "#000000" });
   return box;
 }
 
+export function addHoverModal(box, lines) {
+  let objectModal = null;
+
+  box
+    .on("pointerover", () => {
+      objectModal = createObjectModal(lines, box.width);
+      const objectModalWidth = parseInt(objectModal.width);
+      const boxWidth = parseInt(box.width);
+      const x = parseInt(box.position.x);
+      const xPosition = (boxWidth - objectModalWidth) / 2 + x;
+      const y = box.position.y;
+
+      renderObjectModal(objectModal, xPosition, y);
+
+      box.on("pointerdown", () => {
+        removeObjectModal(objectModal);
+      });
+    })
+    .on("pointerout", () => {
+      removeObjectModal(objectModal);
+    });
+}
+
 export function addTitleToBox(title, box) {
-  const boxTitle = new BitmapText({
-    text: title,
-    style: {
-      fontFamiliy: "sans-serif",
-      fontSize: 16,
-      align: "center",
-      fill: "black",
-      fontWeight: "bold",
-    },
+  const boxTitle = createText(title, {
+    fontFamily: "sans-serif",
+    fontSize: 20,
+    align: "center",
+    fill: "black",
+    fontWeight: "bold",
   });
   box.addChild(boxTitle);
-  boxTitle.y = box.y + TOP_MARGIN;
-  boxTitle.x = box.x + (box.width - boxTitle.width) / 2;
-  return boxTitle.y;
+  boxTitle.position.set((box.width - boxTitle.width) / 2, MARGIN);
+  return boxTitle.position.y + boxTitle.height + 12;
 }
 
 export function addLinesToBox(lines, box, y) {
-  let prevY = y;
-  lines.forEach((line) => {
-    const boxLine = new BitmapText({
-      text: line,
-      style: {
-        fontFamily: "sans-serif",
-        fontSize: 14,
-        align: "center",
-        fill: "black",
-      },
-    });
-    box.addChild(boxLine);
-    boxLine.y = prevY + 10;
-    boxLine.x = box.x + (box.width - boxLine.width) / 2;
-    prevY = boxLine.y + boxLine.height;
+  const text = createText(lines.join("\n"), {
+    fontFamily: "sans-serif",
+    fontSize: 16,
+    fontWeight: "normal",
+    align: "center",
+    fill: "black",
+    width: box.width,
   });
-
-  return prevY;
+  box.addChild(text);
+  text.position.set((box.width - text.width) / 2, y);
+  return text.position.y + text.height;
 }
 
 export async function svgElementToPixiSprite(src) {
-  const sprite = await Assets.load({
-    src,
-    data: {
-      parseAsGraphicsContext: true,
-    },
-  });
-  const graphics = new Graphics(sprite);
-  return graphics;
+  const asset = await Assets.load(src);
+  const sprite = Sprite.from(asset);
+  sprite.width = 50;
+  sprite.height = 50;
+  return sprite;
 }
 
 export function addImageToBox(sprite, box, y) {
   box.addChild(sprite);
-  sprite.y = y;
-  sprite.x = box.x + (box.width - sprite.width) / 2;
-  return sprite.y + sprite.height;
+  sprite.position.set((box.width - sprite.width) / 2, y);
+  return sprite.position.y + sprite.height;
 }

pr-preview/pr-65/js/draw/link.js

@@ -0,0 +1,121 @@
+import { Graphics } from "../pixi.min.mjs";
+import { getContainer } from "./app.js";
+
+function fromPoints(boxFrom) {
+  return [boxFrom.x + boxFrom.width / 2, boxFrom.y + boxFrom.height];
+}
+
+function toPoints(boxFrom, boxTo) {
+  const fromX = boxFrom.x + boxFrom.width / 2;
+  const fromY = boxFrom.y + boxFrom.height;
+  const toX = boxTo.x + boxTo.width / 2;
+  const toY = boxTo.y;
+
+  let cpFromY, cpToY, cpFromX, cpToX;
+
+  if (toY > fromY) {
+    cpFromY = (toY - fromY) / 2 + fromY;
+    cpToY = cpFromY;
+  } else {
+    cpFromY = (fromY - toY) / 2 + fromY;
+    cpToY = toY - (fromY - toY) / 2;
+  }
+  if (toX > fromX) {
+    cpFromX = (toX - fromX) / 4 + fromX;
+    cpToX = (3 * (toX - fromX)) / 4 + fromX;
+  } else {
+    cpFromX = (3 * (fromX - toX)) / 4 + toX;
+    cpToX = (fromX - toX) / 4 + toX;
+  }
+  return [cpFromX, cpFromY, cpToX, cpToY, toX, toY];
+}
+
+function bezierCurve({
+  fromX,
+  fromY,
+  cpFromX,
+  cpFromY,
+  cpToX,
+  cpToY,
+  toX,
+  toY,
+  color,
+}) {
+  const curve = new Graphics();
+  curve.moveTo(fromX, fromY);
+  curve.bezierCurveTo(cpFromX, cpFromY, cpToX, cpToY, toX, toY);
+  curve.stroke({ width: 2, color });
+  return curve;
+}
+
+export function drawBezierLink(link) {
+  const [fromX, fromY] = fromPoints(link.from);
+  const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
+    link.from,
+    link.to
+  );
+
+  let curve = bezierCurve({
+    fromX: fromX + link.xShift,
+    fromY: fromY,
+    cpFromX: cpFromX + link.xShift,
+    cpFromY: cpFromY,
+    cpToX: cpToX + link.xShift,
+    cpToY: cpToY,
+    toX: toX + link.xShift,
+    toY: toY,
+    color: link.color,
+  });
+
+  const boxFrom = link.from.renderedBox;
+  const boxTo = link.to.renderedBox;
+
+  const container = getContainer();
+  boxFrom.on("pointerdown", () => {
+    boxFrom.on("pointermove", () => {
+      container.removeChild(curve);
+      const [fromX, fromY] = fromPoints(boxFrom);
+      const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
+        boxFrom,
+        boxTo
+      );
+      curve = bezierCurve({
+        fromX: fromX + link.xShift,
+        fromY: fromY,
+        cpFromX: cpFromX + link.xShift,
+        cpFromY: cpFromY,
+        cpToX: cpToX + link.xShift,
+        cpToY: cpToY,
+        toX: toX + link.xShift,
+        toY: toY,
+        color: link.color,
+      });
+      container.addChild(curve);
+    });
+  });
+
+  boxTo.on("pointerdown", () => {
+    boxTo.on("pointermove", () => {
+      container.removeChild(curve);
+      const [fromX, fromY] = fromPoints(boxFrom);
+      const [cpFromX, cpFromY, cpToX, cpToY, toX, toY] = toPoints(
+        boxFrom,
+        boxTo
+      );
+      curve = bezierCurve({
+        fromX: fromX + link.xShift,
+        fromY: fromY,
+        cpFromX: cpFromX + link.xShift,
+        cpFromY: cpFromY,
+        cpToX: cpToX + link.xShift,
+        cpToY: cpToY,
+        toX: toX + link.xShift,
+        toY: toY,
+        color: link.color,
+      });
+      container.addChild(curve);
+    });
+  });
+
+  container.addChild(curve);
+}

pr-preview/pr-65/js/draw/render.js

@@ -2,29 +2,29 @@ export async function renderObjects(objects) {
   const datatypes = objects.datatypes;
   const associations = objects.associations;
 
-  for (const collection of Object.values(associations)) {
-    for (const association of collection) {
-      await association.draw();
-    }
-  }
-
   for (const elements of Object.values(datatypes)) {
     const { collection, oneToMany, oneToOne } = elements;
 
+    for (const object of collection) {
+      await object.draw();
+    }
+
     for (const links of Object.values(oneToMany)) {
       for (const link of links) {
-        await link.draw();
+        link.draw();
       }
     }
 
     for (const links of Object.values(oneToOne)) {
       for (const link of links) {
-        await link.draw();
+        link.draw();
       }
     }
+  }
 
-    for (const object of collection) {
-      await object.draw();
+  for (const collection of Object.values(associations)) {
+    for (const association of collection) {
+      association.draw();
     }
   }
 }

pr-preview/pr-65/js/lib/generate-svg.js

@@ -1,5 +1,9 @@
 export async function textToSVG(text) {
-  const svg = await MathJax.tex2svg(text).firstElementChild;
+  const mathjaxContainer = await MathJax.tex2svgPromise(text);
+  const svg = mathjaxContainer.firstElementChild;
+
+  svg.setAttribute("width", "50px");
+  svg.setAttribute("height", "50px");
 
   const src =
     "data:image/svg+xml;base64," +

pr-preview/pr-65/js/lib/graphic-primitives.js

@@ -44,39 +44,10 @@ export function drawTextLines(ctx, lines, boxCenterX, y, n) {
 }
 
 export function drawBezierLink(ctx, link) {
-  // const boxFrom = link.from;
-  // const boxTo = link.to;
-  // const fromX = boxFrom.x + boxFrom.width / 2;
-  // const fromY = boxFrom.y + boxFrom.height;
-  // const toX = boxTo.x + boxTo.width / 2;
-  // const toY = boxTo.y;
-  // if (toY > fromY) {
-  //   var cpFromY = (toY - fromY) / 2 + fromY;
-  //   var cpToY = cpFromY;
-  // } else {
-  //   cpFromY = (fromY - toY) / 2 + fromY;
-  //   cpToY = toY - (fromY - toY) / 2;
-  // }
-  // if (toX > fromX) {
-  //   var cpFromX = (toX - fromX) / 4 + fromX;
-  //   var cpToX = (3 * (toX - fromX)) / 4 + fromX;
-  // } else {
-  //   cpFromX = (3 * (fromX - toX)) / 4 + toX;
-  //   cpToX = (fromX - toX) / 4 + toX;
-  // }
   // ctx.save();
   // ctx.strokeStyle = link.color;
   // ctx.lineWidth = 2;
   // ctx.beginPath();
-  // ctx.moveTo(fromX + link.xShift, fromY);
-  // ctx.bezierCurveTo(
-  //   cpFromX + link.xShift,
-  //   cpFromY,
-  //   cpToX + link.xShift,
-  //   cpToY,
-  //   toX + link.xShift,
-  //   toY
-  // );
   // ctx.stroke();
   // ctx.restore();
 }