Merge branch 'gh-pages' of https://github.com/LivelyKernel/lively4-core…

… into gh-pages

src/components/widgets/ubg-cards-editor.html

@@ -128,7 +128,7 @@
     #form-layout {
       display: grid;
       grid-template-columns: min-content auto 2.5in;
-      grid-template-rows: repeat(7, auto) 1fr .5fr auto;
+      grid-template-rows: repeat(7, auto) 1fr auto .5fr auto;
       grid-template-areas:
         "isPrinted-key isPrinted-value preview"
         "id-key id-value preview"

src/components/widgets/ubg-cards-entry.js

@@ -112,7 +112,7 @@ export default class UBGCardEntry extends Morph {
       return;
     }
 
-    this.classList.toggle('is-bad', !!card.hasTag('bad'))
+    this.classList.toggle('is-bad', !!(card.hasTag('bad') || card.hasTag('deprecated')))
 
     const v = card.versions.last;
 
@@ -142,11 +142,12 @@ export default class UBGCardEntry extends Morph {
     const card = this.card;
     const id = card.getId();
     const name = card.getName();
+    const cardType = card.getType()
     const element = card.getElement();
     const cost = card.getCost();
     const text = card.getText();
     const notes = card.getNotes();
-    const aspects = [id, name, element, cost, text, notes];
+    const aspects = [id, name, cardType, element, cost, text, notes];
 
     const matching = aspects.some(aspect => (aspect + '').toLowerCase().match(new RegExp(filter, 'gmi')));
 

src/components/widgets/ubg-cards.js

@@ -1,12 +1,10 @@
 /* global globalThis */
 
-import Parser from 'src/external/bibtexParse.js';
 import Morph from 'src/components/widgets/lively-morph.js';
 import ContextMenu from 'src/client/contextmenu.js';
-import { Paper } from 'src/client/literature.js';
 import Bibliography from "src/client/bibliography.js";
-import pdf from "src/external/pdf.js";
 import { shake } from 'utils';
+import canvg from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
 
 import { serialize, deserialize } from 'src/client/serialize.js';
 import Card from 'demos/stefan/untitled-board-game/ubg-card.js';
@@ -777,6 +775,7 @@ export default class Cards extends Morph {
   /*MD ## Build MD*/
   async ensureJSPDFLoaded() {
     await lively.loadJavaScriptThroughDOM('jspdf', lively4url + '/src/external/jspdf/jspdf.umd.js');
+    await lively.loadJavaScriptThroughDOM('svg2pdf', lively4url + '/src/external/jspdf/svg2pdf.umd.js');
     await lively.loadJavaScriptThroughDOM('html2canvas', lively4url + '/src/external/jspdf/html2canvas.js');
   }
 
@@ -1071,6 +1070,32 @@ export default class Cards extends Morph {
 
     this.renderIsBad(doc, cardDesc, outsideBorder)
     this.renderVersionIndicator(doc, cardDesc, outsideBorder)
+    await this.renderSVG(doc, cardDesc, outsideBorder)
+  }
+
+  async renderSVG(doc, cardDesc, outsideBorder) {
+    const yourSvgString = `
+  <svg height="50" width="50">
+    <circle cx="50" cy="50" r="20" stroke="black" stroke-width="3" fill="red" />
+  </svg>
+`;
+    let container = document.getElementById('svg-container');
+    if (!container) {
+      container = <div id='svg-container'></div>;
+      document.body.append(container)
+    }
+    container.innerHTML = yourSvgString
+    const svgElement = container.firstElementChild
+    svgElement.getBoundingClientRect() // force layout calculation
+    const width = svgElement.width.baseVal.value
+    const height = svgElement.height.baseVal.value
+
+    await doc.svg(svgElement, {
+      x: 3,
+      y: 5,
+      width,
+      height
+    })
   }
 
   /*MD ### Rendering Card Types MD*/
@@ -1496,15 +1521,20 @@ export default class Cards extends Morph {
   }
 
   renderIsBad(doc, cardDesc, outsideBorder) {
-    if (!cardDesc.hasTag('bad')) {
-      return;
+    function slash(color, width=2, offset=lively.pt(0,0)) {
+      doc::withGraphicsState(() => {
+        doc.setDrawColor(color);
+        doc.setLineWidth(width)
+        doc.line(outsideBorder.right() + offset.x, outsideBorder.top() + offset.y, outsideBorder.left() + offset.x, outsideBorder.bottom() + offset.y);
+      });
     }
 
-    doc::withGraphicsState(() => {
-      doc.setDrawColor('#ff0000');
-      doc.setLineWidth(2*1)
-      doc.line(outsideBorder.right(), outsideBorder.top(), outsideBorder.left(), outsideBorder.bottom());
-    });
+    if (cardDesc.hasTag('bad')) {
+      slash('#ff0000', 2)
+    }
+    if (cardDesc.hasTag('deprecated')) {
+      slash('#ff00ff', 2, lively.pt(2, 2))
+    }
   }
 
   renderVersionIndicator(doc, cardDesc, outsideBorder) {