microboard-ui-temp 0.1.107 → 0.1.109

package/dist/index.js

@@ -235403,7 +235403,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -249464,6 +249465,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id2 = "", defaultItemData, isGroupItem) {
@@ -275369,7 +275371,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -275382,9 +275385,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id2 = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id2 = "", urls, dimensions) {
     super(board, id2, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -275402,6 +275409,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -275457,8 +275467,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -275469,8 +275479,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -275610,7 +275620,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -275620,6 +275632,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -275784,6 +275809,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -279199,7 +279227,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }
@@ -439059,6 +439087,18 @@ var import_react353 = __toESM(require_react(), 1);
 // src/features/GameItems/CreateCardsModal.tsx
 var import_react352 = __toESM(require_react(), 1);
 var CREATE_CARDS_MODAL = Symbol("createCardsModal");
+var getImageDimensions = (file) => {
+  return new Promise((resolve2) => {
+    const img2 = new Image;
+    img2.src = URL.createObjectURL(file);
+    img2.onload = () => {
+      resolve2({
+        width: img2.naturalWidth,
+        height: img2.naturalHeight
+      });
+    };
+  });
+};
 function CreateCardsModal() {
   const { t: t11 } = useTranslation();
   const { closeModal: closeModal2 } = useUiModalContext();
@@ -439073,13 +439113,16 @@ function CreateCardsModal() {
   const cardsInputRef = import_react352.default.useRef(null);
   const handleCoverClick = () => coverInputRef.current?.click();
   const handleCardsClick = () => cardsInputRef.current?.click();
-  const createDeck2 = (backsideUrl, faceUrls) => {
+  const createDeck2 = (backsideUrl, faceUrls, dimensions) => {
     const cards2 = [];
+    const { width: width3, height: height4 } = dimensions;
+    const { width: defaultWidth, height: defaultHeight } = conf.DEFAULT_GAME_ITEM_DIMENSIONS;
+    const normalizedDimensions = width3 > height4 ? { width: defaultWidth * width3 / height4, height: defaultHeight } : { width: defaultWidth, height: defaultHeight * height4 / width3 };
     faceUrls.forEach((faceUrl, index4) => {
       const card = new Card(board, index4 + faceUrl, {
         backsideUrl,
         faceUrl
-      });
+      }, normalizedDimensions);
       cards2.push(card);
     });
     const itemsMap = {};
@@ -439114,8 +439157,9 @@ function CreateCardsModal() {
     setLoading(true);
     try {
       if (cards.length > 0 && cover) {
+        const dimensions = await getImageDimensions(cover);
         const urls = await uploadImages([cover, ...cards], board.getBoardId(), account.accessToken);
-        createDeck2(urls[0], urls.slice(1));
+        createDeck2(urls[0], urls.slice(1), dimensions);
       }
       closeModal2();
     } catch (err2) {

package/dist/spa.js

@@ -134733,7 +134733,7 @@ function proxy(initialObject = {}) {
 }
 function subscribe(proxyObject, callback, notifyInSync) {
   const proxyState = proxyStateMap.get(proxyObject);
-  if ((import.meta.env ? import.meta.env.MODE : undefined) !== "production" && !proxyState) {
+  if ((import.meta.env ? globalThis.__ENV__?.MODE ?? "" : undefined) !== "production" && !proxyState) {
     console.warn("Please use proxy object");
   }
   let promise;
@@ -134764,7 +134764,7 @@ function subscribe(proxyObject, callback, notifyInSync) {
 }
 function snapshot(proxyObject, handlePromise) {
   const proxyState = proxyStateMap.get(proxyObject);
-  if ((import.meta.env ? import.meta.env.MODE : undefined) !== "production" && !proxyState) {
+  if ((import.meta.env ? globalThis.__ENV__?.MODE ?? "" : undefined) !== "production" && !proxyState) {
     console.warn("Please use proxy object");
   }
   const [target, ensureVersion, createSnapshot] = proxyState;
@@ -134850,7 +134850,7 @@ var isObject6 = (x8) => typeof x8 === "object" && x8 !== null, proxyStateMap, re
   };
   const propProxyStates = /* @__PURE__ */ new Map;
   const addPropListener = (prop, propProxyState) => {
-    if ((import.meta.env ? import.meta.env.MODE : undefined) !== "production" && propProxyStates.has(prop)) {
+    if ((import.meta.env ? globalThis.__ENV__?.MODE ?? "" : undefined) !== "production" && propProxyStates.has(prop)) {
       throw new Error("prop listener already exists");
     }
     if (listeners3.size) {
@@ -134872,7 +134872,7 @@ var isObject6 = (x8) => typeof x8 === "object" && x8 !== null, proxyStateMap, re
     listeners3.add(listener);
     if (listeners3.size === 1) {
       propProxyStates.forEach(([propProxyState, prevRemove], prop) => {
-        if ((import.meta.env ? import.meta.env.MODE : undefined) !== "production" && prevRemove) {
+        if ((import.meta.env ? globalThis.__ENV__?.MODE ?? "" : undefined) !== "production" && prevRemove) {
           throw new Error("remove already exists");
         }
         const remove2 = propProxyState[3](createPropListener(prop));
@@ -235403,7 +235403,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -249464,6 +249465,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id2 = "", defaultItemData, isGroupItem) {
@@ -275369,7 +275371,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -275382,9 +275385,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id2 = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id2 = "", urls, dimensions) {
     super(board, id2, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -275402,6 +275409,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -275457,8 +275467,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -275469,8 +275479,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -275610,7 +275620,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -275620,6 +275632,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -275784,6 +275809,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -279199,7 +279227,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }
@@ -358202,7 +358230,7 @@ var ImgAuthClipboardModal = () => {
   const { app } = useAppContext();
   const onAuthClick = () => {
     closeModal2();
-    const clientId = import.meta.env.MIRO_CLIENT_ID;
+    const clientId = globalThis.__ENV__?.MIRO_CLIENT_ID ?? "";
     const redirectRoute = "/boards/blank?clipboard=true";
     const redirectUrl = window.location.origin + redirectRoute;
     window.location.href = "https://miro.com/oauth/authorize?response_type=code&client_id=" + clientId + "&redirect_uri=" + redirectUrl;
@@ -375574,8 +375602,8 @@ function ImportMiro() {
   const { openModal: openModal2 } = useUiModalContext();
   const fetchToken = async () => {
     try {
-      const clientId = import.meta.env.MIRO_CLIENT_ID;
-      const clientSecret = import.meta.env.MIRO_CLIENT_SECRET;
+      const clientId = globalThis.__ENV__?.MIRO_CLIENT_ID ?? "";
+      const clientSecret = globalThis.__ENV__?.MIRO_CLIENT_SECRET ?? "";
       const redirectRoute = "/boards/blank?clipboard=true";
       const redirectUrl = window.location.origin + redirectRoute;
       const response = await fetch(getApiUrl("/miro/token" + "?grant_type=authorization_code&client_id=" + clientId + "&client_secret=" + clientSecret + "&code=" + authCode + "&redirect_uri=" + redirectUrl), {
@@ -435448,9 +435476,9 @@ var TolgeeProviderProvider = import_react309.memo(({ children }) => {
     language: "en",
     availableLanguages: ["en", "ru"],
     observerType: "text",
-    apiUrl: import.meta.env.TOLGEE_API_URL,
-    apiKey: import.meta.env.TOLGEE_API_KEY,
-    projectId: import.meta.env.TOLGEE_PROJECT_ID,
+    apiUrl: globalThis.__ENV__?.TOLGEE_API_URL ?? "",
+    apiKey: globalThis.__ENV__?.TOLGEE_API_KEY ?? "",
+    projectId: globalThis.__ENV__?.TOLGEE_PROJECT_ID ?? "",
     staticData: {}
   }), []);
   return /* @__PURE__ */ import_react309.default.createElement(TolgeeProvider, {
@@ -435463,7 +435491,7 @@ function getTolgeeApiUrl(path5) {
   if (!path5) {
     path5 = "";
   }
-  return `${import.meta.env.TOLGEE_API_URL}/v2/projects/${import.meta.env.TOLGEE_PROJECT_ID}${path5}`;
+  return `${globalThis.__ENV__?.TOLGEE_API_URL ?? ""}/v2/projects/${globalThis.__ENV__?.TOLGEE_PROJECT_ID ?? ""}${path5}`;
 }
 
 // src/features/Templates/lib.ts
@@ -435641,7 +435669,7 @@ var CreateTemplate = () => {
         method: "get",
         headers: {
           Accept: "application/json",
-          "X-API-Key": import.meta.env.TOLGEE_API_KEY
+          "X-API-Key": globalThis.__ENV__?.TOLGEE_API_KEY ?? ""
         }
       });
       return (await response.json())._embedded.languages;
@@ -435656,7 +435684,7 @@ var CreateTemplate = () => {
       headers: {
         "Content-Type": "application/json",
         Accept: "application/json",
-        "X-API-Key": import.meta.env.TOLGEE_API_KEY
+        "X-API-Key": globalThis.__ENV__?.TOLGEE_API_KEY ?? ""
       },
       body: data
     }).then((response) => response.json()).catch((error3) => console.log(error3));
@@ -439059,6 +439087,18 @@ var import_react353 = __toESM(require_react(), 1);
 // src/features/GameItems/CreateCardsModal.tsx
 var import_react352 = __toESM(require_react(), 1);
 var CREATE_CARDS_MODAL = Symbol("createCardsModal");
+var getImageDimensions = (file) => {
+  return new Promise((resolve2) => {
+    const img2 = new Image;
+    img2.src = URL.createObjectURL(file);
+    img2.onload = () => {
+      resolve2({
+        width: img2.naturalWidth,
+        height: img2.naturalHeight
+      });
+    };
+  });
+};
 function CreateCardsModal() {
   const { t: t11 } = useTranslation();
   const { closeModal: closeModal2 } = useUiModalContext();
@@ -439073,13 +439113,16 @@ function CreateCardsModal() {
   const cardsInputRef = import_react352.default.useRef(null);
   const handleCoverClick = () => coverInputRef.current?.click();
   const handleCardsClick = () => cardsInputRef.current?.click();
-  const createDeck2 = (backsideUrl, faceUrls) => {
+  const createDeck2 = (backsideUrl, faceUrls, dimensions) => {
     const cards2 = [];
+    const { width: width3, height: height4 } = dimensions;
+    const { width: defaultWidth, height: defaultHeight } = conf.DEFAULT_GAME_ITEM_DIMENSIONS;
+    const normalizedDimensions = width3 > height4 ? { width: defaultWidth * width3 / height4, height: defaultHeight } : { width: defaultWidth, height: defaultHeight * height4 / width3 };
     faceUrls.forEach((faceUrl, index4) => {
       const card = new Card(board, index4 + faceUrl, {
         backsideUrl,
         faceUrl
-      });
+      }, normalizedDimensions);
       cards2.push(card);
     });
     const itemsMap = {};
@@ -439114,8 +439157,9 @@ function CreateCardsModal() {
     setLoading(true);
     try {
       if (cards.length > 0 && cover) {
+        const dimensions = await getImageDimensions(cover);
         const urls = await uploadImages([cover, ...cards], board.getBoardId(), account.accessToken);
-        createDeck2(urls[0], urls.slice(1));
+        createDeck2(urls[0], urls.slice(1), dimensions);
       }
       closeModal2();
     } catch (err2) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-ui-temp",
-  "version": "0.1.107",
+  "version": "0.1.109",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "module",
@@ -63,7 +63,7 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "microboard-temp": "^0.5.38",
+    "microboard-temp": "^0.5.40",
     "nanoid": "^5.1.5",
     "prop-types": "^15.8.1",
     "react-hot-toast": "2.4.1",