easylogic

create or insert

{ type: "create", id: "", attrs: { id 를 포함한 생성된 전체 데이타 보내기} } 

update

easylogic

zoom (zoomFactor) {

    const oldScale = this.scale; 
    const newScale = oldScale * zoomFactor

    this.setScale(newScale)      

    const newZoomFactor = this.scale / oldScale; 
    this.zoomFactor = newZoomFactor;        

easylogic

// 새로운 canvas 사이즈 설정 
this.canvasSize = {
    x: rect.x ,
    y: rect.y ,
    width: rect.width,
    height: rect.height 
}

// viewport verties 설정 
this.cachedViewport = rectToVerties(0, 0, this.canvasSize.width, this.canvasSize.height)

easylogic

// mouse point 로 viewport 위치 조회 
this.initMousePoint = this.$viewport.createWorldPosition(e.clientX, e.clientY);    

// 드래그 한 mouse point 로 처음 위치와의 차이를 viewport 기준으로 구하기
const targetMousePoint = this.$viewport.createWorldPosition(e.clientX, e.clientY);
const distVector = vec3.subtract([], targetMousePoint, this.initMousePoint);

// 특정 Vertex 좌표를 viewport 좌표로 적용 
const localSourceVertext = this.$viewport.applyVerties([source])[0];

easylogic

/**
 * 2가지 기본 matrix 를 설정한다. 
 * 
 * 1. world matrix 
 * 2. scale matrix - 이동 간격을 계산할 때 주로 사용 
 * 
 */
resetWorldMatrix () {

    // world matrix 

easylogic

this.canvasSize = {
  x: rect.x,
  y: rect.y,
  width: rect.width,
  height: rect.height
}

this.cachedViewport = rectToVerties(0, 0, this.canvasSize.width, this.canvasSize.height)

this.setTransformOrigin([ this.canvasSize.width/2, this.canvasSize.height/2,0])

easylogic

const list = Transform.parseStyle(newChildItemTransform);
const width = childItem.screenWidth.value;
const height = childItem.screenHeight.value;
const newTransformMatrix = Transform.createTransformMatrix(list, width, height);
const [x, y, z] = mat4.getTranslation([], calculateMatrix(
    matrix,
    calculateMatrixInverse(
        childItem.getTransformOriginMatrix(),
        newTransformMatrix,
        childItem.getTransformOriginMatrixInverse(),

easylogic

// scale 구하기 
const newScaleTransform = Transform.fromScale(
    mat4.getScaling([], matrix).map(it => round(it, 1000))
);

// 회전 영역 먼저 구하기 
const q = mat4.getRotation([], matrix);
const axis = []
const rad = quat.getAxisAngle(axis, q)

easylogic

const matrix = calculateMatrix(
    this.getAccumulatedMatrixInverse(),
    childItem.getAccumulatedMatrix(),
)

easylogic

let [realDx, realDy] = this.calculateRealDist(item, 2, distVector)

// 변형되는 넓이 높이 구하기 
const newWidth = item.width + realDx;
const newHeight = item.height + realDy;