1 |
|
2 | import xhtml from './xhtml';
|
3 |
|
4 | import isElement from '@yelloxing/core.js/isElement';
|
5 | import isString from '@yelloxing/core.js/isString';
|
6 | import isFunction from '@yelloxing/core.js/isFunction';
|
7 |
|
8 |
|
9 |
|
10 | import { textWidth, bestLeftNum, calcCanvasXY, selectIsNotBlank, toTemplate } from './edit-view/tool';
|
11 |
|
12 | import { initDom, initView } from './edit-view/init';
|
13 | import { updateView, updateSelectView, updateCursorPosition, updateCanvasSize, cancelSelect, deleteSelect } from './edit-view/update';
|
14 | import bindEvent from './edit-view/bind';
|
15 | import diff from './edit-view/diff';
|
16 |
|
17 | import filterText from './edit-view/filter';
|
18 |
|
19 | let wscode = function (options) {
|
20 |
|
21 | if (!(this instanceof wscode)) {
|
22 | throw new Error('WSCode is a constructor and should be called with the `new` keyword');
|
23 | }
|
24 |
|
25 | |
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 | if (isElement(options.el)) {
|
37 |
|
38 |
|
39 | let shader = () => {
|
40 | let resultData = [];
|
41 | this._contentArray.forEach(text => { resultData.push([{ content: text, color: this._colorText }]); });
|
42 | return resultData;
|
43 | };
|
44 |
|
45 |
|
46 | let format = textString => textString;
|
47 |
|
48 | this._el = options.el;
|
49 |
|
50 |
|
51 | options.color = options.color || {};
|
52 | this._colorBackground = options.color.background || "#d6d6e4";
|
53 | this._colorText = options.color.text || "#000000";
|
54 | this._colorNumber = options.color.number || "#888484";
|
55 | this._colorEdit = options.color.edit || "#eaeaf1";
|
56 | this._colorCursor = options.color.cursor || "#ff0000";
|
57 | this._colorSelect = options.color.select || "#6c6cf1";
|
58 | this._fontFamily = options["font-family"] || "新宋体";
|
59 | this._fontWeight = options["font-weight"] || 600;
|
60 | this._tabSpace = options.tabSpace || 4;
|
61 | this._readonly = options.readonly || false;
|
62 | this._noLineNumber = options.noLineNumber || false;
|
63 |
|
64 |
|
65 | this._contentArray = isString(options.content) ? (this.$$filterText(options.content) + "").split("\n") : [""];
|
66 |
|
67 |
|
68 | this.$shader = isFunction(options.shader) ? options.shader : shader;
|
69 |
|
70 |
|
71 | this.$format = isFunction(options.format) ? options.format : format;
|
72 |
|
73 |
|
74 | this.$input = isFunction(options.input) ? options.input : null;
|
75 |
|
76 | } else {
|
77 |
|
78 |
|
79 | throw new Error('options.el is not a element!');
|
80 | }
|
81 |
|
82 |
|
83 | this.$$initDom();
|
84 |
|
85 |
|
86 | this.__needUpdate = true;
|
87 | this.__lineNum = this._contentArray.length - 1;
|
88 | this.__leftNum = this._contentArray[this.__lineNum].length;
|
89 | this.__cursor1 = this.__cursor2 = { leftNum: 0, lineNum: 0 };
|
90 | this.__formatData = this.$$diff(this.$shader(this._contentArray.join('\n')));
|
91 |
|
92 |
|
93 | this.$$initView();
|
94 |
|
95 |
|
96 | this.$$updateView();
|
97 |
|
98 |
|
99 | this.$$bindEvent();
|
100 |
|
101 | this.__updated__ = () => { };
|
102 |
|
103 | this.updated = callback => {
|
104 | this.__updated__ = callback;
|
105 | };
|
106 |
|
107 |
|
108 | this.valueOf = () => {
|
109 | return this._contentArray.join('\n');
|
110 | };
|
111 |
|
112 |
|
113 | this.input = (content = "", cursor = 0, number = 0) => {
|
114 |
|
115 |
|
116 |
|
117 | if (cursor != 0) {
|
118 |
|
119 | if (number != 0) {
|
120 | this._contentArray[this.__lineNum] =
|
121 | this._contentArray[this.__lineNum].substring(0, this.__leftNum + cursor) +
|
122 | this._contentArray[this.__lineNum].substring(this.__leftNum + cursor + number);
|
123 | }
|
124 |
|
125 |
|
126 | this.__leftNum += cursor;
|
127 |
|
128 | }
|
129 |
|
130 |
|
131 | this.__focusDOM.value = content;
|
132 | xhtml.trigger(this.__focusDOM, 'input');
|
133 | this.__focusDOM.focus();
|
134 |
|
135 | };
|
136 |
|
137 |
|
138 | this.format = () => {
|
139 |
|
140 |
|
141 | this._contentArray = this.$format(this._contentArray.join('\n'), this._tabSpace).split('\n');
|
142 |
|
143 | this.__lineNum = this._contentArray.length - 1;
|
144 | this.__leftNum = this._contentArray[this.__lineNum].length;
|
145 |
|
146 |
|
147 | this.__formatData = this.$$diff(this.$shader(this._contentArray.join('\n')));
|
148 |
|
149 |
|
150 | this.$$updateView();
|
151 |
|
152 |
|
153 | this.$$initView();
|
154 |
|
155 | };
|
156 |
|
157 | };
|
158 |
|
159 |
|
160 | wscode.prototype.$$textWidth = textWidth;
|
161 | wscode.prototype.$$bestLeftNum = bestLeftNum;
|
162 | wscode.prototype.$$calcCanvasXY = calcCanvasXY;
|
163 | wscode.prototype.$$selectIsNotBlank = selectIsNotBlank;
|
164 | wscode.prototype.$$filterText = filterText;
|
165 | wscode.prototype.$$toTemplate = toTemplate;
|
166 |
|
167 |
|
168 |
|
169 | wscode.prototype.$$initDom = initDom;
|
170 | wscode.prototype.$$initView = initView;
|
171 |
|
172 | wscode.prototype.$$updateView = updateView;
|
173 | wscode.prototype.$$updateSelectView = updateSelectView;
|
174 | wscode.prototype.$$updateCursorPosition = updateCursorPosition;
|
175 | wscode.prototype.$$updateCanvasSize = updateCanvasSize;
|
176 | wscode.prototype.$$cancelSelect = cancelSelect;
|
177 | wscode.prototype.$$deleteSelect = deleteSelect;
|
178 |
|
179 | wscode.prototype.$$bindEvent = bindEvent;
|
180 |
|
181 |
|
182 |
|
183 | wscode.prototype.$$diff = diff;
|
184 |
|
185 | wscode.author = '心叶(yelloxing@gmail.com)';
|
186 |
|
187 | if (typeof module === "object" && typeof module.exports === "object") {
|
188 | module.exports = wscode;
|
189 | } else {
|
190 | window.WSCode = wscode;
|
191 | } |
\ | No newline at end of file |