@jswf/core
Version:
JavaScript Window Framework
581 lines • 18.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable @typescript-eslint/class-name-casing */
var BaseView_1 = require("./BaseView");
require("../scss/TreeView.scss");
/**
*
*
* @export
* @class TreeItem
*/
var TreeItem = /** @class */ (function () {
/**
*Creates an instance of TreeItem.
* @param {string} [label]
* @param {boolean} [opened]
* @memberof TreeItem
*/
function TreeItem(label, opened) {
var _this = this;
this.opened = true;
this.keys = {};
var hNode = document.createElement("div");
this.hNode = hNode;
hNode.treeItem = this;
hNode.dataset.kind = "TreeItem";
var row1 = document.createElement("div");
row1.dataset.kind = "TreeRow";
hNode.appendChild(row1);
row1.addEventListener("click", function () {
_this.selectItem(false, true);
});
row1.addEventListener("dblclick", function () {
var treeView = _this.getTreeView();
if (treeView)
treeView.callEvent("itemDblClick", { item: _this, user: true });
});
row1.addEventListener("dragstart", function (e) {
var treeView = _this.getTreeView();
if (treeView) {
if (e.dataTransfer) {
e.dataTransfer.setData("text/plain", JSON.stringify({ itemValue: _this.getItemValue() }));
}
treeView.callEvent("itemDragStart", { item: _this, event: e });
}
});
row1.addEventListener("dragleave", function () {
row1.dataset.drag = "";
});
row1.addEventListener("dragenter", function (e) {
row1.dataset.drag = "over";
e.preventDefault();
});
row1.addEventListener("mouseover", function (e) {
var treeView = _this.getTreeView();
if (treeView)
treeView.callEvent("itemOver", { event: e, item: _this });
});
row1.addEventListener("dragover", function (e) {
e.preventDefault();
});
row1.addEventListener("drop", function (e) {
var treeView = _this.getTreeView();
if (treeView) {
var value = undefined;
if (e.dataTransfer) {
try {
var v = JSON.parse(e.dataTransfer.getData("text/plain"));
if (v && v.itemValue)
value = v.itemValue;
}
catch (e) {
//
}
}
treeView.callEvent("itemDrop", {
event: e,
item: _this,
srcValue: value
});
}
row1.dataset.drag = "";
e.preventDefault();
});
var icon = document.createElement("div");
icon.dataset.kind = "TreeIcon";
row1.appendChild(icon);
icon.addEventListener("click", function (e) {
_this.openItem(!_this.opened, true);
e.preventDefault();
e.stopPropagation();
});
var body = document.createElement("div");
body.dataset.kind = "TreeBody";
this.body = body;
row1.appendChild(body);
body.textContent = label != null ? label : "";
body.draggable = true;
var row2 = document.createElement("div");
row2.dataset.kind = "TreeRow";
hNode.appendChild(row2);
var child = document.createElement("div");
this.childNode = child;
child.dataset.kind = "TreeChild";
row2.appendChild(child);
this.openItem(opened ? true : false);
}
TreeItem.prototype.isOpened = function () {
return this.opened;
};
/**
*アイテムのノードを返す
*
* @returns {HTMLElement}
* @memberof TreeItem
*/
TreeItem.prototype.getNode = function () {
return this.hNode;
};
/**
*アイテムのラベル部分のノードを返す
*
* @returns {HTMLElement}
* @memberof TreeItem
*/
TreeItem.prototype.getBody = function () {
return this.body;
};
/**
*アイテムに対してキーを関連付ける
*
* @param {string} name
* @param {*} value
* @memberof TreeItem
*/
TreeItem.prototype.setKey = function (name, value) {
this.keys[name] = value;
};
/**
*アイテムのキーを取得する
*
* @param {string} name
* @returns
* @memberof TreeItem
*/
TreeItem.prototype.getKey = function (name) {
return this.keys[name];
};
/**
*アイテムを追加する
*
* @param {*} [label] ラベル
* @param {boolean} [opened] オープン状態
* @returns {TreeItem} 追加したアイテム
* @memberof TreeItem
*/
TreeItem.prototype.addItem = function (label, opened) {
var name;
var value = null;
if (label instanceof Array) {
name = label[0];
value = label[1];
}
else {
name = label || "";
}
var item = new TreeItem(name, opened);
if (value != null)
item.setItemValue(value);
this.childNode.appendChild(item.getNode());
this.openItem(this.opened, false);
return item;
};
/**
*子アイテムを全てクリア
*
* @memberof TreeItem
*/
TreeItem.prototype.clearItem = function () {
var childs = this.childNode.childNodes;
while (childs.length) {
this.childNode.removeChild(childs[0]);
}
this.openItem(this.opened);
};
/**
*自分自身を親から切り離す
*
* @memberof TreeItem
*/
TreeItem.prototype.removeItem = function () {
var treeView = this.getTreeView();
if (treeView && this !== treeView.getRootItem() && this.hNode.parentNode)
this.hNode.parentNode.removeChild(this.hNode);
};
TreeItem.prototype.moveItem = function (vector) {
var parent = this.getParentItem();
if (parent === null)
return false;
var childs = parent.childNode.childNodes;
var count = childs.length;
for (var i = 0; i < count; i++) {
if (childs[i].treeItem === this) {
if (vector < 0) {
if (i === 0)
return false;
parent.childNode.insertBefore(this.getNode(), childs[i - 1]);
}
else {
if (i === childs.length - 1)
return false;
parent.childNode.insertBefore(childs[i + 1], this.getNode());
}
break;
}
}
return true;
};
/**
*子アイテムの数を返す
*
* @returns {number}
* @memberof TreeItem
*/
TreeItem.prototype.getChildCount = function () {
return this.childNode.childNodes.length;
};
/**
*アイテムに関連付ける値を設定
*
* @param {*} value
* @memberof TreeItem
*/
TreeItem.prototype.setItemValue = function (value) {
this.value = value;
};
/**
*アイテムに関連付けた値を取得
*
* @returns {*}
* @memberof TreeItem
*/
TreeItem.prototype.getItemValue = function () {
return this.value;
};
/**
*アイテムのラベルを設定
*
* @param {string} value
* @memberof TreeItem
*/
TreeItem.prototype.setItemText = function (value) {
this.body.textContent = value;
};
/**
*アイテムのラベルを取得
*
* @returns {string}
* @memberof TreeItem
*/
TreeItem.prototype.getItemText = function () {
return this.body.textContent || "";
};
/**
*子アイテムを取得
*
* @param {number} index
* @returns {TreeItem}
* @memberof TreeItem
*/
TreeItem.prototype.getChildItem = function (index) {
var node = this.childNode.childNodes[index];
return node.treeItem;
};
/**
*階層の深さを返す
*
* @returns
* @memberof TreeItem
*/
TreeItem.prototype.getTreeLevel = function () {
var parent = this;
var i = 0;
while ((parent = parent.getParentItem()))
i++;
return i;
};
/**
*親アイテムを取得
*
* @returns {TreeItem}
* @memberof TreeItem
*/
TreeItem.prototype.getParentItem = function () {
var parent = this.hNode.parentNode;
if (!parent)
return null;
parent = parent.parentNode;
if (!parent)
return null;
parent = parent.parentNode;
if (parent && parent.dataset.kind === "TreeItem") {
var treeNode = parent;
return treeNode.treeItem ? treeNode.treeItem : null;
}
return null;
};
/**
*自分を含めた階層から値を参照してアイテムを探す
*
* @param {*} value
* @returns {TreeItem}
* @memberof TreeItem
*/
TreeItem.prototype.findItemFromValue = function (value) {
if (this.getItemValue() == value)
return this;
var nodes = this.childNode.childNodes;
var count = nodes.length;
for (var i = 0; i < count; i++) {
var node = nodes[i];
var child = node.treeItem;
if (child) {
var f = child.findItemFromValue(value);
if (f != null)
return f;
}
}
return null;
};
/**
*ツリーを展開する
*
* @param {boolean} opened
* @param {boolean} [anime]
* @memberof TreeItem
*/
TreeItem.prototype.openItem = function (opened, anime) {
var hNode = this.hNode;
var flag = this.opened !== opened;
this.opened = opened;
if (this.getChildCount() == 0) {
hNode.dataset.stat = "alone";
}
else {
this.hNode.dataset.stat = opened ? "open" : "close";
if (opened) {
var items = hNode.querySelectorAll("[data-kind=TreeItem][data-stat=open] > [data-kind=TreeRow]:nth-child(2) > [data-kind=TreeChild] > [data-kind=TreeItem]");
for (var i = 0; i < items.length; i++) {
var n = items[i];
if (anime) {
n.style.animation = flag ? "treeOpen 0.3s ease 0s 1 normal" : "";
}
else {
n.style.animation = "";
}
n.style.display = "block";
}
}
else {
var items = this.childNode.querySelectorAll("[data-kind=TreeItem]");
for (var i = 0; i < items.length; i++) {
var n = items[i];
if (anime) {
n.style.animation = flag ? "treeClose 0.8s ease 0s 1 forwards" : "";
}
else {
n.style.display = "none";
}
}
}
}
if (flag) {
var treeView = this.getTreeView();
if (treeView)
treeView.callEvent("itemOpen", { item: this, opened: opened });
}
};
/**
*アイテムを選択する
*
* @memberof TreeItem
*/
TreeItem.prototype.selectItem = function (scroll, user) {
var treeView = this.getTreeView();
if (treeView)
treeView.selectItem(this, scroll, user);
};
/**
*所属先のTreeViewを返す
*
* @returns {TreeView}
* @memberof TreeItem
*/
TreeItem.prototype.getTreeView = function () {
var node = this.hNode;
while (node && node.dataset.jwfStyle !== "TreeView")
node = node.parentElement;
if (node) {
var treeView = node.treeView;
return treeView ? treeView : null;
}
return null;
};
return TreeItem;
}());
exports.TreeItem = TreeItem;
/**
*TreeView用クラス
*
* @export
* @class TreeView
* @extends {BaseView}
*/
var TreeView = /** @class */ (function (_super) {
__extends(TreeView, _super);
/**
*Creates an instance of TreeView.
* @memberof TreeView
*/
function TreeView(params) {
var _this = _super.call(this, params) || this;
_this.mSelectItem = null;
var client = _this.getClient();
client.dataset.jwfStyle = "TreeView";
client.treeView = _this;
var item = new TreeItem("root", true);
_this.mRootItem = item;
client.appendChild(item.getNode());
return _this;
}
/**
* 設定されている相対を条件にアイテムを検索
*
* @param {*} value
* @returns {TreeItem}
* @memberof TreeView
*/
TreeView.prototype.findItemFromValue = function (value) {
return this.mRootItem.findItemFromValue(value);
};
/**
*最上位のアイテムを返す
*
* @returns {TreeItem}
* @memberof TreeView
*/
TreeView.prototype.getRootItem = function () {
return this.mRootItem;
};
/**
*最上位の子としてアイテムを追加する
*
* @param {*} [label]
* @param {boolean} [opened]
* @returns {TreeItem}
* @memberof TreeView
*/
TreeView.prototype.addItem = function (label, opened) {
return this.mRootItem.addItem(label, opened);
};
/**
*アイテムを全て削除する
*
* @memberof TreeView
*/
TreeView.prototype.clearItem = function () {
this.mRootItem.clearItem();
this.mRootItem.setItemText("root");
this.mRootItem.setItemValue(null);
};
/**
*アイテムを選択する
*子アイテムが使用するので基本的には直接呼び出さない
* @param {TreeItem} item 選択するアイテム
* @memberof TreeView
*/
TreeView.prototype.selectItem = function (item, scroll, user) {
var that = this;
function animationEnd() {
this.removeEventListener("animationend", animationEnd);
var client = that.getClient();
var scrollTop = item.getNode().offsetTop - that.getClientHeight() / 2;
if (client.scrollTo)
client.scrollTo({ top: scrollTop, behavior: "smooth" });
else
client.scrollTop = scrollTop;
}
if (this.mSelectItem !== item) {
if (this.mSelectItem)
this.mSelectItem.getNode().dataset.select = "false";
item.getNode().dataset.select = "true";
this.mSelectItem = item;
var parent_1 = item;
while ((parent_1 = parent_1.getParentItem())) {
parent_1.openItem(true, user);
}
item.openItem(true, user);
}
if (scroll) {
var client = that.getClient();
client.scrollIntoView({ behavior: "smooth" });
var scrollTop = item.getNode().offsetTop - that.getClientHeight() / 2;
if (client.scrollTo)
client.scrollTo({ top: scrollTop, behavior: "smooth" });
else
client.scrollTop = scrollTop;
item.getNode().addEventListener("animationend", animationEnd);
}
this.callEvent("itemSelect", { item: item, user: !!user });
};
/**
* 設定されている値を条件にアイテムを選択
*
* @param {*} value
* @memberof TreeView
*/
TreeView.prototype.selectItemFromValue = function (value, scroll, user) {
var item = this.mRootItem.findItemFromValue(value);
if (item)
item.selectItem(scroll, user);
};
/**
*選択されているアイテムを返す
*
* @returns 選択されているアイテム
* @memberof TreeView
*/
TreeView.prototype.getSelectItem = function () {
return this.mSelectItem;
};
/**
*選択されているアイテムの値を返す
*
* @returns
* @memberof TreeView
*/
TreeView.prototype.getSelectItemValue = function () {
if (!this.mSelectItem)
return null;
return this.mSelectItem.getItemValue();
};
TreeView.prototype.getTreeStat = function () {
var treeStat = {};
var getStat = function (item) {
if (item.getItemValue() != null)
treeStat[item.getItemValue().toString()] = item.isOpened();
var count = item.getChildCount();
for (var i = 0; i < count; i++) {
getStat(item.getChildItem(i));
}
};
getStat(this.getRootItem());
return treeStat;
};
TreeView.prototype.setTreeStat = function (treeStat) {
for (var _i = 0, _a = Object.keys(treeStat); _i < _a.length; _i++) {
var value = _a[_i];
var item = this.findItemFromValue(value);
if (item) {
item.openItem(treeStat[value], false);
}
}
};
return TreeView;
}(BaseView_1.BaseView));
exports.TreeView = TreeView;
//# sourceMappingURL=TreeView.js.map