circuitscript 0.1.29 → 0.1.32

package/dist/esm/execute.js

@@ -1,10 +1,10 @@
 import { BlockTypes, ComponentTypes, Delimiter1, GlobalNames, NoNetText, ParamKeys, ReferenceTypes, SymbolPinSide } from './globals.js';
-import { ClassComponent, ModuleComponent } from './objects/ClassComponent.js';
+import { ClassComponent, ComponentUnit, ModuleComponent } from './objects/ClassComponent.js';
 import { ActiveObject, ExecutionScope, FrameAction, SequenceAction } from './objects/ExecutionScope.js';
 import { Net } from './objects/Net.js';
 import { numeric, NumericValue } from './objects/ParamDefinition.js';
 import { PinId, PortSide } from './objects/PinDefinition.js';
-import { AnyReference, CFunctionEntry, DeclaredReference, Direction, NetTypes } from './objects/types.js';
+import { AnyReference, CFunctionEntry, DeclaredReference, Direction, ImportFunctionHandling, NetTypes } from './objects/types.js';
 import { Wire } from './objects/Wire.js';
 import { Frame } from './objects/Frame.js';
 import { CalculatePinPositions } from './layout.js';
@@ -39,7 +39,7 @@ export class ExecutionContext {
         this.scope.scopeLevel = scopeLevel;
         this.setupRoot();
         this.silent = silent;
-        this.log('create new execution context', this.namespace, this.name, this.scope.scopeLevel);
+        this.log(`create new execution context, namespace: ${this.namespace}, name: ${this.name}, level: ${this.scope.scopeLevel}`);
         this.parentContext = parent;
         this.warnings = warnings;
     }
