Skip to content

Commit

Permalink
feat(drag): 新增覆盖图形块弹出
Browse files Browse the repository at this point in the history
  • Loading branch information
@HRan2004
HRan2004 committed Aug 29, 2022
1 parent 39fee0c commit ea790ce
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 41 deletions.
27 changes: 17 additions & 10 deletions src/core/block/block.class.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,15 @@ export default class Block {
previous?: Block
parent?: Block

isShadow: boolean = false;
isOpacity: OpacityType = OpacityType.Default;

// 仅根元素有以下参数的值
isRoot: boolean = false; // 是否为根元素
x: number = 0; // 在画布中的坐标X
y: number = 0; // 在画布中的坐标Y
zIndex: number = 1; // 在画布中的层级
graph: Graph | null = null;

isShadow: boolean = false;
isOpacity: OpacityType = OpacityType.Default;
graph: Graph | null = null; // 画布对象

constructor(
public name: string,
Expand Down Expand Up @@ -296,6 +297,11 @@ export default class Block {
return block.isOpacity === OpacityType.True
}

getGraph(): Graph | null {
if (this.graph) return this.graph
if (this.parent) return this.parent.getGraph()
return null
}
}

// 图形块类型
Expand All @@ -309,6 +315,13 @@ export enum BlockType { // Next Previous Hat Output
HatSingle, // √
}

// 图形块透明类型
export enum OpacityType {
Default, // 根据父控件
True,
False,
}

// 图形块申明接口
export interface IBlock {
name: string;
Expand All @@ -320,12 +333,6 @@ export interface IBlock {
toolbox?: ItemValue[] | boolean;
}

export enum OpacityType {
Default, // 根据父控件
True,
False,
}


// 内容类型
export type ItemValue = string | number | boolean | null | Item;
Expand Down
56 changes: 43 additions & 13 deletions src/core/drag/drag-manager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ export default class DragManager {
static RESET_POS_MOVE = 40 // 移动溢出画布时回弹感知范围
static RESET_WIDTH = 20 // 感知默认扩展宽度

static THROW_BIAS = 60 // 弹出偏移量


static dragItem: Item | null = null; // 当前拖拽内容信息
static inputs: InputPuzzle[] = [] // 当前可拼接接口

Expand All @@ -22,6 +25,8 @@ export default class DragManager {

static current: Block | null = null // 鼠标移动时当前落点的临时渲染图形块实例

static throwBlock: Block | null = null

static onDragBlockDown(block: Block, e: MouseEvent) {
this.dragItem = block.getItem()

Expand Down Expand Up @@ -105,8 +110,16 @@ export default class DragManager {
while (inner.hadNext() && inner.next.content) {
inner = inner.next.content as Block
}
if (near.temp) near.temp.isOpacity = OpacityType.False
inner.setArgByBlock(inner.next, near.temp, true)
if(inner.hadNext()){
if (near.temp) near.temp.isOpacity = OpacityType.False
inner.setArgByBlock(inner.next, near.temp, true)
this.setThrow(null)
}else{
inner.setArgByBlock(inner.next, null, true)
this.setThrow(near.temp)
}
}else{
this.setThrow(near.temp)
}
} else {
this.log('Remove', near.block.name)
Expand All @@ -116,9 +129,16 @@ export default class DragManager {
} else {
this.removeDragShadow()
this.current = null
this.setThrow(null)
}
}

static setThrow(block: Block | null) {
if(this.throwBlock && !block) console.log('RemoveThrow')
this.throwBlock = block
if(block) console.log('SetThrow', this.throwBlock)
}

static removeDragShadow(expect: InputPuzzle | null = null): void {
for (const input of this.inputs) {
if (expect && input === expect) continue
Expand All @@ -133,24 +153,34 @@ export default class DragManager {
static onDragBlockUp(e: MouseEvent) {
DragManager.clearDragView()
const item = this.dragItem

if (!item) return

const pos = this.getEventBlockPosition(e)
let graph = RhineBlock.graphs[0]
RhineBlock.graphs.some(tg => {
const rect = tg.svg.getBoundingClientRect()
if (pos[0] >= rect.x && pos[0] <= rect.x + rect.width && pos[1] >= rect.y && pos[1] <= rect.y + rect.height) {
graph = tg
return true
}
})
const rect = graph.svg.getBoundingClientRect()

if (this.current) {
BaseRender.clearOpacity(this.current)
if(this.throwBlock){
const throwItem = this.throwBlock.getItem()
const cr = this.current.view!.getBoundingClientRect()
throwItem.x = cr.x - rect.x + this.THROW_BIAS
throwItem.y = cr.y - rect.y + this.THROW_BIAS
graph.render([throwItem])
}
this.current = null
} else {
const pos = this.getEventBlockPosition(e)
let graph = RhineBlock.graphs[0]
RhineBlock.graphs.some(tg => {
const rect = tg.svg.getBoundingClientRect()
if (pos[0] >= rect.x && pos[0] <= rect.x + rect.width && pos[1] >= rect.y && pos[1] <= rect.y + rect.height) {
graph = tg
return true
}
})
const rect = graph.svg.getBoundingClientRect()
item.x = pos[0] - rect.x
item.y = pos[1] - rect.y
if (item.x > rect.width - this.RESET_POS_CATCH) item.x = rect.width - this.RESET_POS_MOVE - this.RESET_WIDTH
if (item.x > rect.width - this.RESET_POS_CATCH) item.x = rect.width - this.RESET_POS_MOVE - this.RESET_WIDTH
if (item.y > rect.height - this.RESET_POS_CATCH) item.y = rect.height - this.RESET_POS_MOVE - this.RESET_WIDTH
if (item.x < this.RESET_POS_CATCH) item.x = this.RESET_POS_MOVE
if (item.y < this.RESET_POS_CATCH) item.y = this.RESET_POS_MOVE
Expand Down
33 changes: 19 additions & 14 deletions src/core/render/base/base-render.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default class BaseRender {
static SHADOW_BIAS = 1;

static render(block: Block, parentEl: SVGElement): SVGElement {
if(block.view) block.view.remove()
if (block.view) block.view.remove()
// 创建图形块根元素
const el = SvgElCreator.newGroup({
class: 'rb-block-holder'
Expand All @@ -54,19 +54,22 @@ export default class BaseRender {
return el
}

// 块整体重渲染
static rerender(block: Block) {
while(block.parent) block = block.parent
while (block.parent) block = block.parent
this.rerenderBlock(block)
}

// 局部重渲染
static rerenderBlock(block: Block) {
if(!block.view) block.view = SvgElCreator.newGroup({
if (!block.view) block.view = SvgElCreator.newGroup({
class: 'rb-block-holder'
})
const el = block.view
block.mapArgs((arg: Arg) => {
if(arg.isBlockType()) {
if(arg.content){
if(!arg.view){
if (arg.isBlockType()) {
if (arg.content) {
if (!arg.view) {
arg.view = this.render(arg.content as Block, el)
}
const content = arg.content as Block
Expand All @@ -77,15 +80,16 @@ export default class BaseRender {
this.freshViewSize(block)
this.renderPositionCalculate(block)
const bodyPath = this.makeBodyPath(block)
for (let i = 0; i<el.children.length; i++) {
for (let i = 0; i < el.children.length; i++) {
const child = el.children[i] as SVGElement
if (child.classList.contains('rb-block-body') || child.classList.contains('rb-block-body-shadow')) {
child.setAttribute('d', bodyPath)
}
}
}

static renderBody(path: string,block: Block, parentEl: SVGElement) {
// 渲染主体块
static renderBody(path: string, block: Block, parentEl: SVGElement) {
const opacity = block.getOpacity()
for (const i in this.SHADOW_COLORS) {
const body = SvgElCreator.newPath(path, adjustColorBright(block.color, this.SHADOW_COLORS[i]), 'none');
Expand Down Expand Up @@ -118,7 +122,8 @@ export default class BaseRender {
parentEl,
(text) => {
arg.content = text
});
}
);
}
} else if (arg.type === ArgType.Statement) {
if (arg.content) {
Expand All @@ -130,7 +135,7 @@ export default class BaseRender {
}
}
if (el != null) {
if(!arg.isBlockType()){
if (!arg.isBlockType()) {
el.style.opacity = opacity ? this.OPACITY_CONTENT + '' : '1'
}
parentEl.appendChild(el)
Expand All @@ -157,7 +162,7 @@ export default class BaseRender {
arg.h = this.MIN_VALUE_HEIGHT
}
if (arg.content && arg.content instanceof Block && arg.isBlockType()) {
if(inner){
if (inner) {
this.freshViewSize(arg.content as Block)
}
}
Expand Down Expand Up @@ -198,7 +203,7 @@ export default class BaseRender {
let th = arg.h
if (arg.type !== ArgType.Statement) {
th += this.PADDING_VERTICAL * 2
}else{
} else {
th -= this.provider.PUZZLE_HEIGHT - this.SHADOW_BIAS
}
if (th > height) height = th
Expand Down Expand Up @@ -226,7 +231,7 @@ export default class BaseRender {

arg.x = x
arg.y = y + (h - arg.h) / 2 + this.SHADOW_BIAS
if (arg.type === ArgType.Statement) arg.updateViewPosition([this.SHADOW_BIAS, this.SHADOW_BIAS * 2])
if (arg.type === ArgType.Statement) arg.updateViewPosition([this.SHADOW_BIAS, this.SHADOW_BIAS])
else if (arg.type === ArgType.Value) arg.updateViewPosition([this.SHADOW_BIAS, this.SHADOW_BIAS])
else arg.updateViewPosition()

Expand Down Expand Up @@ -315,7 +320,7 @@ export default class BaseRender {
static clearOpacity(block: Block): void {
block.recurMapBlock(tb => {
tb.isOpacity = OpacityType.Default
if(tb.view){
if (tb.view) {
const children = tb.view?.children
for (let i = 0; i < children.length; i++) {
(children[i] as SVGElement).style.opacity = '1'
Expand Down
5 changes: 1 addition & 4 deletions src/core/view/graph/graph.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,10 @@ import {RhineBlock} from "../../RhineBlock";


export default function renderGraph(dom: HTMLElement, items: Item[]): Graph {

const graph = new Graph(dom);
graph.render(items, true);
RhineBlock.registerGraph(graph);

return graph

}

export class Graph {
Expand All @@ -26,9 +23,9 @@ export class Graph {
render(items: Item[] = [], clear = false) {
if (clear) this.clear()
for (const item of items) {
console.log(item)
const block = Block.fromItem(item)
BaseRender.render(block, this.svg)
console.log(item.x, item.y)
block.setPosition(item.x || 100, item.y || 100)
block.graph = this
this.blocks.push(block)
Expand Down

0 comments on commit ea790ce

Please sign in to comment.