Xxport 'topmost' not found after upgrading to '#nativescript/core' - nativescript

In my Nativescript Vue application changed from tns-core-modules to #nativescript/core and now I'm facing some issues. I created a Modal Service similar to this video. There I used the import :
import * as frameModule from 'tns-core-modules/ui/frame';
Which I now changed to :
import * as frameModule from "#nativescript/core";
First question would be if thats correct. Just found this.
For putting the Modal in Front I use:
frameModule.topmost()
Which now results in the warning:
export 'topmost' (imported as 'frameModule') was not found in '#nativescript/core'
Which a bunch of possible exports. But none of them sound like the one I need.
(possible exports: AbsoluteLayout, AccessibilityEvents, AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait, ActionBar, ActionItem, ActionItems, ActivityIndicator, AndroidApplication, Animation, AnimationCurve, Application, ApplicationSettings, Background, Binding, Builder, Button, CSSHelper, CSSType, CSSUtils, ChangeType, CoercibleProperty, Color, Connectivity, ContainerView, ContentView, ControlStateChangeListener, CoreTypes, CssAnimationParser, CssAnimationProperty, CssProperty, CustomLayoutView, DatePicker, Device, DialogStrings, Dialogs, DockLayout, EditableTextBase, Enums, File, FileSystemEntity, FlexboxLayout, Folder, Font, FontScaleCategory, FormattedString, Frame, GestureStateTypes, GestureTypes, GesturesObserver, GridLayout, GridUnitType, HtmlView, Http, IOSHelper, Image, ImageAsset, ImageCache, ImageSource, InheritedCssProperty, InheritedProperty, ItemSpec, KeyframeAnimation, KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo, Label, LayoutBase, Length, ListPicker, ListView, ModuleNameResolver, NavigationButton, Observable, ObservableArray, Page, PageBase, ParserEvent, ParserEventType, PercentLength, Placeholder, Progress, Property, ProxyViewContainer, PseudoClassHandler, Repeater, RootLayout, Screen, ScrollView, SearchBar, SegmentedBar, SegmentedBarItem, ShorthandProperty, Slider, Span, StackLayout, Style, SwipeDirection, Switch, TabView, TabViewItem, TextBase, TextField, TextView, TimePicker, TouchAction, Trace, Transition, Utils, View, ViewBase, ViewHelper, VirtualArray, WebView, WrapLayout, WrappedValue, XmlParser, _setResolver, action, addTaggedAdditionalCSS, addWeakEventListener, alert, androidDynamicElevationOffsetProperty, androidElevationProperty, animationTimingFunctionConverter, autocapitalizationTypeProperty, autocorrectProperty, backgroundColorProperty, backgroundImageProperty, backgroundInternalProperty, backgroundPositionProperty, backgroundRepeatProperty, backgroundSizeProperty, booleanConverter, borderBottomColorProperty, borderBottomLeftRadiusProperty, borderBottomRightRadiusProperty, borderBottomWidthProperty, borderLeftColorProperty, borderLeftWidthProperty, borderRightColorProperty, borderRightWidthProperty, borderTopColorProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderTopWidthProperty, capitalizationType, clipPathProperty, colorProperty, confirm, dismissKeyboardOwner, dismissKeyboardTimeoutId, eachDescendant, editableProperty, encoding, fontFamilyProperty, fontInternalProperty, fontScaleProperty, fontSizeProperty, fontStyleProperty, fontWeightProperty, fromObject, fromObjectRecursive, getAncestor, getCurrentPage, getFileAccess, getRootLayout, getTransformedText, getViewById, heightProperty, hintProperty, horizontalAlignmentProperty, iOSApplication, inputType, isAndroid, isIOS, isUserInteractionEnabledProperty, keyboardTypeProperty, knownFolders, letterSpacingProperty, lineHeightProperty, login, makeParser, makeValidator, marginBottomProperty, marginLeftProperty, marginRightProperty, marginTopProperty, maxLengthProperty, minHeightProperty, minWidthProperty, opacityProperty, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, parseCSSShadow, parseKeyframeDeclarations, path, perspectiveProperty, placeholderColorProperty, platformNames, profile, profilingDisable, profilingDumpProfiles, profilingEnable, profilingIsRunning, profilingResetProfiles, profilingStart, profilingStartCPU, profilingStop, profilingStopCPU, profilingTime, profilingUptime, prompt, removeTaggedAdditionalCSS, removeWeakEventListener, resolveFileNameFromUrl, returnKeyTypeProperty, rotateProperty, rotateXProperty, rotateYProperty, sanitizeModuleName, scaleXProperty, scaleYProperty, setActivityCallbacks, textAlignmentProperty, textDecorationProperty, textShadowProperty, textTransformProperty, timeConverter, transformConverter, translateXProperty, translateYProperty, unsetValue, updateTextTriggerProperty, verticalAlignmentProperty, visibilityProperty, whiteSpaceProperty, widthProperty, zIndexProperty, zeroLength)
Any help or guesses are appreciated.

