From db9065320cb7af32f3bc162fba26d002cf3cc26b Mon Sep 17 00:00:00 2001
From: Stefan Werner <stefan.werner@infai.org>
Date: Wed, 13 Dec 2023 00:53:19 +0100
Subject: [PATCH] new examples

---
 .idea/workspace.xml               | 21 +++++++++---------
 web/src/ui/editor/LibraryMenu.jsx |  2 +-
 web/src/ui/editor/Puzzle.jsx      | 37 +++++++++++++------------------
 3 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 81679ad..aae6504 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,6 +6,7 @@
   <component name="ChangeListManager">
     <list default="true" id="46754857-918a-4304-a3a5-1e2951421385" name="Changes" comment="new examples">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/web/src/ui/editor/LibraryMenu.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/ui/editor/LibraryMenu.jsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/web/src/ui/editor/Puzzle.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/web/src/ui/editor/Puzzle.jsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -480,7 +481,7 @@
       <workItem from="1702334085400" duration="4385000" />
       <workItem from="1702339638425" duration="2127000" />
       <workItem from="1702409655039" duration="7192000" />
-      <workItem from="1702421257531" duration="2814000" />
+      <workItem from="1702421257531" duration="3598000" />
     </task>
     <task id="LOCAL-00001" summary="x">
       <created>1689330419674</created>
@@ -811,14 +812,6 @@
       <option name="project" value="LOCAL" />
       <updated>1691896932213</updated>
     </task>
-    <task id="LOCAL-00086" summary="new examples">
-      <option name="closed" value="true" />
-      <created>1702422695743</created>
-      <option name="number" value="00086" />
-      <option name="presentableId" value="LOCAL-00086" />
-      <option name="project" value="LOCAL" />
-      <updated>1702422695743</updated>
-    </task>
     <task id="LOCAL-00087" summary="new examples">
       <option name="closed" value="true" />
       <created>1702423162240</created>
@@ -827,7 +820,15 @@
       <option name="project" value="LOCAL" />
       <updated>1702423162240</updated>
     </task>
-    <option name="localTasksCounter" value="88" />
+    <task id="LOCAL-00088" summary="new examples">
+      <option name="closed" value="true" />
+      <created>1702424338628</created>
+      <option name="number" value="00088" />
+      <option name="presentableId" value="LOCAL-00088" />
+      <option name="project" value="LOCAL" />
+      <updated>1702424338628</updated>
+    </task>
+    <option name="localTasksCounter" value="89" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
diff --git a/web/src/ui/editor/LibraryMenu.jsx b/web/src/ui/editor/LibraryMenu.jsx
index 057e1b5..a95715b 100644
--- a/web/src/ui/editor/LibraryMenu.jsx
+++ b/web/src/ui/editor/LibraryMenu.jsx
@@ -61,7 +61,7 @@ const LibraryMenu = ({
         type="primary"
         icon={<BookOutlined />}
         onClick={() => setCollapsed(!collapsed)}
-        style={{ width: '40vw' }}
+        style={{ width: '45vw', minWidth: '300' }}
       >
         <BibTeXViewer entry={meta} short setIsGood={() => null} isGood inline />
         <div style={{ maxWidth: '10vw', display: 'inline' }}>
diff --git a/web/src/ui/editor/Puzzle.jsx b/web/src/ui/editor/Puzzle.jsx
index c56af20..3b98382 100644
--- a/web/src/ui/editor/Puzzle.jsx
+++ b/web/src/ui/editor/Puzzle.jsx
@@ -47,29 +47,19 @@ console.log("handleInteractionStart", mouseX, mouseY)
   }
 }
 
-const handleInteractionStart2 = (event) => {
-  console.log('handleInteractionStart2', event)
-  const mouseX = event.clientX
-  const mouseY = event.clientY
-  const element = event.target
-  console.log('handleInteractionStart2', element, event)
 
-  const rect = element.getBoundingClientRect()
-
-  const ax = rect.left
-  const ay = rect.bottom
-  const bx = rect.right
-  const by = rect.bottom
-  const cx = rect.left + rect.width / 2
-  const cy = rect.top
-
-  if (pointInTriangle(mouseX, mouseY, ax, ay, bx, by, cx, cy)) {
-    event.preventDefault()
-  }
-}
 const handleInterActionElement = (element, event) => {
-  const mouseX = event.clientX
-  const mouseY = event.clientY
+    let mouseX, mouseY;
+    if (event.touches?.length) {
+      const touch = event.touches[0];
+
+      // Get the touch coordinates
+      mouseX = touch.clientX;
+      mouseY = touch.clientY;
+    } else {
+      mouseX = event.clientX
+      mouseY = event.clientY
+    }
 
   const rect = element.getBoundingClientRect()
   const ax = rect.left
@@ -144,7 +134,7 @@ function layout(grid, layoutId, items, width, height, callback) {
   TRIANGLE_CENTERS = []
   const origin_x = (window.innerWidth - max_length) / 2
   const origin_y = (window.innerHeight - max_length) / 2
-  //console.log({ max_length, origin_x, origin_y, window })
+
   // Calculate positions for each item
   items.forEach((item) => {
     const isDragging = item.isDragging()
@@ -234,12 +224,15 @@ const MutableTriangle = ({
         style={{
           height: idToSize(fullId),
           width: idToSize(fullId),
+
           zIndex: fullId.length,
+
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           dominantBaseline: 'middle',
           textAnchor: 'middle',
+
           clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',
           pointerEvents: 'visiblePainted',
           backgroundColor: stringToColour(fullId, 0.5),