Skip to content

R
reactive
Commit b0ffe5cc by Иван Кубота
Options

Component clone, Components in def would be cloned

parent 5f60949c
Showing with 122 additions and 71 deletions
.idea/workspace.xml
......@@ -2,16 +2,9 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="60f6b3df-8be9-486a-9e3c-d8ae43c3e79e" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/test/creatingEl.jsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/webpack.test.config.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/F.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/F.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/test/const1.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/test/out" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
......@@ -26,11 +19,11 @@
<splitter split-orientation="horizontal" split-proportion="0.44885993">
<split-first>
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="true">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/index.jsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="687">
<caret line="115" lean-forward="true" selection-start-line="115" selection-end-line="115" />
<state relative-caret-position="474">
<caret line="81" column="15" selection-start-line="81" selection-start-column="15" selection-end-line="81" selection-end-column="15" />
<folding>
<element signature="e#0#36#0" expanded="true" />
</folding>
......@@ -97,11 +90,11 @@
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/F.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="319">
<caret line="307" column="8" selection-start-line="307" selection-start-column="8" selection-end-line="307" selection-end-column="8" />
<state relative-caret-position="-4116">
<caret line="277" column="4" selection-start-line="277" selection-start-column="4" selection-end-line="277" selection-end-column="17" />
</state>
</provider>
</entry>
......@@ -166,16 +159,16 @@
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/src/F.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="453">
<caret line="341" column="25" selection-start-line="341" selection-start-column="25" selection-end-line="341" selection-end-column="25" />
<state relative-caret-position="367">
<caret line="383" column="21" selection-start-line="383" selection-start-column="21" selection-end-line="383" selection-end-column="21" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/test/creatingEl.jsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="544">
......@@ -241,11 +234,6 @@
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>padding</find>
<find>margin</find>
<find>onClick</find>
<find>preact</find>
<find>Mouse</find>
<find>MouseEvent</find>
<find>Predefined</find>
<find>init</find>
......@@ -265,12 +253,17 @@
<find>addChild</find>
<find>styleSetters</find>
<find>HTMLElement</find>
<find>cm</find>
<find>set:</find>
<find>res</find>
<find>style</find>
<find>back</find>
<find>cm</find>
<find>Reac</find>
<find>Reactivity</find>
<find>.def</find>
<find>text</find>
<find>beforeSetKey</find>
<find>mover</find>
</findStrings>
<replaceStrings>
<replace>| Reactivity;</replace>
......@@ -311,8 +304,8 @@
<option value="$PROJECT_DIR$/webpack.config.js" />
<option value="$PROJECT_DIR$/package.json" />
<option value="$PROJECT_DIR$/test/creatingEl.jsx" />
<option value="$PROJECT_DIR$/src/F.js" />
<option value="$PROJECT_DIR$/src/index.jsx" />
<option value="$PROJECT_DIR$/src/F.js" />
</list>
</option>
</component>
......@@ -447,7 +440,7 @@
<workItem from="1557233390052" duration="5206000" />
<workItem from="1557261512369" duration="21515000" />
<workItem from="1558366647257" duration="9105000" />
<workItem from="1559230950782" duration="26084000" />
<workItem from="1559230950782" duration="30313000" />
</task>
<servers />
</component>
......@@ -484,7 +477,7 @@
</history-entry>
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="158028000" />
<option name="totallyTimeSpent" value="162257000" />
</component>
<component name="ToolWindowManager">
<frame x="-8" y="-8" width="3456" height="1416" extended-state="6" />
......@@ -496,14 +489,14 @@
<window_info id="npm" order="3" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info active="true" anchor="bottom" id="Run" order="2" visible="true" weight="0.23070927" />
<window_info anchor="bottom" id="Run" order="2" weight="0.23070927" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.3998441" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Version Control" order="8" />
<window_info anchor="bottom" id="Terminal" order="9" weight="0.1979735" />
<window_info active="true" anchor="bottom" id="Terminal" order="9" visible="true" weight="0.1979735" />
<window_info anchor="bottom" id="Event Log" order="10" side_tool="true" />
<window_info anchor="bottom" id="TypeScript" order="11" weight="0.32969603" />
<window_info anchor="right" id="Commander" order="0" weight="0.4" />
......@@ -632,13 +625,6 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/.gitignore">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="85">
<caret line="5" selection-start-line="5" selection-end-line="5" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/Rjsx.d.ts">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1853">
......@@ -733,22 +719,29 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/F.js">
<entry file="file://$PROJECT_DIR$/.gitignore">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="319">
<caret line="307" column="8" selection-start-line="307" selection-start-column="8" selection-end-line="307" selection-end-column="8" />
<state relative-caret-position="85">
<caret line="5" selection-start-line="5" selection-end-line="5" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/index.jsx">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="687">
<caret line="115" lean-forward="true" selection-start-line="115" selection-end-line="115" />
<state relative-caret-position="474">
<caret line="81" column="15" selection-start-line="81" selection-start-column="15" selection-end-line="81" selection-end-column="15" />
<folding>
<element signature="e#0#36#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/F.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="367">
<caret line="383" column="21" selection-start-line="383" selection-start-column="21" selection-end-line="383" selection-end-column="21" />
</state>
</provider>
</entry>
</component>
</project>
\ No newline at end of file
src/F.js
......@@ -82,7 +82,32 @@ export const R = function() {
return reactivity;
};
export const ReactiveContent = function(parent, reactivity) {
reactivity.scope = this;
reactivity.key = 'content';
this.parent = parent;
this.reactivity = reactivity;
};
ReactiveContent.prototype = {
_setKey: function(key, keyCursor, val, state, setters) {
const children = this.parent.children;
const index = children.indexOf(this);
if(index>-1){
let i, _i = children.length, child;
for( i = index + 1; i < _i; i++ ){
child = children[i];
if(child instanceof Component){
child.el.parentNode.insertBefore(val.el, child.el);
break;
}
}
}else{
throw new Error('Fix it. My parent does not contain me (ReactiveChild)');
}
}
};
export const Reactive = function(cfg){
if(cfg === false) {
return;
......@@ -276,6 +301,7 @@ const styleSetters = {
};
Component.prototype = new Reactive();
Object.assign(Component.prototype, {
_ctor: Component,
_laterTrigger: false,
later: function(name, fn) {
if(!(name in this._laters)){
......@@ -343,10 +369,21 @@ Object.assign(Component.prototype, {
this.el = document.createElement(this.nodeName);
return this;
},
// become true after init function is finished
_inited: false,
init: function () {
this.tree = this.render();
this.el = this.tree.el;
this.set(this.def);
this._inited = true;
},
clone: function() {
const clone = new this._ctor(this.nodeName);
clone.init();
clone.set(this.state);
return clone;
},
renderTo: function (where) {
where.appendChild(this.el);
......@@ -369,10 +406,19 @@ Object.assign(Component.prototype, {
}
},
addChild: function (child) {
child.renderTo(this.el);
this.children.push(child);
if(this.inDOM){
child._updateSize();
if(child instanceof Reactivity){
this.children.push( new ReactiveContent(this, child) );
/*val.scope = this;
val.key = key;*/
//debugger
}else{
child.renderTo( this.el );
this.children.push( child );
if( this.inDOM ){
child._updateSize();
}
}
},
_updateSize: function() {
......@@ -387,7 +433,12 @@ Object.assign(Component.prototype, {
val.call(this, e)
};
} else {
return val;
if(val instanceof Component && !this._inited){
// magically defined subcomponents
return val.clone();
}else{
return val;
}
}
},
......@@ -465,6 +516,8 @@ Component.extend = function(name, cfg) {
ctor.prototype.type = name;
Object.assign(ctor.prototype, cfg);
ctor.prototype._ctor = ctor;
ctor.prototype.setters = setters;
ctor.extend = Component.extend;
return ctor;
......
src/index.jsx
......@@ -78,7 +78,10 @@ const Slider = UIComponent.extend('Slider', {
step: 1,
value: 0,
sliderWidth: 10,
background: 'red'
background: 'red',
mover: <div
style={{cursor: 'pointer', width: 10, height: 10, border: '3px solid #fff', position: 'absolute', boxSizing: 'border-box'}}
/>
},
recalc: function() {
if(this.state.value<this.state.from){
......@@ -89,7 +92,7 @@ const Slider = UIComponent.extend('Slider', {
}
var delta = this.state.to - this.state.from;
this.mover.set({
this.state.mover.set({
style: {
left: (this.state.value-this.state.from)/delta*(this.state.width-this.state.sliderWidth)
}
......@@ -98,21 +101,20 @@ const Slider = UIComponent.extend('Slider', {
setters: {
'from,to,step,value,width': (_)=>{
_.later('recalc', _.recalc);
}
},
render(){
let sliderRect;
const moveFn = (e)=>{
const newRawVal = Math.max(0, Math.min(1,(e.clientX-sliderRect.left)/(sliderRect.width))),
delta = this.state.to - this.state.from,
newRangedVal = newRawVal*delta+this.state.from,
step = this.state.step,
newRoundedVal = Math.round(newRangedVal/step)*step;
this.set({value: newRoundedVal});
};
this.mover = <div
style={{cursor: 'pointer', width: 10, height: 10, border: '3px solid #fff', position: 'absolute', boxSizing: 'border-box'}}
onMouseDown={(e)=>{
},
mover: function(_, val) {
let sliderRect;
const moveFn = (e)=>{
const newRawVal = Math.max(0, Math.min(1,(e.clientX-sliderRect.left)/(sliderRect.width))),
delta = this.state.to - this.state.from,
newRangedVal = newRawVal*delta+this.state.from,
step = this.state.step,
newRoundedVal = Math.round(newRangedVal/step)*step;
this.set({value: newRoundedVal});
};
//this.state.mover = ;
val.on('mousedown', (e)=>{
console.log('down');
sliderRect = this.getBoundingClientRect();
......@@ -122,12 +124,12 @@ const Slider = UIComponent.extend('Slider', {
});
this.set({width: sliderRect.width});
e.preventDefault();
}}
/>;
//console.log()
});
}
},
render(){
return <div class="slider" style={{background: R(this.sub('background')), position: 'relative', height: 10}}>
{this.mover}
{R(this.sub('mover'))}<div/>
</div>;
}
});
......@@ -164,9 +166,11 @@ let RS, GS, BS;
(r)=>'rgba('+[r,0,0,1]+')'
)}/>}
{GS = <Slider from={0} to={255} step={1} value={123} background={R(
()=>GS.sub('value'),
(g)=>'rgba('+[0,g,0,1]+')'
)}/>}
()=>GS.sub('value'),
(g)=>'rgba('+[0,g,0,1]+')'
)}
mover={<div style={{width:13, height:23, background:'#f0f', position: 'absolute'}}/>}
/>}
{BS = <Slider from={0} to={255} step={1} value={123} background={R(
()=>BS.sub('value'),
(b)=>'rgba('+[0,0,b,1]+')'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment