2.17.0-beta-1; 0.18.0-42

Author: zsviczian

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-  "version": "2.16.1",
+  "version": "2.17.0-beta-1",
   "minAppVersion": "1.5.7",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",

package.json

@@ -24,7 +24,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.18.0-41",
+    "@zsviczian/excalidraw": "0.18.0-42",
     "chroma-js": "^3.1.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",

src/shared/Dialogs/Messages.ts

@@ -17,6 +17,14 @@ I build this plugin in my free time, as a labor of love. Curious about the philo
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://storage.ko-fi.com/cdn/kofi6.png?v=6" border="0" alt="Buy Me a Coffee at ko-fi.com"  height=45></a></div>
 `,
+"2.17.0":`
+## New
+- Phone UI from Excalidraw.com [#9996](https://github.com/excalidraw/excalidraw/pull/9996)
+
+## Fixed
+- side panel does not attach correctly when library is pinned [#2510](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2510)
+- Fixed print area when using marker frames and printing Slideshow to PDF
+`,
 "2.16.1":`
 ## Fixed
 - Based on a request from [Kevin](https://github.com/Kovah) referencing GDPR, I removed YouTube iframes from settings, scripts, etc., and replaced them with thumbnail images + links to YouTube. [#2234](https://github.com/zsviczian/obsidian-excalidraw-plugin/discussions/2234)`,

src/shared/Dialogs/PenSettingsModal.ts

@@ -369,7 +369,7 @@ export class PenSettingsModal extends Modal {
 		  .setName(fragWithHTML(`Stroke Width <b>${ps.strokeWidth === 0 ? "Not Set" : ps.strokeWidth}</b>`))
       .addSlider(slider =>
         slider
-          .setLimits(0,5,0.5)
+          .setLimits(0,5,0.1)
           .setValue(ps.strokeWidth)
           .onChange(value => {
             this.dirty = true;
@@ -421,7 +421,7 @@ export class PenSettingsModal extends Modal {
       .setDesc("If the stroke has an outline, this will mean the stroke color is the outline color, and the background color is the pen stroke's fill color. If the pen does not have an outline then the pen color is the stroke color. The Fill Style setting applies to the fill style of the enclosed shape, not of the line itself. The line can only have solid fill.")
       .addSlider(slider => 
         slider
-          .setLimits(0,8,0.5)
+          .setLimits(0,8,0.1)
           .setValue(ps.penOptions.outlineWidth)
           .onChange(value => {
             this.dirty = true;

src/utils/utils.ts

@@ -1086,10 +1086,10 @@ export function escapeRegExp (str:string) {
   return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 }
 
-export async function addYouTubeThumbnail (containerEl: HTMLElement, link:string, startAt?: number, style:string = "settings") {
+export function addYouTubeThumbnail (containerEl: HTMLElement, link:string, startAt?: number, style:string = "settings") {
   const wrapper = containerEl.createDiv({cls: `excalidraw-videoWrapper ${style}`});
 
-  const thumbnailUrl = await getYouTubeThumbnailLink(`https://www.youtube.com/watch?v=${link}`);
+  const thumbnailUrl = `https://i.ytimg.com/vi/${link}/maxresdefault.jpg`;
 
   const anchor = wrapper.createEl("a", {
     attr: {

src/view/components/menu/ObsidianMenu.tsx

@@ -257,7 +257,12 @@ export class ObsidianMenu {
 
   public renderButton (isMobile: boolean, appState: AppState) {
     return (
-      <>
+      <div className={clsx(
+        {
+          "ExcalidrawObsidianMenu--mobile": isMobile,
+          "ExcalidrawObsidianMenu": !isMobile,
+        },
+      )}>
         <label
           className={clsx(
             "ToolIcon",
@@ -288,7 +293,7 @@ export class ObsidianMenu {
         </label>
         {this.renderCustomPens(isMobile,appState)}
         {this.renderPinnedScriptButtons(isMobile,appState)}
-      </>
+      </div>
     );
   };
 

styles.css

@@ -290,6 +290,7 @@ textarea.excalidraw-wysiwyg {
 }
 
 .excalidraw .tray-zoom {
+  height: var(--default-button-size);
   pointer-events: initial;
   padding-bottom: 0.05rem;
   padding-top: 0.05rem;
@@ -318,9 +319,11 @@ textarea.excalidraw-wysiwyg {
   font-size: 0.45rem !important;
 }
 
+/*
 .Island > .Stack > .Stack {
   padding:0.2rem;
 }
+*/
 
 label.color-input-container > input {
   max-width: 5rem;
@@ -883,4 +886,22 @@ textarea.excalidraw-wysiwyg, .excalidraw input {
 
 .excalidraw .undo-redo-buttons button {
   width: 3em;
+}
+
+.ExcalidrawObsidianMenu--mobile label.ToolIcon {
+  margin-left: 4px;
+}
+
+.ExcalidrawObsidianMenu--mobile {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  row-gap: 4px;
+  justify-content: center;
+  align-items: center;
+}
+
+.ExcalidrawObsidianMenu {
+  display: flex;
+  flex-direction: column;
 }