TypeScript配列の特殊なソート

Question

少し説明が難しいのですが、なるべくコードなども簡略化してみますので、読んでくだされば幸いです(T_T)

https://github.com/holiber/sl-vue-tree

↑こちらの、リストのソートをするライブラリを使用しました。

//拡張子は.vueです。vueクラスコンポーネントを使ってます。

<template>
  <div class="objectList">
        <div class="objectArea">
          <SlVueTree ref="SlVueTree" v-model="objectList">

          </SlVueTree>
        </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

import SlVueTree from 'sl-vue-tree'


@Component({
  components: {
    SlVueTree
  }
})

export default class ObjectList extends Vue {


  get objectList() {
      return this.$store.getters.objectList;
  }

  set objectList(updatedObjectList) {
      this.$store.dispatch('edit/sortObjectList' , updatedObjectList)
  }
}
</script>

<style lang="scss">

</style>

vuexとこちらのライブラリを組み合わせる場合、上のように、getとsetを使います。
setはドラッグ&ドロップした時に呼ばれます。

set objectList(updatedObjectList) {
this.$store.dispatch('edit/sortObjectList' , updatedObjectList)
}

↑ここでは、ソートされた結果(updatedObjectList)を元々のobjectListに格納しています。
(objectList = updatedObjectListみたいなことをする)
そうすることで、

get objectList() {
return this.$store.getters.objectList;
}

ここが変化し、ソートができます。
データはgetとバインドされています。

しかし、こちらのライブラリ、
objectListのモデルに含まれた"関数"に関しては、updatedObjectListに入ってくれないです。
updatedObjectListに入ってくれるのはプロパティのみです。

したがって、

objectList=updatedObjectList

のように上書きするのではなく、

元々のobjectListをupdatedObjectListに従ってソートするということをしたいです。

例えば、

元々のobjectListが

let objectList = [

  {
    objectId : 1,
    objectName : "オブジェクト1",
    objectList : [],
    isLeaf : false,
    children : []
  },
  {
    objectId : 2,
    objectName : "オブジェクト2",
    objectList : [],
    isLeaf : true
  },
  {
    objectId : 3,
    objectName : "オブジェクト3",
    objectList : [],
    isLeaf : false, 
    children : []
  },
  {
    objectId : 4,
    objectName : "オブジェクト4",
    objectList : [],
    isLeaf : true
  },
  {
    objectId : 5,
    objectName : "オブジェクト5",
    objectList : [],
    isLeaf : false,
    children : []
  },

]

で、updatedObjectListが

let updatedObjectList = [
  {
    objectId : 5,
    objectName : "オブジェクト5",
    objectList : [],
    isLeaf : false,
    children : []
  },
  {
    objectId : 3,
    objectName : "オブジェクト3",
　　 objectList : [],
    isLeaf : false,
    children : [
      {
        objectId : 2,
        objectName : "オブジェクト2",
        objectList : [],
        isLeaf : true
      },
      {
        objectId : 1,
        objectName : "オブジェクト1",
        objectList : [],
        isLeaf : false,
        children : [
          {
            objectId : 4,
            objectName : "オブジェクト4",
            objectList : [],
            isLeaf : true
          },
        ]
      },
    ]
  }
]

だった場合、

objectList = updatedObjectListとするのではなく

"objectListをソートして、"updatedObjectListと同じ構造にするためにはどのようにすればよろしいでしょうか。

親になることができるobjectは

isLeaf : false

というパラメーターを持ちます。
そして、子はchildrenという名前のパラメーターに入ります。
しかし、childrenに格納することに加えて、同じものを、objectListというパラメーターに格納したいです。
linq-es2015という,typescript用のlinqモジュールも使えますので、linqを使うこともできます。
ただc#のlinqと全く同じメソッドが定義されている訳ではありません。

-追記-

dataにプロパティで任意のプロパティを持っても、関数が渡されなかった
以下はvuexのルートモデルの一部

import { ImageObject } from './image/imageObject'

import { ObjectData } from './objectData'

export class Object{

    public title : string = ""

    public isLeaf : boolean = true
    
    public data : ObjectData = new ObjectData("")

    constructor(object : {objectType : string , objectId : number}){

        if(object.objectType == "imageObject"){
            this.data = new ImageObject(object)
            //imageObjectはobjectDataをextendしている
        }
    }

}

import { OuterRect } from './rect/outerRect'

/** 挿入データ(文字とか画像とか)の状態のうち、全てのデータで共有する要素 */
export class ObjectData{

    public objectId : number = 0

    public objectType : string = ""

    public name : string = ""

    public selected : boolean = false

    public outerRect : OuterRect = new OuterRect("string")  

