htui-yllkbz 1.3.23 → 1.3.26

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "htui-yllkbz",
-  "version": "1.3.23",
+  "version": "1.3.26",
+  "port": "8082",
   "typings": "types/index.d.ts",
   "main": "lib/htui.common.js",
   "style": "lib/htui.css",
@@ -23,9 +24,10 @@
     "core-js": "^3.6.5",
     "element-ui": "^2.14.1",
     "html2canvas": "1.0.0-rc.1",
-    "htui-yllkbz": "^1.2.35",
+    "htui-yllkbz": "^1.3.24",
     "mavon-editor": "^2.10.4",
     "moment": "^2.29.1",
+    "oidc-client": "^1.11.5",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-kst-auth": "^2.1.15",

package/src/App.vue

@@ -4,36 +4,40 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2021-12-21 17:25:49
+ * @LastEditTime: 2022-05-11 17:52:26
 -->
 <template>
   <div id="app">
-    <SelectTable :columns="[]"
-                 :config="JSON.stringify({
-           key: 'code',
-           disabled:false,
-           clearable:true,
-           value:undefined,
-           name:'id',
-           ajax:{
-          type:'get',
-          url: '/asset-model/api/app/asset-model-instance',
-           },  
-         text:'name',
-         })"></SelectTable>
-
+    <el-button type=""
+               @click="test">测试</el-button>
+    <HtSelectBaseData dataTypeId="chengbenzhongxin"
+                      v-model="state.value"
+                      @change="change"></HtSelectBaseData>
+    <HtSelectBaseData dataTypeId="positions"
+                      :multiple="false"
+                      v-model="state.value"
+                      @change="change"></HtSelectBaseData>
+    <HtSelectOrg :clearable="true"
+                 @change="testuser"></HtSelectOrg>
     <router-view></router-view>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import SelectTable from "@/packages/SelectTable/index.vue";
-
+import HtSelectBaseData from "@/packages/HtSelectBaseData";
+import HtSelectOrg from "@/packages/HtSelectUser";
+import { mgr } from "@/plugins/oidc-client";
 @Component({
-  components: { SelectTable },
+  components: {
+    HtSelectBaseData,
+    HtSelectOrg,
+  },
 })
 export default class App extends Vue {
+  state = {
+    value: undefined,
+  };
   /** 生命周期 */
   created() {
     // 动态加载引用文件
@@ -51,6 +55,64 @@ export default class App extends Vue {
     });
     document.getElementsByTagName("head")[0].innerHTML = heatStr;
   }
+  change() {
+    // console.log("eeee", e);
+  }
+  testuser() {
+    //console.log("eee", e);
+  }
+  test(e: any) {
+    //mgr.removeUser();
+    // mgr.events.
+    //console.log("eeee", mgr.getUser().then(res));
+    // mgr.getUser().then((res) => {
+    //   console.log("eeee", res);
+    // });
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    mgr.signoutRedirect();
+    // mgr.revokeAccessToken();
+    // mgr.signoutCallback(window.location.href, true).then((res) => {
+    //   alert;
+    //   console.log("rrres", res);
+    //   //
+    // });
+    mgr.signinRedirect();
+    // mgr.signoutRedirectCallback().then(() => {
+    //   mgr.getUser().then((user) => {
+    //     console.log("user", user);
+    //   });
+    // });
+    //   console.log("ttt", tt, mgr.getUser());
+    // });
+    //mgr.signinSilent();
+    // mgr.removeUser().then((res) => {
+    //   console.log("rres", res);
+    //   mgr.signinRedirect();
+    // });
+    // mgr.signoutRedirect(); //退出登录
+    //mgr.removeUser();
+    // mgr.signoutRedirectCallback().then((res) => {
+    //   console.log("res", res);
+    // }); //登录
+    // mgr.getUser(); //获取用户信息
+    // mgr.signinRedirectCallback(); //callback
+    //  mgr.revokeAccessToken();
+    //mgr.
+    //mgr.signoutPopup();
+    //mgr.signinPopup();
+    // mgr.signoutRedirectCallback(window.location.href).then((res) => {
+    //   //window.location.href = window.location.href;
+    //   console.log("res", res);
+    //   // mgr.signinRedirect();
+    // });
+    //  mgr.signoutRedirect();
+    //mgr.clearStaleState();
+    // mgr.signinRedirectCallback(window.location.href);
+    // mgr.signinRedirect();
+  }
 }
 </script>
 

