https://developer.wordpress.org/block-editor/reference-guides/components/dimension-control/
Docs says that DimensionControl is used by wp.blockEditor. But I haven't DimensionControl in wp.blockEditor or wp.components or wp.element. Is this Component enabled by default or is needed to be enabled manually?
The dimension control component is now inside the #wordpress-components library or package.
// https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src
You might be able to import it like this.
import { DimensionControl } from '#wordpress/components';
Or
import { __experimentalDimensionControl } from '#wordpress/components';
And apparently it is not stable yet, so you may want to wait before actually using it on production.
Related
Has anyone set up electron to pass the PDFViewer component that is then displayed to the DOM from React? I am able to display an empty box because the blob file and html aren't passed to the DOM like it does in a simple React app. The blob file is asked to be saved somewhere instead of just being used to the DOM as the simple React app does.
I thinking the PDFViewer information needs to be passed through the package.json/webpack somehow to the electron main.dev.ts file to properly display to the DOM.
I also get a memory leak due to PDFViewer being mounted and unmounted:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
in InternalBlobProvider (created by PDFViewer)
in PDFViewer (at tearDownSummery.tsx:9)
in div (at tearDownSummery.tsx:8)
This is what I have to call my pdf component I setup that works up to the point to displaying to the DOM. The download link works and I get the PDF I structured through the .
import React from 'react';
import { PDFViewer, PDFDownloadLink } from '#react-pdf/renderer';
import ReactDOM from 'react-dom';
import TearDownPDF from './tearDowSummeryPDF';
export default function TearDownSummery() {
return (
<div>
<PDFViewer>
<TearDownPDF />
</PDFViewer>
<PDFDownloadLink document={<TearDownPDF />} fileName="IIR.pdf">
{({ blob, url, loading, error }) =>
loading ? <i> Loading document...</i> : <i> Download Pdf </i>}
</PDFDownloadLink>
</div>
);
}
ReactDOM.render(<TearDownSummery />, document.getElementById('root'));
Here is my GitHub project: https://github.com/staniszmatt/iir_Report.git
It is all set up on the pdfSetup branch.
Currently, Electron doesn't have the capability to use #react-pdf based off this post I found.
https://github.com/electron/electron/issues/13038
I'll have to come back to answer again if and when electron adds this capability.
I'm trying to implement my own style and for this I want to override the built-in objects. Here's what I'm doing:
// main.cpp
QQuickStyle::setStyle("mystyle");
and
// mystyle/Button.qml
import QtQuick 2.5
import QtQuick.Controls 2.1 as Controls
Controls.Button {
background: Rectangle {
color: "green"
}
}
and
// qml.qrc
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>mystyle/CheckBox.qml</file>
</qresource>
</RCC>
According to the docs I believe this should work automagically using file selectors.
However, my app hangs on startup. My guess is that I fall into a recursive import. How do I do this correctly?
The Qt Quick Controls 2 styling system is based on QML type registration. When you run your app with mystyle, the type known as QtQuick.Controls.Button IS mystyle/Button.qml. Therefore mystyle/Button.qml cannot inherit QtQuick.Controls.Button. It cannot inherit itself.
This is basically the same as writing the following C++:
// button.h
#include "button.h"
class Button : public Button {};
A bit radicalized, but easy to understand analogy. :)
What you can do is to have (My)Button.qml somewhere, let it inherit QtQuick.Controls.Button, and don't register it as a Qt Quick Controls 2 but simply import the folder. This is what we call as "Customizing Qt Quick Controls 2".
The style must be configured before loading QML that imports Qt Quick Controls.It is not possible to change the style after the QML types have been registered. setStyle()
Apply the existing style in your custom style's qml files.
Note: It is recommended to use QQmlApplicationEngine, which internally creates a QQmlFileSelector instance. This is all that is needed to take QML file selectors into use.
See: Creating Custom Styles
Building a performance sensitive Redux app that needs to listen to scroll/mouse events throughout a user session.
Plain english implementation would be:
"When component A is in the user's viewport, dispatch FOO action"
From my understanding, the function calculateViewPort + the comparison checking would need to be conducted in the store on every scroll event.
This seems excessive and slow (haven't tested it yet).
Is there another implementation or approach that I have not yet considered?
I was thinking about using something like RxJS for Redux, but want to consider the tradeoff between bringing in a new library for performance and solving it with my existing toolkit.
If there's a saga approach, I'm more open to that too.
There is a InfiniteScroll component. You can refer this and implement in your way or you can use as it is.
Note: this component is not using the redux-saga.
It's better to go with redux-saga as you would take only the response which comes from the latest api call (last mouse scroll) with takeLatest effect.
React Visibility Sensor might be a good choice here. You can wrap the components in VisibilitySensor component and dispatch an action whenever it is on window viewport.
import React from 'react'
import { connect } from 'react-redux'
import VisibilitySensor from 'react-visibility-sensor'
import CUSTOM_ACTION from 'your-actions'
const CustomComponent = (noticeMe, ...children) => {
const handleChange = (isVisible) => { if (isVisible) { noticeMe(); } }
return <VisibilitySensor>{children}</VisibilitySensor>
}
export connect({}, {
noticeMe: () => dispatch(CUSTOM_ACTION)
})(CustomComponent)
I want to use vkontakte's new wrapper feature, that enhances your application abilities by running under SWF wrapper.
This is a sample application that uses this mechanism. It uses pure action script to display it's contents rather than an mx:Application.
Using the wrapper on my mx:Application failed due to the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.managers::FocusManager/activate()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\FocusManager.as:702]
at mx.managers::SystemManager/activateForm()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\SystemManager.as:2493]
at mx.managers::SystemManager/activate()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\SystemManager.as:2451]
at mx.core::Application/initManagers()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\Application.as:1152]
at mx.core::Application/initialize()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\core\Application.as:834]
at DummyApp/initialize()[C:\Users\Eran.HOME\Documents\Web Projects\MaxiMarketing\TestMarketing\src\DummyApp.mxml:0]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::childAdded()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\SystemManager.as:2127]
at mx.managers::SystemManager/initializeTopLevelWindow()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\SystemManager.as:3396]
at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\SystemManager.as:3219]
at mx.managers::SystemManager/docFrameListener()[C:\autobuild\galaga\frameworks\projects\framework\src\mx\managers\SystemManager.as:3065]
So I figure I could create a wrapper to the wrapper that can launch my application and came up with this (DummyApp is the application I want to lunch):
package
{
import Components.SidePanel;
import flash.display.Sprite;
import flash.events.Event;
public class AppWrapper extends Sprite
{
public function AppWrapper() {
this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
public function onAddedToStage(e: Event): void {
var mainApp:DummyApp = new DummyApp();
this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
}
}
Unfortunately - it also failed, and the question remains, how to start Application from a simple AS file?
Are you trying to make a pure actionscript project or a flex application project (former does not use the Flex Framework, latter does)? You'd need at least an application mxml file to use the Flex framework. If you create an "Actionscript project" in Flex, the main application file (.as) will be your "document class" or wrapper. Here's a related post on using an Actionscript Application wrapper:
Possible to use Flex Framework/Components without using MXML?
You'll see here though that you still need to use a bit of mxml to "init" the actionscript class.
Vkontakte's wrapper is now supporting Flex, which makes this question obsolete.
I created a new actionscript project using Flex Builder 3 and tried
to run the following file. I get this error :
Definitions: fl.controls:Button could not be found.
All I want to do is, to add a button to the application.
How could I do it?
package {
import PaperBase;
import org.papervision3d.objects.primitives.Cone;
import fl.controls.Button;
import fl.controls.Label;
import fl.events.ComponentEvent;
public class cone1 extends PaperBase {
public var cone:Cone = new Cone();
protected var sceneWidth:Number;
protected var sceneHeight:Number;
public function cone1() {
sceneWidth = stage.stageWidth
sceneHeight = stage.stageHeight;
init(sceneWidth*0.5,sceneHeight*0.5);//position of the cone
}
override protected function init3d():void {
cone.scale = 5;
cone.pitch(-40)
default_scene.addChild(cone);
}
override protected function processFrame():void {
cone.yaw(1);//rotation speed
}
}
}
The fl.* package is part of Flash Professional, not Flex. For Flex you should be using the components that are part of the mx.* package.
Now, that being said, I'm fairly sure it is possible to use Flash components in Flex. I'm just not sure how it's done off the top of my head.
Also, you don't need an actual button component to get a "button like" ui element - any class that extends InteractiveObject will do. This incldes Sprite and MovieClip.
Branden is correct the fl package is a part of the Flash IDE..I am not sure either but you may be able to add the package to your class path if you know where the package resides on your file system..i am guessing somewhere in C:/program files/adobe/flash
if you want to use components in flex builder I think you need make a flex project not an actionscript project
and change your imports to:
import mx.controls.Button;
import mx.controls.Label;
import mx.events.FlexEvent;
Also if you do not need to use components either you can use a Sprite for a button like branden said and you could just use a TextField for a label.
another option if you have the flash IDE is to make a SimpleButton, press F8 select button, click enter. then give it a linkage name by right clickin it in the library panel and selecting linkage name. then export the .swf and put the swf in the src folder for your project and embed it like this:
[Embed(source="flashfile.swf")]
public var myButton:Class;
You may even be able to export the Flash IDE components this way but not sure...actually I am not 100% positive if the [Embed] meta data works in an actionscript project or just flex projects so you will have to check and see.
It depends what version of the IDE you have, for CS4 and Mac the location would be /Applications/Adobe Flash CS4/Common/First Run/Classes
Add that folder or the relevant folder for your installation/OS to your classpath in flashbuilder/eclipse and it will interpret the class calls fine.
It makes sense if you're coding pure actionscript and dont want to use flex components, or employing a mixed coding and designing in IDE approach.
#philip the embed tag cannot be used in pure actionscript
Not sure why you would want to, but if you need to import the flash libs into flex,try dragging what you want to the stage in flash and exporting as a .swc file to import into your flex project.