|
@@ -37,14 +37,16 @@ import { SMouseEvent } from "@persagy-web/base";
|
|
|
* @author 郝建龙 <haojianlong@sagacloud.cn>
|
|
|
*/
|
|
|
export class SGraphSelectContainer extends SGraphItem {
|
|
|
- /** 选择对象list */
|
|
|
+ /** 选择对象 list */
|
|
|
private _itemList: SGraphItem[] = [];
|
|
|
get itemList(): SGraphItem[] {
|
|
|
return this._itemList;
|
|
|
} // Get itemList
|
|
|
- /** 外接点的list */
|
|
|
+
|
|
|
+ /** 外接点的 list */
|
|
|
private pointList: SPoint[] = [];
|
|
|
- /** item宽 */
|
|
|
+
|
|
|
+ /** item 宽 */
|
|
|
private _width: number = 0;
|
|
|
get width(): number {
|
|
|
return this._width;
|
|
@@ -56,7 +58,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
this._width = v;
|
|
|
this.update();
|
|
|
} // Set width
|
|
|
- /** item高 */
|
|
|
+
|
|
|
+ /** item 高 */
|
|
|
private _height: number = 0;
|
|
|
get height(): number {
|
|
|
return this._height;
|
|
@@ -68,6 +71,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
this._height = v;
|
|
|
this.update();
|
|
|
} // Set height
|
|
|
+
|
|
|
/** 修改之前的宽 */
|
|
|
private oldWidth: number = 0;
|
|
|
/** 修改之前的高 */
|
|
@@ -82,7 +86,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
maxHeight: number = Number.MAX_SAFE_INTEGER;
|
|
|
/** 边框颜色 */
|
|
|
_strokeColor: SColor = new SColor("#82C7FC");
|
|
|
- /** 画笔颜色 */
|
|
|
+ /** 画笔颜色 */
|
|
|
get strokeColor(): SColor {
|
|
|
return this._strokeColor;
|
|
|
} // Get strokeColor
|
|
@@ -90,6 +94,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
this._strokeColor = v;
|
|
|
this.update();
|
|
|
} // Set strokeColor
|
|
|
+
|
|
|
/** 填充颜色 */
|
|
|
_fillColor: SColor = new SColor("#ffffff");
|
|
|
get fillColor(): SColor {
|
|
@@ -99,12 +104,13 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
this._fillColor = v;
|
|
|
this.update();
|
|
|
} // Set fillColor
|
|
|
- /** 绘制矩形的圆角半径 */
|
|
|
- /** 统计选中item的数量 */
|
|
|
+
|
|
|
+ /** 统计选中 item 的数量 */
|
|
|
get count(): number {
|
|
|
return this.itemList.length;
|
|
|
- }
|
|
|
- /** 置顶zorder增加基数 */
|
|
|
+ } // Get count
|
|
|
+
|
|
|
+ /** 置顶 zOrder 增加基数 */
|
|
|
private radix: number = 0.001;
|
|
|
/** 定时器 */
|
|
|
private timer: number | undefined;
|
|
@@ -114,6 +120,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
dis: number = 10;
|
|
|
/** 灵敏度转换为场景长度 */
|
|
|
private sceneDis: number = 10;
|
|
|
+
|
|
|
/** 当前点索引 */
|
|
|
private _curIndex: number = -1;
|
|
|
get curIndex(): number {
|
|
@@ -126,6 +133,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
this._curIndex = v;
|
|
|
this.update();
|
|
|
} // set curIndex
|
|
|
+
|
|
|
/** 当前点索引 */
|
|
|
private curPoint: SPoint | undefined;
|
|
|
/** 鼠标样式 */
|
|
@@ -144,7 +152,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 构造体
|
|
|
- * */
|
|
|
+ */
|
|
|
constructor() {
|
|
|
super();
|
|
|
this.zOrder = 9999999;
|
|
@@ -153,10 +161,10 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Constructor
|
|
|
|
|
|
/**
|
|
|
- * 添加item到list
|
|
|
+ * 添加 item 到 list
|
|
|
*
|
|
|
- * @param item 当前选中的item
|
|
|
- * */
|
|
|
+ * @param item 当前选中的 item
|
|
|
+ */
|
|
|
addItem(item: SGraphItem): void {
|
|
|
for (let i = 0; i < this.itemList.length; i++) {
|
|
|
if (this.itemList[i] == item) {
|
|
@@ -171,8 +179,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 清空再添加(事件+复制数组)
|
|
|
*
|
|
|
- * @param item 当前选中的item
|
|
|
- * */
|
|
|
+ * @param item 当前选中的 item
|
|
|
+ */
|
|
|
setItem(item: SGraphItem): void {
|
|
|
this.itemList.forEach((t: SGraphItem): void => {
|
|
|
t.selected = false;
|
|
@@ -185,8 +193,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 清空选择对象
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
clear(): void {
|
|
|
this.itemList.forEach((t: SGraphItem): void => {
|
|
|
t.selected = false;
|
|
@@ -198,8 +205,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 切换选择对象
|
|
|
*
|
|
|
- * @param item 当前选中的item
|
|
|
- * */
|
|
|
+ * @param item 当前选中的 item
|
|
|
+ */
|
|
|
toggleItem(item: SGraphItem): void {
|
|
|
for (let i = 0; i < this.itemList.length; i++) {
|
|
|
if (this.itemList[i] == item) {
|
|
@@ -209,7 +216,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
- // 多选时,父级item需要一致
|
|
|
+ // 多选时,父级 item 需要一致
|
|
|
if (this.itemList.length) {
|
|
|
if (item.parent != this.itemList[0].parent) {
|
|
|
return;
|
|
@@ -223,8 +230,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 对齐
|
|
|
*
|
|
|
- * @param type 对齐方式
|
|
|
- * */
|
|
|
+ * @param type 对齐方式
|
|
|
+ */
|
|
|
layout(type: SGraphLayoutType): void {
|
|
|
if (this.itemList.length < 2) {
|
|
|
return;
|
|
@@ -263,8 +270,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 图层操作
|
|
|
*
|
|
|
- * @param type 操作类型
|
|
|
- * */
|
|
|
+ * @param type 操作类型
|
|
|
+ */
|
|
|
setOrder(type: SOrderSetType): void {
|
|
|
if (this.itemList.length < 1) {
|
|
|
return;
|
|
@@ -290,8 +297,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 左对齐
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignLeft(): void {
|
|
|
let standardItem = this.itemList[0];
|
|
|
// 计算第一个外接矩阵左上角坐标在场景中的坐标
|
|
@@ -302,7 +308,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
for (let i = 1; i < this.itemList.length; i++) {
|
|
|
let curItem = this.itemList[i];
|
|
|
if (curItem.moveable) {
|
|
|
- // 将p转换为当前item中的坐标
|
|
|
+ // 将 p 转换为当前 item 中的坐标
|
|
|
let p1 = curItem.mapFromScene(p.x, p.y);
|
|
|
// 根据等式差值相等 newboundx - oldboundx = newposx - oldposx => newposx = newboundx - oldboundx + oldposx
|
|
|
curItem.x =
|
|
@@ -314,8 +320,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 顶对齐
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignTop(): void {
|
|
|
let standardItem = this.itemList[0];
|
|
|
let p = standardItem.mapToScene(
|
|
@@ -335,8 +340,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 右对齐
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignRight(): void {
|
|
|
let standardItem = this.itemList[0];
|
|
|
let p = standardItem.mapToScene(
|
|
@@ -357,8 +361,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 底对齐
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignBottom(): void {
|
|
|
let standardItem = this.itemList[0];
|
|
|
let p = standardItem.mapToScene(
|
|
@@ -379,10 +382,9 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 水平居中对齐
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignCenter(): void {
|
|
|
- // 第一个选中的item即为基准对象
|
|
|
+ // 第一个选中的 item 即为基准对象
|
|
|
let standardItem = this.itemList[0];
|
|
|
// 基准对象的中心点
|
|
|
let center = standardItem.boundingRect().center();
|
|
@@ -403,10 +405,9 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 垂直居中对齐
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignMiddle(): void {
|
|
|
- // 第一个选中的item即为基准对象
|
|
|
+ // 第一个选中的 item 即为基准对象
|
|
|
let standardItem = this.itemList[0];
|
|
|
// 基准对象的中心点
|
|
|
let center = standardItem.boundingRect().center();
|
|
@@ -426,8 +427,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 垂直分布
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignVertical(): void {
|
|
|
if (this.itemList.length < 3) {
|
|
|
return;
|
|
@@ -483,8 +483,7 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 水平分布
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private alignHorizontal(): void {
|
|
|
if (this.itemList.length < 3) {
|
|
|
return;
|
|
@@ -541,15 +540,14 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
// 修改层级操作步骤:
|
|
|
// 排序(保持相对层级不变)
|
|
|
- // children里边要取 整数部分相同的 点:children是已经排好序的
|
|
|
+ // children 里边要取 整数部分相同的 点: children 是已经排好序的
|
|
|
// 然后再取最大值
|
|
|
/**
|
|
|
* 置顶
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private setTop(): void {
|
|
|
const arr: SGraphItem[] = this.sortItemList(this.itemList, true);
|
|
|
- // 按顺序zOrder增加
|
|
|
+ // 按顺序 zOrder 增加
|
|
|
arr.forEach(it => {
|
|
|
let max = it.zOrder;
|
|
|
if (it.parent) {
|
|
@@ -569,11 +567,10 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
|
|
|
/**
|
|
|
* 置底
|
|
|
- *
|
|
|
- * */
|
|
|
+ */
|
|
|
private setBottom(): void {
|
|
|
const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
|
|
|
- // 按顺序zOrder增加
|
|
|
+ // 按顺序 zOrder 增加
|
|
|
arr.forEach(it => {
|
|
|
let min = it.zOrder;
|
|
|
if (it.parent) {
|
|
@@ -592,9 +589,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Function setBottom()
|
|
|
|
|
|
/**
|
|
|
- * 下移一层zorder减小
|
|
|
- *
|
|
|
- * */
|
|
|
+ * 下移一层 zOrder 减小
|
|
|
+ */
|
|
|
private setBefore(): void {
|
|
|
const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
|
|
|
arr.forEach(it => {
|
|
@@ -614,11 +610,11 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
// 当前层有多个
|
|
|
const index = temp.indexOf(it.zOrder);
|
|
|
if (index <= 1) {
|
|
|
- // 当前item 索引为1时 将当前item放至第一个前边
|
|
|
+ // 当前 item 索引为1时 将当前 item 放至第一个前边
|
|
|
// @ts-ignore
|
|
|
it.zOrder = temp[0] - this.radix;
|
|
|
} else if (index > 1) {
|
|
|
- // 当前item 索引大于等于2,将当前item放至前两个中间
|
|
|
+ // 当前 item 索引大于等于2,将当前 item 放至前两个中间
|
|
|
// @ts-ignore
|
|
|
it.zOrder = (temp[index - 1] + temp[index - 2]) / 2;
|
|
|
}
|
|
@@ -627,9 +623,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Function setAfter()
|
|
|
|
|
|
/**
|
|
|
- * 上移一层zorder增加
|
|
|
- *
|
|
|
- * */
|
|
|
+ * 上移一层 zOrder 增加
|
|
|
+ */
|
|
|
private setAfter(): void {
|
|
|
const arr: SGraphItem[] = this.sortItemList(this.itemList, false);
|
|
|
arr.forEach(it => {
|
|
@@ -649,11 +644,11 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
// 当前层有多个
|
|
|
const index = temp.indexOf(it.zOrder);
|
|
|
if (index <= 1) {
|
|
|
- // 当前item 索引为1时 将当前item放至第一个前边
|
|
|
+ // 当前 item 索引为1时 将当前 item 放至第一个前边
|
|
|
// @ts-ignore
|
|
|
it.zOrder = temp[0] + this.radix;
|
|
|
} else if (index > 1) {
|
|
|
- // 当前item 索引大于等于2,将当前item放至前两个中间
|
|
|
+ // 当前 item 索引大于等于2,将当前 item 放至前两个中间
|
|
|
// @ts-ignore
|
|
|
it.zOrder = (temp[index - 1] + temp[index - 2]) / 2;
|
|
|
}
|
|
@@ -664,10 +659,10 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 数组排序
|
|
|
*
|
|
|
- * @param arr 排序前的数组
|
|
|
- * @param flag 正序or逆序
|
|
|
- * @return list 排序后的数组
|
|
|
- * */
|
|
|
+ * @param arr 排序前的数组
|
|
|
+ * @param flag 正序 or 逆序
|
|
|
+ * @return 排序后的数组
|
|
|
+ */
|
|
|
sortItemList(arr: SGraphItem[], flag: boolean = true): SGraphItem[] {
|
|
|
const list: SGraphItem[] = arr.map(t => t);
|
|
|
list.sort(this.compare("zOrder", flag));
|
|
@@ -677,9 +672,9 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 按照某个属性排序
|
|
|
*
|
|
|
- * @param prop 属性
|
|
|
- * @param flag 默认正序
|
|
|
- * */
|
|
|
+ * @param prop 属性
|
|
|
+ * @param flag 默认正序
|
|
|
+ */
|
|
|
private compare(prop: string, flag: boolean): any {
|
|
|
const f = flag ? 1 : -1;
|
|
|
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
|
@@ -697,8 +692,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Function compare()
|
|
|
|
|
|
/**
|
|
|
- * 防抖-防止快速多次触发 itemChange;只执行最后一次
|
|
|
- * */
|
|
|
+ * 防抖-防止快速多次触发 itemChange; 只执行最后一次
|
|
|
+ */
|
|
|
throttle(fn: Function, wait: number): void {
|
|
|
if (this.timer) clearTimeout(this.timer);
|
|
|
this.timer = setTimeout((): void => {
|
|
@@ -707,15 +702,15 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Function throttle()
|
|
|
|
|
|
/**
|
|
|
- * 选中的item更新时更新自身边界
|
|
|
- * */
|
|
|
+ * 选中的 item 更新时更新自身边界
|
|
|
+ */
|
|
|
selectChange(): void {
|
|
|
// 抛出事件
|
|
|
this.$emit("listChange", this.itemList);
|
|
|
if (this.count > 0) {
|
|
|
// 重新计算边界
|
|
|
this.getSize();
|
|
|
- // 计算边界8个点
|
|
|
+ // 计算边界 8 个点
|
|
|
this.calExtreme();
|
|
|
if (
|
|
|
this.count > 1 ||
|
|
@@ -730,10 +725,10 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Function selectChange()
|
|
|
|
|
|
/**
|
|
|
- * 计算选中item的外接矩形和
|
|
|
+ * 计算选中 item 的外接矩形和
|
|
|
*
|
|
|
* @return 外接矩形的和
|
|
|
- * */
|
|
|
+ */
|
|
|
calItemBounding(): SRect {
|
|
|
if (this.itemList.length) {
|
|
|
const fir = this.itemList[0];
|
|
@@ -758,11 +753,11 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
this.width = r.width;
|
|
|
this.height = r.height;
|
|
|
this.moveTo(r.left, r.top);
|
|
|
- } // getSize()
|
|
|
+ } // Function getSize()
|
|
|
|
|
|
/**
|
|
|
* 计算外接矩形 8 个端点
|
|
|
- * */
|
|
|
+ */
|
|
|
calExtreme(): void {
|
|
|
this.pointList = [];
|
|
|
this.pointList.push(new SPoint(0, 0));
|
|
@@ -796,9 +791,9 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Function getNearestPoint()
|
|
|
|
|
|
/**
|
|
|
- * Item对象边界区域
|
|
|
+ * Item 对象边界区域
|
|
|
*
|
|
|
- * @return 对象边界区域
|
|
|
+ * @return 对象边界区域
|
|
|
*/
|
|
|
boundingRect(): SRect {
|
|
|
if (this.visible) {
|
|
@@ -816,9 +811,9 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 宽高发发生变化
|
|
|
*
|
|
|
- * @param oldSize 改之前的大小
|
|
|
- * @param newSize 改之后大小
|
|
|
- * */
|
|
|
+ * @param oldSize 改之前的大小
|
|
|
+ * @param newSize 改之后大小
|
|
|
+ */
|
|
|
protected resize(oldSize: SSize, newSize: SSize): void {
|
|
|
for (let v of this.itemList) {
|
|
|
// @ts-ignore
|
|
@@ -832,8 +827,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 鼠标按下事件
|
|
|
*
|
|
|
- * @param event 保存事件参数
|
|
|
- * @return boolean
|
|
|
+ * @param event 保存事件参数
|
|
|
+ * @return 是否处理事件
|
|
|
*/
|
|
|
onMouseDown(event: SMouseEvent): boolean {
|
|
|
if (event.buttons == 1) {
|
|
@@ -857,8 +852,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 鼠标按下事件
|
|
|
*
|
|
|
- * @param event 保存事件参数
|
|
|
- * @return boolean
|
|
|
+ * @param event 保存事件参数
|
|
|
+ * @return 是否处理事件
|
|
|
*/
|
|
|
onMouseMove(event: SMouseEvent): boolean {
|
|
|
this.setCursor(9);
|
|
@@ -979,8 +974,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 设置鼠标样式
|
|
|
*
|
|
|
- * @param n 样式的索引
|
|
|
- * */
|
|
|
+ * @param n 样式的索引
|
|
|
+ */
|
|
|
private setCursor(n: number): void {
|
|
|
this.cursor = SGraphSelectContainer.cursorList[n] || "default";
|
|
|
if (this.scene && this.scene.view) {
|
|
@@ -991,8 +986,8 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
/**
|
|
|
* 鼠标按下事件
|
|
|
*
|
|
|
- * @param event 保存事件参数
|
|
|
- * @return boolean
|
|
|
+ * @param event 保存事件参数
|
|
|
+ * @return 是否处理事件
|
|
|
*/
|
|
|
onMouseUp(event: SMouseEvent): boolean {
|
|
|
this.curIndex = -1;
|
|
@@ -1001,9 +996,9 @@ export class SGraphSelectContainer extends SGraphItem {
|
|
|
} // Function onMouseUp()
|
|
|
|
|
|
/**
|
|
|
- * Item绘制操作
|
|
|
+ * Item 绘制操作
|
|
|
*
|
|
|
- * @param painter painter对象
|
|
|
+ * @param painter 绘制对象
|
|
|
*/
|
|
|
onDraw(painter: SPainter): void {
|
|
|
// 缓存场景长度
|