How to use kity - 10 common examples
To help you get started, we’ve selected a few kity examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fex-team / kf-render / src / expression / expression.js View on Github 
define( function ( require, exports, module ) {
var kity = require( "kity"),
// 打包函数列表
WRAP_FN = [],
Expression = kity.createClass( 'Expression', {
base: require( "signgroup" ),
getBaseWidth: function () {
return this.getWidth();
},
getBaseHeight: function () {
return this.getHeight();
}
} );PREFIX = "kf-editor-ui-",
LIST_OFFSET = 7,
DEFAULT_OPTIONS = {
iconSize: {
w: 32,
h: 32
}
},
// UiUitls
$$ = require( "ui/ui-impl/ui-utils" ),
Button = kity.createClass( "Button", {
constructor: function ( doc, options ) {
this.options = kity.Utils.extend( {}, DEFAULT_OPTIONS, options );
// 事件状态， 是否已经初始化
this.eventState = false;
this.toolbar = null;
this.displayState = false;
this.fixOffset = options.fixOffset || false;
this.doc = doc;
this.element = this.createButton();
this.disabled = true;// UiUitls
$$ = require( "ui/ui-impl/ui-utils" ),
Utils = require( "base/utils" ),
VIEW_STATE = require( "ui/def" ).VIEW_STATE,
Scrollbar = require( "ui/ui-impl/scrollbar/scrollbar" ),
Toolbar = require( "ui/toolbar/toolbar" ),
// 控制组件
ScrollZoom = require( "ui/control/zoom" ),
ELEMENT_LIST = require( "ui/toolbar-ele-list" ),
UIComponent = kity.createClass( 'UIComponent', {
constructor: function ( kfEditor, options ) {
var currentDocument = null;
this.options = options;
this.container = kfEditor.getContainer();
currentDocument = this.container.ownerDocument;
// ui组件实例集合
this.components = {};
this.canvasRect = null;
this.viewState = VIEW_STATE.NO_OVERFLOW;PREFIX = "kf-editor-ui-",
// UiUitls
$$ = require( "ui/ui-impl/ui-utils" ),
BOX_TYPE = require( "ui/ui-impl/def/box-type" ),
ITEM_TYPE = require( "ui/ui-impl/def/item-type" ),
Button = require( "ui/ui-impl/button" ),
List = require( "ui/ui-impl/list" ),
SCROLL_STEP = 20,
Box = kity.createClass( "Box", {
constructor: function ( doc, options ) {
this.options = options;
this.toolbar = null;
this.options.type = this.options.type || BOX_TYPE.DETACHED;
this.doc = doc;
this.itemPanels = null;
this.overlapButtonObject = null;
this.overlapIndex = -1;
this.element = this.createBox();
this.groupContainer = this.createGroupContainer();
this.itemGroups = this.createItemGroup();define( function ( require ) {
var kity = require( "kity" ),
SCROLLBAR_DEF = require( "ui/def" ).scrollbar,
SCROLLBAR_CONF = require( "sysconf" ).scrollbar,
Utils = require( "base/utils" ),
CLASS_PREFIX = "kf-editor-ui-";
return kity.createClass( "Scrollbar", {
constructor: function ( uiComponent, kfEditor ) {
this.uiComponent = uiComponent;
this.kfEditor = kfEditor;
this.widgets = null;
this.container = this.uiComponent.scrollbarContainer;
// 显示状态
this.state = false;
// 滚动条当前各个状态下的值
this.values = {
// 滚动条此时实际的偏移值, 计算的时候假定滑块的宽度为0
offset: 0,define( function ( require ) {
var kity = require( "kity" ),
PREFIX = "kf-editor-ui-",
PANEL_HEIGHT = 66,
// UiUitls
$$ = require( "ui/ui-impl/ui-utils" ),
Box = require( "ui/ui-impl/box" ),
Area = kity.createClass( "Area", {
constructor: function ( doc, options ) {
this.options = options;
this.doc = doc;
this.toolbar = null;
this.disabled = true;
this.panelIndex = 0;
this.maxPanelIndex = 0;
this.currentItemCount = 0;
this.lineMaxCount = 9;
this.element = this.createArea();
this.container = this.createContainer();define( function ( require, exports, modules ) {
var kity = require( "kity" );
return kity.createClass( 'Operator', {
base: require( "signgroup" ),
constructor: function ( operatorName ) {
this.callBase();
// 该操作符所属的表达式
this.parentExpression = null;
// 操作符名称
this.operatorName = operatorName;
// 操作符图形
this.operatorShape = new kity.Group();} );
},
mountTo: function ( container ) {
container.appendChild( this.element );
},
appendTo: function ( container ) {
container.appendChild( this.element );
}
} ),
BoxItem = kity.createClass( "BoxItem", {
constructor: function ( type, doc, options ) {
this.type = type;
this.doc = doc;
this.options = options;
this.element = this.createItem();
// 项的label是可选的
this.labelNode = this.createLabel();
this.contentNode = this.createContent();
this.mergeElement();
},define( function ( require, exports, module ) {
var kity = require( "kity" ),
kfUtils = require( "base/utils" ),
InputFilter = require( "control/input-filter" ),
KEY_CODE = {
LEFT: 37,
RIGHT: 39,
DELETE: 8,
// 输入法特殊处理
INPUT: 229
};
return kity.createClass( "InputComponent", {
constructor: function ( parentComponent, kfEditor ) {
this.parentComponent = parentComponent;
this.kfEditor = kfEditor;
this.inputBox = this.createInputBox();
this.initServices();
this.initCommands();
this.initEvent();
},
initServices: function () {define( function ( require, exports, modules ) {
var kity = require( "kity" ),
FunctionOperator = require( "operator/func" );
return kity.createClass( 'FunctionExpression', {
base: require( "expression/compound" ),
/**
* function表达式构造函数
* @param funcName function名称
* @param funcExp function表达式
* @param sup 上标
* @param sub 下标
*/
constructor: function ( funcName, funcExp, sup, sub ) {
this.callBase();
this.setOperator( new FunctionOperator( funcName ) );