@@ -65,7 +65,7 @@ export class ExecutionContext {
     setupRoot() {
         const componentRoot = ClassComponent.simple(GlobalNames.__root, 1);
         componentRoot.typeProp = ComponentTypes.net;
-        componentRoot.displayProp = this.getPointSymbol();
+        componentRoot.addDefaultUnit(this.getPointSymbol());
         this.scope.instances.set(GlobalNames.__root, componentRoot);
         this.scope.setCurrent(componentRoot);
         this.scope.componentRoot = componentRoot;
@@ -131,49 +131,13 @@ export class ExecutionContext {
     }
     createComponent(instanceName, pins, params, props, isModule = false) {
         const className = isModule ? ModuleComponent : ClassComponent;
+        pins = this.extractPinsFromUnits(props.units);
         const component = new className(instanceName, pins.length);
         pins.forEach((pin) => {
             component.pins.set(pin.id, pin);
         });
-        component.displayProp = props.display ?? null;
-        component.widthProp = props.width ?? null;
-        component.heightProp = props.height ?? null;
         component.typeProp = props.type ?? null;
         component.copyProp = props.copy ?? false;
-        let useAngle = null;
-        if (props.angle) {
-            useAngle = props.angle.toNumber() % 360;
-            if (useAngle < 0) {
-                useAngle += 360;
-            }
-        }
-        if (props.display === null && props.arrange === null) {
-            const tmpArrangeLeft = [];
-            const tmpArrangeRight = [];
-            pins.forEach((pin, index) => {
-                const useArray = (index % 2 === 0) ? tmpArrangeLeft : tmpArrangeRight;
-                useArray.push(pin.id);
-            });
-            const arrangeProp = new Map([
-                [SymbolPinSide.Left, tmpArrangeLeft],
-                [SymbolPinSide.Right, tmpArrangeRight]
-            ]);
-            props.arrange = arrangeProp;
-        }
-        if (props.arrange !== null) {
-            component.arrangeProps = this.removeArrangePropDuplicates(props.arrange);
-            const arrangePropPins = this.getArrangePropPins(component.arrangeProps);
-            pins.forEach(pin => {
-                if (arrangePropPins.find(id => id.equals(pin.id)) === undefined) {
-                    this.logWarning(`Pin ${pin.id} is not specified in arrange property`);
-                }
-            });
-        }
-        else {
-            component.arrangeProps = null;
-        }
-        component.angleProp = useAngle ?? 0;
-        component.followWireOrientationProp = props.followWireOrientation;
         const paramsMap = new Map();
         params.forEach((param) => {
             component.parameters.set(param.paramName, param.paramValue);
@@ -200,27 +164,91 @@ export class ExecutionContext {
             this.scope.setNet(component, defaultPin, tmpNet);
             this.log('set net', netName, 'component', component, defaultPin);
         }
-        const { pins: pinSides, maxPositions } = getPortSide(component.pins, component.arrangeProps);
-        component.pinsMaxPositions = maxPositions;
-        const pinIdKeys = Array.from(component.pins.keys());
-        pinSides.forEach(({ pinId, side, position }) => {
-            const matchedPinId = pinIdKeys.find(id => id.equals(pinId));
-            if (matchedPinId) {
-                const tmpPin = component.pins.get(matchedPinId);
-                tmpPin.side = side;
-                tmpPin.position = position;
-            }
-            else {
-                throw 'Not found!';
-            }
-        });
         this.scope.instances.set(instanceName, component);
         const pinsOutput = pins.map((pin) => {
             return pin.id + ':' + pin.name;
         });
         this.log('add symbol', instanceName, '[' + pinsOutput.join(', ') + ']');
+        component.units = this.generateComponentUnits(props.units, component);
+        component.refreshPinUnitMap();
         return component;
     }
+    extractPinsFromUnits(units) {
+        const pins = [];
+        units.forEach(([, definition]) => {
+            pins.push(...definition.pins);
+        });
+        return pins;
+    }
+    generateComponentUnits(units, parent) {
+        return units.map(([key, unitDef]) => {
+            unitDef = { ...unitDef };
+            let useAngle = null;
+            const { pins } = unitDef;
+            const pinsMap = new Map();
+            pins.forEach(pin => {
+                pinsMap.set(pin.id, pin);
+            });
+            if (unitDef.angle) {
+                useAngle = unitDef.angle.toNumber() % 360;
+                if (useAngle < 0) {
+                    useAngle += 360;
+                }
+            }
+            if (unitDef.display === null && unitDef.arrange === null) {
+                const tmpArrangeLeft = [];
+                const tmpArrangeRight = [];
+                pins.forEach((pin, index) => {
+                    const useArray = (index % 2 === 0) ? tmpArrangeLeft : tmpArrangeRight;
+                    useArray.push(pin.id);
+                });
+                const arrangeProp = new Map([
+                    [SymbolPinSide.Left, tmpArrangeLeft],
+                    [SymbolPinSide.Right, tmpArrangeRight]
+                ]);
+                unitDef.arrange = arrangeProp;
+            }
+            if (unitDef.arrange !== null) {
+                unitDef.arrange = this.removeArrangePropDuplicates(unitDef.arrange);
+                const arrangePropPins = this.getArrangePropPins(unitDef.arrange);
+                pins.forEach(pin => {
+                    if (arrangePropPins.find(id => id.equals(pin.id)) === undefined) {
+                        this.logWarning(`Pin ${pin.id} is not specified in arrange property`);
+                    }
+                });
+            }
+            else {
+                unitDef.arrange = null;
+            }
+            unitDef.angle = useAngle ?? 0;
+            const { pins: pinSides, maxPositions } = getPortSide(pinsMap, unitDef.arrange);
+            const pinIdKeys = Array.from(pinsMap.keys());
+            pinSides.forEach(({ pinId, side, position }) => {
+                const matchedPinId = pinIdKeys.find(id => id.equals(pinId));
+                if (matchedPinId) {
+                    const tmpPin = pinsMap.get(matchedPinId);
+                    tmpPin.side = side;
+                    tmpPin.position = position;
+                }
+                else {
+                    throw 'Not found!';
+                }
+            });
+            const componentUnit = new ComponentUnit(key, parent);
+            componentUnit.widthProp = unitDef.width;
+            componentUnit.heightProp = unitDef.height;
+            componentUnit.angleProp = unitDef.angle;
+            componentUnit.followWireOrientationProp = unitDef.followWireOrientation;
+            componentUnit.pins = pinsMap;
+            componentUnit.pinsFlat = pins;
+            componentUnit.numPins = unitDef.pins.length;
+            componentUnit.pinsMaxPositions = maxPositions;
+            componentUnit.displayProp = unitDef.display;
+            componentUnit.arrangeProps = unitDef.arrange;
+            componentUnit.suffix = unitDef.suffix ?? null;
+            return componentUnit;
+        });
+    }
     removeArrangePropDuplicates(arrangeProp) {
         const sides = [
             SymbolPinSide.Left,
@@ -591,10 +619,11 @@ export class ExecutionContext {
     getBreakContext() {
         return this.scope.breakStack[this.scope.breakStack.length - 1];
     }
-    createFunction(functionName, __runFunc, source, uniqueId) {
-        this.scope.functions.set(functionName, new CFunctionEntry(functionName, __runFunc, source, uniqueId));
-        this.__functionCache.set(functionName, __runFunc);
-        this.log(`defined new function '${functionName}'`);
+    createFunction(namespace, functionName, __runFunc, source, uniqueId) {
+        const functionPath = `${namespace}${functionName}`;
+        this.scope.functions.set(functionPath, new CFunctionEntry(namespace, functionName, __runFunc, source, uniqueId));
+        this.__functionCache.set(functionPath, __runFunc);
+        this.log(`defined new function: ${functionPath}`);
     }
     hasFunction(functionName) {
         return this.scope.functions.has(functionName);
@@ -603,32 +632,63 @@ export class ExecutionContext {
         return this.scope.functions.get(functionName);
     }
     resolveVariable(executionStack, idName, trailers = []) {
+        this.log('resolve variable name:', idName, 'trailers:', trailers);
         const reversed = [...executionStack].reverse();
         for (let i = 0; i < reversed.length; i++) {
             const context = reversed[i];
-            if (context.hasFunction(idName)) {
+            const functionPath = `${context.namespace}${idName}`;
+            if (context.hasFunction(functionPath)) {
                 return new DeclaredReference({
                     found: true,
-                    value: context.getFunction(idName),
+                    value: context.getFunction(functionPath),
                     type: ReferenceTypes.function,
                     name: idName,
                 });
             }
             else {
+                const modules = Array.from(context.scope.modules.values());
+                for (let j = 0; j < modules.length; j++) {
+                    const module = modules[j];
+                    if (module.importHandlingFlag === ImportFunctionHandling.AllMergeIntoNamespace ||
+                        (module.importHandlingFlag === ImportFunctionHandling.SpecificMergeIntoNamespace
+                            && module.specifiedImports.indexOf(idName) !== -1)) {
+                        const moduleContext = module.context;
+                        const functionPath = `${moduleContext.namespace}${idName}`;
+                        if (module.context.hasFunction(functionPath)) {
+                            return new DeclaredReference({
+                                found: true,
+                                rootValue: module,
+                                value: module.context.getFunction(functionPath),
+                                type: ReferenceTypes.function,
+                                name: idName,
+                                trailerIndex: 1,
+                                trailers: [idName],
+                            });
+                        }
+                    }
+                }
+                let isModule = false;
+                if (context.scope.modules.has(idName)) {
+                    const module = context.scope.modules.get(idName);
+                    if (module.importHandlingFlag === ImportFunctionHandling.AllWithNamespace) {
+                        isModule = true;
+                    }
+                }
                 let isVariable = context.scope.variables.has(idName);
                 let isComponentInstance = context.scope.instances.has(idName);
-                if (isVariable || isComponentInstance) {
-                    const scopeList = isVariable ? context.scope.variables
-                        : context.scope.instances;
+                if (isModule || isVariable || isComponentInstance) {
+                    const scopeList = isModule ? context.scope.modules :
+                        (isVariable ? context.scope.variables : context.scope.instances);
                     const useValue = scopeList.get(idName);
                     if (!isComponentInstance && (useValue instanceof ClassComponent)) {
                         isComponentInstance = true;
                         isVariable = false;
                     }
-                    const tmpReference = this.resolveTrailers(isVariable ? ReferenceTypes.variable : ReferenceTypes.instance, useValue, trailers);
+                    const referenceType = isModule ? ReferenceTypes.module :
+                        (isVariable ? ReferenceTypes.variable : ReferenceTypes.instance);
+                    const tmpReference = this.resolveTrailers(referenceType, useValue, trailers);
                     return new DeclaredReference({
-                        type: isVariable ? ReferenceTypes.variable
-                            : ReferenceTypes.instance,
+                        type: referenceType,
                         found: (tmpReference.value !== undefined),
                         rootValue: tmpReference.rootValue,
                         value: tmpReference.value,
@@ -649,65 +709,63 @@ export class ExecutionContext {
         if (trailers.length > 0) {
             rootValue = useValue;
             const trailersPath = trailers.join(".");
-            if (type === ReferenceTypes.variable) {
-                useValue = rootValue;
-                trailers.forEach(trailerPath => {
-                    useValue = useValue[trailerPath];
-                });
-            }
-            else if (type === ReferenceTypes.instance) {
-                const tmpComponent = rootValue;
-                if (tmpComponent.typeProp === ComponentTypes.net) {
-                    const usedNet = this.scope.getNet(tmpComponent, new PinId(1));
-                    if (usedNet) {
-                        const trailerValue = trailers.join(".");
-                        useValue = usedNet.params.get(trailerValue) ?? null;
+            switch (type) {
+                case ReferenceTypes.variable:
+                    useValue = rootValue;
+                    trailers.forEach(trailerPath => {
+                        useValue = useValue[trailerPath];
+                    });
+                    break;
+                case ReferenceTypes.instance: {
+                    const tmpComponent = rootValue;
+                    if (tmpComponent.typeProp === ComponentTypes.net) {
+                        const usedNet = this.scope.getNet(tmpComponent, new PinId(1));
+                        if (usedNet) {
+                            const trailerValue = trailers.join(".");
+                            useValue = usedNet.params.get(trailerValue) ?? null;
+                        }
+                    }
+                    else {
+                        useValue = rootValue
+                            .parameters.get(trailersPath);
                     }
+                    break;
                 }
-                else {
-                    useValue = rootValue
-                        .parameters.get(trailersPath);
+                case ReferenceTypes.module: {
+                    const funcName = trailers[0];
+                    const module = rootValue;
+                    const functionPath = `${module.moduleNamespace}${funcName}`;
+                    if (module.context.hasFunction(functionPath)) {
+                        const foundFunc = module.context.getFunction(functionPath);
+                        return new AnyReference({
+                            found: true,
+                            type: ReferenceTypes.function,
+                            rootValue,
+                            trailers,
+                            trailerIndex: trailers.length,
+                            value: foundFunc,
+                        });
+                    }
+                    break;
                 }
             }
         }
         let found = false;
-        if (rootValue !== undefined && useValue !== undefined) {
+        if (useValue !== undefined) {
             found = true;
         }
         return new AnyReference({
             found,
-            type: type,
+            type,
             rootValue,
             trailers,
             trailerIndex: trailers.length,
             value: useValue,
         });
     }
-    callFunction(functionName, functionParams, executionStack, netNamespace) {
-        let __runFunc = null;
-        if (!this.__functionCache.has(functionName)) {
-            if (this.hasFunction(functionName)) {
-                const entry = this.getFunction(functionName);
-                __runFunc = entry.execute;
-            }
-            if (__runFunc === null) {
-                this.log(`searching for function ${functionName} in upper context`);
-                const tmpResolveResult = this.resolveVariable(executionStack, functionName);
-                if (tmpResolveResult.found) {
-                    const entry = tmpResolveResult.value;
-                    __runFunc = entry.execute;
-                }
-                else {
-                    throw `Invalid function ${functionName}`;
-                }
-            }
-            this.log('save function to cache:', functionName);
-            this.__functionCache.set(functionName, __runFunc);
-        }
-        else {
-            this.log('found function in cache:', functionName);
-            __runFunc = this.__functionCache.get(functionName);
-        }
+    callFunction(functionReference, functionParams, executionStack, netNamespace) {
+        const functionEntry = functionReference.value;
+        const { name: functionName, execute: __runFunc } = functionEntry;
         if (__runFunc !== null) {
             let functionCallIndex = -1;
             if (!this.scope.functionCounter.has(__runFunc)) {
@@ -725,6 +783,7 @@ export class ExecutionContext {
             return functionResult;
         }
         else {
+            this.log(`Invalid function: ${functionName}`);
             throw `Invalid function '${functionName}'`;
         }
     }
@@ -735,7 +794,7 @@ export class ExecutionContext {
         const tmpNets = childScope.getNets();
         const mergedInstances = [];
         for (const [instanceName, component] of tmpInstances) {
-            const newInstanceName = `${namespace}.${instanceName}`;
+            const newInstanceName = namespace !== "" ? `${namespace}.${instanceName}` : instanceName;
             component.instanceName = newInstanceName;
             if (component === childScope.componentRoot) {
                 continue;
@@ -855,9 +914,10 @@ export class ExecutionContext {
         this.scope.setActive(ActiveObject.Wire, wireId);
         this.scope.sequence.push([SequenceAction.Wire, wireId, tmp, newWire]);
         this.scope.currentComponent.pinWires.set(this.scope.currentPin, tmp);
-        if (!this.scope.currentComponent.didSetWireOrientationAngle) {
+        const currentUnit = this.scope.currentComponent.getUnitForPin(this.scope.currentPin);
+        if (!currentUnit.didSetWireOrientationAngle) {
             this.applyComponentAngleFromWire(this.scope.currentComponent, this.scope.currentPin, true);
-            this.scope.currentComponent.didSetWireOrientationAngle = true;
+            currentUnit.didSetWireOrientationAngle = true;
         }
         return newWire;
     }
@@ -867,7 +927,6 @@ export class ExecutionContext {
         }
         const useName = userDefined ? 'point.' + pointId : pointId;
         const componentPoint = ClassComponent.simple(useName, 1);
-        componentPoint.displayProp = this.getPointSymbol(useName);
         componentPoint.typeProp = ComponentTypes.net;
         let usePointLinkComponent = null;
         if (this.scope.currentComponent._pointLinkComponent) {
@@ -877,6 +936,7 @@ export class ExecutionContext {
             usePointLinkComponent = this.scope.currentComponent;
         }
         componentPoint._pointLinkComponent = usePointLinkComponent;
+        componentPoint.addDefaultUnit(this.getPointSymbol(useName));
         this.scope.instances.set(pointId, componentPoint);
         this.toComponent(componentPoint, 1, { addSequence: true });
         return this.getCurrentPoint();
@@ -950,6 +1010,15 @@ export class ExecutionContext {
             if (this.scope.instances.has(idName)) {
                 const component = this.scope.instances.get(idName);
                 component.setParam(paramName, value);
+                const unitModifiers = [
+                    ParamKeys.angle,
+                    ParamKeys.flip,
+                    ParamKeys.flipX,
+                    ParamKeys.flipY,
+                ];
+                if (unitModifiers.indexOf(paramName) !== -1) {
+                    component.getUnit().setParam(paramName, value);
+                }
             }
             else if (this.scope.variables.has(idName)) {
                 throw "Not implemented yet!";
@@ -960,17 +1029,18 @@ export class ExecutionContext {
         }
     }
     applyComponentAngleFromWire(component, pin, opposite = false) {
+        const targetUnit = component.getUnitForPin(pin);
         if (this.componentAngleFollowsWire
-            && component.followWireOrientationProp
-            && component.useWireOrientationAngle
-            && !component.didSetWireOrientationAngle
+            && targetUnit.followWireOrientationProp
+            && targetUnit.useWireOrientationAngle
+            && !targetUnit.didSetWireOrientationAngle
             && this.scope.currentWireId !== -1) {
             const currentWire = this.scope.wires[this.scope.currentWireId];
             let useSegment = currentWire.path[currentWire.path.length - 1];
             if (opposite) {
                 useSegment = currentWire.path[0];
             }
-            const pinPositions = CalculatePinPositions(component);
+            const pinPositions = CalculatePinPositions(targetUnit);
             if (pinPositions.has(pin)) {
                 const connectedPinPos = pinPositions.get(pin);
                 let targetAngle = null;
@@ -1008,27 +1078,27 @@ export class ExecutionContext {
                 if (targetAngle === null) {
                     return;
                 }
-                this.log('set component angle from wire, target angle:', targetAngle, ', component angle:', component.angleProp, 'pin angle:', connectedPinPos.angle);
+                this.log('set component unit angle from wire, target angle:', targetAngle, ', component unit angle:', targetUnit.angleProp, 'pin angle:', connectedPinPos.angle);
                 let useAngle = (targetAngle - connectedPinPos.angle.toNumber()) % 360;
                 if (useAngle < 0) {
                     useAngle += 360;
                 }
                 if (useAngle === 90) {
-                    component.setParam(ParamKeys.angle, numeric(90));
+                    targetUnit.setParam(ParamKeys.angle, numeric(90));
                 }
                 else if (useAngle === 180) {
-                    if (component.angleProp === 0 || component.angleProp === 180) {
-                        component.setParam(ParamKeys.flipX, 1);
+                    if (targetUnit.angleProp === 0 || targetUnit.angleProp === 180) {
+                        targetUnit.setParam(ParamKeys.flipX, numeric(1));
                     }
-                    else if (component.angleProp === 90 || component.angleProp === 270) {
-                        component.setParam(ParamKeys.flipY, 1);
+                    else if (targetUnit.angleProp === 90 || targetUnit.angleProp === 270) {
+                        targetUnit.setParam(ParamKeys.flipY, numeric(1));
                     }
                 }
                 else if (useAngle === 270) {
-                    component.setParam(ParamKeys.angle, numeric(270));
+                    targetUnit.setParam(ParamKeys.angle, numeric(270));
                 }
-                component.wireOrientationAngle = useAngle;
-                component.didSetWireOrientationAngle = true;
+                targetUnit.wireOrientationAngle = useAngle;
+                targetUnit.didSetWireOrientationAngle = true;
             }
         }
     }

package/dist/esm/globals.js

@@ -2,6 +2,8 @@ import { numeric } from "./objects/ParamDefinition.js";
 export const TOOL_VERSION = '0.1.5';
 export const Delimiter1 = '-';
 export const DoubleDelimiter1 = `${Delimiter1}${Delimiter1}`;
+export const BaseNamespace = `${DoubleDelimiter1}.`;
+export const RefdesFileSuffix = '.refdes.json';
 export var GlobalNames;
 (function (GlobalNames) {
     GlobalNames["__root"] = "--root";
@@ -93,6 +95,7 @@ export var ReferenceTypes;
     ReferenceTypes["variable"] = "variable";
     ReferenceTypes["instance"] = "instance";
     ReferenceTypes["pinType"] = "pinType";
+    ReferenceTypes["module"] = "module";
     ReferenceTypes["unknown"] = "unknown";
 })(ReferenceTypes || (ReferenceTypes = {}));
 export var BlockTypes;
@@ -126,3 +129,4 @@ export const RenderFlags = {
 };
 export const SymbolValidatorContext = '_sym';
 export const TrailerArrayIndex = 'index';
+export const DefaultComponentUnit = '__default';

package/dist/esm/graph.js

@@ -35,32 +35,33 @@ export class NetGraph {
                 case SequenceAction.At: {
                     this.print(...sequenceStep);
                     const [, component, pin] = sequenceStep;
-                    const tmpInstanceName = component.instanceName;
+                    const componentUnit = component.getUnitForPin(pin);
+                    const tmpInstanceName = componentUnit.instanceName;
                     if (action === SequenceAction.At) {
                         previousNode = null;
                         previousPin = null;
                     }
                     if (!graph.hasNode(tmpInstanceName)) {
                         this.print('create instance', tmpInstanceName);
-                        const { displayProp = null } = component;
+                        const { displayProp = null } = componentUnit;
                         let tmpSymbol;
                         if (displayProp instanceof SymbolDrawing) {
                             tmpSymbol = new SymbolPlaceholder(displayProp);
                             tmpSymbol.drawing.logger = this.logger;
                         }
                         else {
-                            const symbolPinDefinitions = generateLayoutPinDefinition(component);
+                            const symbolPinDefinitions = generateLayoutPinDefinition(componentUnit);
                             if (component.typeProp === ComponentTypes.module) {
-                                tmpSymbol = new SymbolCustomModule(symbolPinDefinitions, component.pinsMaxPositions);
+                                tmpSymbol = new SymbolCustomModule(symbolPinDefinitions, componentUnit.pinsMaxPositions);
                             }
                             else {
-                                tmpSymbol = new SymbolCustom(symbolPinDefinitions, component.pinsMaxPositions);
+                                tmpSymbol = new SymbolCustom(symbolPinDefinitions, componentUnit.pinsMaxPositions);
                             }
                         }
-                        applyComponentParamsToSymbol(component, tmpSymbol);
+                        applyComponentParamsToSymbol(componentUnit, tmpSymbol);
                         tmpSymbol.refreshDrawing();
                         const { width: useWidth, height: useHeight } = tmpSymbol.size();
-                        tmpComponent = new RenderComponent(component, useWidth, useHeight);
+                        tmpComponent = new RenderComponent(component, componentUnit.unitId, useWidth, useHeight);
                         tmpComponent.symbol = tmpSymbol;
                         graph.setNode(tmpInstanceName, [RenderItemType.Component, tmpComponent, index]);
                         let useFrame = frameStack[frameStack.length - 1];
@@ -88,7 +89,8 @@ export class NetGraph {
                         const [prevNodeType, prevNodeItem] = graph.node(previousNode);
                         if (prevNodeType === RenderItemType.Component) {
                             const matchingItem = nets.find(([comp, pin]) => {
-                                return comp.instanceName === previousNode
+                                const unit = comp.getUnitForPin(pin);
+                                return unit.instanceName === previousNode
                                     && pin.equals(previousPin);
                             });
                             if (matchingItem !== undefined) {
@@ -321,11 +323,11 @@ function makeEdgeValue(instanceName1, instancePin1, instanceName2, instancePin2,
 export function getWireName(wireId) {
     return 'wire:' + wireId;
 }
-export function generateLayoutPinDefinition(component) {
-    const pins = component.pins;
+export function generateLayoutPinDefinition(componentUnit) {
+    const pins = componentUnit.pins;
     const symbolPinDefinitions = [];
     const existingPinIds = Array.from(pins.keys());
-    const arrangeProps = component.arrangeProps ?? [];
+    const arrangeProps = componentUnit.arrangeProps ?? [];
     const addedPins = [];
     for (const [key, items] of arrangeProps) {
         let useItems;
@@ -354,7 +356,7 @@ export function generateLayoutPinDefinition(component) {
         return addedPins.find(id => id.equals(pinId)) === undefined;
     });
     if (unplacedPins.length > 0) {
-        component._unplacedPins = unplacedPins;
+        componentUnit._unplacedPins = unplacedPins;
         console.warn("Warning: There are unplaced pins: " + unplacedPins);
     }
     return symbolPinDefinitions;