Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
R
rndmc
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Jake Read
rndmc
Commits
5b920ebf
Commit
5b920ebf
authored
6 years ago
by
Jake Read
Browse files
Options
Downloads
Patches
Plain Diff
beziers begin
parent
cc1e1935
Branches
Branches containing commit
No related tags found
No related merge requests found
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
client/client.js
+98
-91
98 additions, 91 deletions
client/client.js
with
98 additions
and
91 deletions
client/client.js
+
98
−
91
View file @
5b920ebf
...
...
@@ -57,7 +57,7 @@ oncontextmenu = function(evt) {
// socket brkn
location
.
reload
()
}
// prevents
propogation to the os
// prevents
event bubbling
return
false
}
...
...
@@ -101,91 +101,6 @@ function get(data) {
}
function
writeEventRep
(
rep
,
type
,
key
)
{
var
li
=
document
.
createElement
(
'
li
'
)
li
.
innerHTML
=
key
.
toString
()
li
.
id
=
rep
.
id
+
'
'
+
type
+
'
'
+
key
li
.
addEventListener
(
'
click
'
,
(
evt
)
=>
{
var
ipclk
=
{
rep
:
rep
,
type
:
type
,
name
:
key
,
evt
:
evt
}
evtConnectHandler
(
ipclk
)
})
return
li
}
var
inClkState
=
false
var
clkOne
=
{}
// ok, nearly ... but want better everything. so messy!
// need different x, y for outputs, overall better way to get position
// and consider when moving div, wtf?
function
evtConnectHandler
(
clk
){
if
(
!
inClkState
){
oClk
=
clk
inClkState
=
true
var
parent
=
clk
.
evt
.
target
.
offsetParent
var
offset
=
clk
.
evt
.
target
.
offsetTop
var
x
=
parseInt
(
clk
.
evt
.
target
.
offsetParent
.
style
.
left
,
10
)
var
y
=
parseInt
(
clk
.
evt
.
target
.
offsetParent
.
style
.
top
,
10
)
+
clk
.
evt
.
target
.
offsetTop
+
clk
.
evt
.
target
.
clientHeight
/
2
startBezier
(
x
,
y
,
clk
)
}
else
{
inClkState
=
false
}
}
function
startBezier
(
x
,
y
,
clk
){
if
(
clk
.
type
==
'
output
'
){
var
bezier
=
newBezier
(
x
,
y
,
clk
.
evt
.
clientX
,
clk
.
evt
.
clientY
)
console
.
log
(
bezier
)
function
bzMoveMod
(
evt
){
modifyBezier
(
bezier
,
x
,
y
,
evt
.
clientX
,
evt
.
clientY
)
}
document
.
addEventListener
(
'
mousemove
'
,
bzMoveMod
)
}
}
var
svgns
=
'
http://www.w3.org/2000/svg
'
var
svg
=
{}
// 651
// 1554
function
newBezier
(
x1
,
y1
,
x2
,
y2
)
{
var
bz
=
document
.
createElementNS
(
svgns
,
'
path
'
)
bz
.
style
.
stroke
=
'
#1a1a1a
'
bz
.
style
.
fill
=
'
none
'
bz
.
style
.
strokeWidth
=
'
7px
'
var
bl
=
Math
.
sqrt
(
Math
.
pow
((
x1
-
x2
),
2
)
+
Math
.
pow
((
y1
-
y2
),
2
))
*
0.4
var
ps
=
'
M
'
+
x1
+
'
'
+
y1
+
'
C
'
+
(
x1
+
bl
)
+
'
'
+
y1
var
pe
=
'
'
+
(
x2
-
bl
)
+
'
'
+
y2
+
'
'
+
x2
+
'
'
+
y2
bz
.
setAttribute
(
'
d
'
,
ps
+
pe
)
svg
.
appendChild
(
bz
)
console
.
log
(
bz
)
return
bz
}
function
modifyBezier
(
bz
,
x1
,
y1
,
x2
,
y2
)
{
var
bl
=
Math
.
sqrt
(
Math
.
pow
((
x1
-
x2
),
2
)
+
Math
.
pow
((
y1
-
y2
),
2
))
*
0.6
var
ps
=
'
M
'
+
x1
+
'
'
+
y1
+
'
C
'
+
(
x1
+
bl
)
+
'
'
+
y1
var
pe
=
'
'
+
(
x2
-
bl
)
+
'
'
+
y2
+
'
'
+
x2
+
'
'
+
y2
bz
.
setAttribute
(
'
d
'
,
ps
+
pe
)
}
/*
var crv = {}
document.addEventListener('mousemove', function(evt) {
modifyBezier(crv, 0, 0, evt.pageX, evt.pageY)
})
*/
// write html from json representation
function
addRep
(
rep
)
{
// a div to locate it
...
...
@@ -201,6 +116,10 @@ function addRep(rep) {
title
.
alt
=
rep
.
description
.
alt
domElem
.
appendChild
(
title
)
// we'll hold on to this, useful!
rep
.
ui
=
{}
rep
.
ui
.
domElem
=
domElem
// using datgui to write the interface for state
var
datElem
=
document
.
createElement
(
'
div
'
)
datElem
.
className
=
'
inside
'
...
...
@@ -230,20 +149,27 @@ function addRep(rep) {
}
}
datElem
.
appendChild
(
datui
.
domElement
)
// add this as well to the representation obj
rep
.
ui
.
dat
=
datui
// add the inputs and outputs
// get more involved here, do ln 241
var
inElem
=
document
.
createElement
(
'
div
'
)
inElem
.
className
=
'
inputs
'
rep
.
ui
.
inputs
=
{}
for
(
ip
in
rep
.
inputs
)
{
var
li
=
writeEventRep
(
rep
,
'
input
'
,
ip
)
inElem
.
appendChild
(
li
)
rep
.
ui
.
inputs
[
ip
]
=
li
}
var
outElem
=
document
.
createElement
(
'
div
'
)
outElem
.
className
=
'
outputs
'
rep
.
ui
.
outputs
=
{}
for
(
op
in
rep
.
outputs
)
{
var
li
=
writeEventRep
(
rep
,
'
output
'
,
op
)
outElem
.
appendChild
(
li
)
rep
.
ui
.
outputs
[
op
]
=
li
}
// now we'll append our objects to the top level container
...
...
@@ -272,15 +198,94 @@ function addRep(rep) {
}
}
// adding to the original object these new tricks
rep
.
ui
=
{}
rep
.
ui
.
dat
=
datui
rep
.
ui
.
domElem
=
domElem
console
.
log
(
rep
.
ui
)
reps
.
push
(
rep
)
wrapper
.
appendChild
(
rep
.
ui
.
domElem
)
}
var
clkState
=
false
var
oClk
=
{}
var
tmpBz
=
{}
function
writeEventRep
(
rep
,
type
,
key
)
{
var
li
=
document
.
createElement
(
'
li
'
)
li
.
innerHTML
=
key
.
toString
()
li
.
id
=
rep
.
id
+
'
'
+
type
+
'
'
+
key
li
.
addEventListener
(
'
click
'
,
(
evt
)
=>
{
var
ipclk
=
{
rep
:
rep
,
type
:
type
,
name
:
key
,
evt
:
evt
}
console
.
log
(
'
clicked
'
,
key
)
evtConnectHandler
(
ipclk
)
})
return
li
}
function
evtConnectHandler
(
clk
)
{
if
(
!
clkState
)
{
// do output - input
oClk
=
clk
clkState
=
true
}
else
{
var
tClk
=
clk
console
.
log
(
oClk
,
tClk
)
var
x1
=
parseInt
(
oClk
.
evt
.
target
.
offsetParent
.
style
.
left
,
10
)
+
oClk
.
evt
.
target
.
offsetLeft
+
oClk
.
evt
.
target
.
clientWidth
var
y1
=
parseInt
(
oClk
.
evt
.
target
.
offsetParent
.
style
.
top
,
10
)
+
oClk
.
evt
.
target
.
offsetTop
+
oClk
.
evt
.
target
.
clientHeight
/
2
var
x2
=
parseInt
(
tClk
.
evt
.
target
.
offsetParent
.
style
.
left
,
10
)
+
tClk
.
evt
.
target
.
offsetLeft
var
y2
=
parseInt
(
tClk
.
evt
.
target
.
offsetParent
.
style
.
top
,
10
)
+
tClk
.
evt
.
target
.
offsetTop
+
tClk
.
evt
.
target
.
clientHeight
/
2
var
bz
=
newBezier
(
x1
,
y1
,
x2
,
y2
)
clkState
=
false
}
// var x = parseInt(clk.evt.target.offsetParent.style.left, 10) + clk.evt.target.offsetLeft + clk.evt.target.clientWidth
// var y = parseInt(clk.evt.target.offsetParent.style.top, 10) + clk.evt.target.offsetTop + clk.evt.target.clientHeight / 2
// var tmpBz = newBezier(x, y, clk.evt.clientX, clk.evt.clientY)
// // function bzMoveMod(evt) {
// modifyBezier(tmpBz, x, y, evt.clientX, evt.clientY)
// }
// document.addEventListener('mousemove', bzMoveMod)
}
var
svgns
=
'
http://www.w3.org/2000/svg
'
var
svg
=
{}
// 651
// 1554
function
newBezier
(
x1
,
y1
,
x2
,
y2
)
{
var
bz
=
document
.
createElementNS
(
svgns
,
'
path
'
)
bz
.
style
.
stroke
=
'
#1a1a1a
'
bz
.
style
.
fill
=
'
none
'
bz
.
style
.
strokeWidth
=
'
7px
'
var
bl
=
Math
.
sqrt
(
Math
.
pow
((
x1
-
x2
),
2
)
+
Math
.
pow
((
y1
-
y2
),
2
))
*
0.4
var
ps
=
'
M
'
+
x1
+
'
'
+
y1
+
'
C
'
+
(
x1
+
bl
)
+
'
'
+
y1
var
pe
=
'
'
+
(
x2
-
bl
)
+
'
'
+
y2
+
'
'
+
x2
+
'
'
+
y2
bz
.
setAttribute
(
'
d
'
,
ps
+
pe
)
svg
.
appendChild
(
bz
)
console
.
log
(
bz
)
return
bz
}
function
modifyBezier
(
bz
,
x1
,
y1
,
x2
,
y2
)
{
var
bl
=
Math
.
sqrt
(
Math
.
pow
((
x1
-
x2
),
2
)
+
Math
.
pow
((
y1
-
y2
),
2
))
*
0.6
var
ps
=
'
M
'
+
x1
+
'
'
+
y1
+
'
C
'
+
(
x1
+
bl
)
+
'
'
+
y1
var
pe
=
'
'
+
(
x2
-
bl
)
+
'
'
+
y2
+
'
'
+
x2
+
'
'
+
y2
bz
.
setAttribute
(
'
d
'
,
ps
+
pe
)
}
/*
var crv = {}
document.addEventListener('mousemove', function(evt) {
modifyBezier(crv, 0, 0, evt.pageX, evt.pageY)
})
*/
function
newState
(
rep
)
{
var
data
=
{
id
:
rep
.
id
,
...
...
@@ -336,4 +341,6 @@ window.onload = function() {
/*
- add inputs and outputs
- ui for link inputs and outputs
- .. hold svg's in div of ui element rep.ui.domElement - also track endpts there, write tiny svg class ? then .onmove etc ties through to all elements ?
*/
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment