CocosPlugin/cocos-animator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
YipLee
2021-01-19 22:30:12 +08:00
commit c4f716c8e9
165 changed files with 61216 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
animator-editor/assets/script/common/cmpt/CanvasAdapt.ts Normal file
View File

@@ -0,0 +1,24 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class CanvasAdapt extends cc.Component {
protected onLoad() {
this.adapt();
// 仅web有效
cc.view.setResizeCallback(() => {
this.adapt();
});
}
private adapt() {
let resolutionRatio = cc.Canvas.instance.designResolution.width / cc.Canvas.instance.designResolution.height;
let ratio = cc.winSize.width / cc.winSize.height;
if (ratio > resolutionRatio) {
cc.Canvas.instance.fitHeight = true;
cc.Canvas.instance.fitWidth = false;
} else {
cc.Canvas.instance.fitHeight = false;
cc.Canvas.instance.fitWidth = true;
}
}
}

9
animator-editor/assets/script/common/cmpt/CanvasAdapt.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "75034da7-93d7-420e-b1e7-aabae21a607e",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

36
animator-editor/assets/script/common/cmpt/DragItem.ts Normal file
View File

@@ -0,0 +1,36 @@
const { ccclass, property } = cc._decorator;
/** 移动速度 px/s */
const MOVE_SPEED = 200;
/**
* 用于拖拽排序的元素
*/
@ccclass
export default class DragItem extends cc.Component {
/** 触摸开始时的boundingbox */
private _startRect: cc.Rect = null;
public get startRect() { return this._startRect; }
/** 移动动画的目标下标 */
private _toIdx: number = 0;
public onInit(idx: number) {
this._toIdx = idx;
this._startRect = this.node.getBoundingBox();
}
public moveTo(toIdx: number, toY: number) {
if (toIdx === this._toIdx) {
return;
}
this._toIdx = toIdx;
this.node.stopAllActions();
let moveTo = cc.moveTo(Math.abs(this.node.y - toY) / MOVE_SPEED, cc.v2(0, toY));
this.node.runAction(moveTo);
}
public stop() {
this.node.stopAllActions();
}
}

9
animator-editor/assets/script/common/cmpt/DragItem.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "472003c1-2fb4-444f-a4cb-af3c1a70e9c1",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

184
animator-editor/assets/script/common/cmpt/DragList.ts Normal file
View File

@@ -0,0 +1,184 @@
import Tool from "../util/Tool";
import DragItem from "./DragItem";
const { ccclass, property } = cc._decorator;
/**
* 拖拽排序列表
*/
@ccclass
export default class DragList extends cc.Component {
/** 进行拖拽操作的元素下标 */
private _dragIdx: number = -1;
/** 所有元素 */
private _items: DragItem[] = [];
/**
* 拖拽回调
* @param dragIdx 拖拽元素初始下标
* @param toIdx 拖拽元素完成拖拽后所在的下标
*/
private _dragCall: (dragIdx: number, toIdx: number) => void = null;
/** 调用拖拽回调传入的this对象 */
private _target: any = null;
private _layout: cc.Layout = null;
/** 元素容器 */
public get layout() {
if (!this._layout) {
this._layout = this.getComponent(cc.Layout);
}
return this._layout;
}
/** 拖拽开关 */
public canDrag: boolean = true;
protected onLoad() {
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
}
private onTouchStart(event: cc.Event.EventTouch) {
if (!this.canDrag || this.node.childrenCount <= 1) {
this._dragIdx = -1;
return;
}
let pos = this.node.convertToNodeSpaceAR(event.getLocation());
this._dragIdx = this.getItemIdx(pos);
if (this._dragIdx < 0) {
return;
}
this.layout.enabled = false;
this._items = [];
this.node.children.forEach((e: cc.Node, idx: number) => {
let item = e.getComponent(DragItem);
if (!item) {
item = e.addComponent(DragItem);
}
item.onInit(idx);
this._items.push(item);
});
this._items[this._dragIdx].node.setSiblingIndex(this.node.childrenCount - 1);
}
private onTouchMove(event: cc.Event.EventTouch) {
if (this._dragIdx < 0) {
return;
}
let pos = this.node.convertToNodeSpaceAR(event.getLocation());
// 进行拖拽操作
let yMax = this._items[0].startRect.center.y;
let yMin = this._items[this._items.length - 1].startRect.center.y;
this._items[this._dragIdx].node.y = cc.misc.clampf(pos.y, yMin, yMax);
let curIdx = this.getCurIdx(pos);
if (curIdx < this._dragIdx) {
this._items.forEach((item: DragItem, idx: number) => {
if (idx === this._dragIdx) {
return;
}
if (Tool.inRange(curIdx, this._dragIdx - 1, idx)) {
item.moveTo(idx + 1, this._items[idx + 1].startRect.center.y);
} else {
item.moveTo(idx, this._items[idx].startRect.center.y);
}
});
} else {
this._items.forEach((item: DragItem, idx: number) => {
if (idx === this._dragIdx) {
return;
}
if (Tool.inRange(this._dragIdx + 1, curIdx, idx)) {
item.moveTo(idx - 1, this._items[idx - 1].startRect.center.y);
} else {
item.moveTo(idx, this._items[idx].startRect.center.y);
}
});
}
}
private onTouchEnd(event: cc.Event.EventTouch) {
if (this._dragIdx < 0) {
return;
}
let pos = this.node.convertToNodeSpaceAR(event.getLocation());
// 结束拖拽操作
let curIdx = this.getCurIdx(pos);
this._items[this._dragIdx].node.setSiblingIndex(curIdx);
this._items.forEach((item: DragItem) => {
item.stop();
});
// 触发回调
if (curIdx !== this._dragIdx && this._dragCall) {
if (this._target)
this._dragCall.call(this._target, this._dragIdx, curIdx);
else
this._dragCall(this._dragIdx, curIdx);
}
// 重置
this.layout.enabled = true;
this.layout.updateLayout();
this._dragIdx = -1;
this._items = [];
}
/**
* 获取选中的元素下标
*/
private getItemIdx(pos: cc.Vec2) {
for (let i = 0; i < this.node.childrenCount; i++) {
let item = this.node.children[i];
if (item.getBoundingBox().contains(pos)) {
return i;
}
}
return -1;
}
/**
* 根据坐标获取当前移动到哪个下标的位置
*/
private getCurIdx(pos: cc.Vec2) {
let yMax = this._items[0].startRect.center.y;
let yMin = this._items[this._items.length - 1].startRect.center.y;
if (pos.y >= yMax) {
return 0;
} else if (pos.y <= yMin) {
return this._items.length - 1;
}
let idx: number = 0;
let minDis: number = Math.abs(this._items[0].startRect.center.y - pos.y);
for (let i = 1; i < this._items.length; i++) {
let item = this._items[i];
let dis = Math.abs(item.startRect.center.y - pos.y);
if (dis < minDis) {
idx = i;
minDis = dis;
} else {
break;
}
}
return idx;
}
/**
* 注册拖拽回调
*/
public setDragCall(call: (dragIdx: number, toIdx: number) => void, target: any) {
this._dragCall = call;
this._target = target;
}
}

