v-label probrem

[akira-kawahara]

v-label doesn't work in production. v-label always show at same position (0,0)

$ npm run dev │ Nuxt.js @ v2.14.6 │ │ ▸ Environment: development │ │ ▸ Rendering: client-side │ │ ▸ Target: static │

$ npm start │ Nuxt.js @ v2.14.6 │ │ ▸ Environment: production │ │ ▸ Rendering: client-side │ │ ▸ Target: static │

<v-label
        v-for="annotation in annotations"
        :key="annotation.id"
        :config="{
          x: annotation.x,
          y: annotation.y
        }"
      >
        <v-tag />
        <v-text
          :config="{
            text: 'No1. 0 * 0 * 0'
          }"
        />
</v-label>

[lavrton]

Can you make a small repo to reproduce the issue?

[akira-kawahara]

Create a new nuxt project as follows.

$ npx create-nuxt-app konva-test
  create-nuxt-app v3.4.0
  ✨  Generating Nuxt.js project in konva-test
  ? Project name: konva-test
  ? Programming language: JavaScript
  ? Package manager: Npm
  ? UI framework: Vuetify.js
  ? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
  ? Linting tools: ESLint
  ? Testing framework: None
  ? Rendering mode: Single Page App
  ? Deployment target: Static (Static/JAMStack hosting)
  ? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
  ? Continuous integration: None
  ? Version control system: Git
$ npm install --save vue-konva    

Replace the contents of the index.vue file with the following contents.

<template>
  <v-stage
    ref="stage"
    :config="stageSize"
  >
    <v-layer
      ref="layer"
    >
      <v-label
        v-for="annotation in annotations"
        :key="annotation.id"
        :config="{
          x: annotation.x,
          y: annotation.y
        }"
      >
        <v-tag
          :config="{
            fill: 'green',
            pointerDirection: 'down',
            pointerWidth: 10,
            pointerHeight: 10,
            lineJoin: 'round',
            shadowColor: 'black',
            shadowBlur: 10,
            shadowOffsetX: 10,
            shadowOffsetY: 10,
            shadowOpacity: 0.5,
            cornerRadius: 5
          }"
        />
        <v-text
          :config="{
            text: annotation.text,
            fontFamily: 'Calibri',
            fontSize: 18,
            padding: 10,
            fill: 'black'
          }"
        />
      </v-label>
    </v-layer>
  </v-stage>
</template>

<script>

import Vue from 'vue'
import VueKonva from 'vue-konva'
import Konva from 'konva'

Vue.use(VueKonva)
Vue.use(Konva)

export default {
  data () {
    return {
      stageSize: {
        width: 800,
        height: 800
      },
      annotations: [
        {
          id: '1',
          x: 100,
          y: 100,
          text: 'test'
        }
      ]
    }
  }
}
</script>

[lavrton]

I tried. I see a label just fine in the correct position.

[akira-kawahara]

I generated the distribution as follow.

$ npm run generate

dist.zip

Could you compare this to your result?

[lavrton]

I see the issue in your archive, but I can't reproduce. Can you make a full repository demo? So I can just npm install and generate with exact same packages version?

[akira-kawahara]

I made minimal project. but, a node_modules folder size is big, so I removed it. $ npm --version 6.14.8

konva-test.zip

[lavrton]

For now, I can't find the reason for that behavior. Probably with the new vue@3 and later new vue-konva it will resolve the issue.

[blue14753]

I faced the same problem, I tried the code on https://codesandbox.io/s/9j1zp, it works. But when I move the same code on my environment, the label freeze on the left top. Does it any resolve? thanks.

[oda79]

I am facing the same problem. This piece of code

          <v-layer>
            <v-label :config="configLabel">
              <v-tag :config="configTag" />
              <v-text :config="configText" />
            </v-label>
          </v-layer>

works exactly like this one

          <v-layer>
              <v-tag :config="configTag" />
              <v-text :config="configText" />
          </v-layer>

The tag's pointer and the text are displayed in the top left corner of the canvas. The label seems to be ignored. If I move the tag by setting its x,y, I can see there is no color box for the text, the pointer only. As a guess - might be a conflict with vuetify of some other dependencies?.....

As a solution, this can be done

          <v-layer>
            <v-group :config="configLabel">
              <v-rect :config="configBox" />
              <v-tag :config="configTag" />
              <v-text :config="configText" />
            </v-group>
          </v-layer>

But then, the (x,y) of the rect (color box around the text) and the tag should be controlled manually

[keehyuck]

You can solve the problem by changing "v-" to another prefix. I guess "v-label" might be a conflict with vuetify...

https://github.com/konvajs/vue-konva/blob/master/README.md Please see the bottom of the link above.