HT Vueの統合

（ここではデータモデル= DM =データコンテナ、GV = graphView = G2D = 2Dビュー）

プロジェクトを初期化します

VUE-cliのビルドプロジェクトを使用してください。次の問題に注意を生成します

1.これは、手動での設定を手動で機能を選択することをお勧めします

2.チェックルーター 

3.コンフィギュレーション設定Indedicated設定ファイル

 

4.プロジェクトが初期化と設定増加のvue.config.jsを完了した後

module.exportsは= {
    devServer：{
        ポート：12580
    }
}

私たちはこの競合を置くので、デフォルトのポート8080でプロジェクトを開始VUE、外出先へのポートに簡単です。

5. .eslintrc.jsは、コンフィギュレーションを高めます

  グローバル：{
    HT：真
  }

これまでのところ、このプロジェクトは、初期化完了します。

HT-関連リソースの紹介

1.コアライブラリの導入

下のパブリックディレクトリにコピーされるフォルダのlibs

2.はじめリポジトリ（それがプロジェクトの基礎となっている場合は、このステップをスキップすることができます）

ストレージフォルダは、パブリックディレクトリの下にコピーされます

次のコード3. index.htmlを挿入

    <スクリプト>
      window.htconfig = {
        デフォルト： {
          convertURL：機能（URL）{
            //にconsole.log（URL）;
            リターンのストレージ/ '+ URL;
          }
        }
      }
    </ SCRIPT>
    <スクリプトのsrc = 'libsに/コア/ ht.js'> </ SCRIPT>
    <スクリプトSRC = 'libsに/プラグイン/ HT-modeling.js'> </ SCRIPT>
    <スクリプトSRC = 'libsに/プラグイン/ HT-obj.js'> </ SCRIPT>
    <スクリプトSRC = 'libsに/プラグイン/ HT-edgetype.js'> </ SCRIPT>
    <スクリプトSRC = 'libsに/プラグイン/ HT-form.js'> </ SCRIPT>
    <スクリプトSRC = "libsに/プラグイン/ HT-vector.js"> </ SCRIPT>

これまでのところ完全に、プロジェクトをアップすることができ構築するためのプロジェクトとコマンドラインNPMの実行から実行する役割、アクセスのブラウザはlocalhost：12580（手動フロントポート設定）Accessプロジェクト

正しくHTデバッグリソースアクセス

ビュー/ Home.vue、新ht.Nodeノードで作成されたライフサイクルを増やし、コンソールが正しい出力を持っているかどうかを確認するために出てCONSOLE.LOG。

<テンプレート>
  <のdivクラス= "ホーム">
    <IMG ALT = "Vueのロゴ" SRC = "../資産/ logo.png">
    <HelloWorldのMSG = "あなたのVue.jsアプリケーションへようこそ" />
  </ div>
</テンプレート>

<スクリプト>
// @ / SRCにエイリアスがあります
'@ /コンポーネント/ HelloWorld.vue' からの輸入のHelloWorld

輸出のデフォルト{
  名前：「ホーム」、
  成分：{
    こんにちは世界
  }、
  作成：関数（）{ console.log（HT）。 Nましょう=新しいht.Node（）; console.log（N） } } </ SCRIPT>

コンソール出力ノードノードを開くには、正しいブラウザは、HTの導入に成功を表す場合

ノードは、次のステップとして出力することができます。そうでなければ、このようeslint構成として、プロセスのフロントをチェックし、インポートが成功したかどうかスクリプト

最初の完全なAトポロジマップ 

最初のステップを完了した後、あなたはgraphViewのVUEコンポーネントのHTに挿入する必要があり、我々は異なるライフサイクルで異なる作業を行うと、作成したときGV DMを作成し、中にアセンブリに取り付けられたとき、GVをマウントし、そして新しいエンティティを作成

1.変更次のテンプレート

<テンプレート>
  <のdivクラス= 'ホームHT-ビュー'>
      
  </ div>
</テンプレート>

以下2.増加のスタイル参照

<スタイルスコープ> 
.ht- ビュー{
    テキストベース整列：左;
    位置：相対;
    幅：800ピクセル;
    高さ：500pxなど。
    マージン：自動;
    国境：1pxの固体#CCC。
}
</スタイル>

