Jump to content
GreenSock

jboothe

MorphSVG shape error Angular Typings

Recommended Posts

There may be some typings errors with the MorphSVG Plugin when used in Angular 9. 

 

When structuring a tween with morphSVG {} object parameters, a type error occurs on the shape parameter (see image). Note, this works fine in CodePen.

 

this.tmax1 = TweenMax.to("#Arm-R_1", {
      duration: clapDur,
      morphSVG: {
        shape: "#Arm-R_2", // <-- shape parameter error
        origin: "0% 0%, 27% 0%",
        type: "rotational",
        shapeIndex: 0,
      },
      ease: "power1.inOut",
      repeat: 1,
      repeatDelay: 3,
      yoyo: true,
      delay: 0.5,
      onComplete: this.onComplete1,
      onStart: this.onStart1,
    });

 

Here's the full type error:

ERROR in src/app/components/qast-session/fan-stage/fan/fan-sets/yogi/yogi.component.ts:34:9 
  - error TS2322: Type '{ shape: string; origin: string; type: string; shapeIndex: number; }' is not assignable to type 'SVGPathValue'.
      Object literal may only specify known properties, and 'shape' does not exist in type 'SVGPathElement'.
    34         shape: "#Arm-R_2",
               ~~~~~~~~~~~~~~~~~
      node_modules/gsap/types/morph-svg-plugin.d.ts:4:5
        4     morphSVG?: SVGPathValue;
              ~~~~~~~~
        The expected type comes from property 'morphSVG' which is declared here on type 'TweenVars'

 

I can get it work in Angular if I do NOT use a morphSvg parameter object, but I need to pass the additional parameters:

this.tmax3 = TweenMax.to("#Arm-R_1", {
      duration: clapDur,
      morphSVG: "#Arm-R_2",
      xPercent: xPct,
      ease: Power1.easeIn,
      repeat: -1,
      yoyo: true,
    });

 

Thanks for your assistance in advance. 

 

Jeff Boothe

 

 

 

Screen Shot 2020-08-28 at 4.22.00 PM.png

Link to comment
Share on other sites

Thanks for pointing that out. Yeah, I think that's just a TypeScript definitions thing. Try replacing the contents of the gsap/types/morph-svg-plugin.d.ts file with:

declare namespace gsap {

  interface TweenVars {
    morphSVG?: SVGPathValue | gsap.plugins.MorphSVGVars;
  }
}

declare namespace gsap.plugins {

  interface MorphSVGPlugin extends Plugin {
    
    defaultRender?: Function;
    defaultType?: String;
    defaultUpdateTarget?: Boolean;

    /**
     * Converts SVG shapes into <path>s.
     *
     * ```js
     * MorphSVGPlugin.convertToPath("circle");
     * ```
     *
     * @param {DOMTarget} shape
     * @param {boolean} [swap] 
     * @returns {SVGPathElement[]} The converted paths
     * @memberof MorphSVGPlugin
     */
    convertToPath(shape: string | SVGPrimitive | (string | SVGPrimitive)[], swap?: boolean): SVGPathElement[];

    /**
     * Converts a rawPath into a string of path data.
     *
     * ```js
     * MorphSVGPlugin.rawPathToString(myRawPath);
     * ```
     *
     * @param {RawPath} rawPath
     * @returns {string} The converted path data
     * @memberof MorphSVGPlugin
     */
    rawPathToString(rawPath: RawPath): string;

    /**
     * Converts a string of path data into a RawPath.
     *
     * ```js
     * MorphSVGPlugin.stringToRawPath("M0,0 C100,20 300,50 400,0...");
     * ```
     *
     * @param {string} data
     * @returns {RawPath} The converted RawPath
     * @memberof MorphSVGPlugin
     */
    stringToRawPath(data: string): RawPath;
  }

  interface MorphSVGPluginClass extends MorphSVGPlugin {
    new(): PluginScope & MorphSVGPlugin;
    prototype: PluginScope & MorphSVGPlugin;
  }

  interface MorphSVGVars {
    shape: SVGPathValue;
    type?: "rotational" | "linear";
    origin?: string;
    shapeIndex?: number | "auto" | number[];
    precompile?: "log" | string[];
    map?: "size" | "position" | "complexity";
    render?: Function;
    updateTarget?: boolean;
  }

  const morphSVG: MorphSVGPluginClass;
}

declare const MorphSVGPlugin: gsap.plugins.MorphSVGPlugin;

declare module "gsap/MorphSVGPlugin" {
  export const MorphSVGPlugin: gsap.plugins.MorphSVGPlugin;
  export { MorphSVGPlugin as default };
}

declare module "gsap/dist/MorphSVGPlugin" {
  export * from "gsap/MorphSVGPlugin";
  export { MorphSVGPlugin as default } from "gsap/MorphSVGPlugin";
}

declare module "gsap/src/MorphSVGPlugin" {
  export * from "gsap/MorphSVGPlugin";
  export { MorphSVGPlugin as default } from "gsap/MorphSVGPlugin";
}

