@hatiolab/things-scene 9.0.0-beta.9 → 9.0.0

package/dist/components/component.js

@@ -1,912 +0,0 @@
-/*
- * Copyright © HatioLab Inc. All rights reserved.
- */
-import isEqual from 'lodash/isEqual';
-import template from 'lodash/template';
-import * as animation from '../animation';
-import animate from '../animation/animate';
-import * as core from '../core';
-import { error } from '../core/logger';
-import * as memoize from '../core/memoize';
-import * as utils from '../core/utils';
-import effect from '../effect';
-import { resetShadow, setShadow } from '../effect/shadow';
-import * as selector from '../model/selector';
-import { buildMappings, disposeMappings, executeMappings, onchangeData, onchangeMappings } from './data/data';
-import drawImage from './drawer/draw-image-pendable';
-import drawEffect from './drawer/effect';
-import { drawFill, onchangeFill, prepareFill, prepareFillIf } from './drawer/fill';
-import format from './drawer/format';
-import drawStroke from './drawer/stroke';
-import { drawText, font, textLines } from './drawer/text';
-import { ondropfile } from './file/ondropfile';
-import { transcoordC2S, transcoordP2S, transcoordR, transcoordRR, transcoordS2C, transcoordS2O, transcoordS2P, transcoordS2T, transcoordS2TR, transcoordT2P, transcoordT2S } from './geometry/transcoord';
-import union from './geometry/union';
-import { createCanvas } from './html/elements';
-import reposition from './html/reposition';
-import mutateBounds from './mutater/bounds';
-import mutatePath from './mutater/path';
-import pathOutline from './outline/path-outline';
-import RetentionManager from './retention/retention-manager';
-import { access, buildSubstitutor, substitute } from './text/substitutor';
-import { registerDecorator } from '../decorator';
-var registry = {};
-const NATURE = {
-    mutable: false,
-    resizable: true,
-    rotatable: true,
-    properties: [],
-    'value-property': 'text'
-};
-const DEFALUT_DELTA = {
-    theta: 0,
-    tx: 0,
-    ty: 0,
-    sx: 1,
-    sy: 1,
-    fade: 0
-};
-const __components = new WeakMap();
-var __component_count = 0;
-export default class Component {
-    static get nature() {
-        return NATURE;
-    }
-    static register(type, clazz) {
-        if (!clazz)
-            return registry[type];
-        registry[type] = clazz;
-    }
-    static get residents() {
-        return __components;
-    }
-    static registerDecorator(name, decorator) {
-        registerDecorator(name, decorator);
-    }
-    /* Life Cycle */
-    constructor(model, app) {
-        this._app = app;
-        this._model = model || {};
-        this._state = {};
-        this._delta = utils.clone(DEFALUT_DELTA);
-        /*
-         * 만약 VIEW 모드에서, oncreate에 걸린 애니메이션이 있으면, 시작한다.
-         */
-        if (app && this.animation) {
-            this.animation.started = true;
-        }
-        this.clearCache();
-        RetentionManager.add(this);
-        __components.set(this, __component_count++);
-    }
-    // created : 하위 자식 컴포넌트까지 다 생성한 후에 호출된다.
-    created() { }
-    // added : 부모 컨테이너에 추가된 후에 호출된다.
-    added(parent) { }
-    // added : 부모 컨테이너에서 제거된 후에 호출된다.
-    removed(parent) { }
-    // ready : 전체 모델이 만들어지고, 동작준비가 완료된 상태에서 호출됨. 단 한번만 호출됨.
-    async ready() {
-        if (this.state.persistent) {
-            const { isViewMode, dataStorage } = this.app;
-            if (isViewMode) {
-                this.data = await dataStorage.load(this);
-            }
-        }
-    }
-    touch() {
-        this.updatedAt = performance.now();
-    }
-    clearCache(...attrs) {
-        memoize.clear(this, ...attrs);
-    }
-    removeSelf(completely) {
-        // completely && this.dispose()
-        completely ? this.dispose() : this.parent && this.parent.removeComponent(this);
-    }
-    dispose() {
-        if (this._animation) {
-            this._animation.dispose();
-            delete this._animation;
-        }
-        this.disposeMappings();
-        this.parent && this.parent.removeComponent(this);
-        delete this._text_substitutor;
-        delete this._value_substitutor;
-        this._disposed = true;
-        if (this.retention) {
-            RetentionManager.touch();
-        }
-        this._realObject && this._realObject.dispose();
-        this.clearCache();
-        delete this._app;
-    }
-    /* Natures */
-    get nature() {
-        return this.constructor.nature;
-    }
-    get disposed() {
-        return !!this._disposed;
-    }
-    isLayer() {
-        return false;
-    }
-    isGroup() {
-        return false;
-    }
-    isContainer() {
-        return false;
-    }
-    isLine() {
-        return false;
-    }
-    isRoot() {
-        return false;
-    }
-    isRootModel() {
-        return false;
-    }
-    is3dish() {
-        return false;
-    }
-    isTemplate() {
-        return !!this.get('templatePrefix');
-    }
-    isHTMLElement() {
-        return false;
-    }
-    isConnectable() {
-        return false;
-    }
-    replaceRefids(replaceMap) { }
-    get retention() {
-        return Number(this.get('retention')) || 0;
-    }
-    get hasTextProperty() {
-        return true;
-    }
-    /* Application Context */
-    get app() {
-        if (!this._app && this.parent)
-            this._app = this.parent.app;
-        return this._app;
-    }
-    /** Properties Getter/Setter */
-    get model() {
-        return this._model;
-    }
-    get state() {
-        return Object.assign({}, this._model, this._state);
-    }
-    get hierarchy() {
-        var clone = utils.clone(this._model);
-        return clone;
-    }
-    /* text를 표현할지를 결정하는 속성 */
-    get textHidden() {
-        return !!this._textHidden;
-    }
-    set textHidden(hidden) {
-        this._textHidden = !!hidden;
-        this.invalidate();
-    }
-    /*
-     * 컴포넌트의 모델 속성값을 가져오는 메쏘드.
-     */
-    get(property) {
-        return this._model[property];
-    }
-    /**
-     * 컴포넌트의 모델 속성값을 바꾸는 메쏘드.
-     *
-     * - 하나의 속성을 변경하는 경우.
-     *  component.set('top', 10)
-     * - 여러개의 속성을 변경하는 경우.
-     *  component.set({top:10, left:50})
-     */
-    set(props, propval) {
-        if (typeof props === 'string')
-            return this.set({ [props]: propval });
-        var after = {};
-        var before = {};
-        var changed = false;
-        var props = utils.clone(props);
-        // Object.keys() 또는 for..in 으로는 undefined value 를 읽어오지 못함.
-        // Object.getOwnPropertyNames() 를 사용해야 함.
-        var self = this;
-        Object.getOwnPropertyNames(props).forEach(function (key) {
-            let before_val = self._model[key];
-            let after_val = props[key];
-            if (!isEqual(before_val, after_val)) {
-                before[key] = before_val;
-                after[key] = after_val;
-                self._model[key] = after_val;
-                delete self._state[key];
-                changed = true;
-            }
-        });
-        // TODO 아래 로직은 setState 부분과 공유할 수 있을 것이다.
-        if (changed) {
-            this.clearCache();
-            if (after.hasOwnProperty('text'))
-                delete this._text_substitutor;
-            if (after.hasOwnProperty('retention'))
-                RetentionManager.add(this);
-            after.hasOwnProperty('fillStyle') && this.onchangeFill(after, before);
-            after.hasOwnProperty('mappings') && this.onchangeMappings(after, before);
-            after.hasOwnProperty('data') && this.onchangeData(after, before);
-            if (this.onchange)
-                this.onchange(after, before);
-            this.trigger('change', after, before);
-        }
-        return this;
-    }
-    getState(property) {
-        if (this._state.hasOwnProperty(property))
-            return this._state[property];
-        return this.get(property);
-    }
-    setState(props, propval) {
-        if (typeof props === 'string')
-            return this.setState({ [props]: propval });
-        var after = {};
-        var before = {};
-        var changed = false;
-        var props = utils.clone(props);
-        // Object.keys() 또는 for..in 으로는 undefined value 를 읽어오지 못함.
-        // Object.getOwnPropertyNames() 를 사용해야 함.
-        var self = this;
-        var sensitive = this.getState('sensitive');
-        Object.getOwnPropertyNames(props).forEach(function (key) {
-            let before_val = self.getState(key);
-            let after_val = props[key];
-            if (sensitive || !isEqual(before_val, after_val)) {
-                before[key] = before_val;
-                after[key] = after_val;
-                self._state[key] = after_val;
-                changed = true;
-            }
-        });
-        if (changed) {
-            this.clearCache();
-            if (after.hasOwnProperty('text'))
-                delete this._text_substitutor;
-            after.hasOwnProperty('fillStyle') && this.onchangeFill(after, before);
-            after.hasOwnProperty('data') && this.onchangeData(after, before);
-            if (this.onchange)
-                this.onchange(after, before);
-            this.trigger('change', after, before);
-        }
-        return this;
-    }
-    /* Component-Container 계층 구조 */
-    get root() {
-        if (this.isRoot())
-            return this;
-        return this.parent && this.parent.root;
-    }
-    get rootModel() {
-        if (this.isRootModel())
-            return this;
-        return this.parent && this.parent.rootModel;
-    }
-    get parent() {
-        return this._parent;
-    }
-    set parent(parent) {
-        this._parent = parent;
-    }
-    get anchors() {
-        return this.nature.anchors || [];
-    }
-    findAnchor(name) {
-        return this.anchors.find(anchor => anchor.name === name);
-    }
-    // container에 포함될 수 있는가를 테스트한다.
-    isDescendible(container) {
-        return true;
-    }
-    /* 드로잉을 위한 정보들 */
-    getContext() {
-        return this._parent.getContext();
-    }
-    get center() {
-        var bounds = this.bounds;
-        return {
-            x: bounds.left + bounds.width / 2,
-            y: bounds.top + bounds.height / 2
-        };
-    }
-    set center(point) {
-        if (!point || isNaN(point.x) || isNaN(point.y))
-            return;
-        var old_center = this.center;
-        if (Math.round(point.x * 100) / 100 == Math.round(old_center.x * 100) / 100 &&
-            Math.round(point.y * 100) / 100 == Math.round(old_center.y * 100) / 100)
-            return;
-        var shift_x = point.x - old_center.x;
-        var shift_y = point.y - old_center.y;
-        this.path = this.path.map(p => {
-            return { x: p.x + shift_x, y: p.y + shift_y };
-        });
-    }
-    get location() {
-        return this.center;
-    }
-    set location(location) {
-        this.center = location;
-    }
-    get dimension() {
-        return this.get('dimension');
-    }
-    set dimension(dimension) {
-        this.set('dimension', dimension);
-    }
-    get bounds() {
-        var path = this.path;
-        var left, right, top, bottom;
-        left = right = path[0].x;
-        top = bottom = path[0].y;
-        for (let i = 1; i < path.length; i++) {
-            let point = path[i];
-            if (point.x < left)
-                left = point.x;
-            else if (point.x > right)
-                right = point.x;
-            if (point.y < top)
-                top = point.y;
-            else if (point.y > bottom)
-                bottom = point.y;
-        }
-        return {
-            left: left,
-            top: top,
-            width: right - left,
-            height: bottom - top
-        };
-    }
-    set bounds(bounds) {
-        // 1. left, top의 변화만큼 translate 한다.
-        var old_bounds = this.bounds;
-        if (Math.round(bounds.width * 100) / 100 == Math.round(old_bounds.width * 100) / 100 &&
-            Math.round(bounds.height * 100) / 100 == Math.round(old_bounds.height * 100) / 100 &&
-            Math.round(bounds.left * 100) / 100 == Math.round(old_bounds.left * 100) / 100 &&
-            Math.round(bounds.top * 100) / 100 == Math.round(old_bounds.top * 100) / 100)
-            return;
-        // 2. width, height의 변화비율을 scale-x, scale-y 에 보관한다.
-        var scale = {
-            x: old_bounds.width == 0 ? 1 : bounds.width / old_bounds.width,
-            y: old_bounds.height == 0 ? 1 : bounds.height / old_bounds.height
-        };
-        // 3. 기존 포인트들을 기존 거리에 scale-x, scale-y 만큼 조정된 위치로 새로운 bounds의 left-top으로부터 설정한다.
-        this.path = this.path.map(point => {
-            return {
-                x: bounds.left + (point.x - old_bounds.left) * scale.x,
-                y: bounds.top + (point.y - old_bounds.top) * scale.y
-            };
-        });
-    }
-    /*
-     * PATH란 컴포넌트의 형상을 만드는 포인트의 배열이다
-     *
-     * PATH는 컴포넌트의 바운드를 형성한다. (즉 바운드는 컴포넌트의 모든 패스를 포함하는 사각형 영역이다.)
-     */
-    get path() {
-        // 각 컴포넌트에서 필수적으로 구현해야 함.
-        error('이 컴포넌트에 get path 가 구현되어있지 않음.', this);
-        return [];
-    }
-    set path(path) {
-        // 각 컴포넌트에서 필수적으로 구현해야 함.
-        error('이 컴포넌트에 get path 가 구현되어있지 않음.', this);
-    }
-    get drawPath() {
-        return this.path;
-    }
-    outline(progress) {
-        return pathOutline(this, progress || 0);
-    }
-    get strokeStyle() {
-        // return this.getState('strokeStyle')
-        return this.get('strokeStyle');
-    }
-    set strokeStyle(strokeStyle) {
-        // this.setState('strokeStyle', strokeStyle)
-        this.set('strokeStyle', strokeStyle);
-    }
-    get fillStyle() {
-        return this.getState('fillStyle');
-    }
-    set fillStyle(fillStyle) {
-        this.setState('fillStyle', fillStyle);
-    }
-    /*
-     * TODO. fontColor에 state를 적용.
-     * fontColor 속성을 font() 함수에서 다른 속성들과 같이 일괄적으로 사용하기때문에, 현재는 적용하지 못함
-     * 전반적인 state 관리 방법 개선시 조치 필요함.
-     */
-    get fontColor() {
-        return this.get('fontColor');
-    }
-    set fontColor(fontColor) {
-        this.set('fontColor', String(utils.objToVal(fontColor)));
-    }
-    get rotation() {
-        return this.getState('rotation');
-    }
-    set rotation(rotation) {
-        this.setState('rotation', Number(utils.objToVal(rotation)));
-    }
-    contains(x, y) {
-        // 효율을 위해서, contains를 호출하기 전에 x, y좌표값은 이 컴포넌트에 대해서 이미 transcoord 된 상태이다.
-        // 참조 : capture(x, y)
-        return false;
-    }
-    /*
-     * PATH 리스트를 직접 수정할 수 있는 지를 결정한다.
-     *
-     * 일반적으로 PATH는 바운드 생성을 위해서 논리적으로 생성되므로, 직접 수정하지 않는다.(return false)
-     * 그러나, 각 꼭지점들이 개별로 움직이는 다각형류는 path 라는 모델데이타를 가지므로, 직접수정이 가능할 수 있다.(return true)
-     *
-     * Immutable 컴포넌트의 형상을 바꾸는 방법은 바운드를 이용한 리사이즈나, 특별한 컨트롤을 통해서 가능하다.
-     */
-    get mutable() {
-        return this.nature.mutable;
-    }
-    /*
-     * BOUND를 통해서 리사이즈를 할 수 있는 지를 결정한다.
-     *
-     * 일반적으로 면적을 갖는 컴포넌트는 대체로 가능하다.(return true)
-     * 그러나, LINE 등 면적을 가지지않는 컴포넌트는 가능하지 않도록 정의한다.(return false)
-     */
-    get resizable() {
-        return this.nature.resizable && !this.stuck;
-    }
-    /*
-     * 컴포넌트의 사이즈를 외부(모델러 등)에서 조정하는 경우, set bounds 전에 조정하는 기회를 갖는다.
-     * 예를 들면, 비례적인 크기 조정이 필요한 경우 등.
-     */
-    adjustResize(bounds, origin_bounds, diagonal) {
-        if (diagonal) {
-            let old = this.bounds;
-            let ratio = old.height / old.width;
-            let dw = bounds.width - old.width;
-            let dh = bounds.height - old.height;
-            if (dw * ratio > dh)
-                dh = dw * ratio;
-            else
-                dw = dh / ratio;
-            let dl = bounds.left - old.left;
-            let dt = bounds.top - old.top;
-            /* TOP-LEFT를 모두 변경시키는 경우가 아니면, TOP과 LEFT를 보호한다. */
-            if (dl != 0 && dt != 0) {
-                dt = -dh;
-                dl = -dw;
-            }
-            else if (dl != 0) {
-                dl = -dw;
-            }
-            else if (dt != 0) {
-                dt = -dh;
-            }
-            return {
-                left: old.left + dl,
-                top: old.top + dt,
-                width: old.width + dw,
-                height: old.height + dh
-            };
-        }
-        return bounds;
-    }
-    /*
-     * 회전을 할 수 있는 지를 결정한다.
-     *
-     * 일반적으로 모든 컴포넌트는 가능하다.(return true)
-     */
-    get rotatable() {
-        return this.nature.rotatable && !this.stuck;
-    }
-    /*
-     * 컴포넌트의 회전각을 외부(모델러 등)에서 조정하는 경우, rotation이 set되기 전에 조정하는 기회를 갖는다.
-     * 예를 들면, 스텝 회전이 진행되는 경우 등.
-     */
-    adjustRotation(rotation, step) {
-        if (step || this.app.rotateStepForced) {
-            let step = this.app.rotateStep;
-            return Math.floor((rotation + step / 2) / step) * step;
-        }
-        return rotation;
-    }
-    /*
-     * 이벤트 캡쳐가 가능한 지를 결정한다.
-     */
-    get capturable() {
-        return this.get('capturable') !== false && (this.app.isEditMode || !this.hidden);
-    }
-    /*
-     * 어떤 이유로 움직일 수 없는 상태가 되었는지를 알려준다.
-     */
-    get stuck() {
-        return !!((this.parent && this.parent.layout.isStuck(this)) || this.get('locked'));
-    }
-    /*
-     * 조건에 맞는 컴포넌트를 찾기 위한 기능들
-     *
-     * findAll(s, ...others) 조건에 맞는 모든 컴포넌트를 찾아낸다.
-     * findFirst(finder, ...others) finder 함수에서 조건에 맞는 첫번째 컴포넌트를 리턴한다.
-     * capture(x, y) 파라미터로 주어진 좌표값을 포함하는 컨테이너를 찾는다. (Event Capturing)
-     * findById(id) 파라미터 id와 같은 id를 가진 컴포넌트를 찾는다.
-     */
-    findFirst(finder, ...others) {
-        if (finder(this, ...others))
-            return this;
-    }
-    findAll(s, ...others) {
-        if (typeof s === 'string')
-            return selector.select(s, this, others[0] || this); // others[0] means (self)
-        if (typeof s === 'function' && s(this, ...others))
-            return [this];
-    }
-    capture(x, y, except) {
-        if (!this.capturable || (except === null || except === void 0 ? void 0 : except(this)))
-            return false;
-        var point = this.transcoordP2S(x, y);
-        if (this.contains(point.x, point.y))
-            return this;
-    }
-    /* Drawing 관련 기능들 */
-    prepare(resolve, reject) {
-        // 1. 먼저 만족하지 않는 조건인 경우에, 바로 리턴한다.
-        // 2. 재진입되지 않는 조건을 먼저 설정한다. (주로 핵심적인 멤버변수를 생성한다.)
-        //    prepareIf(cond) 의 조건으로 핵심 멤버변수가 설정되지 않은 경우로 로직을 만들 수 있도록 한다.
-        // 3. 비동기 콜백에 대한 핸들링
-        // 4. 비동기 상황을 트리거링
-        resolve(this);
-    }
-    prepareIf(condition) {
-        if (!condition)
-            return;
-        this.prepare &&
-            this.prepare(resolve => {
-                this.invalidate();
-            }, reject => {
-                error(reject);
-            });
-    }
-    get decotag() {
-        const { id, tag } = this.state;
-        return (id ? `#${id}` : '') + (tag ? `@${tag}` : '');
-    }
-    get decorators() {
-        return ['decotag', 'data-spread'];
-    }
-    get hidden() {
-        return (this.getState('hidden') ||
-            (!this.data && this.data !== 0 && this.getState('ndns')) /* ndns - falsy and not zero */ ||
-            this.isTemplate());
-    }
-    set hidden(hidden) {
-        this.setState('hidden', hidden);
-    }
-    draw(context) {
-        context.save();
-        this.__proto__.hasOwnProperty('_pre_draw') ? this._pre_draw(context) : this.prerender(context);
-        this.__proto__.hasOwnProperty('_draw') ? this._draw(context) : this.render(context);
-        this.__proto__.hasOwnProperty('_post_draw') ? this._post_draw(context) : this.postrender(context);
-        context.restore();
-    }
-    delta(attr, value) {
-        if (value !== undefined)
-            this._delta[attr] = value;
-        else {
-            if (attr)
-                return this._delta[attr];
-            else
-                return this._delta;
-        }
-    }
-    prerender(context) {
-        /*
-         * 컴포넌트의 그리기 전 모든 준비작업을 담당한다.
-         */
-        var rotatePoint = this.rotatePoint;
-        var { scale, rotation, shadow, alpha } = this.state;
-        var sx = ((scale && scale.x) || 1) * this._delta.sx;
-        var sy = ((scale && scale.y) || 1) * this._delta.sy;
-        var theta = (rotation || 0) + this._delta.theta;
-        var { tx = 0, ty = 0 } = this._delta;
-        var fade = (alpha || 1) - this._delta.fade;
-        if (tx || ty)
-            context.translate(tx, ty);
-        // 원점으로 이동하여 회전한 후 다시 되돌아온다.
-        if (sx != 1 || sy != 1 || theta) {
-            context.translate(rotatePoint.x, rotatePoint.y);
-            if (sx != 1 || sy != 1)
-                context.scale(sx, sy);
-            if (theta)
-                context.rotate(theta);
-            context.translate(-rotatePoint.x, -rotatePoint.y);
-        }
-        if (fade)
-            context.globalAlpha = fade;
-        if (shadow)
-            setShadow(context, shadow, this);
-        if (this.app.isEditMode && this.hidden)
-            context.globalAlpha *= 0.5;
-    }
-    render(context) {
-        /*
-         * 상속받아서 구현하는 draw() 함수는 컴포넌트 자신의 표현에만 집중한다.
-         * 컨텍스트의 변형이 다른 컴포넌트에 어떤 영향을 줄 지 고려할 필요가 없다.
-         * 텍스트, 효과, 애니메이션 등 컴포넌트 공통 기능에 대한 표현은 처리하지 않는다.(postrender 공통 처리)
-         */
-    }
-    postrender(context) {
-        /* postrender() 함수는 거의 상속하지 않는다.
-         * 텍스트, 효과, 애니메이션 등 컴포넌트 공통 기능에 대한 표현을 담당한다.
-         */
-        this.drawText(context);
-    }
-    drawText(context) {
-        if (!this.textHidden && this.text && this.hasTextProperty)
-            drawText(context, this.textBounds, this.textLines(context), this.state);
-    }
-    drawStroke(context, override) {
-        drawStroke(context, override
-            ? {
-                ...this.state,
-                ...override
-            }
-            : this.state, this);
-    }
-    drawFill(context, override) {
-        if (this.fillStyle && this.fillStyle != 'transparent') {
-            drawFill(context, this.bounds, this.center, override
-                ? {
-                    ...this.state,
-                    ...override
-                }
-                : this.state, this);
-            // 만약 fill이 된다면, fill에 의해서 그림자가 표현되므로, 이후 stroke등에 의한 그림자는 생기지 않도록 한다.
-            resetShadow(context);
-        }
-    }
-    /*
-     * 드로잉 툴을 위한 동작 기능들
-     *
-     * move({x, y}) 컴포넌트를 x, y 만큼 이동한다.
-     * animate : 애니메이션 동작을 정의한다.
-     * effect : To Be Defined
-     */
-    animate(opts) {
-        if (this._animate)
-            this._animate.stop();
-        this._animate = animate(opts);
-        return this._animate;
-    }
-    move({ x, y }) {
-        var oldpath = this.path;
-        var towardx = x;
-        var towardy = y;
-        this.path = oldpath.map(point => {
-            return {
-                x: point.x + towardx,
-                y: point.y + towardy
-            };
-        });
-    }
-    symmetryX(x) {
-        if (typeof x !== 'number')
-            x = this.center.x;
-        var { rotation } = this.state;
-        var fillStyle = this.fillStyle;
-        this.set('rotation', 2 * Math.PI - rotation);
-        if (fillStyle && fillStyle.type === 'gradient' && fillStyle.gradientType === 'linear') {
-            var newStyle = utils.clone(fillStyle);
-            newStyle.rotation = (Math.PI - parseFloat(fillStyle.rotation || 0)) % (Math.PI * 2);
-            this.set('fillStyle', newStyle);
-        }
-        this.path = this.path.map(point => {
-            return {
-                x: 2 * x - point.x,
-                y: point.y
-            };
-        });
-    }
-    symmetryY(y) {
-        this.symmetryX();
-        this.set('rotation', (Math.PI + this.model.rotation) % (Math.PI * 2));
-        if (y) {
-            this.move({
-                x: 0,
-                y: (y - this.center.y) * 2
-            }, false);
-        }
-    }
-    get animation() {
-        if (!this.app.isViewMode || this.isTemplate())
-            return;
-        if (!this._animation) {
-            var config = this.state.animation;
-            if (config && config['oncreate'])
-                this._animation = animation.compile(this, config['oncreate']);
-        }
-        return this._animation;
-    }
-    effect(context, model) {
-        return effect(this, context, model);
-    }
-    set started(started) {
-        if (this.animation)
-            this.animation.started = started;
-    }
-    /* 강제로 컴포넌트를 다시 그리게 하는 함수 */
-    invalidate() {
-        this.parent && this.parent.invalidate();
-    }
-    /*
-     * 텍스팅에서 font의 크기와 관련해서는, 일반적으로 통용되는 크기값이 있으므로,
-     * 모델링 단위의 내부 스케일링(예를 들면, unitScale)에 의한 값을 보정하기위해서,
-     * font, lineHeight, fontSize 속성을 별도로 정의한다.
-     * unitScale 등에 의해서 굳이 단위를 스케일링 하는 이유는, 브라우저에서 일반적으로
-     * 너무 적은 크기의 폰트(예를 들면 7이하)를 그리지 못하도록 되어있기 때문에 도입한 것이다.
-     * 이를 해결하기 위해서 실제로는 훨씬 크게 스케일링된 값을 쓰면서(예를 들면 10배)
-     * 실제 보여줄때는 1/10로 축소시켜서 보여주는 방법을 사용했다.(고육책)
-     */
-    get font() {
-        return font(this.model);
-    }
-    get lineHeight() {
-        var lineHeight = this.get('lineHeight');
-        if (!lineHeight)
-            return this.fontSize * 1.2;
-        return lineHeight;
-    }
-    defaultTextSubstitutor() {
-        var t = this.getState('text');
-        return t == undefined ? '' : String(t);
-    }
-    get textSubstitutor() {
-        if (!this._text_substitutor)
-            this._text_substitutor = buildSubstitutor(this.getState('text'), this) || this.defaultTextSubstitutor;
-        return this._text_substitutor;
-    }
-    get text() {
-        var textFormat = this.get('textFormat');
-        return textFormat ? format(textFormat, this.textSubstitutor()) : this.textSubstitutor();
-    }
-    set text(text) {
-        delete this._text_substitutor;
-        var t = utils.objToVal(text);
-        this.setState('text', t == undefined ? '' : String(t));
-    }
-    textLines(context) {
-        return textLines(context || this.getContext(), this.textBounds.width, this.font, this.text, this.get('textWrap'));
-    }
-    get textBounds() {
-        var { paddingTop, paddingLeft, paddingRight, paddingBottom } = this.state;
-        paddingBottom || (paddingBottom = 0);
-        paddingTop || (paddingTop = 0);
-        paddingLeft || (paddingLeft = 0);
-        paddingRight || (paddingRight = 0);
-        var { left, top, width, height } = this.bounds;
-        return {
-            left: left + paddingLeft,
-            top: top + paddingTop,
-            width: Math.max(width - paddingLeft - paddingRight, 0),
-            height: Math.max(height - paddingTop - paddingBottom, 0)
-        };
-    }
-    get textRotation() {
-        return 0;
-    }
-    get rotatePoint() {
-        return this.center;
-    }
-    trim() {
-        /* TODO 일단 무거운 "" 속성과 chart 속성을 삭제한다. 향후 각 컴포넌트의 지정 속성 만 남기고, 모두 제거한다. */
-        delete this._model[''];
-        if (this._model.type !== 'chartjs')
-            delete this._model.chart;
-    }
-    /* data handling */
-    get value() {
-        var valueprop = this.nature['value-property'] || 'text';
-        return valueprop == 'value' ? this.getState('value') : this[valueprop];
-    }
-    set value(value) {
-        var valueprop = this.nature['value-property'] || 'text';
-        valueprop == 'value' ? this.setState('value', value) : (this[valueprop] = value);
-    }
-    get data() {
-        return this.getState('data');
-    }
-    set data(data) {
-        this.setState('data', data);
-        this.touch();
-    }
-    get mappings() {
-        /* 제거된 상태가 아니면(this.parent), 매핑을 다시 빌드한다. */
-        if (!this._mappings && this.parent)
-            this.buildMappings();
-        return this._mappings;
-    }
-    /* 3D related */
-    get RealObject() {
-        if (!this.disposed && !this._realObject) {
-            this._realObject = this.buildRealObject();
-            if (!this._realObject) {
-                return;
-            }
-            this._realObject.update();
-            this._realObject.updateTransform();
-        }
-        return this._realObject;
-    }
-    buildRealObject() { }
-    /* Serialization */
-    serialize(...others) {
-        return JSON.stringify(this.hierarchy, ...others);
-    }
-    get controls() { }
-    /* etc */
-    closeScene(data) {
-        this.rootModel.closeScene(data);
-    }
-}
-Component.union = union;
-Component.transcoordR = transcoordR;
-Component.transcoordRR = transcoordRR;
-Component.createCanvas = createCanvas;
-Component.memoize = memoize.intercept;
-Component.mixin = core.mixin;
-Component.drawText = drawText;
-Component.font = font;
-Component.textLines = textLines;
-Component.drawStroke = drawStroke;
-Component.drawFill = drawFill;
-Component.reposition = reposition;
-Component.RetentionManager = RetentionManager;
-Component.template = template;
-Component.buildSubstitutor = buildSubstitutor;
-Object.assign(Component.prototype, {
-    /* Drawers */
-    drawEffect,
-    prepareFill,
-    prepareFillIf,
-    onchangeFill,
-    drawImage,
-    /* Mutators */
-    mutateBounds,
-    mutatePath,
-    /* substitute */
-    access,
-    substitute,
-    /* data */
-    onchangeMappings,
-    onchangeData,
-    buildMappings,
-    executeMappings,
-    disposeMappings,
-    /* file drop */
-    ondropfile,
-    /* Transcoorders */
-    transcoordS2P,
-    transcoordP2S,
-    transcoordS2T,
-    transcoordT2P,
-    transcoordT2S,
-    transcoordS2TR,
-    transcoordS2O,
-    transcoordC2S,
-    transcoordS2C,
-    /* TODO delete below */
-    _pre_draw: Component.prototype.prerender,
-    _draw: Component.prototype.render,
-    _post_draw: Component.prototype.postrender
-});
-['rotatePoint', 'font', 'lineHeight', 'retention'].forEach(getter => Component.memoize(Component.prototype, getter, false));
-['bounds', 'center', 'textBounds'].forEach(getter => Component.memoize(Component.prototype, getter, true));
-/* event 기능을 mixin */
-Component.mixin(Component.prototype, core.event.withEvent);
-//# sourceMappingURL=component.js.map