The imports is slightly different on Nativescript 8
import { Frame } from '#nativescript/core';
// and you can use it like this:
Frame.topmost()

Related

Kendo ScrollView - Refresh/redraw current page

I'm using a Kendo ScrollView to display person images on a form.
Separate from the ScrollView, users can change the display order of the images. After they save their changes to the display order, the ScrollView is reloaded, scrolls to the first item, and should display the images in their new order.
However, I've noticed that when the ScrollView is currently on the first page, that page does not get refreshed/redrawn.
My ScrollView looks something like this:
#(Html.Kendo().ScrollView()
.Name("personImage")
.TemplateId("personImageTemplate")
.DataSource(d => d
.Custom()
.Type("aspnetmvc-ajax")
.Transport(t => t
.Read(r => r.Action("PersonImages_Read", "Person", new { personID = Model.ID } ))
)
.Schema(s => s.Data("Data").Total("Total"))
.ServerPaging(false)
.PageSize(1)
)
)
The template looks like this:
<script type="text/x-kendo-tmpl" id="personImageTemplate">
<img class="personImage"
src="#(Url.Action("ImageRender", "Person"))?imageID=#= data.ID #"
title="#= data.Filename #" />
</script>
And here is my refresh function:
function refreshPersonImageScrollView() {
var scrollView = $("#personImage").data("kendoScrollView");
if (scrollView) {
scrollView.dataSource.read();
// https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview/methods/refresh
// redraws, doesn't re-read from datasource
scrollView.refresh();
// scroll to first image
scrollView.scrollTo(0);
}
}
When I watch the requests being made when I call this function, I see this:
A. When a page other than the first page is selected:
PersonImages_Read (the ScrollView's dataSource read)
The ScrollView scrolls to the first image
3x ImageRender, as it renders the first 3 items in the ScrollView
B. When the first page is selected:
PersonImages_Read (the ScrollView's dataSource read)
Nothing else
I tried switching the order of scrollView.refresh() and scrollView.scrollTo(0), but the result does not change.
Is there any way to get Kendo to refresh/redraw the current page? I thought refresh would do it, based on the documentation, but it does not.
Edit
I've been able to replicate this issue in REPL. To see the behavior in action:
Note the "Rendered" time under the first image.
Scroll to the second image in the ScrollView.
Wait several seconds, then click the "Refresh" button.
The ScrollView should scroll back to the first image.
Observe that the "Rendered" time under the first image matches the "Last clicked" time reported below the "Refresh" button, and is no longer what it was in step #1. (This is the correct behavior.)
Remain on the first image for several seconds. Note the "Rendered" time listed before continuing.
Click the "Refresh" button.
Note that the "Last clicked" time has updated, and in the "Log" section, there is an entry that reads "dataSource read complete" at approx. the same time. However, the "Rendered" time under the image has not changed, and there is no log entry that says "image for product #X loaded".
I am using Kendo version 2021.3.1109 in my project. The Kendo version in the REPL above is 2022.3.913 and it still occurs in that version.
I have found a way to resolve the issue, but this may be worth opening a possible bug ticket with Telerik, because you would think that scrollView.refresh call would work.
What I changed in your refreshPersonImageScrollview function was to call setDataSource on the scrollview rather than calling the refresh method. Like so:
function refreshPersonImageScrollView() {
$("#refresh-last-clicked").text("Last clicked: " + getCurrentTime());
addToLog("refresh button clicked");
var scrollView = $("#personImage").data("kendoScrollView");
if (scrollView) {
scrollView.dataSource.read();
scrollView.setDataSource(scrollView.dataSource);
// scroll to first image
scrollView.scrollTo(0);
}
}
This appears to force the scrollView to re-evaluate its life choices and properly refresh :) However, it does seem to trigger additional dataSource reads, so it's not ideal.
One other thing I tried that didn't resolve the problem, but may be a good thing to change to anyway, would be to utilize the promise returned by the dataSource.read call. Meaning, do your scrollView setDataSource and scrollTo calls after the dataSource read promise is settled, like so:
scrollView.dataSource.read().then(function() {
scrollView.setDataSource(scrollView.dataSource);
// scroll to first image
scrollView.scrollTo(0);
});
REPL link here

Making focus works inside a CK Editor 5 createUIElement

So I've a custom widget which renders a custom component.
conversion.for('editingDowncast').elementToElement({
model: 'modelName',
view: (modelElement, viewWriter) => {
const modelName = modelElement.getAttribute('modelName');
const modelNameView = viewWriter.createContainerElement('span', {
class: 'modelName',
'data-modelName': modelName,
});
const reactWrapper = viewWriter.createUIElement(
'span',
{
class: 'modelName__react-wrapper',
},
function (this, domDocument) {
const domElement = this.toDomElement(domDocument);
rendermodelName(modelName, domElement);
return domElement;
},
);
viewWriter.insert(
viewWriter.createPositionAt(modelNameView, 0),
reactWrapper,
);
return toWidgetEditable(modelNameView, viewWriter);
},
});
Where rendermodelName will give back a React component with a simple input box as
return (
<div>
<input type="text" />
</div>
);
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.
But the problem is, whenever I tried to add some content inside the input, the focus is lost from the field and automatically moved to the surrounding editor. What am I missing. Tried creating a focushandler and adding the modelNameView to it.
Should I go with the new createRawElement? My current CK5 is 20.0.0 So I don't want any breaking changes coming now.
EDIT:
I researched a little bit more. seems like createRawElement may not work here. I think this doesn't have a simple solution. I tried with allowContentOf: '$block' which also not letting me focus. But these values are explicitly for normal CK widget, not for a react component.
I had the same issue and solved it by adding this tag to the parent div that wraps my Vue component.
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers
Adding from CKE Docs:
Sometimes it can be useful to prevent processing of events by default handlers, for example using React component inside an UIElement in the widget where, by default, widget itself wants to control everything. To make it possible the only thing to do is to add a data-cke-ignore-events attribute to an element or to its ancestor and then all events triggered by any of children from that element will be ignored in default handlers.
Let’s see it in an short example:
<div data-cke-ignore-events="true">
<button>Click!</button>
</div>
In the above template events dispatched from the button, which is placed inside containing data-cke-ignore-events attribute, will be ignored by default event handlers.
I faced the similar issue.
CKEditor will takes all the events on React component which you hosted on Widget.
The work around is to stop propagation of events to CKEditor which are fired from your DOM element(domElement) where your React component hosted.
Here is the sample code:
https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
You should stop all required events. Also you can't paste any content inside the input field of React component. That will also listened by clipboardInput event of CKEditor.

How to "casting the argument to 'dart.ui::Image'" in Flutter/Dart [duplicate]

I basically want to show an image that I have in the assets folder onto the canvas.
import 'package:flutter/material.dart' as ui;
...
ui.Image img = ui.Image.asset("images/some_image.png");
ui.paintImage(canvas: canvas, image: img);
And have got the following error message when I tried to assign img to paintImage's image.
The argument type 'Image (C:\ABC\flutter\packages\flutter\lib\src\widgets\image.dart)' can't be assigned to the parameter type 'Image (C:\ABC\flutter\bin\cache\pkg\sky_engine\lib\ui\painting.dart)'.
I don't really know what could go wrong, I have seen other codes that had a similar approach with ui.Image.
Please advise.
There are two classes called Image in flutter, in different packages.
There's the Widget, which behaves like a widget and can be instantiated from an asset, from memory or from the network through its named constructors.
There's also the ui package Image which is used when painting at a lower level, for example in a CustomPainter. Since this version is in the ui package it's normally imported with the ui prefix like this:
import 'dart:ui' as ui;
Don't import material as ui! That will lead to a lot of confusion.
To make a widget, use the Image.asset constructor, passing the asset name.
To make a ui.Image from an asset use this snippet:
Future<ui.Image> load(String asset) async {
ByteData data = await rootBundle.load(asset);
ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List());
ui.FrameInfo fi = await codec.getNextFrame();
return fi.image;
}

