@bhbr/minter 0.0.0-stage → 1.0.1

package/dist/boards/Board.js

@@ -0,0 +1,1329 @@
+import { Linkable } from '../linkables/Linkable.js';
+import { DependencyLink } from '../linkables/DependencyLink.js';
+import { LinkBullet } from '../linkables/LinkBullet.js';
+import { RoundedRectangle } from '../shapes/RoundedRectangle.js';
+import { vertexOrigin, vertexCopy, vertexAdd, vertexSubtract, vertexIsCloseTo } from '@bhbr/affr2';
+import { remove } from '@bhbr/betray';
+import { Freehand } from '../creators/Freehand.js';
+import { ExpandButton } from './ExpandButton.js';
+//import { EditableLinkHook } from './EditableLinkHook'
+import { Color } from '../views/Color.js';
+import { Creator } from '../creators/Creator.js';
+import { ScreenEventDevice, screenEventDevice, ScreenEventHandler, isTouchDevice, separateSidebar } from '../mobjects/screen_events.js';
+import { convertArrayToString } from '@bhbr/betray';
+import { getPaper } from '../paper/getPaper.js';
+import { ExpandedBoardInputList } from './ExpandedBoardInputList.js';
+import { ExpandedBoardOutputList } from './ExpandedBoardOutputList.js';
+import { HELP_TEXT_LABEL_WIDTH, HELP_TEXT_LABEL_HEIGHT } from './constants.js';
+import { IO_LIST_OFFSET, SNAPPING_DISTANCE } from '../linkables/constants.js';
+import { SIDEBAR_WIDTH } from '../constants.js';
+import { MGroup } from '../mobjects/MGroup.js';
+import { TextLabel } from '../ui/TextLabel.js';
+export class BoardContent extends MGroup {
+}
+export class Board extends Linkable {
+    /*
+    A board can be expanded into a full screen view, in which
+    submobjects ('contentChildren') can be created with a pen
+    and custom sidebar buttons.
+    
+    In addition, the content children can be linked (those that
+    are linkable) together.
+    
+    The content children can also be dragged and panned.
+    */
+    defaults() {
+        return {
+            contentChildren: [],
+            focusedChild: null,
+            content: new BoardContent(),
+            expandButton: new ExpandButton(),
+            links: [],
+            background: new RoundedRectangle({
+                anchor: vertexOrigin(),
+                cornerRadius: 15,
+                screenEventHandler: ScreenEventHandler.Parent,
+                fillColor: (isTouchDevice && separateSidebar) ? Color.clear() : Color.black(),
+                fillOpacity: 1.0,
+                strokeColor: Color.gray(0.2),
+                strokeWidth: 1.0,
+                drawShadow: true
+            }),
+            expandedPadding: 20,
+            screenEventHandler: ScreenEventHandler.Self,
+            expanded: false,
+            compactWidth: 400, // defined below in the section 'expand and contract'
+            compactHeight: 300, // idem
+            compactAnchor: vertexOrigin(),
+            creationConstructors: {},
+            buttonNames: [
+                'DragButton'
+            ],
+            globals: {},
+            creationStroke: [],
+            creationMode: 'draw',
+            creator: null,
+            sidebar: null,
+            expandedInputList: new ExpandedBoardInputList(),
+            expandedOutputList: new ExpandedBoardOutputList(),
+            linksEditable: true,
+            editingLinkName: false,
+            openLink: null,
+            openHook: null,
+            openBullet: null,
+            compatibleHooks: [],
+            creationTool: null,
+            isShowingLinks: false,
+            isShowingControls: false,
+            allowingDrag: false,
+            helpTextLabel: new TextLabel({
+                frameHeight: HELP_TEXT_LABEL_HEIGHT,
+                frameWidth: HELP_TEXT_LABEL_WIDTH,
+                text: '',
+                horizontalAlign: 'center'
+            }),
+            helpTexts: {
+                'drag': 'Drag objects or pan the board. Slide this button to the right to lock.',
+            },
+            // zoomStartCenter: [0, 0],
+            // zoomStartScale: 1,
+        };
+    }
+    mutabilities() {
+        return {
+            contentChildren: 'never',
+            content: 'never',
+            expandButton: 'never',
+            linkMap: 'never',
+            background: 'never',
+            expandedPadding: 'in_subclass'
+        };
+    }
+    setup() {
+        super.setup();
+        let w = window;
+        this.update({
+            frameWidth: this.expanded ? this.expandedWidth() : this.compactWidth,
+            frameHeight: this.expanded ? this.expandedHeight() : this.compactHeight,
+            anchor: this.expanded ? this.expandedAnchor() : vertexCopy(this.compactAnchor)
+        });
+        this.addDependency('frameWidth', this.background, 'width');
+        this.addDependency('frameHeight', this.background, 'height');
+        this.content.view.div.style['clip-path'] = 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)';
+        // TODO: clip at rounded corners as well
+        this.add(this.background);
+        this.add(this.content);
+        this.moveToTop(this.inputList);
+        this.moveToTop(this.outputList);
+        this.add(this.expandButton);
+        // this.expandedInputList.update({
+        // 	height: EXPANDED_IO_LIST_HEIGHT,
+        // 	width: this.expandedWidth() - this.expandButton.view.frame.width - 2 * EXPANDED_IO_LIST_INSET,
+        // 	anchor: [this.expandButton.view.frame.width + EXPANDED_IO_LIST_INSET, EXPANDED_IO_LIST_INSET],
+        // 	mobject: this,
+        // 	outletProperties: this.inputProperties
+        // })
+        // this.add(this.expandedInputList)
+        // this.expandedOutputList.update({
+        // 	height: EXPANDED_IO_LIST_HEIGHT,
+        // 	width: this.expandedWidth() - this.expandButton.view.frame.width - 2 * EXPANDED_IO_LIST_INSET,
+        // 	anchor: [this.expandButton.view.frame.width + EXPANDED_IO_LIST_INSET, this.expandedHeight() - EXPANDED_IO_LIST_INSET - EXPANDED_IO_LIST_HEIGHT],
+        // 	mobject: this,
+        // 	outletProperties: this.outputProperties
+        // })
+        // this.add(this.expandedOutputList)
+        if (this.contracted) {
+            this.contractStateChange();
+            this.inputList.view.show();
+            this.outputList.view.show();
+            this.expandedInputList.view.hide();
+            this.expandedOutputList.view.hide();
+        }
+        else {
+            this.expandStateChange();
+            this.inputList.view.hide();
+            this.outputList.view.hide();
+            this.expandedInputList.view.show();
+            this.expandedOutputList.view.show();
+        }
+        this.hideLinksOfContent();
+        this.setControlsVisibility(false);
+        let newAnchor = [0.5 * (this.frameWidth - HELP_TEXT_LABEL_WIDTH - SIDEBAR_WIDTH), 20];
+        this.helpTextLabel.update({
+            anchor: newAnchor,
+            frameWidth: HELP_TEXT_LABEL_WIDTH
+        });
+        this.add(this.helpTextLabel);
+        this.helpTextLabel.view.hide();
+    }
+    update(args = {}, redraw = true) {
+        super.update(args, false);
+        this.background.update({
+            width: this.view.frame.width,
+            height: this.view.frame.height,
+            frameWidth: this.view.frame.width,
+            frameHeight: this.view.frame.height
+        });
+        this.content.update({
+            width: this.view.frame.width,
+            height: this.view.frame.height,
+            frameWidth: this.view.frame.width,
+            frameHeight: this.view.frame.height
+        });
+        if (redraw) {
+            this.view.redraw();
+        }
+    }
+    expandedAnchor() {
+        return [this.expandedPadding, this.expandedPadding];
+    }
+    expandedWidth() {
+        return window.innerWidth - 2 * this.expandedPadding;
+    }
+    expandedHeight() {
+        return window.innerHeight - 2 * this.expandedPadding;
+    }
+    getCompactWidth() {
+        return this.compactWidth;
+    }
+    getCompactHeight() {
+        return this.compactHeight;
+    }
+    get contracted() {
+        return !this.expanded;
+    }
+    set contracted(newValue) {
+        this.expanded = !newValue;
+    }
+    expandStateChange() {
+        if (!this.expanded) {
+            this.update({ expanded: true });
+        }
+        getPaper().expandedMobject = this;
+        this.enableContent();
+        if (this.parent != undefined) {
+            this.parent.moveToTop(this);
+        }
+        this.expandButton.label.update({
+            text: '–'
+        });
+        for (let link of this.links) {
+            this.moveToTop(link);
+        }
+        this.sidebar = getPaper().sidebar;
+        if (this.sidebar === null || this.sidebar === undefined) {
+            let sidebarDiv = document.querySelector('#sidebar_id');
+            if (sidebarDiv != null) {
+                let sidebarView = sidebarDiv['view'];
+                if (sidebarView != null) {
+                    this.sidebar = sidebarView.mobject;
+                }
+                getPaper().sidebar = this.sidebar;
+            }
+        }
+    }
+    expand() {
+        this.animate({
+            frameWidth: this.expandedWidth(),
+            frameHeight: this.expandedHeight(),
+            anchor: this.expandedAnchor()
+        }, 0.5);
+        this.expandStateChange();
+        this.initSidebar();
+    }
+    initSidebar() {
+        this.messageSidebar({ 'init': convertArrayToString(this.buttonNames) });
+    }
+    contractStateChange() {
+        this.expanded = false;
+        this.disableContent();
+        if (this.parent) {
+            getPaper().expandedMobject = this.board;
+        }
+        this.expandButton.label.update({
+            text: '+'
+        });
+        this.expandedInputList.view.hide();
+        this.expandedOutputList.view.hide();
+        this.inputList.update({
+            anchor: [0.5 * (this.compactWidth - this.inputList.view.frame.width), -IO_LIST_OFFSET - this.inputList.view.frame.height]
+        }, true);
+        this.outputList.update({
+            anchor: [0.5 * (this.compactWidth - this.outputList.view.frame.width), IO_LIST_OFFSET]
+        }, true);
+        if (this.board !== null) {
+            this.messageSidebar({ 'init': convertArrayToString(this.board.buttonNames) });
+        }
+        this.sidebar = null;
+    }
+    contract() {
+        this.animate({
+            frameWidth: this.compactWidth,
+            frameHeight: this.compactHeight,
+            anchor: this.compactAnchor
+        }, 0.5);
+        this.contractStateChange();
+    }
+    toggleViewState() {
+        if (this.expanded) {
+            this.contract();
+        }
+        else {
+            this.expand();
+        }
+    }
+    disableContent() {
+        for (let mob of this.contentChildren) {
+            if (mob.sensor.screenEventHandler == ScreenEventHandler.Self) {
+                mob.disable();
+            }
+        }
+    }
+    enableContent() {
+        for (let mob of this.contentChildren) {
+            if (mob.sensor.savedScreenEventHandler == ScreenEventHandler.Self) {
+                mob.enable();
+            }
+        }
+    }
+    showShadow() {
+        super.showShadow();
+        this.background.showShadow();
+    }
+    hideShadow() {
+        super.hideShadow();
+        this.background.hideShadow();
+    }
+    addToContent(mob) {
+        this.content.add(mob);
+        this.contentChildren.push(mob);
+        if (this.contracted) {
+            mob.disable();
+        }
+        if (this.expandButton.view.visible) {
+            // exception: Paper
+            this.moveToTop(this.expandButton);
+        }
+        if (mob instanceof Linkable) {
+            mob.setLinksVisibility(this.isShowingLinks);
+            mob.setControlsVisibility(this.isShowingControls);
+        }
+        if (mob instanceof Board) {
+            if (mob.constructor.name == 'Construction') {
+                return;
+            }
+            mob.background.update({
+                fillColor: this.background.view.fillColor.brighten(0.1)
+            });
+        }
+    }
+    removeFromContent(mob) {
+        remove(this.contentChildren, mob);
+        this.content.remove(mob);
+    }
+    setInternalDragging(value) {
+        if (value == this.allowingDrag) {
+            return;
+        }
+        this.allowingDrag = value;
+        this.setPanning(value);
+        // if (this.isShowingLinks) {
+        // 	log('disable linking, but still show links')
+        // 	this.setLinking(false)
+        // 	this.showLinksOfContent()
+        // }
+        for (let mob of this.contentChildren) {
+            mob.setDragging(value);
+        }
+    }
+    handleMessage(key, value) {
+        if (value === '0') {
+            value = false;
+        }
+        if (value === '1') {
+            value = true;
+        }
+        switch (key) {
+            case 'drag':
+                this.setInternalDragging(value);
+                this.helpTextLabel.update({
+                    text: this.helpTexts['drag']
+                });
+                if (value) {
+                    this.helpTextLabel.view.show();
+                }
+                else {
+                    this.helpTextLabel.view.hide();
+                }
+                break;
+            case 'link':
+                if (value === this.isShowingLinks) {
+                    break;
+                }
+                this.setLinking(value);
+                this.setControlsVisibility(!value && this.isShowingControls);
+                this.helpTextLabel.update({
+                    text: this.helpTexts['link']
+                });
+                if (value) {
+                    this.helpTextLabel.view.show();
+                }
+                else {
+                    this.helpTextLabel.view.hide();
+                }
+                break;
+            case 'show controls':
+                if (value === this.isShowingControls) {
+                    return;
+                }
+                this.helpTextLabel.update({
+                    text: this.helpTexts['show controls']
+                });
+                if (value) {
+                    this.helpTextLabel.view.show();
+                }
+                else {
+                    this.helpTextLabel.view.hide();
+                }
+                this.setControlsVisibility(value);
+                this.isShowingControls = value;
+                break;
+            case 'show help':
+                if (value) {
+                    this.helpTextLabel.view.show();
+                }
+                else {
+                    this.helpTextLabel.view.hide();
+                }
+                break;
+            case 'create':
+                this.enableContent();
+                this.creationMode = value;
+                if (this.creator == null) {
+                    // create a dummy creator just to display the help text
+                    // little hack, I know
+                    let dummyCreator = this.createCreator(this.creationMode);
+                    this.helpTextLabel.update({
+                        text: dummyCreator.helpText
+                    });
+                    if (value) {
+                        this.helpTextLabel.view.show();
+                    }
+                    else {
+                        this.helpTextLabel.view.hide();
+                    }
+                    return;
+                }
+                this.remove(this.creator);
+                this.creator = this.createCreator(this.creationMode);
+                this.creator.update({
+                    anchor: (this.creationMode == 'draw') ? [0, 0] : this.creationStroke[0]
+                });
+                //this.add(this.creator)
+                this.helpTextLabel.update({
+                    text: this.creator.helpText
+                });
+                if (value) {
+                    this.helpTextLabel.view.show();
+                }
+                else {
+                    this.helpTextLabel.view.hide();
+                }
+                break;
+            case 'erase':
+                this.setEraser(value);
+                this.helpTextLabel.update({
+                    text: this.helpTexts['erase']
+                });
+                if (value) {
+                    this.helpTextLabel.view.show();
+                }
+                else {
+                    this.helpTextLabel.view.hide();
+                }
+                break;
+            case 'restart':
+                if (value) {
+                    this.restart();
+                }
+                this.helpTextLabel.update({
+                    text: this.helpTexts['restart']
+                });
+                if (!value) { // merely touch down
+                    this.helpTextLabel.view.show();
+                }
+                else {
+                    this.helpTextLabel.view.hide();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    setEraser(erasing) {
+        if (erasing && this.creationMode !== 'erase') {
+            this.sensor.setMouseMethodsTo(this.startErasing.bind(this), this.erasing.bind(this), this.endErasing.bind(this));
+            this.sensor.setPenMethodsTo(this.startErasing.bind(this), this.erasing.bind(this), this.endErasing.bind(this));
+            this.sensor.setTouchMethodsTo(this.startErasing.bind(this), this.erasing.bind(this), this.endErasing.bind(this));
+            this.sensor.onMouseClick = this.onTap.bind(this);
+            this.sensor.onPenTap = this.onTap.bind(this);
+            this.sensor.onTouchTap = this.onTap.bind(this);
+            this.update({
+                creationMode: 'erase'
+            });
+        }
+        else if (!erasing && this.creationMode == 'erase') {
+            this.sensor.restoreMouseMethods();
+            this.sensor.restorePenMethods();
+            this.sensor.restoreTouchMethods();
+            this.handleMessage('create', 'draw');
+        }
+    }
+    contentChildrenContaining(p) {
+        let mobs = [];
+        for (let child of this.contentChildren) {
+            if (child.frame.contains(p)) {
+                mobs.push(child);
+            }
+        }
+        return mobs;
+    }
+    firstContentChildContaining(p) {
+        for (let child of this.contentChildren) {
+            if (child.frame.contains(p, 5)) {
+                return child;
+            }
+        }
+        return null;
+    }
+    ioListContaining(p) {
+        let mobs = [];
+        for (let child of this.contentChildren) {
+            if (!(child instanceof Linkable)) {
+                continue;
+            }
+            let q = vertexSubtract(p, child.anchor);
+            if (child.inputList.frame.contains(q)) {
+                mobs.push(child.inputList);
+            }
+            if (child.outputList.frame.contains(q)) {
+                mobs.push(child.outputList);
+            }
+        }
+        return mobs;
+    }
+    firstIOListContaining(p) {
+        for (let child of this.contentChildren) {
+            if (!(child instanceof Linkable)) {
+                continue;
+            }
+            let q = vertexSubtract(p, child.anchor);
+            if (child.inputList.frame.contains(q)) {
+                return child.inputList;
+            }
+            if (child.outputList.frame.contains(q)) {
+                return child.outputList;
+            }
+        }
+        return null;
+    }
+    startErasing(e) {
+        this.erasing(e);
+    }
+    erasing(e) {
+        let mob = this.firstContentChildContaining(this.sensor.localEventVertex(e));
+        if (mob) {
+            this.removeFromContent(mob);
+            let linksToBeRemoved = [];
+            for (let link of this.links) {
+                if (link.startHook.outlet.ioList.mobject == mob || link.endHook.outlet.ioList.mobject == mob) {
+                    link.startHook.update({
+                        linked: false
+                    });
+                    link.startHook.outlet.removeHook();
+                    link.endHook.update({
+                        linked: false
+                    });
+                    if (link.dependency.kind == 'action') {
+                        link.endHook.outlet.removeHook();
+                    }
+                    linksToBeRemoved.push(link);
+                    this.remove(link);
+                }
+            }
+            for (let link of linksToBeRemoved) {
+                remove(this.links, link);
+            }
+        }
+    }
+    endErasing(e) { }
+    restart() {
+        this.setEraser(false);
+        var child = this.contentChildren.pop();
+        while (child !== undefined) {
+            this.content.remove(child);
+            child = this.contentChildren.pop();
+        }
+        for (let child of this.children) {
+            if (child instanceof Creator) {
+                this.remove(child);
+            }
+        }
+        for (let link of this.links) {
+            this.content.remove(link);
+        }
+        if (this.openLink) { // edge case
+            this.content.remove(this.openLink);
+        }
+    }
+    setControlsVisibility(visible) {
+        for (let mob of this.contentChildren) {
+            if (mob instanceof Linkable) {
+                mob.setControlsVisibility(visible);
+            }
+        }
+    }
+    createCreator(type) {
+        switch (type) {
+            case 'draw':
+                if (this.creationTool == ScreenEventDevice.Finger) {
+                    return new Creator();
+                }
+                let fh = new Freehand({
+                    creationStroke: this.creationStroke
+                });
+                return fh;
+            default:
+                let cons = this.creationConstructors[type];
+                let cm = new cons({
+                    creationStroke: this.creationStroke
+                });
+                if (cm.creation instanceof Linkable) {
+                    cm.creation.setLinksVisibility(this.isShowingLinks);
+                    cm.creation.setControlsVisibility(this.isShowingControls);
+                }
+                return cm;
+        }
+    }
+    onPointerDown(e) {
+        if (this.focusedChild) {
+            this.focusedChild.blur();
+        }
+        if (this.creationMode !== 'erase') {
+            this.startCreating(e);
+        }
+    }
+    onTap(e) {
+        if (this.creationMode == 'erase') {
+            this.messageSidebar({ 'buttonUp': 'erase' });
+            this.setEraser(false);
+            this.update({ creationMode: 'draw' });
+            this.sensor.onMouseClick = this.sensor.savedOnMouseClick;
+            this.sensor.onPenTap = this.sensor.savedOnPenTap;
+            this.sensor.onTouchTap = this.sensor.savedOnTouchTap;
+        }
+    }
+    focusOn(child) {
+        this.focusedChild = child;
+        getPaper().activeKeyboard = false;
+        if (!this.sidebar) {
+            return;
+        }
+        for (let button of this.sidebar.buttons) {
+            button.activeKeyboard = false;
+        }
+    }
+    blurFocusedChild() {
+        this.focusedChild = null;
+        getPaper().activeKeyboard = true;
+        if (!this.sidebar) {
+            return;
+        }
+        for (let button of this.sidebar.buttons) {
+            button.activeKeyboard = true;
+        }
+    }
+    startCreating(e) {
+        this.creationTool = screenEventDevice(e);
+        if (this.creationTool == ScreenEventDevice.Finger && this.creationMode == 'draw') {
+            return;
+        }
+        this.creationStroke.push(this.sensor.localEventVertex(e));
+        this.creator = this.createCreator(this.creationMode);
+        this.add(this.creator);
+    }
+    onPointerMove(e) {
+        if (this.contracted) {
+            return;
+        }
+        if (this.creationStroke.length == 0) {
+            return;
+        }
+        this.creating(e);
+    }
+    creating(e) {
+        if (this.creator === null) {
+            return;
+        }
+        if (this.creationTool == ScreenEventDevice.Finger && this.creationMode == 'draw') {
+            return;
+        }
+        let v = this.sensor.localEventVertex(e);
+        this.creationStroke.push(v);
+        this.creator.updateFromTip(v);
+    }
+    onPointerUp(e) {
+        if (this.contracted) {
+            return;
+        }
+        this.endCreating(e);
+    }
+    endCreating(e) {
+        this.creationStroke = [];
+        this.creationTool = null;
+        this.creationMode = 'draw';
+        if (this.creator !== null) {
+            this.creator.dissolve();
+            this.helpTextLabel.view.hide();
+        }
+        this.messageSidebar({ 'button': 'collapse' });
+    }
+    startPanning(e) {
+        let target = this.sensor.eventTarget;
+        // if (e instanceof TouchEvent) {
+        // 	if (e.touches.length == 2) {
+        // 		this.startZooming(e)
+        // 		return
+        // 	}
+        // }
+        this.panPointStart = this.sensor.localEventVertex(e);
+        for (let mob of this.contentChildren) {
+            mob.dragAnchorStart = vertexCopy(mob.view.frame.anchor);
+            mob.hideShadow();
+        }
+    }
+    panning(e) {
+        // if (e instanceof TouchEvent) {
+        // 	log(e.touches.length)
+        // 	if (e.touches.length == 2) {
+        // 		this.zooming(e)
+        // 		return
+        // 	}
+        // } else
+        if (this.panPointStart == null) {
+            this.startPanning(e);
+            return;
+        }
+        let panPoint = this.sensor.localEventVertex(e);
+        let dr = vertexSubtract(panPoint, this.panPointStart);
+        for (let mob of this.contentChildren) {
+            if (mob.dragAnchorStart == null) {
+                return;
+            }
+            let newAnchor = vertexAdd(mob.dragAnchorStart, dr);
+            mob.update({ anchor: newAnchor });
+            mob.view.div.style.left = `${newAnchor[0]}px`;
+            mob.view.div.style.top = `${newAnchor[1]}px`;
+        }
+        this.updateLinks();
+    }
+    endPanning(e) {
+        this.panPointStart = null;
+        for (let mob of this.contentChildren) {
+            mob.dragAnchorStart = null;
+            mob.showShadow();
+        }
+    }
+    setPanning(flag) {
+        if (flag) {
+            this.sensor.setTouchMethodsTo(this.startPanning.bind(this), this.panning.bind(this), this.endPanning.bind(this));
+            this.sensor.setPenMethodsTo(this.startPanning.bind(this), this.panning.bind(this), this.endPanning.bind(this));
+            this.sensor.setMouseMethodsTo(this.startPanning.bind(this), this.panning.bind(this), this.endPanning.bind(this));
+        }
+        else {
+            this.sensor.restoreTouchMethods();
+            this.sensor.restorePenMethods();
+            this.sensor.restoreMouseMethods();
+        }
+    }
+    linkableChildren() {
+        // the content children that are linkable
+        // counter-example: points etc. in a construction (for now)
+        let arr = [];
+        for (let submob of this.contentChildren) {
+            if (submob instanceof Linkable) {
+                arr.push(submob);
+            }
+        }
+        return arr;
+    }
+    showLinksOfContent() {
+        // toggled by 'link' button in sidebar
+        for (let link of this.links) {
+            this.add(link);
+        }
+        for (let submob of this.linkableChildren()) {
+            submob.showLinks();
+        }
+        //this.expandedInputList.view.show()
+        //this.expandedOutputList.view.show()
+    }
+    hideLinksOfContent() {
+        // toggled by 'link' button in sidebar
+        for (let link of this.links) {
+            this.remove(link);
+        }
+        for (let submob of this.linkableChildren()) {
+            submob.hideLinks();
+        }
+        if (this.openLink) {
+            this.content.remove(this.openLink);
+        }
+        //this.expandedInputList.view.hide()
+        //this.expandedOutputList.view.hide()
+        this.setControlsVisibility(this.isShowingControls);
+    }
+    renameLinkableProperty(kind, oldName, newName) {
+        super.renameLinkableProperty(kind, oldName, newName);
+        let expandedList = (kind == 'input') ? this.expandedInputList : this.expandedOutputList;
+        expandedList.renameProperty(oldName, newName);
+    }
+    setLinking(flag) {
+        if (flag === this.isShowingLinks) {
+            return;
+        }
+        if (flag && !this.isShowingLinks) {
+            this.showLinksOfContent();
+            //this.disableContent()
+            this.ungreyAllHooks();
+        }
+        else if (!flag && this.isShowingLinks) { // if (!this.editingLinkName) {
+            this.hideLinksOfContent();
+            //this.enableContent()
+        }
+        this.isShowingLinks = flag;
+        if (flag) {
+            //this.disableContent()
+            this.sensor.setTouchMethodsTo(this.startLinking.bind(this), this.linking.bind(this), this.endLinking.bind(this));
+            this.sensor.setPenMethodsTo(this.startLinking.bind(this), this.linking.bind(this), this.endLinking.bind(this));
+            this.sensor.setMouseMethodsTo(this.startLinking.bind(this), this.linking.bind(this), this.endLinking.bind(this));
+        }
+        else {
+            //this.enableContent()
+            this.sensor.restoreTouchMethods();
+            this.sensor.restorePenMethods();
+            this.sensor.restoreMouseMethods();
+        }
+    }
+    startLinking(e) {
+        let t = this.sensor.eventTarget;
+        var p = this.sensor.localEventVertex(e);
+        let clickedHook = this.hookAtLocation(p);
+        if (clickedHook == null) {
+            // if (this.allowingDrag) {
+            // 	log('drag allowed')
+            // 	this.setLinking(false)
+            // 	this.showLinksOfContent()
+            // 	//this.setInternalDragging(true)
+            // 	let t = this.sensor.eventTargetMobject(e)
+            // 	log(`target: ${t.constructor.name}`)
+            // 	t.startDragging(e)
+            // 	return
+            // }
+            // let l = this.sensor.eventTargetMobjectChain(e).reverse()
+            // for (let mob of l) {
+            // 	if (mob instanceof IOList) {
+            // 		return
+            // 	}
+            // }
+            // let t1 = this.sensor.eventTargetMobject(e)
+            // let t2 = this.sensor.eventTarget
+            // log(t1)
+            // log(t2)
+            // if (this.sensor.eventTargetMobject(e) == this) {
+            // 	this.startCreating(e)
+            // }
+            let l = this.firstIOListContaining(p);
+            let mob = this.firstContentChildContaining(p);
+            if (l !== null) {
+                return;
+            }
+            if (mob === null) {
+                this.sensor.eventTarget = this;
+                this.startCreating(e);
+                return;
+            }
+            this.sensor.eventTarget = mob;
+            mob.onPointerDown(e);
+            return;
+        }
+        p = this.locationOfHook(clickedHook);
+        if (this.isFree(clickedHook)) {
+            this.createNewOpenLink(clickedHook);
+        }
+        else {
+            let link = this.linkForHook(clickedHook);
+            link.showLine();
+            link.dependency.source.removeDependency(link.dependency);
+            link.previousHook = clickedHook;
+            clickedHook.update({ linked: false });
+            remove(this.links, link);
+            this.remove(link);
+            if (clickedHook.outlet.kind == 'output') {
+                this.createNewOpenLink(link.endHook, link.previousHook, link.dependency);
+            }
+            else {
+                this.createNewOpenLink(link.startHook, link.previousHook, link.dependency);
+            }
+        }
+        this.compatibleHooks = this.getCompatibleHooks(this.openHook);
+        this.greyOutHooksIncompatibleWithHook(clickedHook);
+    }
+    locationOfHook(hook) {
+        return hook.parent.view.frame.transformLocalPoint(hook.midpoint, this.view.frame);
+    }
+    linkForHook(hook) {
+        for (let link of this.links) {
+            if (link.startHook == hook || link.endHook == hook) {
+                return link;
+            }
+        }
+        return null;
+    }
+    isFree(hook) {
+        return this.linkForHook(hook) == null;
+    }
+    createNewOpenLink(hook, previousHook = null, dependency = null) {
+        this.hideLinksOfContent();
+        hook.outlet.ioList.view.show();
+        this.openHook = hook;
+        let p = this.locationOfHook(hook);
+        let sb = new LinkBullet({ midpoint: p });
+        let eb = new LinkBullet({ midpoint: p });
+        if (this.openHook.outlet.kind == 'output') {
+            this.openLink = new DependencyLink({
+                startBullet: sb,
+                endBullet: eb,
+                startHook: hook,
+                previousHook: previousHook,
+                dependency: dependency
+            });
+            this.openBullet = eb;
+        }
+        else {
+            this.openLink = new DependencyLink({
+                startBullet: sb,
+                endBullet: eb,
+                endHook: hook,
+                previousHook: previousHook,
+                dependency: dependency
+            });
+            this.openBullet = sb;
+        }
+        this.add(this.openLink);
+    }
+    linking(e) {
+        if (this.openLink === null) {
+            this.creating(e);
+            return;
+        }
+        var p = this.sensor.localEventVertex(e);
+        let endHook = this.freeCompatibleHookAtLocation(p);
+        if (endHook !== null) {
+            p = this.locationOfHook(endHook);
+        }
+        this.openBullet.update({
+            midpoint: p
+        });
+        this.openBullet.updateDependents();
+        for (let child of this.linkableChildren()) {
+            child.inputList.view.hide();
+            child.outputList.view.hide();
+        }
+        let linkedHook = this.openLink.startHook ?? this.openLink.endHook;
+        linkedHook.outlet.ioList.view.show();
+        let child = this.hoveredChild(p);
+        let listOfLists = this.hoveredIOLists(p);
+        if (!child && listOfLists.length == 0) {
+            return;
+        }
+        let compHooks = this.getCompatibleHooks(this.openLink.startHook ?? this.openLink.endHook);
+        if (child && child !== linkedHook.outlet.ioList.mobject && listOfLists.length == 0) {
+            if (linkedHook.outlet.kind == 'input' && child.outputProperties.length > 0) {
+                child.outputList.view.show();
+            }
+            else if (linkedHook.outlet.kind == 'output' && child.inputProperties.length > 0) {
+                child.inputList.view.show();
+            }
+        }
+        if (child && child !== linkedHook.outlet.ioList.mobject && listOfLists.length > 1) {
+            for (let list of listOfLists) {
+                if (list.mobject == child) {
+                    list.view.show();
+                    return;
+                }
+            }
+        }
+        for (let list of listOfLists) {
+            if (list.kind !== linkedHook.outlet.kind && list.mobject !== linkedHook.outlet.ioList.mobject && list.linkOutlets.length > 0) {
+                list.view.show();
+            }
+        }
+    }
+    hoveredChild(p) {
+        for (let child of this.linkableChildren()) {
+            if (child.anchor[0] <= p[0] && p[0] <= child.anchor[0] + child.view.frameWidth
+                && child.anchor[1] <= p[1] && p[1] <= child.anchor[1] + child.view.frameHeight) {
+                return child;
+            }
+        }
+    }
+    hoveredIOLists(p) {
+        let ret = [];
+        for (let child of this.linkableChildren()) {
+            let minX1 = child.anchor[0] + child.inputList.anchor[0];
+            let maxX1 = minX1 + child.inputList.view.frameWidth;
+            let minY1 = child.anchor[1] + child.inputList.anchor[1];
+            let maxY1 = child.anchor[1];
+            if (minX1 <= p[0] && p[0] <= maxX1 && minY1 <= p[1] && p[1] <= maxY1) {
+                ret.push(child.inputList);
+            }
+            let minX2 = child.anchor[0] + child.outputList.anchor[0];
+            let maxX2 = minX2 + child.outputList.view.frameWidth;
+            let minY2 = child.anchor[1] + child.view.frameHeight;
+            let maxY2 = minY2 + child.outputList.view.frameHeight;
+            if (minX2 <= p[0] && p[0] <= maxX2 && minY2 <= p[1] && p[1] <= maxY2) {
+                ret.push(child.outputList);
+            }
+        }
+        return ret;
+    }
+    endLinking(e) {
+        //this.disableContent()
+        this.ungreyAllHooks();
+        this.showLinksOfContent();
+        if (!this.openLink) {
+            this.endCreating(e);
+            return;
+        }
+        this.showAllHooks();
+        let h = this.freeCompatibleHookAtLocation(this.sensor.localEventVertex(e));
+        if (h === null || h === undefined) {
+            // TODO: remove the possibility of h being undefined
+            //log('aborted link creation or removed existing link')
+            if (this.openLink) {
+                this.remove(this.openLink);
+                if (this.openLink.startHook) {
+                    //log('no end hook')
+                    this.openLink.startHook.update({ linked: false });
+                    if (this.openLink.previousHook) {
+                        //log('we had an existing link')
+                        if (this.openLink.previousHook == this.openLink.startHook) {
+                            //log('previous hook is start hook')
+                        }
+                        if (this.openLink.previousHook == this.openLink.endHook) {
+                            //log('previous hook is end hook')
+                        }
+                        //log('removing hook at link start')
+                        this.openLink.startHook.outlet.removeHook();
+                        if (this.openLink.dependency.kind == 'action') {
+                            //log('removing previous hook (action)')
+                            this.openLink.previousHook.outlet.removeHook();
+                        }
+                        //log('A')
+                        //log('removing output link from mobject at start hook')
+                        this.openLink.startHook.outlet.ioList.mobject.removedOutputLink(this.openLink);
+                        //log('removing input link from mobject at previous hook')
+                        this.openLink.previousHook.outlet.ioList.mobject.removedInputLink(this.openLink);
+                    }
+                }
+                else if (this.openLink.endHook) {
+                    //log('no start hook')
+                    this.openLink.endHook.update({ linked: false });
+                    if (this.openLink.previousHook) {
+                        //log('we had an existing link')
+                        // if (this.openLink.previousHook == this.openLink.startHook) {
+                        // 	log('previous hook is start hook')
+                        // }
+                        // if (this.openLink.previousHook == this.openLink.endHook) {
+                        // 	log('previous hook is end hook')
+                        // }
+                        //log('removing hook at previous hook')
+                        this.openLink.previousHook.outlet.removeHook();
+                        if (this.openLink.dependency.kind == 'action') {
+                            //log('removing hook at link end (action)')
+                            this.openLink.endHook.outlet.removeHook();
+                        }
+                        //log('B')
+                        //log('removing output link from mobject at previous hook')
+                        this.openLink.previousHook.outlet.ioList.mobject.removedOutputLink(this.openLink);
+                        //log('removing output link from mobject at end hook')
+                        this.openLink.endHook.outlet.ioList.mobject.removedInputLink(this.openLink);
+                    }
+                }
+            }
+            this.openLink = null;
+            this.openHook = null;
+            this.openBullet = null;
+            this.compatibleHooks = [];
+            return;
+        }
+        let startHookWasNull = (this.openLink.startHook == null);
+        if (startHookWasNull) {
+            //log('we had no start hook')
+            this.openLink.update({ startHook: h });
+            //log('start hook is new previous hook')
+        }
+        else {
+            //log('we had a start hook')
+            // if (this.openLink.endHook == null) {
+            // 	log('end hook was null')
+            // }
+            this.openLink.update({ endHook: h });
+            //log('end hook is new previous hook')
+        }
+        this.openLink.startHook.update({ linked: true });
+        this.openLink.endHook.update({ linked: true });
+        this.openLink.view.hide(); //this.openLink.hideLine()
+        this.links.push(this.openLink);
+        this.createNewDependency();
+        if (startHookWasNull) {
+            //log('C')
+            //log('start hook was null')
+            //log('removing output link at mobject of previous hook')
+            this.openLink.previousHook?.outlet.ioList.mobject.removedOutputLink(this.openLink);
+            //this.openLink.startHook.outlet.ioList.mobject.addedOutputLink(this.openLink)
+            this.openLink.previousHook = this.openLink.startHook;
+        }
+        else {
+            //log('D')
+            //log('we had a start hook')
+            // if (this.openLink.endHook == null) {
+            // 	log('end hook was null')
+            // }
+            // log('removing input link at mobject of previous hook')
+            this.openLink.previousHook?.outlet.ioList.mobject.removedInputLink(this.openLink);
+            //this.openLink.endHook.outlet.ioList.mobject.addedInputLink(this.openLink)
+            this.openLink.previousHook = this.openLink.endHook;
+        }
+        this.openLink.previousHook = null;
+        this.openLink = null;
+        this.openHook = null;
+        this.openBullet = null;
+        this.compatibleHooks = [];
+    }
+    showAllHooks() {
+        for (let mob of this.linkableChildren()) {
+            for (let outlet of mob.inputList.linkOutlets) {
+                outlet.label.update({
+                    opacity: 1
+                });
+                for (let hook of outlet.linkHooks) {
+                    hook.update({
+                        opacity: 1
+                    });
+                }
+            }
+        }
+    }
+    greyOutHooksIncompatibleWithHook(baseHook) {
+        for (let mob of this.linkableChildren()) {
+            for (let outlet of mob.inputList.linkOutlets) {
+                for (let hook of outlet.linkHooks) {
+                    if (!this.compatibleHooks.includes(hook) && baseHook !== hook) {
+                        hook.update({
+                            opacity: 0.25
+                        });
+                        outlet.label.update({
+                            opacity: 0.25
+                        });
+                    }
+                }
+            }
+        }
+    }
+    ungreyAllHooks() {
+        for (let mob of this.linkableChildren()) {
+            for (let outlet of mob.inputList.linkOutlets) {
+                for (let hook of outlet.linkHooks) {
+                    hook.update({
+                        opacity: 1.0
+                    });
+                    outlet.label.update({
+                        opacity: 1.0
+                    });
+                }
+            }
+        }
+    }
+    getCompatibleHooks(startHook) {
+        return this.allHooks().filter((endHook) => this.areCompatibleHooks(startHook, endHook));
+        // TODO: and endHook is not yet occupied!
+    }
+    areCompatibleHooks(startHook, endHook) {
+        if (startHook.outlet.kind == 'output' && endHook.outlet.kind == 'input') {
+            let flag1 = (startHook.outlet.type == endHook.outlet.type)
+                || ((startHook.outlet.type == 'number' || startHook.outlet.type == 'Array<number>')
+                    && endHook.outlet.type == 'number|Array<number>')
+                || (startHook.outlet.type == 'number|Array<number>'
+                    && (endHook.outlet.type == 'number' || endHook.outlet.type == 'Array<number>'));
+            let flag2 = (startHook.outlet.ioList.mobject !== endHook.outlet.ioList.mobject);
+            let flag3 = (!startHook.outlet.ioList.mobject.dependsOn(endHook.outlet.ioList.mobject));
+            return flag1 && flag2 && flag3;
+        }
+        else if (startHook.outlet.kind == 'input' && endHook.outlet.kind == 'output') {
+            return this.areCompatibleHooks(endHook, startHook);
+        }
+        else {
+            return false;
+        }
+    }
+    updateLinks() {
+        for (let hook of this.allHooks()) {
+            hook.outlet.update();
+            hook.outlet.updateDependents();
+            hook.update();
+            hook.updateDependents(); // this is supposed to update start and end points of links
+        }
+    }
+    createNewDependency() {
+        this.createNewDependencyBetweenHooks(this.openLink.startHook, this.openLink.endHook);
+    }
+    createNewDependencyBetweenHooks(startHook, endHook) {
+        startHook.outlet.ioList.mobject.addDependency(startHook.outlet.name, endHook.outlet.ioList.mobject, endHook.outlet.name);
+        this.openLink.update({
+            startHook: startHook,
+            endHook: endHook,
+            dependency: startHook.outlet.ioList.mobject.dependencies[startHook.outlet.ioList.mobject.dependencies.length - 1]
+        });
+        startHook.addDependency('positionInBoard', this.openLink.startBullet, 'midpoint');
+        endHook.addDependency('positionInBoard', this.openLink.endBullet, 'midpoint');
+        // these should not be necessary
+        startHook.addDependency('positionInBoard', this.openLink.linkLine, 'startPoint');
+        endHook.addDependency('positionInBoard', this.openLink.linkLine, 'endPoint');
+        startHook.addDependency('positionInBoard', this.openLink.borderLinkLine, 'startPoint');
+        endHook.addDependency('positionInBoard', this.openLink.borderLinkLine, 'endPoint');
+        if (startHook == startHook.outlet.linkHooks[startHook.outlet.linkHooks.length - 1]) {
+            startHook.outlet.addHook();
+        }
+        if (endHook == endHook.outlet.linkHooks[endHook.outlet.linkHooks.length - 1] && this.openLink.dependency.kind == 'action') {
+            endHook.outlet.addHook();
+        }
+        startHook.outlet.ioList.mobject.addedOutputLink(this.openLink);
+        endHook.outlet.ioList.mobject.addedInputLink(this.openLink);
+    }
+    removeDependencyBetweenHooks(startHook, endHook) {
+        startHook.outlet.ioList.mobject.removeDependencyBetween(startHook.outlet.name, endHook.outlet.ioList.mobject, endHook.outlet.name);
+        startHook.removeAllDependents();
+        endHook.removeAllDependents();
+        //startHook.outlet.removeHook()
+        if (this.openLink) {
+            startHook.outlet.ioList.mobject.removedOutputLink(this.openLink);
+            endHook.outlet.ioList.mobject.removedInputLink(this.openLink);
+        }
+    }
+    removeDependencyOfLink(link) {
+        let startHook = link.startHook;
+        let endHook = link.endHook;
+        startHook.outlet.ioList.mobject.removeDependencyBetween(startHook.outlet.name, endHook.outlet.ioList.mobject, endHook.outlet.name);
+        startHook.removeAllDependents();
+        endHook.removeAllDependents();
+        //startHook.outlet.removeHook()
+        startHook.outlet.ioList.mobject.removedOutputLink(link);
+        endHook.outlet.ioList.mobject.removedInputLink(link);
+    }
+    removeLink(link) {
+        if (this.openLink) {
+            this.removeDependencyBetweenHooks(link.startHook, link.endHook);
+        }
+        else {
+            this.removeDependencyOfLink(link);
+        }
+        remove(this.links, link);
+        this.remove(link);
+    }
+    removeInputLinkForPropertyAtMobject(prop, mob, index = 0) {
+        let outlet = mob.inputList.outletNamed(prop);
+        if (!outlet) {
+            return;
+        }
+        let hook = outlet.linkHooks[index];
+        if (!hook) {
+            return;
+        }
+        let link = this.linkForHook(hook);
+        if (!link) {
+            return;
+        }
+        this.removeLink(link);
+        link.startHook.update({ linked: false });
+        link.endHook.update({ linked: false });
+        link.startHook.outlet.removeHook();
+    }
+    removeDependencyAtHook(hook) {
+        for (let link of this.links) {
+            if (link.startHook == hook || link.endHook == hook) {
+                this.removeLink(link);
+                return;
+            }
+        }
+    }
+    allHooks() {
+        if (this.contracted) {
+            return super.allHooks();
+        }
+        let ret = [];
+        for (let linkable of this.contentChildren) {
+            if (linkable instanceof Linkable) {
+                ret = ret.concat(linkable.allHooks());
+            }
+        }
+        return ret;
+    }
+    freeHooks() {
+        return this.allHooks().filter((h) => this.isFree(h));
+    }
+    hookAtLocationFromList(p, hookList) {
+        for (let h of hookList) {
+            let boardFrame = this.view.frame;
+            let outletFrame = h.parent.view.frame;
+            let q = outletFrame.transformLocalPoint(h.midpoint, boardFrame);
+            if (vertexIsCloseTo(p, q, SNAPPING_DISTANCE)) {
+                return h;
+            }
+        }
+        return null;
+    }
+    freeCompatibleHooks() {
+        return this.compatibleHooks.filter((h) => this.isFree(h));
+    }
+    hookAtLocation(p) {
+        return this.hookAtLocationFromList(p, this.allHooks());
+    }
+    freeHookAtLocation(p) {
+        return this.hookAtLocationFromList(p, this.freeHooks());
+    }
+    compatibleHookAtLocation(p) {
+        return this.hookAtLocationFromList(p, this.compatibleHooks);
+    }
+    freeCompatibleHookAtLocation(p) {
+        let freeHooks = this.freeCompatibleHooks();
+        let hook = this.hookAtLocationFromList(p, freeHooks);
+        return hook;
+    }
+    //////////////////////////////////////////////////////////
+    //                                                      //
+    //                       MESSAGING                      //
+    //                                                      //
+    //////////////////////////////////////////////////////////
+    messageSidebar(message) {
+        try {
+            let w = window;
+            w.webkit.messageHandlers.handleMessageFromPaper.postMessage(message);
+        }
+        catch {
+            this.sidebar.getMessage(message);
+        }
+    }
+}
+//# sourceMappingURL=Board.js.map