declare module "gsap/all" {
  export * from "gsap/MorphSVGPlugin";
}

Does that resolve things for you? 

  • Like 2
Link to comment
Share on other sites

Hi Jack, 

 

Thanks for the super fast reply. 

 

Still getting this error:

ERROR in src/app/components/qast-session/fan-stage/fan/fan-sets/yogi/yogi.component.ts:41:9 

- error TS2322: Type '{ shape: string; origin: string; type: string; shapeIndex: number; }' is not assignable to type 'string | SVGPathElement | MorphSVGVars'.
  Object literal may only specify known properties, and 'shape' does not exist in type 'SVGPathElement | MorphSVGVars'.

41         shape: "#Arm-R_2",
           ~~~~~~~~~~~~~~~~~

  node_modules/gsap/types/morph-svg-plugin.d.ts:4:5
    4     morphSVG?: SVGPathValue | gsap.plugins.MorphSVGVars;
          ~~~~~~~~
    The expected type comes from property 'morphSVG' which is declared here on type 'TweenVars'

 

Link to comment
Share on other sites

Silly typo on my part - I had "path" instead of "shape". I updated the code above. Please try again. 

  • Like 2
Link to comment
Share on other sites

Great work, Jack. That worked! Now for step 2.

 

Our build system runs npm install against the Bonus file, "gsap": "file:gsap-bonus.tgz". So until your changes make it into the next version, what is your recommendation for a short term solution to satisfy the build system. The only two options I see are:

  1. Unpack the tgz and make typings modifications and repack 
  2. Add you delta changes to our custom typings files within src ( update: tried this unsuccessfully due to duplicate declares)

What do you recommend? 

 

Link to comment
Share on other sites

Sure, it should be pretty easy to swap out that file and then npm pack the /node_modules/gsap/ directory to use as a new gsap-bonus.tgz file. I'd be happy to do that myself and send you the tgz if you'd like. I'm not sure what you meant by "duplicate declares" if you just swapped the contents of that one file. 

  • Like 1
Link to comment
Share on other sites

Thank you for the offer. I was pleased to see the structure of the uncompressed .tgz file so, I simply applied the modification to morph-svg-plugin.d.ts file the you posted above and we're in business. Thanks, for you amazing response times to this issue. (Jimmy John's got nothin' on you).  

 

Duplicate declares was TypeScript yelling that properties we're being declared more than once when I tried to add your changes to my custom typings file whilst leaving the original morph-svg-plugin.d.ts in place. 

 

When might we expect your changes to make it into then next production release? 

 

Thanks, Jeff

  • Thanks 1
Link to comment
Share on other sites

Great! Glad to hear you got things working. 

 

As for when the next update will go out, that's tough to say right now. Might be a few weeks. We try not to just rush a new release out every time there's a minor thing like this, ya know? It's usually best to batch things a bit. There aren't any known significant bugs that need addressing right now, but we're always working on improvements as you can probably tell from all the releases over time. 

 

Cheers!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Well, I think I will take you up on your offer as a sanity check. There seems to be some kind of cacheing going on. 

Here's my steps:

  1. Replace in src, gsap-bonus.tgz containing the package contents in addition to the modified morph-svg-plugin.d.ts file
  2. Delete node_modules/gsap
  3. npm install
  4. Open node_modules/gsap/types/morph-svg-plugin.d.ts and it contains the old version of morph-svg-plugin.d.ts
  5. Double clicking the gsap-bonus.tgz and opening package/types/morph-svg-plugin.d.ts shows the new morph-svg-plugin.d.ts

Head scratcher. 

Can I try your gsap-bonus.tgz

Link to comment
Share on other sites

Running the new gasp-bonus.tgz on our build system results in: 

 

error Verification failed while extracting gsap@file:gsap-bonus.tgz:
error Verification failed while extracting gsap@file:gsap-bonus.tgz:
error Integrity check failed:
error   Wanted: sha512-grIoiuTWV+HDv2dU/HYwh58PT1sVfG2Xg4nLwNJNvTUN9rASb2+g4XTjaWvkqDPij6dvaB0bc9sXP+k/5cnIfg==
error    Found: sha512-9E3dcD4tS3D12AvgTFtzpZDf/S/TqsH8w6XTjFhhDxDAVwOiT1bizqlZDZEmsM52tcjzichEU35m3s0sMpbJbA==

 

So there's more here than meets the eye. 

 

Link to comment
Share on other sites

The first problem sounds kinda like a caching issue maybe. Have you tried clearing that?

 

I'm not sure what's going on with your verification failure. 

 

I just sent you an email with the new gsap-bonus.tgz file I created for you. Let us know if that works okay for ya. 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...

 

Jack, 

I never formally thanked you for your help, so BIG THANKS. We deployed on time thanks to your prompt attention.  

 

FYI - The verification issue ended being SHA mismatch in the package-lock.json. 

 

  • Thanks 1
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.
×