3.修正スクリプトプログラムは、次を参照して、上記

輸出のデフォルト{
  名前：「ホーム」、
  成分：{
    // こんにちは世界
  }、
  作成：関数（）{ this.gv =新しいht.graph.GraphView（）; this.dmこの= .gv.dmを（）; }、搭載：関数（）{this.gv.addToDOM（この$ EL。）; ノード=新しいましょうht.Node（）; この.dm.add（ノード）。}} </ SCRIPT>

保存された後、熱を更新するブラウザは、以下のチャートインターフェイスを取得します

トップに示すように小型の1/4は、完全な構築するために、HT-VUE最も簡単なプロジェクト、コンピュータのこの時間を残しました。私たちは自由に操作するとHome.vueは、表示領域の中央に効果を見るインターフェースを更新するためのコードを変更することができます。

再利用可能なコンポーネントの2D

上記第1の小トポロジーを実現するが、直接我々は、我々はこのコンポーネント再利用を検討するトポロジ多くのページがある場合は、目的を達成するためにホーム・コンポーネントを変更するには、我々は少し説明が再利用可能なコンポーネントで提供されて起動することができます。

我々は独立したのではなく、排他的コンポーネントとして彼をサポートしたいので、HTアセンブリを示す各ビューは、データを管理するためのデータモデルを持つことになりますため、これがDMであるが、再利用することができ、私たちは、次のステップは、なぜになります。このチュートリアルを紹介します。

基于此考虑 vue 组件的 dataModel 考虑由父节点管理，子节点 dataModel 借用 props 传递使用，但是带来一个问题是父节点如果没有传入 dm，子节点应该有一个默认的 dataModel 作使用，那么我们应该给 props 赋个默认值，这个值应该是子节点 graphView 默认的 dataModel。于是我们会想到给 vue 子组件 data 包裹一个 graphView，但是不幸的是 vue 组件 props 构建先于 data，所以导致无法给 props/dm 赋默认值，所以我们选择在 vue 生命周期 beforeCreate 来手动建立 graphView 节点。

于上考虑我们在 components 下面创建一个 HT2D.vue 的组件，代码参考如下

<template>
  <div>
      <div ref="htview"></div>
  </div>
</template>

<script>
export default {
    name: 'HT2D',
    props: {
        dm: {
            default: function() {
                return this.g2d.dm();
            }
        }
    },
    data: function() { return { } }, watch: { dm: function() { this.g2d.dm(this.dm); this.g2d.fitContent(); } }, beforeCreate: function() { this.g2d = new ht.graph.GraphView(); }, beforeMount: function() { this.g2d.dm(this.dm); }, mounted: function() { this.g2d.addToDOM(this.$refs.htview); this.g2d.fitContent(); } } </script>

然后在 views 下建一个 Embeded2D.vue 的组件使用这个 HT2D.vue，并传入一个 dm 来构建视图，可以在组件生命周期 created 加入一段测试代码，参考如下

<template>
    <div>
        <HT2D class='ht-view' :dm='dm' ref='g2d'></HT2D>
    </div>
</template>

<script>
import HT2D from '@/components/HT2D'

export default {
    name: 'Embeded2D',
    components: {
        HT2D,
    },
    data: function() {
        return { dm: new ht.DataModel(), } }, created: function() { let node = new ht.Node(); node.setImage('group_image'); this.dm.add(node); }, mounted: function() { } } </script> <style> .ht-view { text-align: left; position: relative; width: 800px; height: 500px; margin: auto; border: 1px solid #ccc; } </style>

接下来修改下路由让这个组件展示出来，先修改下 router/index.js 的 routes 参考如下

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/2d',
    name: '2d',
    component: () => import( '../views/Embeded2D.vue') }, ]

然后在修改下 APP.vue 的 route-link template 参考如下

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/2d">2D</router-link>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
    
  </div>
</template>　　

