In my ember app, I have a dynamic route such as
router.js
this.resource('reports', function() {
this.resource('type', { path: '/type/:type_id' });
});
This would give me a complex url such as:
localhost:8080/reports/type/1234
In my template I have this code defining my clipPath
<svg class="svg-container">
<defs>
<clipPath id="bound" >
<rect width="20" height="30" x="300" y="300" > </rect>
</clipPath>
</defs>
<path d="M32.00000000108507,....(truncated for readability)"
stroke-width="2px"
clip-path="url(reports#type#54235231673b1b7759694bb2#bound)"
class="line greenline" style="stroke: rgb(192, 57, 43);">
</path>
</svg>
And the clipping path doesn't work. I suspect it is related to an ember routing issue as simply making the URL "url(#bound)" doesn't work either. Any thoughts?
Figured out the problem! I was generating my url() attribute incorrectly. The correct url for the clipPath given my route is
clip=path="url(reports/type/1232#bound)"
Note using the actual URL as the resource
Related
I have a React-Typescript UI running on top of a flask API. I'm using BrowserRouter for routing paths in the UI. For a couple routes I want the react app to just fall back to rendering raw HTML returned by the underlying flask app. ie I don't want to map the route to an element, just fetch the route from the back-end. Is there some way to tell the route to behave this way?
Edit: Here's a detailed outline of the issue:
The react app is a thin client over top of a flask app. When requests come in the front door, the flask app either handles the request, or re-routes it to the react UI:
#app.route('/', defaults={'path': ''})
#app.route('/<path:path>')
def index(path):
if path.startswith("api/v0/"):
abort(404)
if current_user.is_authenticated and current_user.is_active:
return render_template("ui/index.html")
elif current_user.is_authenticated:
return render_template("inactive.html")
else:
return render_template("unauth.html")
The flask app has a /logout route, that unloads the current user and then redirects to the (flask-handled) / route, prompting unauth.html to load. This works fine when I directly navigate to /logout.
The React UI has its own router for loading page elements. Loading /ui/index.html launches the app, and it essentially defines its own namespace for rendering pages:
<Routes>
<Route path="" element={<Navigate replace to="/collections" />} />
<Route path="/" element={<App />}>
<Route path="home" element={<Home />} />
<Route path="collections">
<Route path=":collectionId" element={<CollectionDetail />} />
<Route index element={<CollectionsList />} />
</Route>
<Route path="users">
<Route index element={<UserList />} />
</Route>
<Route path="images/:imageId" element={<ImageDetail />} />
</Route>
<Route
path="*"
element={
<main>
<p>Page not found</p>
</main>
}
/>
</Routes>
The issue is I have no way to break out of the react app context once I'm in it. Specifically, placing a <Link /> to "/logout" takes the default route in the app and renders "Page not found". But if I navigate directly to /logout the flask app handles it correctly.
One solution might be to move all the html-generating flask responses to the react app, but I think this would complicate routing in the flask app itself- ideally flask is only aware of the single entry point to the react app at /ui/index.html
The Link component has a reloadDocument prop that can be used to "skip client side routing and let the browser handle the transition normally (as if it were an <a href>)". In doing so this a page request is made to the server and can be handled there.
See Link.
interface LinkProps
extends Omit<
React.AnchorHTMLAttributes<HTMLAnchorElement>,
"href"
> {
replace?: boolean;
state?: any;
to: To;
reloadDocument?: boolean;
}
Example:
<Link to="/logout" reloadDocument>Logout</Link>
I'm trying to use d3 to apply a Gaussian blur to an svg circle while on a non-home page of my SPA with Ember.
First I tried using the d3 code
didInsertElement: function() {
var svg = d3.select('#svg');
var filter = svg
.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr('in', 'SourceAlpha')
.attr("stdDeviation", 3)
.attr('result', 'blur');
svg.append('circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', 20)
.style({'fill': 'blue'})
.attr('class', 'cursor')
.attr('filter', 'url(#blur)');
}
but that didn't work. I then tried the example from the mozilla docs,
<svg width="230" height="120"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="blurMe">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<circle cx="60" cy="60" r="50" fill="green" />
<circle cx="170" cy="60" r="50" fill="green"
filter="url(#blurMe)" />
</svg>
Inserted directly into the handlebars template. That didn't work either. Note this has all been on the BridgeBuilderView page.
Then I redid all of that on the index.hbs page that is loaded first when the application starts. When I do that the gaussian blurs work in both cases. I was wondering if anyone has some insight into why this is the case, and how I can get it to work on my non-root page.
Thanks
I'm generating SVG visualizations with D3.js in an Ember-cli Application.
The SVGs utilize filters and markers that are accessed through the id attribute:
<svg>
<defs>
<filter id="filterId">
...
</filter>
</defs>
<g>
<g class="nodes">
<circle filter="url(#filterId)" ...></circle>
</g>
</g>
</svg>
This works fine on the index page (url: ), but is broken when traversing to other routes (ex: \otherRoute). It will work on the other route if I change circle to
<circle filter="url(./otherRoute#filterId)" ...></circle>
But it then breaks on the index and all other pages.
I can fix it by manually prepending the url to #filterId when building the svg elements on each route or by using the hash locationType in ember-cli (which uses /#routeUrl instead of /routeUrl), but was wondering if there was a generic way to automatically link to the current url so I can still use the history API?
Ran into the same issue with a clip-path attribute after moving from hash URLs to the history API. The original implementation was an SVG element like:
<svg>
<clipPath id="clip-path-ember1919">
<path d="..."></path>
</clipPath>
<g clip-path="url(#clip-path-ember1919)">
<rect ...></rect>
</g>
</svg>
This had been achieved with a simple D3 append:
var emberId = this.$().attr('id');
svg.append('g')
.attr('clip-path', "url(#clip-path-#{emberId})");
To solve the issues raised by the history API, I used the same solution you described (prepending the URL), but by using window.location.pathname:
var emberId = this.$().attr('id');
var relPath =
svg.append('g')
.attr('clip-path', "url(." + window.location.pathname + "#clip-path-" + emberId + ")");
This creates an SVG element much like the circle element referenced in the question.
<svg>
<clipPath id="clip-path-ember1919">
<path d="..."></path>
</clipPath>
<g clip-path="url(./path/to/page#clip-path-ember1919)">
<rect ...></rect>
</g>
</svg>
Long way of saying: similar solution to the original poster, just using window.location.pathname to generate the prepended URL.
I hope someone can help me shed some light on this nightmare I'm having...!
I have just complete an ASP.Net e-commerce website with the help of an Apress book; The BalloonShop project, some of you might already know the one.
Everything is fine and dandy apart from one niggle that I cant seen to sort out!
I cannot logout from my site using the asp.net login control from any page that does not have the .aspx extension in the Url. This is namely; Departments, Category and Products as these are using the Intelligencia.UrlRewriter to provide browser friendly url's.
My url's are rewritten perfectly, but when I try to logout from a page that is using the url rewriter it does not work, and I receive the following message in my error log email:
Exception generated on 22 February 2013, at 22:23
Page location: /Triple-x/Dynamo-p4/?
<div id=":143">ProductId=4
Message: The HTTP verb POST used to access path '/Triple-x/Dynamo-p4/' is not allowed.
Source: System.Web
Method: System.IAsyncResult BeginProcessRequest(System.Web.HttpContext, System.AsyncCallback, System.Object)
Stack Trace:
at System.Web.DefaultHttpHandler.BeginProcessRequest(HttpContext context, AsyncCallback callback, Object state)
at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionSt ep.Execute()
at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)</div>
In my web.config if have:
<configSections>
<section name="rewriter" requirePermission="false" type="Intelligencia.UrlRewriter.Configuration.RewriterConfigurationSectionHandler,Intelligencia.UrlRewriter" />
</configSections>
<rewriter>
<!-- Rewrite department pages -->
<rewrite url="^.*-d([0-9]+)/?$" to="~/Catalog.aspx?DepartmentID=$1" processing="stop" />
<rewrite url="^.*-d([0-9]+)/page-([0-9]+)/?$" to="~/Catalog.aspx?DepartmentID=$1&Page=$2" processing="stop" />
<!-- Rewrite category pages -->
<rewrite url="^.*-d([0-9]+)/.*-c([0-9]+)/?$" to="~/Catalog.aspx?DepartmentId=$1&CategoryId=$2" processing="stop" />
<rewrite url="^.*-d([0-9]+)/.*-c([0-9]+)/page-([0-9]+)/?$" to="~/Catalog.aspx?DepartmentId=$1&CategoryId=$2&Page=$3" processing="stop" />
<!-- Rewrite product details pages -->
<rewrite url="^.*-p([0-9]+)/?$" to="~/Product.aspx?ProductId=$1" processing="stop" />
</rewriter>
<system.webServer>
<validation validateIntegratedModeConfiguration="false" />
<modules>
<add name="UrlRewriter" type="Intelligencia.UrlRewriter.RewriterHttpModule" />
<remove name="ScriptModule" />
<!--<add name="ScriptModule" preCondition="managedHandler" />-->
</modules>
</system.webServer>
I am also using IIS7 on my local machine, and have read that this can sometimes be the cause re: AppPool version. I have tried changing this to Classic ASP as suggested, but this did not work for me!
Does anyone know if this is a common problem when hosting on local machine and using Intelligencia.UrlRewriter? Would this possibly not be an issue if hosting on a shared web hosting server?
If I'm way off the mark then please forgive my naivety, as I am still quite new to this, especially projects of this size.
Thanks for you help!!
If you want to use url rooting you can use this codes. I use it also an e-commerce project:
in Global.asax file :
void Application_Start(object sender, EventArgs e)
{
if (RouteTable.Routes.Count <= 0)
{
RouteTable.Routes.Add("Urun", new Route("Urun/{category}/{name}/{prid}/{caid}", new PageRouteHandler("~/ProductDetail.aspx")));
RouteTable.Routes.Add("Kategori", new Route("Kategori/{upper}/{name}/{caid}", new PageRouteHandler("~/Categories.aspx")));
RouteTable.Routes.Add("Icerik", new Route("Icerik/{name}/{cpid}", new PageRouteHandler("~/ContentPage.aspx")));
}
}
And you can this codes wherever you want to give link:
var param = new RouteValueDictionary
{
{"category", "Oyuncak"},
{"prid", ((DiscountProductsResult) e.Item.DataItem).ProductId},
{"name", ((DiscountProductsResult) e.Item.DataItem).UrlView.Replace(" ", "-")},
{"caid", 0}
};
VirtualPathData path = RouteTable.Routes.GetVirtualPath(null, "Urun", param);
And you can get querystring values like this:
RouteData.Values["caid"]
I have created a very simple service that just echos some text to the console. The service is just a POJO with a method echo, having a single parameter:
public class EchoTest
{
public void echo(String myMessage)
{
System.out.println(myMessage);
}
}
Ths is from the services.xml:
<service name="EchoTest">
<description>Echo test</description>
<parameter name="ServiceClass">EchoTest</parameter>
<operation name="echo">
<messageReceiver class="org.apache.axis2.rpc.receivers.RPCMessageReceiver" />
</operation>
</service>
Further I use a very simple HTML form to submit the data to the service:
<html>
<body>
<form method="post" target="responseFrame" action="../../services/EchoTest/echo">
<input name="myMessage" type="text">
<input value="Send" type="submit"/>
</form>
<iframe width=500 height=500 name="responseFrame"></iframe>
</body>
</html>
The problem I have is that spaces are replaced with '+'. For example, if I type a message like this:
Hey you & you - # % #
The result is this:
Hey+you+&+you+-+#+%+#
Do I have to encode it somehow or or should it not behave like this? Or perhaps it is a setup issue? I am using Tomcat as a web container. For information, I use a servlet filter in Tomcat to e.g. filter on IP addresses, and in there I can see that the myMessage parameter looks OK, not having + signs.
It turns out that the problem was in fact within Axis2 itself. I am not sure exactly, but the version that I was using was release 1.5.1 from October 2009. What bugs me is that I have not found any bug report on it. It could be that it was fixed quickly and that I was unfortunate.
Upgrading to a the latest version of Axis2 solved the problem.