react-smooth-scrollbar programmatically change the scroll position?

I'm using this scroll bar from idiotWu which works great so far:
https://github.com/idiotWu/react-smooth-scrollbar
What I need to do next is in my react project, I need to programatically change the scroll position. In my project, when my fires reactComponent.render() again because of some things I'm doing, I need to scroll back to the top of the <Scrollbar />. I don't see in the documentation any mention of how to do something like a element.scrollTop() or <Scrollbar scrollPosition={0} />.
I tried to manually set the transform translate3d of <div class="scroll-content">, but that didn't work because the scrollbar is saving it's scroll position value somewhere, and I don't know how to access it.
How do I reset the scroll to the beginning? Alternatively, how do I state the scroll position?
EDIT
I also tried each of these but they all did not produce the results I wanted
export default class MyClass extends React.Component {
render() {
document.getElementById('panel').setPosition(0,0); // setPosition is not a defined method
document.getElementById('panel').scrollTop=0; // had no effect
scrollbar.setPosition(0,0); // scrollbar not defined
scrollbar.scrollTop=0; //scrollbar not defined
return (<Scrollbar id="panel">stuff</Scrollbar>);
}
}
Try scrollbar.scrollTop = 0 or scrollbar.setPosition(scrollbar.offset.x, 0).

Inconsistent image move behavior in quilljs with react

