Use a function on the panEnabled property

[Coeurdecedre]

Hi ! I would like to know if there was a way to use a function on the panEnabled property that return a boolean ? I tried but it doesn't work.

Thanks for your reply ! :)

[dash14]

Hi @Coeurdecedre,
Unfortunately, specifying a function to panEnabled is not supported at this time.
I guess the following steps can be used as an alternative, so please try them out.
(The following explanation assumes the Composition API, but if a different syntax is used, please read it accordingly.)

• Wrap configs in reactive() and then pass it to v-network-graph.

  const configs = reactive(
    defineConfigs({
      view: {
        panEnabled: false,
        // ...
      },
      // ...
    })
  )

  <v-network-graph ... :configs="configs" />

• Observe $store.state.keyboard.holdingShift changes by watch and assign to configs.view.panEnabled when the value is changed

  watch(() => /* store value */, value => {
    configs.view.panEnabled = value
  })

I hope this helps you.

[Coeurdecedre]

Thanks @dash14 , I'll use watchers then ! However, would it be possible for you to add the possibility of adding a function this this property in the near future ? Thanks again ^^

[dash14]

Hi @Coeurdecedre,
Thank you for your reply.
I realized that by using JavaScript's getter functionality, it seems to be possible to achieve your requirement.
Please check the below example:

• https://dash14.github.io/v-network-graph/examples/misc.html#specify-function-in-view-config

Node and edge configs require a function to be specified as a config in order to retrieve values from each object in some cases. However, since configs.view.* has a single value and the alternatives are available such as using getter/watch, it's not currently considering extending the view configs.

Best Regards,

[Coeurdecedre]

Hi @dash14 ! Thank you very much for your help ! However, it doesn't work for me :(

This is my code :

I'm using Options API and not Composition API. holdingShift is a computed that return a boolean to each change of shift key status. Do you have an idea to solve my problem ?

Best Regards.

[dash14]

Hi @Coeurdecedre,
Thanks for trying it out!
I think this in the getter does not point to a component and this.holdingShift is undefined.
It may work to create a function that binds this outside of the getter and call it inside the getter, as shown below.

  data() {
    const panEnabled = () => !this.holdingShift;
    return {
      vNGConfigs: {
        view: {
          get panEnabled() {
            return panEnabled();
          },

Best Regards,

[Coeurdecedre]

Hi @dash14 ! Thank you very much for your help !

I put the configs as a computed and it's working ! :)

Best Regards !

[dash14]

Hi @Coeurdecedre,
Thank you for your reply. I'm glad you got it resolved! 👍
Best Regards!