刷新浏览器并点击路由导航 2D，会出现如下视图，代表第一个可复用 2D 组件创建成功。

 

 这个案例中是 Embeded2D.vue 嵌套 HT2D 组件，然后以 props 的方式传入 dm 参数，那么可以在父组件中直接修改 dm 来改变视图展示，比如在 Embeded.vue 生命周期 mounted 做个小测试，参考如下

    mounted: function() {
        setTimeout(() => {
            let dm = new ht.DataModel();

            let node = new ht.Node();
            node.p(100, 100);
            dm.add(node);

            node = new ht.Node();
            node.p(200, 200);
            dm.add(node);

            this.dm = dm;
        }, 3000);
    }

在 mounted 里面过 3S 重新声明一个 dm 并复制给 dm 对象。视图会同步刷新，这里注意下箭头函数和 vue function this 指向的问题，如上是没有问题的。

注意下 APP.vue 有给 router-view 加上 keep-alive 属性，这样在路由切换的时候不会直接销毁老的组件，可把 keep-alive 属性去掉，然后在 Home 和 2D 之间切换并操作下 2D 视图，比如缩放平移，然后再切换回来就能发现问题所在。到此一个基础 HT 案例和可复用 HT 组件已经介绍完。 

可复用组件进阶

上述我们一直强调 gv 的复用，并独立出来 dm，因为 HT 数据呈现的视图可以共用一个 dataModel，以一个 ListView 为例介绍

ListView 介绍 (http://www.hightopo.com/guide/guide/core/listview/ht-listview-guide.html)

首先像 HT2D 一样我们在 components 下面建一个 HTList.vue 的文件，参考如下，注意去掉 fitContent 等方法，这些是 2D 视图专用的

<template>
  <div>
      <div ref="htview"></div>
  </div>
</template>

<script>
export default {
    name: 'HTList',
    props: {
        dm: {
            default: function() {
                return this.list.dm();
            }
        }
    },
    data: function() {
        return {

        }
    },
    watch: {
        dm: function() {
            this.list.dm(this.dm);
        }
    },

    beforeCreate: function() {
        this.list = new ht.widget.ListView();
    },
    beforeMount: function() {
        this.list.dm(this.dm);
    },
    mounted: function() {
        this.list.addToDOM(this.$refs.htview);
    },
}
</script>

然后在 views 下面创建一个 MultiHTView.vue 的组件使用 HT2D 和 HTList，并传入相同的 dm，参考如下

<template>
    <div class = 'ht-view'>
        <HT2D class='ht-2d' :dm='dm'></HT2D>
        <HTList class='ht-list' :dm='dm'></HTList>
    </div>
</template>

<script>
import HT2D from '@/components/HT2D'
import HTList from '@/components/HTList'

export default {
    name: 'Embeded2D',
    components: {
        HT2D,
        HTList,
    },
    data: function() {
        return {
            dm: new ht.DataModel(),
        }
    },
    created: function() {
        let node = new ht.Node();
        node.setImage('group_image');
        node.setName("I'm group");
        this.dm.add(node);
    },
}
</script>

<style scoped>
.ht-view, .ht-2d, .ht-list {
    position: relative;
    box-sizing: border-box;
}
.ht-view {
    text-align: left;
    width: 810px;
    margin: auto;
}
.ht-2d, .ht-list{
    width: 400px;
    height: 300px;
    float: left;
    margin-right: 10px;
    border: 1px solid #ccc;
}
.ht-list{
    margin-right: 0;
}
</style>

 最后修改下路由，router/index.js 参考增加如下路由

  {
    path: '/multi',
    name: 'multi',
    component: () => import( '../views/MultiHTView.vue')
  }

app 增加如下 router-link

<router-link to="/multi">Multi</router-link>

　然后刷新页面进入 Multi 出现如下则成功

 

 这里 HT2D 和 HTList 都是 MultiHTView 组件传入的同一个 dm，可参考前面方法对 dm 做一段测试，MultiHTView 增加一段生命周期 mounted 测试

    mounted: function() {
        setTimeout(() => {
            var dm = new ht.DataModel();

            let node = new ht.Node();
            node.p(100, 100);
            node.setName("I'm n1 node");
            dm.add(node);

            node = new ht.Node();
            node.p(200, 200);
            node.setName("I'm n2 node");
            dm.add(node);

            this.dm = dm;
        }, 3000);
    }

 至此一个基本的 HT 2D 视图 + HT 2D 视图组件构建 + HT 多组件嵌套 vue 案例介绍基本完成。