    constructor(objectType : string){
        this.objectType = objectType
        if(objectType!=""){
            this.outerRect = new OuterRect(objectType)
        }
    }

    public changeState(state : { value : string , stateType : string }){

       
    }

}

このようにobjectDataにも関数はありますし、outerRectにも関数があるのですが、それらが順番を変えたりすると(objectList = updatedObjectListをすると)、消えてしまいます。

data.outerRect.function is not a function とエラーが出てしまいます。

-追記-

そしてやはり並び替えだとうまくいきます

let objectList = this.objectList

this.objectList = []

for(var i = 0; i < updatedObjectList.length; i++){
            this.objectList.unshift(Enumerable.asEnumerable(objectList).Where(x=>x.objectId==updatedObjectList[i].objectId).ToArray()[0])
}

ただし、これはグループ化をしておらず、一階層目だけでオブジェクトを入れ替えているだけです。
階層構造も含めて
updatedObjectと同じ構造にしたいです...

-追記-
https://ja.stackoverflow.com/questions/47499/typescript-%E9%85%8D%E5%88%97%E3%81%AE%E7%89%B9%E6%AE%8A%E3%81%AA%E3%82%BD%E3%83%BC%E3%83%88

こちら、スタックオーバーフローにほとんど同じ質問をしたところ、マルチポストであるというご指摘を頂きました。
配列をソートする方法自体に関しては、スタックオーバーフローの方で回答をいただけました。

Answer 1

ノードの型が下記のインターフェイスで定義されているので、data プロパティに任意のデータを持たせれば良いのではないでしょうか。たぶん関数でも問題なく保持されます。インターフェイスに定義されていない objectId なども data プロパティに移したほうが良いかなと思います。

interface ISlTreeNodeModel<TDataType> {
    title: string;
    isLeaf?: boolean;
    children?: ISlTreeNodeModel<TDataType>[];
    isExpanded?: boolean;
    isSelected?: boolean;
    isDraggable?: boolean;
    isSelectable?: boolean;
    data?: TDataType;
}
interface ISlTreeNode<TDataType> extends ISlTreeNodeModel<TDataType> {
    isVisible?: boolean;
    isFirstChild: boolean;
    isLastChild: boolean;
    ind: number;
    level: number;
    path: number[];
    pathStr: string;
    children: ISlTreeNode<TDataType>[];
}

Comments

[退会済みユーザー]

yhgさん！！！！！
ありがとうございます
なるほどです、任意のプロパティや関数はdataに持たせるのですね、やってみます！！！

[退会済みユーザー]

すみません、dataで持ってみたのですが、やはり関数は渡されませんでした...。

[退会済みユーザー]

今、setのfunctionを消してgetだけにしてみたのですが、その場合、vuexのstateと直接バインドすることになってしまうため、

Computed property "objectList" was assigned to but it has no setter.

とエラーが出てしまうのですが、ちゃんと動きました。
入れ替えを行ってもちゃんと関数ごと入れ替えされました...

[退会済みユーザー]

すみません、関数ごと入れ替えれたと思ったのですが、表示上入れ替えれただけで、objectListのデータ自体は何も変わってませんでした...
やはりsetの中で明示的に処理をしたいです...

[yhg]

原因わかりました。こちらのメソッドのせいでメソッド全削除されてますね。この部分を書き換えてきちんとクラスインスタンスとしてディープコピーできるようにすれば上手くいくかと思います。あと Issue 出しておくのも良いかもしれません。
https://github.com/holiber/sl-vue-tree/blob/master/src/sl-vue-tree.js#L715

[退会済みユーザー]

本当にありがとうございます...
でもごめんなさい、ちょっと難しいです...
JSON.stringifyをしてしまうと、関数も文字列化してしまうということでしょうか..

あと、親に子を含ませた時に、やりたい処理ができてしまった(やりたい処理が生まれてしまった)のですが、そういった場合も考慮すると入れ替えの方が良いのかなとか思ってしまいました
入れ替えの処理のなかに自分がやりたい処理を入れたりできそうなので

[yhg]

JSON.stringify すると関数が全て消えます。
JSON.stringify({ a: function(){} }) → {} のようになります。
やりたいことが出来たのなら良いのですが、一応ライブラリを書き換える方法も記載しておきますね。

1. github.com 上のリポジトリを Fork し、ローカルに git clone します。
2. NPM で適当なディープコピーのライブラリを dependencies としてインストールし、該当箇所を書き換えます。
3. npm run build でビルドします。
4. git で変更をコミットし、リポジトリに push します。
5. アプリケーション側に戻って package.json の dependencies にある sl-vue-tree のバージョンの部分を your-username/sl-vue-tree#master のようにします。
6. npm install しなおします。上手くいかない場合は lock ファイル削除すると良いです。

