Skip to content
Snippets Groups Projects
Select Git revision
  • fb334a8339721cbc226c6445d91effdd160d84a2
  • test default protected
  • master protected
  • niki_edit_branch
  • feat/custom-css
  • feat/redesign-improvements-10
  • feat/redesign-improvements-8
  • feat/redesign-fixes-3
  • feat/pirstan-changes
  • feat/separate-import-thread
  • feat/dary-improvements
  • features/add-pdf-page
  • features/add-typed-table
  • features/fix-broken-calendar-categories
  • features/add-embed-to-articles
  • features/create-mastodon-feed-block
  • features/add-custom-numbering-for-candidates
  • features/add-timeline
  • features/create-wordcloud-from-article-page
  • features/create-collapsible-extra-legal-info
  • features/extend-hero-banner
21 results

utils.py

Blame
  • Canvas.vue 2.29 KiB
    <script>
    import { fabric } from "fabric";
    
    export default {
      props: ["width", "height", "redrawFunction"],
      mounted() {
        fabric.Object.prototype.set({
          transparentCorners: false,
          borderColor: "#ff00ff",
          cornerColor: "#ff0000",
        });
    
        this.canvas = new fabric.Canvas(this.$refs.canvas);
      },
      data() {
        return {
          redrawing: false,
        };
      },
      methods: {
        async redraw(options) {
          if (this.redrawing) {
            console.info("Already drawing, skipping redraw.");
            return;
          }
    
          this.redrawing = true;
    
          console.info(`Redrawing canvas with options: `, options);
    
          try {
            await this.redrawFunction(this.canvas, options);
          } catch (exception) {
            console.error("Error redrawing: ", exception);
          }
    
          this.redrawing = false;
        },
        downloadImage() {
          this.canvas.discardActiveObject().renderAll();
    
          let link = document.createElement("a");
    
          if (window.fileName !== undefined) {
            link.download = window.fileName;
          } else {
            link.download = `Generator-${new Date().toLocaleString()}.png`;
          }
    
          link.href = this.$refs.canvas.toDataURL();
    
          link.click();
        },
      },
    };
    </script>
    
    <template>
      <div class="flex flex-col gap-2">
        <div class="flex justify-between items-center h-8 mb-4">
          <div class="flex gap-3 items-center head-alt-md">
            <i class="ico--eye"></i>
            <h2>Náhled</h2>
          </div>
          <div class="flex gap-2">
            <button class="btn btn--icon" @click="downloadImage">
              <div class="btn__body-wrap">
                <div class="btn__body">Stáhnout</div>
                <div class="btn__icon">
                  <i class="ico--download"></i>
                </div>
              </div>
            </button>
          </div>
        </div>
        <div class="object-contain h-[115vw] md:h-[unset]">
          <canvas
            id="canvas"
            ref="canvas"
            class="w-full border border-gray-300 drop-shadow-md duration-150"
            :class="{ blur: redrawing }"
            :width="width"
            :height="height"
          ></canvas>
        </div>
      </div>
    </template>
    
    <style>
    .canvas-container {
      width: 100% !important;
      height: auto !important;
    }
    
    .canvas-container > * {
      width: 100% !important;
      height: auto !important;
    }
    
    .lower-canvas {
      position: relative !important;
    }
    </style>