Using Kresmer Core Component

Intro

Kresmer Core Component (or just Kresmer component) is a web-component, written in Typescript, which you may embed into your web-site or web-application to publish your drawings. It is not a web component in a strict sense, as it is defined in Mozilla docs. However it is something that looks and behaves very similarly.

Kresmer component uses VueJS framework as an underlying technology. Technically Kresmer component is implemented as a Vue-component, and as so it may be used as any other Vue-component. It also means that the familiarity with Vue framework is recommended (although not required), if you are going to develop your own Kresmer library elements.

Quick Start

There two and a half ways to place the Kresmer component onto web-page and to render the drawing on it.

Vue-agnostic way {#Vue-agnostic-way}

If you don't use VueJS in your web-site or application, or don't care about interaction of your Vue code with the Kresmer code, you may instantiate the Kresmer component as a plain Javascript (Typescript) object:

import Kresmer from "kresmer";

const kresmer = new Kresmer("#divKresmer", {logicalWidth: 1500, logicalHeight: 1000});
const drawingData = await (await fetch("https://our.site/drawings/the-drawing-we-need-now.kre")).text();
kresmer.loadDrawing(drawingData);

<div id="divKresmer" style="width: 100%; height: 100%"></div>

When instantiated this way, Kresmer component creates an underlying Vue-component and mounts it at the point you pass to it as the first argument.

Vue-centric way

If you want to incorporate the Kresmer component into you Vue-component hierarchy, you should register the Kresmer component as any other Vue-component and instantiate it in your Vue-template:

<script setup lang="ts">
    import {ref} from "vue";
    import {KresmerVue} from "kresmer";

    const kresmerVue = ref<InstanceType<typeof KresmerVue>>();
    const kresmer = kresmerVue.model;
    const drawingData = await (await fetch("https://our.site/drawings/the-drawing-we-need-now.kre")).text();
    kresmer.loadDrawing(drawingData);
</script>

<template>
    <KresmerVue ref="kresmerVue" :width="w * 0.75" :height="h" />
</template>

You also must register the Kresmer plugin in any top-level Vue application that uses Kresmer component:

import {createApp} from "vue";
import {kresmerPlugin} from "kresmer";

const myApp = createApp(myApp, {prop1: 0, prop2: {}}).use(kresmerPlugin);

When instantiated this way, Kresmer component starts its lifecycle as a Vue-component At setup it creates a plain old Javascript object (which its calls model) and initializes it with the arguments (props) received from the outer Vue hierarchy. The Vue-incarnation of the Kresmer component exposes this model object as its field of the same name. The you can use this model for loading the drawing and manipulating the drawing elements just like in the first case, when you created this object directly.

You also may instantiate the Kresmer component as a topmost Vue application:

import {createApp} from "vue";
import {KresmerVue, kresmerPlugin} from "kresmer";

const kresmerVue = createApp(KresmerVue, {logicalWidth: 1500, logicalHeight: 1000}).use(kresmerPlugin).mount("#divKresmer")
    as InstanceType<typeof KresmerVue>;
const kresmer = kresmerVue.model;
const drawingData = await (await fetch("https://our.site/drawings/the-drawing-we-need-now.kre")).text();
kresmer.loadDrawing(drawingData);

But this does not make much sense, since it does not allow you to use Vue prop-passing mechanism and is just a little longer variant of the Vue-agnostic way.