9
animator-editor/assets/script/common/cmpt/DragList.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "5b5cd3c9-8509-4ab7-82d7-50cc0d99ffe2",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

72
animator-editor/assets/script/common/cmpt/ResizeArea.ts Normal file
View File

@@ -0,0 +1,72 @@
import Events, { EventName } from "../util/Events";
const { ccclass, property } = cc._decorator;
/**
* 鼠标拉伸调节节点大小组件
*/
@ccclass
export default class ResizeArea extends cc.Component {
@property(cc.Widget) Target: cc.Widget = null;
@property(cc.Vec2) Limit: cc.Vec2 = cc.v2();
@property({ tooltip: CC_DEV && '节点对齐的是否为左侧' }) isLeft: boolean = true;
private _canvas: HTMLElement = null;
private _startPos: cc.Vec2 = null;
private _startWidth: number = 0;
private _updateDirty: boolean = false;
protected onLoad() {
this._canvas = document.getElementById('GameCanvas');
this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
this.node.on(cc.Node.EventType.MOUSE_ENTER, this.onMouseEnter, this);
this.node.on(cc.Node.EventType.MOUSE_LEAVE, this.onMouseLeave, this);
}
protected lateUpdate() {
if (!this._updateDirty) {
return;
}
this._updateDirty = false;
this.Target.left = 0;
this.Target.right = 0;
this.Target.updateAlignment();
Events.emit(EventName.RESIZE, this.Target.node);
this.updateWidget(this.Target.node);
}
private onTouchStart(event: cc.Event.EventTouch) {
this._canvas.style.cursor = 'w-resize';
this._startPos = event.getLocation();
this._startWidth = this.Target.node.width;
}
private onTouchMove(event: cc.Event.EventTouch) {
let delt = event.getLocation().x - this._startPos.x;
if (!this.isLeft) {
delt = -delt;
}
this.Target.node.width = cc.misc.clampf(this._startWidth + delt, this.Limit.x, this.Limit.y);
this._updateDirty = true;
}
private onMouseEnter(event: cc.Event.EventMouse) {
this._canvas.style.cursor = 'w-resize';
}
private onMouseLeave(event: cc.Event.EventMouse) {
this._canvas.style.cursor = 'default ';
}
private updateWidget(node: cc.Node) {
node.children.forEach((c) => {
let widget = c.getComponent(cc.Widget);
widget && widget.updateAlignment();
this.updateWidget(c);
});
}
}

9
animator-editor/assets/script/common/cmpt/ResizeArea.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "ea7dfc04-311b-4106-ac76-07793dca50ae",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}