Fixes and improvements related to components

This commit is contained in:
Mo Bitar
2020-04-15 19:17:08 -05:00
parent 1280c2ec52
commit 407e3ea0d8
21 changed files with 276 additions and 270 deletions

View File

@@ -8,7 +8,7 @@ export function infiniteScroll() {
const element = elem[0]; const element = elem[0];
scopeAny.paginate = debounce(() => { scopeAny.paginate = debounce(() => {
scope.$apply(attrs.infiniteScroll); scope.$apply(attrs.infiniteScroll);
}, 100); }, 10);
scopeAny.onScroll = () => { scopeAny.onScroll = () => {
if ( if (
scope.$eval(attrs.canLoad) && scope.$eval(attrs.canLoad) &&

View File

@@ -1,10 +1,10 @@
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
import { SNComponent } from 'snjs'; import { SNComponent, LiveItem } from 'snjs';
import { WebDirective } from './../../types'; import { WebDirective } from './../../types';
import template from '%/directives/component-modal.pug'; import template from '%/directives/component-modal.pug';
type ComponentModalScope = { export type ComponentModalScope = {
component: SNComponent componentUuid: string
callback: () => void callback: () => void
onDismiss: (component: SNComponent) => void onDismiss: (component: SNComponent) => void
application: WebApplication application: WebApplication
@@ -12,16 +12,34 @@ type ComponentModalScope = {
export class ComponentModalCtrl implements ComponentModalScope { export class ComponentModalCtrl implements ComponentModalScope {
$element: JQLite $element: JQLite
component!: SNComponent componentUuid!: string
callback!: () => void callback!: () => void
onDismiss!: (component: SNComponent) => void onDismiss!: (component: SNComponent) => void
application!: WebApplication application!: WebApplication
liveComponent!: LiveItem<SNComponent>
component!: SNComponent
/* @ngInject */ /* @ngInject */
constructor($element: JQLite) { constructor($element: JQLite) {
this.$element = $element; this.$element = $element;
} }
$onInit() {
this.liveComponent = new LiveItem(
this.componentUuid,
this.application,
(component) => {
this.component = component;
}
);
this.application.componentGroup.activateComponent(this.component);
}
$onDestroy() {
this.application.componentGroup.deactivateComponent(this.component);
this.liveComponent.deinit();
}
dismiss() { dismiss() {
this.onDismiss && this.onDismiss(this.component); this.onDismiss && this.onDismiss(this.component);
this.callback && this.callback(); this.callback && this.callback();
@@ -41,7 +59,7 @@ export class ComponentModal extends WebDirective {
this.controllerAs = 'ctrl'; this.controllerAs = 'ctrl';
this.bindToController = true; this.bindToController = true;
this.scope = { this.scope = {
component: '=', componentUuid: '=',
callback: '=', callback: '=',
onDismiss: '&', onDismiss: '&',
application: '=' application: '='

View File

@@ -30,7 +30,6 @@ class ComponentViewCtrl implements ComponentViewScope {
private cleanUpOn: () => void private cleanUpOn: () => void
private unregisterComponentHandler!: () => void private unregisterComponentHandler!: () => void
private unregisterDesktopObserver!: () => void private unregisterDesktopObserver!: () => void
private didRegisterObservers = false
private issueLoading = false private issueLoading = false
public reloading = false public reloading = false
private expired = false private expired = false
@@ -74,7 +73,6 @@ class ComponentViewCtrl implements ComponentViewScope {
$onInit() { $onInit() {
this.liveComponent = new LiveItem(this.componentUuid, this.application); this.liveComponent = new LiveItem(this.componentUuid, this.application);
this.loadComponent();
this.registerComponentHandlers(); this.registerComponentHandlers();
this.registerPackageUpdateObserver(); this.registerPackageUpdateObserver();
} }
@@ -83,6 +81,13 @@ class ComponentViewCtrl implements ComponentViewScope {
return this.liveComponent?.item; return this.liveComponent?.item;
} }
public onIframeInit() {
/** Perform in timeout required so that dynamic iframe id is set (based on ctrl values) */
this.$timeout(() => {
this.loadComponent();
});
}
private loadComponent() { private loadComponent() {
if (!this.component) { if (!this.component) {
throw 'Component view is missing component'; throw 'Component view is missing component';
@@ -91,7 +96,7 @@ class ComponentViewCtrl implements ComponentViewScope {
throw 'Component view component must be active'; throw 'Component view component must be active';
} }
const iframe = this.application.componentManager!.iframeForComponent( const iframe = this.application.componentManager!.iframeForComponent(
this.component this.componentUuid
); );
if (!iframe) { if (!iframe) {
return; return;
@@ -103,7 +108,8 @@ class ComponentViewCtrl implements ComponentViewScope {
this.loadTimeout = this.$timeout(() => { this.loadTimeout = this.$timeout(() => {
this.handleIframeLoadTimeout(); this.handleIframeLoadTimeout();
}, MaxLoadThreshold); }, MaxLoadThreshold);
iframe.onload = (event) => { iframe.onload = () => {
this.reloadStatus();
this.handleIframeLoad(iframe); this.handleIframeLoad(iframe);
}; };
} }
@@ -111,8 +117,8 @@ class ComponentViewCtrl implements ComponentViewScope {
private registerPackageUpdateObserver() { private registerPackageUpdateObserver() {
this.unregisterDesktopObserver = this.application.getDesktopService() this.unregisterDesktopObserver = this.application.getDesktopService()
.registerUpdateObserver((component: SNComponent) => { .registerUpdateObserver((component: SNComponent) => {
if (component === this.component && component.active) { if (component.uuid === this.component.uuid && component.active) {
this.reloadComponent(); this.reloadIframe();
} }
}); });
} }
@@ -129,25 +135,26 @@ class ComponentViewCtrl implements ComponentViewScope {
}); });
} }
private reloadIframe() {
this.$timeout(() => {
this.reloading = true;
this.$timeout(() => {
this.reloading = false;
});
})
}
private onVisibilityChange() { private onVisibilityChange() {
if (document.visibilityState === 'hidden') { if (document.visibilityState === 'hidden') {
return; return;
} }
if (this.issueLoading) { if (this.issueLoading) {
this.reloadComponent(); this.reloadIframe();
} }
} }
public async reloadComponent() {
this.componentValid = false;
await this.application.componentManager!.reloadComponent(this.component);
this.reloadStatus();
}
public reloadStatus(doManualReload = true) { public reloadStatus(doManualReload = true) {
this.reloading = true;
const component = this.component; const component = this.component;
const previouslyValid = this.componentValid;
const offlineRestricted = component.offlineOnly && !isDesktopApplication(); const offlineRestricted = component.offlineOnly && !isDesktopApplication();
const hasUrlError = function () { const hasUrlError = function () {
if (isDesktopApplication()) { if (isDesktopApplication()) {
@@ -157,9 +164,11 @@ class ComponentViewCtrl implements ComponentViewScope {
} }
}(); }();
this.expired = component.valid_until && component.valid_until <= new Date(); this.expired = component.valid_until && component.valid_until <= new Date();
const readonlyState = this.application.componentManager!.getReadonlyStateForComponent(component); const readonlyState = this.application.componentManager!
.getReadonlyStateForComponent(component);
if (!readonlyState.lockReadonly) { if (!readonlyState.lockReadonly) {
this.application.componentManager!.setReadonlyStateForComponent(component, true); this.application.componentManager!
.setReadonlyStateForComponent(component, this.expired);
} }
this.componentValid = !offlineRestricted && !hasUrlError; this.componentValid = !offlineRestricted && !hasUrlError;
if (!this.componentValid) { if (!this.componentValid) {
@@ -172,17 +181,9 @@ class ComponentViewCtrl implements ComponentViewScope {
} else { } else {
this.error = undefined; this.error = undefined;
} }
if (this.componentValid !== previouslyValid) {
if (this.componentValid) {
this.application.componentManager!.reloadComponent(component);
}
}
if (this.expired && doManualReload) { if (this.expired && doManualReload) {
this.$rootScope.$broadcast('reload-ext-dat'); this.$rootScope.$broadcast('reload-ext-dat');
} }
this.$timeout(() => {
this.reloading = false;
}, 500);
} }
private async handleIframeLoadTimeout() { private async handleIframeLoadTimeout() {
@@ -191,7 +192,7 @@ class ComponentViewCtrl implements ComponentViewScope {
this.issueLoading = true; this.issueLoading = true;
if (!this.didAttemptReload) { if (!this.didAttemptReload) {
this.didAttemptReload = true; this.didAttemptReload = true;
this.reloadComponent(); this.reloadIframe();
} else { } else {
document.addEventListener( document.addEventListener(
VisibilityChangeKey, VisibilityChangeKey,

View File

@@ -1,4 +1,4 @@
import { isDesktopApplication, dictToArray } from '@/utils'; import { isDesktopApplication } from '@/utils';
import { import {
SNPredicate, SNPredicate,
ContentType, ContentType,
@@ -7,7 +7,8 @@ import {
ComponentAction, ComponentAction,
FillItemContent, FillItemContent,
ComponentMutator, ComponentMutator,
Copy Copy,
dictToArray
} from 'snjs'; } from 'snjs';
import { PayloadContent } from '@/../../../../snjs/dist/@types/protocol/payloads/generator'; import { PayloadContent } from '@/../../../../snjs/dist/@types/protocol/payloads/generator';
import { ComponentPermission } from '@/../../../../snjs/dist/@types/models/app/component'; import { ComponentPermission } from '@/../../../../snjs/dist/@types/models/app/component';

View File

@@ -92,7 +92,7 @@ export class ThemeManager extends ApplicationService {
const activeThemes = this.application!.componentManager!.getActiveThemes(); const activeThemes = this.application!.componentManager!.getActiveThemes();
for (const theme of activeThemes) { for (const theme of activeThemes) {
if (theme) { if (theme) {
this.application!.componentManager!.deregisterComponent(theme); this.application!.componentManager!.deregisterComponent(theme.uuid);
} }
} }
this.activeThemes = []; this.activeThemes = [];

View File

@@ -27,10 +27,6 @@ export interface PermissionsModalScope extends Partial<ng.IScope> {
callback: (approved: boolean) => void callback: (approved: boolean) => void
} }
export interface ModalComponentScope extends Partial<ng.IScope> {
component: SNComponent
}
export type PanelPuppet = { export type PanelPuppet = {
onReady?: () => void onReady?: () => void
ready?: boolean ready?: boolean

View File

@@ -1,6 +1,6 @@
import { dictToArray } from '../utils'; import { SNComponent, ComponentArea, removeFromArray, addIfUnique } from 'snjs';
import { SNComponent, ComponentArea, removeFromArray } from 'snjs';
import { WebApplication } from './application'; import { WebApplication } from './application';
import { UuidString } from '@/../../../../snjs/dist/@types/types';
/** Areas that only allow a single component to be active */ /** Areas that only allow a single component to be active */
const SingleComponentAreas = [ const SingleComponentAreas = [
@@ -13,7 +13,7 @@ export class ComponentGroup {
private application: WebApplication private application: WebApplication
changeObservers: any[] = [] changeObservers: any[] = []
activeComponents: Partial<Record<string, SNComponent>> = {} activeComponents: UuidString[] = []
constructor(application: WebApplication) { constructor(application: WebApplication) {
@@ -27,12 +27,12 @@ export class ComponentGroup {
public deinit() { public deinit() {
(this.application as any) = undefined; (this.application as any) = undefined;
for (const component of this.allActiveComponents()) { for (const component of this.allActiveComponents()) {
this.componentManager.deregisterComponent(component); this.componentManager.deregisterComponent(component.uuid);
} }
} }
async activateComponent(component: SNComponent) { async activateComponent(component: SNComponent) {
if (this.activeComponents[component.uuid]) { if (this.activeComponents.includes(component.uuid)) {
return; return;
} }
if (SingleComponentAreas.includes(component.area)) { if (SingleComponentAreas.includes(component.area)) {
@@ -41,17 +41,17 @@ export class ComponentGroup {
await this.deactivateComponent(currentActive, false); await this.deactivateComponent(currentActive, false);
} }
} }
this.activeComponents[component.uuid] = component; addIfUnique(this.activeComponents, component.uuid);
await this.componentManager.activateComponent(component); await this.componentManager.activateComponent(component.uuid);
this.notifyObservers(); this.notifyObservers();
} }
async deactivateComponent(component: SNComponent, notify = true) { async deactivateComponent(component: SNComponent, notify = true) {
if (!this.activeComponents[component.uuid]) { if (!this.activeComponents.includes(component.uuid)) {
return; return;
} }
delete this.activeComponents[component.uuid]; removeFromArray(this.activeComponents, component.uuid);
await this.componentManager.deactivateComponent(component); await this.componentManager.deactivateComponent(component.uuid);
if(notify) { if(notify) {
this.notifyObservers(); this.notifyObservers();
} }
@@ -69,8 +69,7 @@ export class ComponentGroup {
} }
activeComponentsForArea(area: ComponentArea) { activeComponentsForArea(area: ComponentArea) {
const all = dictToArray(this.activeComponents); return this.allActiveComponents().filter((c) => c.area === area);
return all.filter((c) => c.area === area);
} }
allComponentsForArea(area: ComponentArea) { allComponentsForArea(area: ComponentArea) {
@@ -78,7 +77,7 @@ export class ComponentGroup {
} }
private allActiveComponents() { private allActiveComponents() {
return dictToArray(this.activeComponents); return this.application.getAll(this.activeComponents) as SNComponent[];
} }

View File

@@ -11,10 +11,6 @@ export function isNullOrUndefined(value: any) {
return value === null || value === undefined; return value === null || value === undefined;
} }
export function dictToArray<T>(dict: Record<any, T>) {
return Object.keys(dict).map((key) => dict[key]!);
}
export function getPlatformString() { export function getPlatformString() {
try { try {
const platform = navigator.platform.toLowerCase(); const platform = navigator.platform.toLowerCase();

View File

@@ -7,7 +7,7 @@ export type CtrlProps = Partial<Record<string, any>>
export class PureViewCtrl { export class PureViewCtrl {
$timeout: ng.ITimeoutService $timeout: ng.ITimeoutService
/** Passed through templates */ /** Passed through templates */
application?: WebApplication application!: WebApplication
props: CtrlProps = {} props: CtrlProps = {}
state: CtrlState = {} state: CtrlState = {}
private unsubApp: any private unsubApp: any
@@ -33,7 +33,7 @@ export class PureViewCtrl {
this.unsubState(); this.unsubState();
this.unsubApp = undefined; this.unsubApp = undefined;
this.unsubState = undefined; this.unsubState = undefined;
this.application = undefined; (this.application as any) = undefined;
if (this.stateTimeout) { if (this.stateTimeout) {
this.$timeout.cancel(this.stateTimeout); this.$timeout.cancel(this.stateTimeout);
} }

View File

@@ -1,4 +1,5 @@
import { WebDirective, PermissionsModalScope, ModalComponentScope } from '@/types'; import { ComponentModalScope } from './../../directives/views/componentModal';
import { WebDirective, PermissionsModalScope } from '@/types';
import { getPlatformString } from '@/utils'; import { getPlatformString } from '@/utils';
import template from './application-view.pug'; import template from './application-view.pug';
import { AppStateEvent } from '@/services/state'; import { AppStateEvent } from '@/services/state';
@@ -52,7 +53,7 @@ class ApplicationViewCtrl extends PureViewCtrl {
this.$location = undefined; this.$location = undefined;
this.$rootScope = undefined; this.$rootScope = undefined;
this.$compile = undefined; this.$compile = undefined;
this.application = undefined; (this.application as any) = undefined;
window.removeEventListener('dragover', this.onDragOver, true); window.removeEventListener('dragover', this.onDragOver, true);
window.removeEventListener('drop', this.onDragDrop, true); window.removeEventListener('drop', this.onDragDrop, true);
(this.onDragDrop as any) = undefined; (this.onDragDrop as any) = undefined;
@@ -219,10 +220,12 @@ class ApplicationViewCtrl extends PureViewCtrl {
} }
openModalComponent(component: SNComponent) { openModalComponent(component: SNComponent) {
const scope = this.$rootScope!.$new(true) as ModalComponentScope; const scope = this.$rootScope!.$new(true) as Partial<ComponentModalScope>;
scope.component = component; scope.componentUuid = component.uuid;
scope.application = this.application;
const el = this.$compile!( const el = this.$compile!(
"<component-modal component='component' class='sk-modal'></component-modal>" "<component-modal application='application' component-uuid='componentUuid' "
+ "class='sk-modal'></component-modal>"
)(scope as any); )(scope as any);
angular.element(document.body).append(el); angular.element(document.body).append(el);
} }

View File

@@ -1111,7 +1111,7 @@ class EditorViewCtrl extends PureViewCtrl implements EditorViewScope {
this.application.componentManager!.setComponentHidden(component, false); this.application.componentManager!.setComponentHidden(component, false);
await this.associateComponentWithCurrentNote(component); await this.associateComponentWithCurrentNote(component);
if (!component.active) { if (!component.active) {
this.application.componentManager!.activateComponent(component); this.application.componentManager!.activateComponent(component.uuid);
} }
this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack); this.application.componentManager!.contextItemDidChangeInArea(ComponentArea.EditorStack);
} else { } else {

View File

@@ -30,9 +30,9 @@
.sk-app-bar-item-column(ng-click='ctrl.selectRoom(room)') .sk-app-bar-item-column(ng-click='ctrl.selectRoom(room)')
.sk-label {{room.name}} .sk-label {{room.name}}
component-modal( component-modal(
component='room', component-uuid='room.uuid',
ng-if='ctrl.roomShowState[room.uuid]', ng-if='ctrl.roomShowState[room.uuid]',
on-dismiss='ctrl.onRoomDismiss()', on-dismiss='ctrl.onRoomDismiss(room)',
application='ctrl.application' application='ctrl.application'
) )
.center .center

View File

@@ -11,6 +11,7 @@
| {{ctrl.component.name}} | {{ctrl.component.name}}
a.sk-a.info.close-button(ng-click="ctrl.dismiss()") Close a.sk-a.info.close-button(ng-click="ctrl.dismiss()") Close
component-view.component-view( component-view.component-view(
ng-if='ctrl.component.active'
component-uuid="ctrl.component.uuid", component-uuid="ctrl.component.uuid",
application='ctrl.application' application='ctrl.application'
) )

View File

@@ -4,7 +4,7 @@
.sk-app-bar-item .sk-app-bar-item
.sk-label.warning There was an issue loading {{ctrl.component.name}}. .sk-label.warning There was an issue loading {{ctrl.component.name}}.
.right .right
.sk-app-bar-item(ng-click='ctrl.reloadComponent()') .sk-app-bar-item(ng-click='ctrl.reloadIframe()')
.sk-button.info .sk-button.info
.sk-label Reload .sk-label Reload
.sn-component(ng-if='ctrl.expired') .sn-component(ng-if='ctrl.expired')
@@ -74,10 +74,11 @@
| version of the app. | version of the app.
| Ensure you are running at least version 2.1 on all platforms. | Ensure you are running at least version 2.1 on all platforms.
iframe( iframe(
data-component-id='{{ctrl.component.uuid}}', data-component-id='{{ctrl.componentUuid}}',
frameborder='0', frameborder='0',
ng-attr-id='component-iframe-{{ctrl.component.uuid}}', ng-init='ctrl.onIframeInit()'
ng-if='ctrl.component && ctrl.componentValid', ng-attr-id='component-iframe-{{ctrl.componentUuid}}',
ng-if='ctrl.componentUuid && !ctrl.reloading && ctrl.componentValid',
ng-src='{{ctrl.getUrl() | trusted}}', ng-src='{{ctrl.getUrl() | trusted}}',
sandbox='allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms' sandbox='allow-scripts allow-top-navigation-by-user-activation allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-modals allow-forms'
) )

View File

@@ -1,23 +1,26 @@
/// <reference types="angular" /> /// <reference types="angular" />
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
import { SNComponent } from 'snjs'; import { SNComponent, LiveItem } from 'snjs';
import { WebDirective } from './../../types'; import { WebDirective } from './../../types';
declare type ComponentModalScope = { export declare type ComponentModalScope = {
component: SNComponent; componentUuid: string;
callback: () => void; callback: () => void;
onDismiss: (component: SNComponent) => void; onDismiss: (component: SNComponent) => void;
application: WebApplication; application: WebApplication;
}; };
export declare class ComponentModalCtrl implements ComponentModalScope { export declare class ComponentModalCtrl implements ComponentModalScope {
$element: JQLite; $element: JQLite;
component: SNComponent; componentUuid: string;
callback: () => void; callback: () => void;
onDismiss: (component: SNComponent) => void; onDismiss: (component: SNComponent) => void;
application: WebApplication; application: WebApplication;
liveComponent: LiveItem<SNComponent>;
component: SNComponent;
constructor($element: JQLite); constructor($element: JQLite);
$onInit(): void;
$onDestroy(): void;
dismiss(): void; dismiss(): void;
} }
export declare class ComponentModal extends WebDirective { export declare class ComponentModal extends WebDirective {
constructor(); constructor();
} }
export {};

View File

@@ -28,9 +28,6 @@ export interface PermissionsModalScope extends Partial<ng.IScope> {
permissionsString: string; permissionsString: string;
callback: (approved: boolean) => void; callback: (approved: boolean) => void;
} }
export interface ModalComponentScope extends Partial<ng.IScope> {
component: SNComponent;
}
export declare type PanelPuppet = { export declare type PanelPuppet = {
onReady?: () => void; onReady?: () => void;
ready?: boolean; ready?: boolean;

View File

@@ -1,15 +1,15 @@
import { SNComponent, ComponentArea } from 'snjs'; import { SNComponent, ComponentArea } from 'snjs';
import { WebApplication } from './application'; import { WebApplication } from './application';
import { UuidString } from '@/../../../../snjs/dist/@types/types';
export declare class ComponentGroup { export declare class ComponentGroup {
private application; private application;
changeObservers: any[]; changeObservers: any[];
activeComponents: Partial<Record<string, SNComponent>>; activeComponents: UuidString[];
constructor(application: WebApplication); constructor(application: WebApplication);
get componentManager(): import("../../../../../snjs/dist/@types").SNComponentManager; get componentManager(): import("../../../../../snjs/dist/@types").SNComponentManager;
deinit(): void; deinit(): void;
registerComponentHandler(): void;
activateComponent(component: SNComponent): Promise<void>; activateComponent(component: SNComponent): Promise<void>;
deactivateComponent(component: SNComponent): Promise<void>; deactivateComponent(component: SNComponent, notify?: boolean): Promise<void>;
deactivateComponentForArea(area: ComponentArea): Promise<void>; deactivateComponentForArea(area: ComponentArea): Promise<void>;
activeComponentForArea(area: ComponentArea): SNComponent; activeComponentForArea(area: ComponentArea): SNComponent;
activeComponentsForArea(area: ComponentArea): SNComponent[]; activeComponentsForArea(area: ComponentArea): SNComponent[];
@@ -18,6 +18,6 @@ export declare class ComponentGroup {
/** /**
* Notifies observer when the active editor has changed. * Notifies observer when the active editor has changed.
*/ */
addChangeObserver(callback: any): void; addChangeObserver(callback: () => void): () => void;
private notifyObservers; private notifyObservers;
} }

View File

@@ -1,6 +1,5 @@
export declare function getParameterByName(name: string, url: string): string | null; export declare function getParameterByName(name: string, url: string): string | null;
export declare function isNullOrUndefined(value: any): boolean; export declare function isNullOrUndefined(value: any): boolean;
export declare function dictToArray<T>(dict: Record<any, T>): NonNullable<T>[];
export declare function getPlatformString(): string; export declare function getPlatformString(): string;
export declare function dateToLocalizedString(date: Date): string; export declare function dateToLocalizedString(date: Date): string;
/** Via https://davidwalsh.name/javascript-debounce-function */ /** Via https://davidwalsh.name/javascript-debounce-function */

View File

@@ -6,7 +6,7 @@ export declare type CtrlProps = Partial<Record<string, any>>;
export declare class PureViewCtrl { export declare class PureViewCtrl {
$timeout: ng.ITimeoutService; $timeout: ng.ITimeoutService;
/** Passed through templates */ /** Passed through templates */
application?: WebApplication; application: WebApplication;
props: CtrlProps; props: CtrlProps;
state: CtrlState; state: CtrlState;
private unsubApp; private unsubApp;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long