i have encountered an issue, when making a text editor with support of image based tags. There is a need to move those tags around freely in the text, which is being made impractical by this issue.
Basically when I start dragging an image, and then drop it on desired location, one of two results can happen: A) it works as intended and B) the image is dropped to the end/beginning of the sentence. You can see the behaviour in attached gif. Resulting behavior
I'm using react and typescript combination for creating the page with quill being inserted in a component.
// TextEditor/index.tsx
import * as React from 'react';
import * as Quill from 'quill';
import { TextEditorState, TextEditorProps } from '../#types';
import { generateDelta } from '../#utils/generateDelta';
const formats = [
'image'
];
class TextEditor extends React.Component<TextEditorProps, TextEditorState> {
constructor(props: TextEditorProps) {
super(props);
this.state = {
Editor: undefined
}
}
componentDidMount() {
const self = this;
this.setState({Editor: new Quill('#editor-container', {formats: formats, debug: 'warn'})});
}
changeText(text: string) {
if(typeof(this.state.Editor) !== 'undefined') {
this.state.Editor.setContents(generateDelta(text), 'api');
}
}
render() {
return (
<div id="editor-container"></div>
);
}
}
export default TextEditor;
And the usage of this component in another component is just
// editor.tsx
import TextEditor from '../QuillEditor/TextEditor';
...
onUpdate(text: string) {
this.refs.targetEditor.changeText(text);
}
...
render() {
return (
...
<TextEditor
ref={'targetEditor'}
/>
...
)
}
I have tried to change the text editor to just contentEditable div and that worked flawlessly, so it shouldn't be because of some css glitch.
Has anyone some idea of what could be causing this?
EDIT Feb 6:
I have found out, that this issue is manifesting only in Chrome, as IE and MS Edge did not encountered this issue. I have tried to switch off all extensions, yet the issue is still there. Private mode also didn't help.
After few days of research I have figured out what is causing the issue.
The combination of Quill and React won't work, because of the way React 'steals' input events, while creating the shadow DOM. Basically, because it tries to process my input in contenteditable div created by Quill, it causes some actions to not fire, resulting in the weird behaviour. And because Quill tries to do it by itself, outside of React DOM.
This I have proved in my simple testing project, where adding a simple input tag anywhere on the page broke down the Quill editor.
Possible solution would be to use react-quill or some other component container, however I haven't managed to make it successfully work, or write some yourself, which would incorporate Quill to React in its DOM compatible way.

Resources