以上です。プルリク送ったり Issue 建てて公式に変更が取り込まれれば自分でメンテしなくて良くなるので、積極的にプルリク送りましょう。

[退会済みユーザー]

ありがとうございます。
やりたいことできてないです...。
やっぱり objectList をソートして updatedObjectList と同じ構造にするというのをしたいです...。

ありがとうございます。
JSON.stringifyだとDeep Copyできないとか、その他Deep Copyの記事などは見つけたので、試してみたいです...。

[退会済みユーザー]

----------------------------------------------------------------------------------------------------------------------------------------
リポジトリのフォーク

GitHub のアカウントを持っていると、自分のアカウント内に既存のリポジトリの複製をつくれたりします。この操作はフォークと呼ばれます。

共有されていないリポジトリに対して書き込むことはできません。一方、フォークしたリポジトリは自分の所有物なので、自由に更新ができます。

つまり、自分のフォークを作れば、共有されていないリポジトリをベースとした作業も （勝手に） 始められることになります。

GitHub には、自分のフォーク内の更新を反映するよう、オリジナルの管理者に依頼する手段があります。この依頼を受け取った管理者が、依頼どおりにオリジナルを更新すれば、リポジトリを共有しない共同開発の実現です。

こちらの方式の場合、調整が必要なのは、オリジナルを更新 （マージ） する際の修正内容だけです。事前に開発者間のコーディネートが不要なため、オープンソースプロジェクト向きと言われています。CreateJS のドキュメント翻訳はこちらの方式をとっています。
----------------------------------------------------------------------------------------------------------------------------------------

フォークという言葉が分からなかったので調べていたのですが、こんな風に書いてありました。
それでなんですが、フォークして、自分のアカウント内のsl-vue-treeのモジュールのcopyの関数を書き換えてから、自分のフォーク内の更新を反映するよう、オリジナルの管理者に依頼するという手順ではダメなのでしょうか。
ディープコピー用のライブラリをインストールとかbuildする意味ってなんなのでしょうか。
yhgさんが提示してくださった手順では何が起きているのでしょうか。

[退会済みユーザー]

copy(entity) {
return this.deepClone(entity)
},

deepClone(object) {

console.log("deepClone") //ここで関数が呼ばれているか確認できる

let node;
if (object === null) {
node = object;
} else if (Array.isArray(object)) {
node = object.slice(0) || [];
node.forEach(n => {
if (typeof n === 'object' && n !== {} || Array.isArray(n)) {
n = deepClone(n);
}
});
} else if (typeof object === 'object') {
node = Object.assign({}, object);
Object.keys(node).forEach(key => {
if (typeof node[key] === 'object' && node[key] !== {}) {
node[key] = deepClone(node[key]);
}
});
} else {
node = object;
}
return node;
}

今試しに、ライブラリの中を直接上のようにしてみたのですが、deepClone関数は呼ばれていませんでした...。
yhgさんが提示してくださった手順でないと、ライブラリの変更は反映できないのでしょうか。

[退会済みユーザー]

https://ja.stackoverflow.com/questions/47499/typescript-%E9%85%8D%E5%88%97%E3%81%AE%E7%89%B9%E6%AE%8A%E3%81%AA%E3%82%BD%E3%83%BC%E3%83%88

こちら、スタックオーバーフローにほとんど同じ質問をしたところ、マルチポストであるというご指摘を頂きました。
配列をソートする方法自体に関しては、スタックオーバーフローの方で回答をいただけました...。

[yhg]

たぶん src 以下のファイルをいじってるので実行されないのだと思います。 dist/sl-vue-tree.js を修正すると実行されると思いますが、minify されてるので読みづらいです。ソートのほう解決されたのなら何よりです。

[退会済みユーザー]

なるほどです、実際に呼ばれてるのはminの方なのですね...。
提示してくださった手順のうちの3のビルドというのは、
このminを作り直すということでしょうか。
普通に npm run build コマンドを利用すると、distフォルダが作られて、その中身をサーバーにアップロードすることでwebアプリをそのサーバーで使えるようになると思うのですが、ライブラリやモジュールを書き換えることとどう関連するのでしょうか。

[yhg]

npm run build するのはライブラリのディレクトリ内で、です。src 以下のファイルを編集しても実際に読み込まれるのは minify されたほうなのでライブラリのほうをビルドしなおす必要があるということです。

[退会済みユーザー]

なるほどです！！！
分かってきました。
ライブラリのディレクトリ内でnpm run build のコマンドが使え、そしてそれでminファイルをビルドできるとは知りませんでした。
やっと提示してくださった6っつの手順の意味が分かってきました。