Jump to content
Search Community

Loading vuejs componentn tweice add som transform

mindthegap test
Moderator Tag

Recommended Posts

When a component is loaded a second time, a transform is added. When I put 2 components with a simple drag and drop twice on the page, the second componennt adds some tranformationsions to the svg element which I add to the draggable.

 

image elment off the first component:

<image data-v-bc36c152="" xlink:href="/img/qualle.87fd74d4.svg" x="50" y="500" height="100px" width="100px" class="icon e0" data-svg-origin="50 500" style="transform-origin: 0px 0px; touch-action: none; cursor: grab; user-select: none;"></image>

 

seconds element: transform added, image not visible:

<image data-v-bc36c152="" xlink:href="/img/qualle.87fd74d4.svg" x="50" y="500" height="100px" width="100px" class="icon e0" data-svg-origin="50 500" transform="matrix(1,0,0,1,0,-728)" style="transform-origin: 0px 0px; touch-action: none; cursor: grab; user-select: none;"></image>

 

 

 

 

the vuejs component,  the interesst part is where the draggable is added. I think I catched the right svg element (query on the refs name)

 

<template>
  <div class="stammbaum-container"  :ref="'' + classname">
  

  <svg version="1.1" class="svg-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">

    <text x="45"  y="270" class="t0 small" text-anchor="middle" > ABCDEF </text>


    <g stroke="f1f1f1" fill="orange" stroke-width="0.5" id="targetcircle">
      <circle cx="45"  cy="220" r="40" class="c0" />
    </g>

    <image xlink:href="../assets/stammbaum-icon/qualle.svg" x="50" y="500" height="100px" width="100px"  class="icon e0"></image>

  </svg>
  
  </div>
</template>


<script>
import { gsap } from "gsap";
import { Draggable } from "gsap/Draggable";

export default {
  name: 'Stammbaum',
  data: function () {
     return {
      counter: 0,
      x: 0,
      y: 0,
      endScale: 0.6,
     }
  },
  props: {
    msg: String,
    classname: String,
  },
  created() {
  },
  methods: {
  },
  mounted() {
    gsap.registerPlugin(Draggable);
    
    var that = this;
    console.log("mounted start", this.classname, this.$refs);
    // console.log(this.$refs[this.classname]);
    var e0 = this.$refs[this.classname].querySelector(".e0")
    console.log("e0",e0);
    var c0 = this.$refs[this.classname].querySelector(".c0");
    // console.log("c0",c0);
    var t0 = this.$refs[this.classname].querySelector(".t0");
    console.log("t0",t0);
    console.log("first elements referenced");

    Draggable.create(e0, {
      bounds:"svg",
      onDragStart: function(){
        console.log("onDragStart");
        gsap.to(e0, {duration: 0.4, scale: 1.4, transformOrigin: "center" });
        // console.log(this.target);
      },
      onDragEnd: function() {
        console.log("onDragEnd");
        if (!(this.hitTest(c0) ) ) {
          gsap.to(e0, {duration: 0.4, x: 0, y: 0, scale: 1.0})
        }
      },
      onDrag: function() {
        if (this.hitTest(c0)) {
          console.log("hittest 0");
          var target1x = c0.getBBox().x
          var target1y = c0.getBBox().y
          var star1x = e0.getBBox().x
          var star1y = e0.getBBox().y
          // console.log("1");
          gsap.to(e0, {duration: 0.4, x:target1x-star1x, y:target1y-star1y, scale: that.endScale })
          // console.log("2");
           gsap.to(c0, {duration: 0.4, opacity: 0.0});
          // console.log("3");
          gsap.to(t0, {duration: 0.4, opacity: 1.0});
          Draggable.get(e0).disable();
        }
      }
    });
  
  },
}
</script>


<style scoped>
.stammbaum-container{
  left: 0px;

}
.svg-container {
  display:block;
  position:relative;
  width:800px;
  background:#f8f7f7;
  margin:20px auto;

}
</style>


 

Link to comment
Share on other sites

See the Pen VwmZedg by fillthegap (@fillthegap) on CodePen

 

not that easy!

i made this pen, very simple, you move the animal to the circle and it disappears.

if i use the same component again, the animal disappears when the pen is started, and the svg image tag shows an also transform property.

 

unfortunately this does not work in the pen, not even if I duplicate the component. 

Link to comment
Share on other sites

Hello mindthegap,

 

This was definitely a bunch of little things that together culminated on the issue you are reporting.

 

First, is the fact that something in codepen is not right. It doesn't like the self-closing component you have: "<dragcomp [...] />" - I got it to work by changing it to being a normal open and close tag: "<dragcomp [...]></dragcomp>".

 

Then, in my broswer (Firefox) the image does not appear if I am inside CodePen's editor but it does if I am in the debug view - no codepen editor at all. Which means, there's something funky there. Probably a security or CORS issue with iFrames.

 

Then, and this was the biggest tripper I found, is the fact that you are setting the draggable bounds to be "svg". So, the second image is being constrained inside the first SVG because that's the first "svg" node GSAP finds. Join that the default behaviour of an SVG overflow property to be "hidden", your image cannot be seen but you can inspect it and see the bounding box being inside the first SVG. To solve this issue, you should add a $ref to the SVG itself and refer to that when instantiating Draggable.

 

You should also add specific $refs to the other elements you want to target directly instead of using query selectors, there isn't much of a benefit to doing the this.$ref[this.classname].querySelector('.class') if you can simply do this.$ref['someId' + this.classname]

 

I hope that helps.

  • Like 3
Link to comment
Share on other sites

27 minutes ago, Dipscom said:

Hello mindthegap,

 

This was definitely a bunch of little things that together culminated on the issue you are reporting.

 

First, is the fact that something in codepen is not right. It doesn't like the self-closing component you have: "<dragcomp [...] />" - I got it to work by changing it to being a normal open and close tag: "<dragcomp [...]></dragcomp>".

ok, I should see it.

27 minutes ago, Dipscom said:

 

Then, in my broswer (Firefox) the image does not appear if I am inside CodePen's editor but it does if I am in the debug view - no codepen editor at all. Which means, there's something funky there. Probably a security or CORS issue with iFrames.

 

Then, and this was the biggest tripper I found, is the fact that you are setting the draggable bounds to be "svg". So, the second image is being constrained inside the first SVG because that's the first "svg" node GSAP finds. Join that the default behaviour of an SVG overflow property to be "hidden", your image cannot be seen but you can inspect it and see the bounding box being inside the first SVG. To solve this issue, you should add a $ref to the SVG itself and refer to that when instantiating Draggable.

 

thanks, that's  the solution, I switched all selectors to ref id + basename of the component and it works great.

 

27 minutes ago, Dipscom said:

 

You should also add specific $refs to the other elements you want to target directly instead of using query selectors, there isn't much of a benefit to doing the this.$ref[this.classname].querySelector('.class') if you can simply do this.$ref['someId' + this.classname]

 

I hope that helps.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...