Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Srashti Mittal
purr-data
Commits
3c186b0b
Commit
3c186b0b
authored
Nov 01, 2020
by
Jonathan Wilkes
Browse files
another fix for displaying the grid properly at negative coords
parent
b6509195
Changes
1
Hide whitespace changes
Inline
Side-by-side
pd/nw/pdgui.js
View file @
3c186b0b
...
...
@@ -1405,12 +1405,47 @@ function menu_send(name) {
}
}
// Set the grid background position to adjust for the viewBox of the svg.
// We do this separately and before setting the background so we can call this
// when the scroll view needs to be adjusted.
function
get_grid_coords
(
cid
,
svg_elem
)
{
var
vbox
=
svg_elem
.
getAttribute
(
"
viewBox
"
).
split
(
"
"
),
dx
=
0
,
dy
=
0
;
// First two values of viewBox are x-origin and y-origin. Pd allows
// negative coordinates-- for example, the user can drag an object at
// (0, 0) 12 pixels to the left to arrive at (-12, 0). To accommodate this
// with the svg backend, we would adjust the x-origin to be -12 so that
// the user can view it (possibly by scrolling). These adjustments are
// all handled with gui_canvas_get_scroll.
//
// For the background image css property, everything is based on
// CSS DOM positioning. CSS doesn't really know anything about the SVG
// viewport-- it only knows that an SVG element is of a certain size and
// (in our case) has its top-left corner at the top-left corner of the
// window. So when we change the viewBox to have negative origin indices,
// we have to adjust the origin of the grid in the opposite direction
// For example, if our new x-origin for the svg viewBox is -12, we make
// the x-origin for the background image "12px". This adjustment positions
// the grid *as if* if extended 12 more pixels to the left of its
// container.
if
(
vbox
[
0
]
<
0
)
{
dx
=
0
-
vbox
[
0
];
}
if
(
vbox
[
1
]
<
0
)
{
dy
=
0
-
vbox
[
1
];
}
return
{
x
:
dx
,
y
:
dy
};
}
// Background for edit mode. Currently, we use a grid if snap-to-grid
// functionality is turned on in the GUI preferences. If not, we just use
// the same grid with a lower opacity. That way the edit mode is always
// visually distinct from run mode.
var
create_editmode_background
=
function
(
grid
,
size
)
{
var
head
,
body
,
tail
,
cell_data_str
,
opacity_str
;
var
create_editmode_bg
=
function
(
cid
,
svg_elem
)
{
var
head
,
body
,
tail
,
cell_data_str
,
opacity_str
,
grid
,
size
,
pos
;
grid
=
showgrid
[
cid
];
size
=
gridsize
[
cid
];
pos
=
get_grid_coords
(
cid
,
svg_elem
);
// if snap-to-grid isn't turned on, just use cell size of 10 and make the
// grid partially transparent
size
=
grid
?
size
:
10
;
...
...
@@ -1428,7 +1463,7 @@ var create_editmode_background = function(grid, size) {
'
d=
'
,
cell_data_str
,
'
/>
'
,
'
</pattern>
'
,
'
<pattern id="grid" patternUnits="userSpaceOnUse"
'
,
'
width="100" height="100">
'
,
'
width="100" height="100"
x="
'
,
pos
.
x
,
'
" y="
'
,
pos
.
y
,
'
"
>
'
,
'
<rect width="100" height="100" fill="url(#cell)" />
'
,
'
<path fill="none" stroke="#bbb" stroke-width="1"
'
,
'
d="M 100 0 L 0 0 0 100"/>
'
,
...
...
@@ -1440,49 +1475,25 @@ var create_editmode_background = function(grid, size) {
return
"
url('data:image/svg+xml;utf8,
"
+
head
+
body
+
tail
+
"
')
"
;
}
// Set the grid background position to adjust for the viewBox of the svg.
// We do this separately and before setting the background so we can call this
// when the scroll view needs to be adjusted.
function
set_grid_position
(
cid
,
svg_elem
)
{
var
vbox
=
svg_elem
.
getAttribute
(
"
viewBox
"
).
split
(
"
"
),
dx
=
0
,
dy
=
0
;
// First two values of viewBox are x-origin and y-origin. Pd allows
// negative coordinates-- for example, the user can drag an object at
// (0, 0) 12 pixels to the left to arrive at (-12, 0). To accommodate this
// with the svg backend, we would adjust the x-origin to be -12 so that
// the user can view it (possibly by scrolling). These adjustments are
// all handled with gui_canvas_get_scroll.
//
// For the background image css property, everything is based on
// CSS DOM positioning. CSS doesn't really know anything about the SVG
// viewport-- it only knows that an SVG element is of a certain size and
// (in our case) has its top-left corner at the top-left corner of the
// window. So when we change the viewBox to have negative origin indices,
// we have to adjust the origin of the grid in the opposite direction
// For example, if our new x-origin for the svg viewBox is -12, we make
// the x-origin for the background image "12px". This adjustment positions
// the grid *as if* if extended 12 more pixels to the left of its
// container.
if
(
vbox
[
0
]
<
0
)
{
dx
=
0
-
vbox
[
0
];
}
if
(
vbox
[
1
]
<
0
)
{
dy
=
0
-
vbox
[
1
];
}
patchwin
[
cid
].
window
.
document
.
body
.
style
.
setProperty
(
"
background-position
"
,
dx
+
"
px
"
+
dy
+
"
px
"
);
}
function
set_editmode_bg
(
cid
,
svg_elem
,
state
)
{
// If we're setting the bg, figure out the correct offset first
if
(
state
)
{
set_grid_position
(
cid
,
svg_elem
);
}
//
if (state) {
//
set_grid_position(cid, svg_elem);
//
}
patchwin
[
cid
].
window
.
document
.
body
.
style
.
setProperty
(
"
background-image
"
,
state
?
create_editmode_background
(
showgrid
[
cid
],
gridsize
[
cid
])
:
"
none
"
);
create_editmode_bg
(
cid
,
svg_elem
)
:
"
none
"
);
}
function
update_svg_background
(
cid
,
svg_elem
)
{
var
bg
=
patchwin
[
cid
].
window
.
document
.
body
.
style
.
getPropertyValue
(
"
background-image
"
);
// Quick hack-- we just check whether the background has been drawn. If
// it has we assume we're in editmode.
if
(
bg
!==
"
none
"
)
{
set_editmode_bg
(
cid
,
svg_elem
,
1
);
}
}
// requires nw.js API (Menuitem)
...
...
@@ -6810,9 +6821,8 @@ function do_getscroll(cid, checkgeom) {
width
:
width
,
height
:
height
});
// Now that we've updated the svg's viewBox, adjust the background
// position for the grid so it lines up properly with the patch.
set_grid_position
(
cid
,
svg_elem
);
// Now update the svg's background if we're in edit mode
update_svg_background
(
cid
,
svg_elem
);
});
}
...
...
Write
Preview
Supports
Markdown
0%
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!
Cancel
Please
register
or
sign in
to comment