package/src/main.ts

@@ -1,14 +1,24 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2021-11-15 14:41:40
+ * @LastEditors: hutao
+ * @LastEditTime: 2022-04-29 17:05:53
+ */
 import Vue from "vue";
 import App from "./App.vue";
 import VueRouter from "vue-router";
 import routes from "./router";
 import store from "./store";
 import ElementUI from "element-ui";
+import HtUi from "htui-yllkbz";
 import "./styles.scss";
 import { _axios, baseConfig } from "vue-kst-auth";
 // import axios from "axios";
 Vue.use(ElementUI);
 Vue.use(VueRouter);
+Vue.use(HtUi);
 
 /** 设置axios返回类型 */
 Vue.config.productionTip = false;

package/src/packages/HtBaseData/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+
     <!-- 选择部门 -->
     <template v-if="
         state.configJson['departmentId'] &&
@@ -28,7 +29,7 @@
         }"
                    @click.native="selectClick($event)"
                    ref="departmentId"
-                   @change="setSelctData('departmentId')"
+                   @change="setSelctData('departmentId',$event)"
                    :options="organizationUsersTree">
       </el-cascader>
       <el-cascader-panel v-if="state.configJson['departmentId'].panel"
@@ -47,7 +48,7 @@
           multiple: state.configJson['departmentId'].multiple,
         }"
                          ref="departmentId"
-                         @change="setSelctData('departmentId')"
+                         @change="setSelctData('departmentId',$event)"
                          :options="organizationUsersTree">
         <template slot-scope="{ data }">
           <span>{{ data.label }}</span>
@@ -116,7 +117,7 @@
         }"
                    ref="departmentUser"
                    @click.native="selectClick($event)"
-                   @change="setSelctData('departmentUser')"
+                   @change="setSelctData('departmentUser',$event)"
                    :options="organizationUsersTreeUser">
         <template slot-scope="{ data }">
           <p class="ht-user-dot"
@@ -163,7 +164,7 @@
           multiple: state.configJson['departmentUser'].multiple,
         }"
                          ref="departmentUser"
-                         @change="setSelctData('departmentUser')"
+                         @change="setSelctData('departmentUser',$event)"
                          :options="organizationUsersTreeUser">
         <template slot-scope="{ data }">
           <p class="ht-user-dot"
@@ -281,10 +282,10 @@
               multiple: state.configJson[item.code].multiple,
             }"
                        :ref="`${item.code}`"
-                       @change="setSelctData(item.code)"
+                       @change="setSelctData(item.code,$event)"
                        :options="getbaseDataInfo[item.id]"></el-cascader>
           <el-cascader-panel v-else
-                             @click.native="selectClick($event)"
+                             @click.native="selectClick($event,)"
                              :placeholder="`请选择${item.name}`"
                              class="component-item"
                              :key="item.id"
@@ -300,7 +301,7 @@
               multiple: state.configJson[item.code].multiple,
             }"
                              :ref="`${item.code}`"
-                             @change="setSelctData(item.code)"
+                             @change="setSelctData(item.code,$event)"
                              :options="getbaseDataInfo[item.id]"></el-cascader-panel>
         </template>
       </template>
@@ -650,15 +651,28 @@ export default class CommonDatas extends Vue {
     // });
   }
   /** 设置下拉数据(级联选择) */
-  setSelctData(key: string) {
+  setSelctData(key: string, e?: string) {
+    const value = e || this.state.selectVal[key];
+
     const ref: any | undefined = (this.$refs[key] as any)[0] || this.$refs[key];
-    const checkList = ref ? ref.getCheckedNodes() : [];
+
+    let checkList = [];
+    if (ref && ref.getCheckedNodes() && ref.getCheckedNodes()[0] !== null) {
+      checkList = ref.getCheckedNodes();
+    } else if (
+      ref &&
+      ref.getCheckedNodes() &&
+      ref.getCheckedNodes()[0] === null
+    ) {
+      checkList = [ref.panel.getNodeByValue(value)];
+    }
+
     /** 过滤在多选模式下，Tag时触发删除 */
     const checkNodes = checkList.filter((item: any) => {
-      return this.state.selectVal[key]?.includes(item.data.id);
+      return value?.includes(item.data.id);
     });
-    this.state.selectValData[key] = [];
     if (checkNodes && checkNodes.length && checkNodes[0] !== null) {
+      this.state.selectValData[key] = [];
       checkNodes.forEach(
         (item: { data?: { id: string; name: string } } | undefined) => {
           const { data } = item || { data: "" };
@@ -668,6 +682,9 @@ export default class CommonDatas extends Vue {
         }
       );
     }
+    if (!e && !this.state.selectVal[key]) {
+      this.state.selectValData[key] = [];
+    }
     this.$emit("change", this.state.selectValData);
   }
   /** 基础数据递归处理 */

package/src/packages/index.ts

@@ -4,7 +4,7 @@
  * @Author: hutao
  * @Date: 2021-10-21 10:08:41
  * @LastEditors: hutao
- * @LastEditTime: 2022-04-29 16:52:52
+ * @LastEditTime: 2022-05-05 09:12:46
  */
 
 // 导入组件
@@ -25,12 +25,12 @@ import HtSelectUser from './HtSelectUser/index'
 import HtShowBaseData from './HtShowBaseData/index'
 import HtOrgInfo from './HtOrgInfo/index'
 import HtBaseData from './HtBaseData/index'
-import HtTwee from "./HtTwee/index"
+
 
 
 
 // 存储组件列表
-const components = [HtTwee, HtBaseData, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
+const components = [HtBaseData, HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles, HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo]
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
 const install = function (Vue: any) {
   // 判断是否安装
@@ -47,6 +47,6 @@ export default {
   install,
   // 以下是具体的组件列表
   HtSelectTable, HtPagination, HtTable, HtExport, HtUpload, HtMd, HtCountDown, HtUploadFiles,
-  HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo, HtBaseData, HtTwee
+  HtSelectBaseData, HtSelectOrg, HtSelectUser, HtShowBaseData, HtOrgInfo, HtBaseData
 }
 

package/src/plugins/oidc-client.ts

@@ -0,0 +1,37 @@
+/* eslint-disable @typescript-eslint/camelcase */
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: hutao
+ * @Date: 2022-05-06 17:56:08
+ * @LastEditors: hutao
+ * @LastEditTime: 2022-05-09 14:20:45
+ */
+import Oidc from "oidc-client";
+function getCurrentUrl() {
+  let href = window.location.pathname;
+  if (href.charAt(href.length - 1) === '/') {
+    href = href.substring(0, href.length - 1)
+  }
+  console.log('href', href, window.location);
+  console.log('window.location.host + href', window.location.origin + href);
+  return window.location.origin + href
+}
+export const mgr = new Oidc.UserManager({
+  // authority: "oauth2/api",//认证服务器
+  authority: "http://192.168.3.237:44318",//认证服务器
+  client_id: "AuthServer_App", //表示客户端的ID，必选项
+  //redirect_uri: "http://192.168.3.113:8082/product_architecture", //表示重定向URI，认证服务器回调的客户端页面。可选项
+  redirect_uri: getCurrentUrl(), //表示重定向URI，认证服务器回调的客户端页面。可选项
+  // redirect_uri: "http://192.168.3.252:4200", //表示重定向URI，认证服务器回调的客户端页面。可选项
+  response_type: "code", // response_type：表示授权类型，必选项
+  userStore: new Oidc.WebStorageStateStore({ store: window.localStorage }),
+  scope: "offline_access AuthServer", //scope：表示申请的权限范围，可选项
+  post_logout_redirect_uri: getCurrentUrl(),
+  automaticSilentRenew: false,
+
+  extraQueryParams: {
+    _tenant: 'default'
+  }
+
+});

package/src/views/About.vue

@@ -4,11 +4,11 @@
  * @Author: hutao
  * @Date: 2021-11-15 14:41:40
  * @LastEditors: hutao
- * @LastEditTime: 2022-04-29 16:53:36
+ * @LastEditTime: 2022-05-09 10:05:08
 -->
 <template>
   <div>
-    <HtTwee></HtTwee>
+    ...................
     <HtSelectUser :value="['be12db32-1718-a43d-1cf8-39f97d1d872f','5f2d6558-4e98-9054-413f-39fc4c63ebac','959f6988-a74b-f6f7-0fb6-3a0314e0eaad']"
                   :multiple="true"></HtSelectUser>
     <!-- <el-button type=""
@@ -61,7 +61,7 @@ import { Component, Vue } from "vue-property-decorator";
 import HtTable from "@/packages/HtTable/index.vue";
 import HtCountDown from "@/packages/HtCountDown/index.vue";
 import HtSelectUser from "@/packages/HtSelectUser/index.vue";
-import HtTwee from "@/packages/HtTwee/index.vue";
+
 import "htui-yllkbz/lib/htui.css";
 interface State {
   /** 数据状态 */
@@ -76,7 +76,6 @@ interface State {
     HtTable,
     HtCountDown,
     HtSelectUser,
-    HtTwee,
   },
 })
 export default class Index extends Vue {

package/src/packages/HtTwee/index.ts

@@ -1,22 +0,0 @@
-/*
- * @Descripttion: 
- * @version: 
- * @Author: hutao
- * @Date: 2022-04-29 16:30:37
- * @LastEditors: hutao
- * @LastEditTime: 2022-04-29 16:30:37
- */
-/*
- * @Descripttion:
- * @version:
- * @Author: hutao
- * @Date: 2021-11-15 15:00:57
- * @LastEditors: hutao
- * @LastEditTime: 2021-12-21 14:15:10
- */
-import HtTwee from "./index.vue";
-(HtTwee as any).install = function (Vue: any) {
-
-  Vue.component("HtTwee", HtTwee);
-};
-export default HtTwee;

package/src/packages/HtTwee/index.vue

@@ -1,30 +0,0 @@
-<!--
- * @Descripttion: 
- * @version: 
- * @Author: hutao
- * @Date: 2022-04-29 16:30:40
- * @LastEditors: hutao
- * @LastEditTime: 2022-04-29 16:53:57
--->
-<template>
-  <div>
-    99999999999
-    <canvas ref="ht-twee"></canvas>
-  </div>
-
-</template>
-<script lang="ts">
-import { Vue, Component, Prop, Watch } from "vue-property-decorator";
-import { Httwee } from "@/plugins/HtTwee";
-require("@/plugins/EasePack.min.js");
-require("@/plugins/TweenLite.min.js");
-@Component
-export default class HtTwee extends Vue {
-  created() {
-    this.$nextTick(() => {
-      Httwee(this.$refs["ht-twee"]);
-    });
-  }
-}
-</script>
-

package/src/plugins/EasePack.min.js

@@ -1,22 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */
-/*
- * @Descripttion: 
- * @version: 
- * @Author: hutao
- * @Date: 2022-04-29 16:32:05
- * @LastEditors: hutao
- * @LastEditTime: 2022-04-29 16:57:19
- */
-/* eslint-disable no-var */
-/*!
- * VERSION: beta 1.9.4
- * DATE: 2014-07-17
- * UPDATES AND DOCS AT: http://www.greensock.com
- *
- * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
- * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
- * Club GreenSock members, the software agreement that was issued with your membership.
- * 
- * @author: Jack Doyle, jack@greensock.com
- **/
-var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();

package/src/plugins/HtTwee.js

@@ -1,189 +0,0 @@
-
-let width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
-function getDistance(p1, p2) {
-  return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
-}
-function Circle(pos,rad,color) {
-  // eslint-disable-next-line @typescript-eslint/no-this-alias
-  const ttt = this;
-
-  // constructor
-  (function() {
-    ttt.pos = pos || null;
-    ttt.radius = rad || null;
-    ttt.color = color || null;
-  })();
-
-  this.draw = function() {
-      if(!ttt.active) return;
-      ctx.beginPath();
-      ctx.arc(ttt.pos.x, ttt.pos.y, ttt.radius, 0, 2 * Math.PI, false);
-      ctx.fillStyle = 'rgba(156,217,249,'+ ttt.active+')';
-      ctx.fill();
-  };
-}
-function scrollCheck() {
-  if(document.body.scrollTop > height) animateHeader = false;
-  else animateHeader = true;
-}
-
-function shiftPoint(p) {
-  TweenLite.to(p, 1+1*Math.random(), {x:p.originX-50+Math.random()*100,
-      y: p.originY-50+Math.random()*100, ease:Circ.easeInOut,
-      onComplete: function() {
-          shiftPoint(p);
-      }});
-}
-
-// Canvas manipulation
-function drawLines(p) {
-  if(!p.active) return;
-  for(const i in p.closest) {
-      ctx.beginPath();
-      ctx.moveTo(p.x, p.y);
-      ctx.lineTo(p.closest[i].x, p.closest[i].y);
-      ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
-      ctx.stroke();
-  }
-}
-
-function resize() {
-  width = window.innerWidth;
-  height = window.innerHeight;
-  // largeHeader.style.height = height+'px';
-  canvas.width = width;
-  canvas.height = height;
-}
-function mouseMove(e) {
-  let posx = 0;let posy = 0;
-  if (e.pageX || e.pageY) {
-      posx = e.pageX;
-      posy = e.pageY;
-  }
-  else if (e.clientX || e.clientY)    {
-      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
-      posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
-  }
-  target.x = posx;
-  target.y = posy;
-} 
-function initHeader(ref) {
-  width = window.innerWidth;
-  height = window.innerHeight;
-  target = {x: width/2, y: height/2};
-
-  // largeHeader = document.getElementById('large-header');
-  // largeHeader.style.height = height+'px';
-
-  canvas = ref;
-  canvas.width = width;
-  canvas.height = height;
-  ctx = canvas.getContext('2d');
-
-  // create points
-  points = [];
-  for(let x = 0; x < width; x = x + width/20) {
-      for(let y = 0; y < height; y = y + height/20) {
-          const px = x + Math.random()*width/20;
-          const py = y + Math.random()*height/20;
-          const p = {x: px, originX: px, y: py, originY: py };
-          points.push(p);
-      }
-  }
-
-  // for each point find the 5 closest points
-  for(let i = 0; i < points.length; i++) {
-      const closest = [];
-      const p1 = points[i];
-      for(let j = 0; j < points.length; j++) {
-          const p2 = points[j]
-          if(!(p1 == p2)) {
-              let placed = false;
-              for(let k = 0; k < 5; k++) {
-                  if(!placed) {
-                      if(closest[k] == undefined) {
-                          closest[k] = p2;
-                          placed = true;
-                      }
-                  }
-              }
-
-              for(let k = 0; k < 5; k++) {
-                  if(!placed) {
-                      if(getDistance(p1, p2) < getDistance(p1, closest[k])) {
-                          closest[k] = p2;
-                          placed = true;
-                      }
-                  }
-              }
-          }
-      }
-      p1.closest = closest;
-  }
-
-  // assign a circle to each point
-  for(const i in points) {
-      const c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)');
-      points[i].circle = c;
-  }
-}
-
-// Event handling
-function addListeners() {
-  if(!('ontouchstart' in window)) {
-      window.addEventListener('mousemove', mouseMove);
-  }
-  window.addEventListener('scroll', scrollCheck);
-  window.addEventListener('resize', resize);
-}
-
-
-
-
-
-
-function animate() {
-  if(animateHeader) {
-      ctx.clearRect(0,0,width,height);
-      for(const i in points) {
-          // detect points in range
-          if(Math.abs(getDistance(target, points[i])) < 4000) {
-              points[i].active = 0.3;
-              points[i].circle.active = 0.6;
-          } else if(Math.abs(getDistance(target, points[i])) < 20000) {
-              points[i].active = 0.1;
-              points[i].circle.active = 0.3;
-          } else if(Math.abs(getDistance(target, points[i])) < 40000) {
-              points[i].active = 0.02;
-              points[i].circle.active = 0.1;
-          } else {
-              points[i].active = 0;
-              points[i].circle.active = 0;
-          }
-
-          drawLines(points[i]);
-          points[i].circle.draw();
-      }
-  }
-  requestAnimationFrame(animate);
-}
-// animation
-function initAnimation() {
-  animate();
-  for(const i in points) {
-      shiftPoint(points[i]);
-  }
-}
-
-
-
-// Util
-
-export function Httwee (ref) {
-
- 
-  // Main
-  initHeader(ref);
- initAnimation();
-addListeners();  
-};